html-Kurzanleitung

Übersicht

Was ist eigentlich html?

html heisst HyperText Markup Language, also eine Sprache, um Hypertexte mit Markierungen zu versehen. (Genaugenommen ist html ein SGML-DocumentType.) HyperText ist einfach normaler Text (für Informatiker: Knoten), der Verbindungen (für Informatiker: Kanten) zu anderen Dokumenten hat. So entsteht ein richtiges Netz (für Informatiker: Graph) von Dokumenten, das sich World Wide Web nennt. Diesen Verbindungen kann man durch einfaches Auswählen nachgehen.

Wie sieht html aus?

html sieht zuerst mal wie ganz normaler Text aus. Und das ist es eigentlich auch. Nur daß dazwischen spezielle Zeichenketten auftauchen, die die html-Befehle darstellen.

html-Befehle werden auch als Tags bezeichnet. Tags fangen immer mit einem Kleinerzeichen (<) an, dann kommt der Name des Tags und zum Abschluß kommt ein Größerzeichen (>), also etwa so: <name>.
Es gibt Tags, die mitten im Text auftauchen (sie werden als leere Tags bezeichnet) und andere, die einen Teil des Textes umschließen. Dazu gibt es neben dem schon beschriebenen Opening Tag noch einen Closing Tag, der sich von ersterem nur durch einen Slash ( /) vor dem Namen unterscheidet: </name>.
Außerdem gibt es noch Tags, die Attribute haben, mit denen man das Verhalten des Tags beeinflußen kann. Solche Attribute stehen zwischen dem Namen und dem Größerzeichen und werden durch Leerzeichen voneinander getrennt. Manche Attribute haben zusätzlich noch einen Wert, dieser wird dann mit einem Gleichheitszeichen an das Attribut angehängt. Enthält der Wert selber Leerzeichen, sollte man ihn in Anführungszeichen einschließen: <name ATTR="Wert">.
Ein ganz komplizierter Tag würde also so aussehen:

<name ATTR1 ATTR2="Wert">
Irgendwelcher Text
</name>
Da html als ASCII-Text definiert ist, dürfen auch keine Zeichen über 127 verwendet werden. Das heißt zunächst auch erst mal, daß keine Umlaute direkt in den Text geschrieben werden dürfen. Um dennoch Umlaute und Sonderzeichen im Text unterzubringen, dienen die sogenannten Entities, die eine Umschreibung für Umlaute sind.
Achtung SGML-Freaks: Entities sind eigentlich SGML-Makros, können aber nicht als solche verwendet werden, da die Browser keinen SGML-Parser haben, sondern nur bestimmte vordefinierte Entities.

Entities fangen mit einem Ampersand (&) an, dann folgt der Name des Entities, abgeschlossen mit einem Semikolon (;). Der Ampersand selber hat dann natürlich auch ein eigenes Entity; ebenso braucht man für das Größer- und das Kleinerzeichen auch eigene Entities.

ä: &auml; ö: &ouml; ü: &uuml; ß: &szlig;
Ä: &Auml; Ö: &Ouml; Ü: &Uuml;
&: &amp; <: &lt; >: &gt;
Eine Liste der anderen Entites ist in Arbeit.

Auf den RZ-Workstations steht Ihnen das Kommando htmlconv zur Verfügung, mit dem Sie in einem Dokument die ISO-Umlaute in html umwandeln können.

Der prinzipieller Aufbau eines Dokuments

Bei html geht alles ganz hierarchisch zu. Um ein html-Dokument als solches zu kennzeichnen, wird es zuallererst in einen <html>-Tag eingeschlossen. Damit wird der Dokumententyp und die Version der Dokumentenbeschreibungssprache identifiziert; dies ist insbesondere deshalb wichtig, weil bereits an einer neuen Version gearbeitet wird, die dann html+ heissen soll. Das eigentliche Dokument gliedert sich dann in einen Header und einen Body. Der Header wird durch <head>-Tags umschlossen, hier stehen allgemeine Informationen über das Dokument, aber nichts, was zu irgendeiner Ausgabe führt. Der Body ist der eigentliche Informationsträger, er wird durch <body>-Tags begrenzt und enthält all das, was später zur Anzeige kommen soll.

