Dieser kurze Exkurs erhebt nicht denAnspruch, HTML umfassend zu erklären und einzuführen. Er ist nur der Vollständigkeit halber und als Wiederholung hier eingefügt. Eine hervorragende Quelle zum Thema HTML bietet die Seite SelfHTML von Stefan Münz.

HTML - Einführung

HTML steht für HyperText Markup Language. Es ist wie XML eine Auszeichnungsprache, muss jedoch nicht immer den Regeln der Wohlgeformtheit gehorchen. Beispielsweise bedeutet einen Zeilenumbruch. Dieses Element braucht aber nicht mit schließendem Tag versehen zu werden. XHTML hingegen verlangt die Wohlgeformtheit. Das Tag müsste somit lauten.

Ein HTML Dokument hat folgende Struktur

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

Im Head können Metainformationen wie Schlüsselwörter oder der Titel der Seite stehen. Der Body enthält die eigentliche Information, die von einem Browser angezeigt werden soll.

Struktur und Formatierung

HTML kann sowohl strukturelle Informationen als auch Formatierungsanweisungen enthalten. Zur Formatierung zählen unter anderem

Größe und Position von Elementen
Schriftarten und -farben
Ausrichtung von Textelementen
Hintergrundfarben und -bilder
Farbe, Stärke und Art von Rahmen

Leider findet die Trennung zwischen Struktur- und Formatierungsinformation oft nicht statt, was sich beispielsweise niederschlägt in

Tabellen, die zur Positionierung von Elementen genutzt werden
Leerbilder zur Positionierung
Anweisungen zur Schriftformatierung ( oder ) im HTML Text

Die Missachtung dieser Trennung hat jedoch gewaltige Nachteile

Der HTML Quellcode ist sehr schlecht lesbar und wartbar
Es gibt keine Möglichkeit, zentral Formatierungsanweisungen zu ändern
Für Menschen mit Sehbehinderungen sind die Seiten nicht auswertbar, weil die Screenreader den Code nicht interpretieren können (Stichwort "barrierefreies Web")

Die Empfehlung lautet:

Der HTML Quellcode enthält die strukturelle Information
Formatierungsanweisungen werden in Stylesheets (CSS) ausgelagert

HTML Tags zur Strukturierung

Wichtige Tags zur Strukturierung sind

Hierarchische Gliederung von Texten

<h1>Hauptüberschrift</h1>
<h2>Zweite Überschrift</h2>

usw.

Unnummerierte Aufzählungen
```
<ul>
  <li>BIT</li>
  <li>WI</li>
</ul> 
```
nummerierte Aufzählungen
```
<ol>
  <li>BIT</li>
  <li>WI</li>
</ol> 
```

Tabellen, um tabellarische Information darzustellen

<table>
  <tr>  
    <th>Semester\Anzahl Studenten</th><th>BIT</th><th>WI</th>
  </tr>    
  <tr>
    <td>1</td><td>7</td><td>38</td>
  </tr>    
  <tr>
    <td>5</td><td>0</td><td>33</td>
  </tr>
</table>

Absätze

<p>Das ist ein sehr langer Absatz, der erst mit dem
schließenden Tag endet</p>

Auszeichnung von Textes (ist , und vorzuziehen)
Betonung

<p>Das nächste Wort <em>ist</em> betont</p>

Starke Betonung

<p>Das nächste Wort <strong>ist</strong> stark betont</p>

Quellcode

<p>Das nächste Wort <code>ist</code> Quellcode</p>

Zitat

<p>Das nächste Wort <cite>ist</cite> ein Zitat</p>

Und so würde der obige HTML-Code im Browser aussehen. Wir werden später aufzeigen, wie dieses Dokument formatiert aussehen kann.

HTML Tags für Formulare

Ein Formular hat einen Aufbau ähnlich diesem Beispiel:

<form action="anURL" method="get">
   ...
   <input type="submit" value="abschicken"/>
   <input type="reset" value="zurücksetzen"/>
</form>

Dabei steht "..." für den Bereich, in dem die Formularelemente positioniert werden. Man unterscheidet folgende Elemente:

Texteingabefelder

<input name="vorname" type="text" size="30"/>

Passwortfelder

<input name="pw" type="password" size="30"/>

Texteingabefelder (mehrzeilig)

<textarea name="kommentar" cols="30" rows=25"></textarea>

Radiobutton (gruppiert Optionen über "name")

<input name="studium" type="radio" value="WI"/>Wirtschafsinformatik<br/>
<input name="studium" type="radio" value="TI"/>Technische Informatik

Checkboxen

<input name="zubehoer" type="checkbox" value="CD"/>CD Laufwerk<br/>
<input name="zubehoer" type="checkbox" value="TFT"/>Monitor

Auswahllisten

<select name="LVP">
   <option value="1">1. Semester</option>
   <option value="2">2. Semester</option>
   <option value="3">3. Semester</option>
</select>

Und so sieht das Formular aus, wenn man die gezeigten Formularelemente in obiges Formular einträgt.

Weitere HTML Tags

Weiter wichtige Tags sind

Links

<a href=http://www.fh-konstanz.de>Homepage FH Konstanz</a>
<a href=http://www.johner.org target="_blank">Johner</a>

Grafiken

<img src=./images/logo.gif alt="Logo FH KN>

Vorbereitung für CSS

Blockelemente erzeugen im Textfluss einen Absatz. Zu Ihnen zählen div, h1-h6, form, p, pre, ol, ul und table.

Blockelemente können weiter Blockelemente oder Inlineelemente beinhalten. Besonders das div-Tag ist dazu prädestiniert, mit CSS formatiert zu werden, beispielsweise

Ausrichtung
Position
Text- und Hintergrundfarbe
Schriftart

Inlineelemente wie b, em, span oder textarea erzeugen keinen eigenen Absatz. Das Pendent zu div zur Formatierung mit CSS ist das span-Tag.