HTML-Befehle im Detail

... [ Seminar WWW und JAVA ] ... [ Thema Layoutvorschlag] ... [ Regeln für den Layoutvorschlag ] ...

Übersicht: HTML-Befehle im Detail

Gliederung des Dokuments

 Jedes HTML-Dokument sollte von dem <html>...</html> Tag eingeschlossen werden, um Anfang und Ende des gesamten HTML-Dokuments zu kennzeichnen. Zwar ist dieser Tag beim Einsatz der meisten Betrachter optional, er stellt aber sicher, daß auch ältere Betrachter das HTML-Dokument richtig lesen können.
Das gesamte, mit diesem Tag eingeschlossene, Dokument läßt sich weiterhin gliedern in einen Head- und einen Body-Abschnitt, wobei beide Abschnitte von ihren entsprechenden Tags, also <head>...</head> sowie <body>...</body>, eingeschlossen werden. Diese Tags sind zwingend nötig. Ein minimales HTML-Dokument sieht i.d.Regel wie folgt aus:

<html>
<head>
</head>
<body>
</body>
</html>

Der Teil eines HTML-Dokuments, der normalerweise die meisten Zeilen enthält ist der Body, der von dem Body-Tag umschlossen wird. Findet ein Browser den Body-Tag, so weiß er, daß der nachfolgende Text bis zum Body-Ende-Tag mit den HTML-Konventionen auszugeben ist. Der Body enthällt den eigenlichen Informationsteil. Die Gliederung des HTML-Sourcecodes bleibt dem Autor bzw. der automatischen Generierung vorbehalten. Es wird jedoch empfohlen, entsprechend sorgfältig wie bei einer höheren Programmiersprache vorzugehen.

Sprungmarken und Hypertextlinks

 Hypertext-Verweise auf Sprungmarken sowie Hypertextlinks sind die eigentliche Stärke bzw. Grundlage von HTML. Eine HTML-Seite als gesamtes Dokument kann schnell unübersichtlich und zu umfangreich werden. Teilt man sein gesamtes Dokument hingegen in einzelne HTML-Seiten bzw. einzelne Unterabschnitte auf, steigert man die Übersichtlichkeit und Wartbarkeit des gesamten Dokuments.
Die Verbindung zwischen Unterdokumenten in HTML bezeichnet man als Hypertextlinks, die i.d.Regel vom Browser farblich gekennzeichnet werden. Innerhalb des WWW gibt es für Hypertextlinks generell die Möglichkeit, jedes beliebige Dokument aufzurufen, also auch z.B. auf einem Server in Sydney.

Das folgende Beispiel stellt einen Hypertextlink dar, der auf das HTML-Dokument in der Datei 'haupt.htm' im aktuellen Verzeichnis verzweigt. Der Text 'Hauptverzeichnis' wird hierbei vom Browser als Hypertextlink gekennzeichnet.

<a href="haupt.htm">Hauptverzeichnis</a>

Soll innerhalb einer HTML-Seite navigiert werden, so müssen hierzu einzelne Sprungmarken innerhalb der HTML-Seite definiert werden. Ein einfaches Beispiel hierfür ist z.B. die Definition einer Sprungmarke zu Beginn eines Dokuments wie folgt:

<a name="home">

Die Verzweigung auf diese Sprungmarke wird mit der folgenden Anweisung realisiert, wobei hierbei der Text 'Anfang der Seite' wiederum vom Browser gekennzeichnet wird:

<a href="#home">Anfang der Seite</a>

Absatzformate

 Zur Gliederung von Absätzen stellt HTML folgende Befehle zur Verfügung:

<br>          Zeilenumbruch

<p>           Absatzende inkl. Leerzeile

<hr>          horizontale Trennlinie

<center>      Zentrierung (container-tag)