Ein typisches Dokument sollte also so aussehen:

<html>
<head>
Header-Elemente
</head>
<body>
Body-Elemente
</body>
</html>
Auf den RZ-Workstations steht Ihnen das Kommando newhtml zur Verfügung, mit dem Sie ein leeres Dokument anlegen können, das diesen Konventionen entspricht.

Was im Header steht

Im Header stehen Informationen über das Dokument, aber noch kein Inhalt, also nichts, was zu irgendeiner Ausgabe führt. Es handelt sich vielmehr um Meta-Informationen, die dem Browser etwas über das Dokument erzählen; wie es heißt, wer es gemacht hat und vieles mehr.

Das wichtigste Element im Header ist der Titel des Dokuments. er wird mit <title> gekennzeichnet. Der Titel sollte ein Dokument auch außerhalb seines Kontextes kennzeichnen, er wird z.B. für die Anzeige in der History oder der Hotlist benutzt. Er sollte, alleinstehend, eine Aussage über das Dokument geben, anhand der man das Dokument identifizieren, unter der man sich etwas vorstellen kann. Insbesondere sollte man Titel wie "Einführung" oder "Überblick" oder "Meine Homepage" meiden - das sind Überschriften!

Ein weiteres wichtiges Element is das <LINK>-Element, es soll hier aber nicht in der ihm gebührenden Ausführlichkeit behandelt werden. Vielmehr sei seine wichtigste Anwendung herausgegriffen, nämlich die Kennzeichnung des Urhebers eines Dokuments. Dazu erhält der <LINK>-Tag ein Reverse-Relationship-Attribut (REV) mit dem Wert "made", es kennzeichnet also, wer das Dokument "gemacht" hat. Der Autor wird dann im HREF-Attribut aufgeführt, er wird durch eine mailto:-URL gekennzeichnet, die eine E-mail-Adresse enthält. Einige Browser sind aufgrund dieser Kennzeichnung bereits in der Lage, Kommentare direkt an den Autor zu schicken.

Der Header ist mit <head>-Tags geklammert. Ein typischer Header könnte also so aussehen:

<head>
<title>Dokument-Titel</title>
<LINK REV="made" HREF="mailto:user@rz.uni-karlsruhe.de">
</head>
Im Header dürfen außerdem noch <ISINDEX>, <NEXTID> und <BASE> auftauchen, die hier aber nicht behandelt werden sollen, da sie für normale Dokumente ohne Bedeutung sind.

Was im Body steht

Im Body steht der Inhalt des Dokuments, also all das, was angezeigt werden soll. Dies kann zunächst mal ganz normaler ASCII-Text sein. Dabei muß auf Zeilenumbrüche und ähnliches nicht geachtet werden, dafür sorgt nämlich der Browser oder WWW-Client. Und da jeder Browser anders funktioniert, andere Zeichensätze oder Fenstergrößen hat, sollte man auch tunlichst vermeiden, irgendwelche Annahmen darüber zu treffen.

Einfacher Text wird auf Dauer langweilig, sieht unattraktiv aus und vermittelt auch nicht das, was man vermitteln möchte. Deshalb gibt es in html zusätzliche Tags, mit denen man etwas über die Struktur und den Inhalt des Dokuments aussagen kann. Diese Struktur wird dann vom Browser in ein Layout übertragen, das aber von Browser zu Browser unterschiedlich sein kann. Man sollte beim Schreiben eines html-Dokuments also immer darauf achten, daß es von unterschiedlichen Programmen ganz unterschiedlich dargestellt werden kann und daher keine Annahmen darüber treffen. Insbesondere Sätze wie "Klicken Sie mit der Maus auf die blauen unterstrichenen Wörter" sind für Leser, die nur ein ASCII-Terminal haben und mit den Cursortasten fett geschriebene Wörter auswählen müssen, äußerst verwirrend.

html-Tags dienen also nur einer semantischen Gliederung des Dokuments und geben dem Browser Hinweise über den Inhalt, die dieser dann in eine seinem Benutzer angenehme Darstellung übersetzt.

Überschriften

html stellt sechs verschiedene Level von Überschriften zur Verfügung, die mit den Tags <H1> bis <H6> markiert werden. Ein mit einer Überschrift versehener Text sähe also so aus:
<H1>&Uuml;berschrift</H1>
Ganz ganz viel Text.

Abschnitte und Umbrüche

Ein einziger riesiger Text ist auch nicht so toll, deswegen läßt er sich in einzelne Abschnitte unterteilen. Dazu dient der <P>-Tag, der zwischen zwei Abschnitte gestellt wird und zwei Abschnitte voneinander trennt.
Ganz viel Text.<P>
Noch mehr Text.
Abschnitte werden i.A. durch einen Abstand voneinander getrennt. Ab und an kann es notwendig werden, eine neue Zeile anzufangen, ohne einen Abstand zu erzeugen; für diesen Zeilenumbruch dient der <BR>-Tag. Er wird genau wie <P> verwendet.

Eine deutlichere Trennung mehrerer unabhängiger Teile eines Dokuments kann man durch das Einsetzen einer horizontalen Linie erreichen. Sie wird mit dem <HR>-Tag erzeugt und wird wie der <P>-Tag zwischen die zu trennenden Abschnitte gesetzt.

Eine besondere Art des Abschnitts ist ein Zitat oder ein Beispiel. Hierzu dienen die <blockquote>-Tags, die im Gegensatz zu den anderen nicht leer sind. Zitate und Beispiele werden oft eingerückt dargestellt. Ein Beispiel für ein Zitat:

Einfacher Text
<blockquote>
Zitierter Text
</blockquote>
Weiterer Text
Die Tags <P>, <BR> und <HR> sollten nur dann verwendet werden, wenn ansonsten der Text zu einem Abschnitt zusammenfließen würde. Insbesondere sollten nicht mehrere aufeinander folgen, auch wenn manche Browser dies tolerieren; andere erzeugen damit fast leere Seiten. Ebenso brauchen vor oder nach anderen Tags, die ebenfalls eine Trennung des Textes bewirken (z.B. Überschriften), keine Abschnittstrenner zu stehen.

Listen

Manche Informationen lassen sich besser als eine Auflistung denn als fließender Text präsentieren. html bietet hierzu drei grundlegende Listentypen an. Der einfachste Typ ist die ungeordnete Liste, was jetzt aber nicht heißt, daß die Listenelemente wild durcheinander angezeigt werden; dies soll lediglich ausdrücken, daß die Liste keine definierte Abfolge darstellt. Eine solche Liste wird durch <UL>-Tags begrenzt, die einzelnen Listenelemente werden durch <LI> eingeleitet:
<UL>
<LI>Ein Eintrag
<LI>Noch ein Eintrag
</UL>
Für eine definierte Abfolge, wie sie z.B. in einer Gebrauchsanweisung auftaucht, steht die geordnete Liste zu Verfügung. Der Browser sorgt dabei dafür, daß dies auch zum Ausdruck kommt (z.B. durch fortlaufende Nummern vor den Einträgen). Eine geordnete Liste funktioniert genau wie eine ungeordnete, nur ist jetzt <OL> statt <UL> zu verwenden.

Der dritte Typ unterscheidet sich von den vorherigen dadurch, daß ein Eintrag jetzt aus zwei Teilen besteht: einem Eintrag und einer zugehörigen Beschreibung. Eine solche Liste läßt sich als Glossar u.ä. verwenden. Das Schlüsselwort wird dabei durch <DT> eingeleitet, die zugehörige Erklärung durch <DD>:

<DL>
<DT>Ein Eintrag
<DD>und der zugehörige Text
<DT>Ein anderer Eintrag
<DD>und der dazugehörige Text
</DL>
Es gibt außerdem noch die Listentypen <DIR> und <MENU>, die aber kaum Verwendung finden.