Zeichenformate

 Die Zeichenformate von HTML sind leider nicht sehr umfangreich, sie können aber bzgl. ihrer Darstellung innerhalb der Optionen des verwendeten Browsers meistens für verschiedene Eigenschaften (z.B. Farben und Fonts) eingestellt werden. Alle folgenden HTML-Befehle sind container-tags:

<u>           unterstrichen

<i>           kursiv

<b>           breit

<sup>         hochgestellt

<sub>         tiefgestellt

<h1>          größte Überschrift

<h6>          kleinste Überschrift

<code>        Schriftart zur Darstellung von Sourcecode etc.

Listen

 HTML stellt im Wesentlichen die drei Listentypen 'geordnete Liste', 'ungeordnete Liste' sowie '(ungeordnete) Menüliste' zur Verfügung. Alle diese Listentypen lassen sich beliebig verschachteln.

Syntax 'geordnete Liste': die Listenpositionen werden numeriert
<ol>
Überschrift der Liste
<li>erster Listeneintrag
<li>weiterer Listeneintrag
</ol>

Syntax 'ungeordnete Liste': Voranstellung eines Grafikzeichens je Listenposition
<ul>
Überschrift der Liste
<li>erster Listeneintrag
<li>weiterer Listeneintrag
</ul>

Syntax '(ungeordnete) Menüliste': einfache Ausgabe der Listenpositionen
<menu>
Überschrift der Liste
<li>erster Listeneintrag
<li>weiterer Listeneintrag
</menu>

Beispiele hierzu im Kapitel Regeln für den Layoutvorschlag.

Tabellen

 Die vollständige Syntax für den 'table-tag' lautet in HTML wie folgt:

<table width=xx% border=y>
<tr><td align=Ausrichtung colspan=n>Tabelleneintrag</td></tr>
</table>

Width gibt die Breite der Tabelle in Abhänigkeit von der Fensterbreite an. Border definiert die Breite des äußeren Rahmens. Jede Tabellenzeile wird vom Containertag <tr> umschlossen und jedes Element noch einmal vom Tag <td>. Dieser Tag umfäßt die Parameter align für die Ausrichtung des Eintrags innerhalb des Tabellenfeldes (right, center, left) und Colspan für die Breite des Tabellenfeldes in Tabellenspalten.

Beispiele hierzu im Kapitel Regeln für den Layoutvorschlag.

Grafiken

 Zur Einbindung von Grafiken bzw. Bildern stellt HTML den 'image-tag' zur Verfügung, der folgende Syntax hat:

<img align=Ausrichtung src=Bilddatei alt=Alternativtext>

Die einzelnen Parameter haben hierbei folgende Funktion: 

Ausrichtung         Position [top,middle,bottom] im Browserfenster
Bilddatei           z.B. GIF-Datei "haus.gif"
Alternativtext      "Ausgabe, wenn Bilddatei nicht vorhanden ist"

Sonderzeichen und Kommentare

 Aus dem Aufbau der Tags ergibt sich eine Besonderheit für den Sourcecode von HTML. Dadurch, daß einige Sonderzeichen reserviert sind, müssen sie, will man sie trotzdem verwenden, besonders umschrieben werden. Insbesondere handelt es sich hierbei um die Zeichen 'größer-als' und 'kleiner-als', sowie das 'Kaufmanns-und' und die Gänsefüßchen.
Die spitzen Klamern ( < > ) werden umschrieben mit &lt; bzw. &gt;. Man beachte, daß hierbei zur Umschreibung ein weiteres Grafikzeichen verwendet wird, so daß auch das Zeichen & durch &amp; umschrieben werden muß.
Als Letzte im Bunde fehlen noch die Gänsefüßchen ( " ). Will man sie verwenden, muß man für sie im Editor &quot; eingeben.

Kommentare werden im HTML-Sourcecode mit <!-- begonnen und mit --> abgeschlossen.

... [ Seminar WWW und JAVA ] ... [ Thema Layoutvorschlag] ... [ HTML-Befehle im Detail ] ... [ Regeln für den Layoutvorschlag ] ...