Hervorhebungen und Stile

Natürlich sind in html Texthervorhebungen möglich, sie sollten sich aber möglichst nur auf die Struktur beziehen. Dazu dienen die strukturellen Markierungen <EM> (Hervorhebung) und <STRONG> (Betonung). Zur Darstellung computerbezogener Daten eignet sich <code> Der Browser entscheidet selber, wie er welche Markierung anzeigt, üblich ist aber kursiv zur Hervorhebung und fett zur Betonung, so verfügbar. <code>-Tags werden oft als nichtproportionaler Zeichensatz dargestellt.

<EM>Hervorgehobener</EM> und <STRONG>betonter</STRONG> Text
Neben den strukturellen Markierungen gibt es auch noch explizite Anweisungen für kursiven Text (<I>), fetten Text (<B>), unterstrichenen Text (<U>) oder Schreibmaschinentext (<TT>). Dies ist aber keine Garantie dafür, daß der Text dann auch wirklich so erscheint, da manche Browser ihn nicht wie gewünscht darstellen können! Man sollte daher nach Möglichkeit auf diese Markierungen verzichten und auf die strukturellen zurückgreifen. Es gibt außerdem noch die Sondervarianten <SAMP>, <KBD>, <KEY>, <VAR>, <DFN> und <CITE>, auf die im Augenblick aber nicht weiter eingegangen werden soll.

Vorformatierter Text

Beim Übertragen fertiger ASCII-Dokumente nach html kommt es oft vor, daß man einen schön gesetzten Text wie z.B. eine Tabelle hat, die durch den automatischen Umbruch oder durch die proportionalen Zeichensätze zerstört würde. Für solche Fälle stehen die <PRE>-Tags zur Verfügung, die einen Text in einem nichtproportionalen Zeichensatz darstellen und vorgegebene Zeilenumbrüche beachten:
<PRE>Die erste Zeile
Die letzte Zeile</PRE>
Ähnlich verhalten sich <XMP> und <LISTING>, die aber selten gebraucht werden. <PLAINTEXT> ist ein veralteter Tag, nachdem alle weiteren Befehle ignoriert wurden; er sollte nicht mehr verwendet werden.

Hyperlinks

Das interessanteste an Hypertext sind die Hyperlinks, also die Verbindungen zu anderen Dokumenten.

Das kommt aber erst morgen ;-)

Kommentare

Kommentare in html werden zwischen <!-- und --> eingeschlossen.
Achtung: Marken lassen sich nicht durch Kommentare ausblenden! Zumindest die gängigen Browser lassen nach dem ersten > alle Kommentare Kommentare gewesen sein.

(Unsortierte) Liste aller html-Elemente

<SGML>
<html>
<head>
<title>
<ISINDEX> ACTION
<NEXTID> N
<LINK> name HREF REL REV URN title METHODS
<BASE> HREF
<EM>
<TT>
<STRONG>
<B>
<I>
<U>
<code>
<SAMP>
<KBD>
<KEY>
<VAR>
<DFN>
<CITE>
<body>
<A> name HREF REL REV URN title METHODS
<IMG> SRC ALIGN ALT ISMAP
<P>
<BR>
<HR>
<H1>
<H2>
<H3>
<H4>
<H5>
<H6>
<DL>
<DT>
<DD>
<UL> COMPACT
<OL> COMPACT
<DIR> COMPACT
<MENU> COMPACT
<LI>
<blockquote>
<ADDRESS>
<form> ACTION METHOD ENCtype
<input> type name value CHECKED size MAXLENGTH SRC
<SELECT> name size MULTIPLE
<OPTION> SELECTED value
<PRE> WIDTH
<XMP>
<LISTING>
<PLAINTEXT>
<textarea> name ROWS COLS
Kommentare

Morgen mehr zu diesem Thema

Hat's Euch gefallen? Wollt Ihr Kritik loswerden? Eine kurze eMail an webmaster@rz.uni-karlsruhe.de und ihr könnt aktiv an der Gestaltung dieser Seite teilhaben!

Andreas Ley