Stand: 24.04.2022

Lernziele

HTML steht für HyperText Markup Language (Hypertext-Markierungssprache). Wenn wir eine Webseite betrachten, sehen wir häufig immer noch viel Text. Jedoch ist der Text sehr unterschiedlich dargestellt, je nachdem, ob es sich um eine Überschrift, einen Link oder um eine längere Beschreibung handelt. In HTML können wir diese Textteile markieren, um sie als Überschriften, Absätze oder Links kenntlich zu machen.

HTML dient also dazu, sowohl die Texte selbst, als auch wichtige Struktur- und Bedeutungsinformationen abzuspeichern.

3.1 Einführung

3.1.1 HTML versus CSS

Wir unterscheiden also die folgenden Aspekte einer Webseite:

Eine der großen Errungenschaften im Web ist die konsequente Trennung zwischen:

Wie schon oben gezeigt, ist HTML nur für Inhalte, Struktur und Bedeutung zuständig. CSS baut dann auf den Informationen im HTML auf, um die grafische Umsetzung, das Styling, zu regeln.

Warum soll das eine "Errungenschaft" sein? Stellen Sie sich vor, Sie erstellen viele Webseiten für eine Institution in HTML. Jetzt können Sie ganz zentral in CSS alle diese Webseiten "stylen", ohne nochmal die HTML-Dateien ändern zu müssen. Wenn Sie aber im HTML Style-Informationen "versteckt" haben (wie es früher üblich war), dann bekommen Sie Probleme und müssen immer wieder durch alle HTML-Dateien durchgehen, um ein konsistentes Styling hinzubekommen.

3.1.2 Geschichte von HTML

HTML wurde 1989 von dem Physiker Tim Berners-Lee (CERN, Genf) definiert. Damals gab es XML noch nicht, sondern nur einen Vorläufer namens SGML. Berners-Lee baute HTML also auf SGML (einem ISO-Standard) auf. Später nahm sich das World Wide Web Consortium (W3C) der Weiterentwicklung an.

Die weitere Entwicklung von HTML war turbulent, zunächst ging es darum, überhaupt eine Einigung - einen Standard - über die Form von HTML zu erlangen, das nennt man auch eine Spezifikation:

Warum ist so ein Standard überhaupt wichtig? Ganz einfach: jeder Browserhersteller muss wissen, welche HTML-Elemente welche Bedeutung haben, damit der Browser die Webseiten richtig darstellt. Über Jahrzehnte (teilweise auch heute noch) waren Webseiten-Entwickler und -Designer einen Großteil ihrer Zeit damit beschäftigt, ihre Webseiten auf verschiedenen Browsern zu testen und spezielle Varianten und Workarounds für spezielle Browser zu programmieren (häufig ging es dabei um Microsofts Internet Explorer).

Der nächste Schritt war die Frage, ob man nicht XML als Grundlage für HTML nehmen sollte. SGML galt inzwischen als überholt. Also definierte man 2001 das sog. XHTML 1.0. Es war eine reine Anpassung von HTML 4.01 an XML.

Der nächste große Schritt war eine tatsächliche Erweiterung von HTML. Hier kam es zum Konflikt zwischen Entwicklern von XHTML 2.0 - das W3C - und einem neuen Konsortium (angestoßen von der Browserindustrie), der Web Hypertext Application Technology Working Group (WHATWG).

Man einigte sich glücklicherweise darauf, ein einem gemeinsamen Standard namens HTML5 zu arbeiten.

Heute sind wir in der glücklichen Lage, dass HTML5 weltweiter Standard ist und von allen Browsern verstanden wird. Dennoch ist es auch heute noch wichtig, Webseiten auf vielen Browsern und insbes. auch auf Mobilgeräten zu testen, um evtl. Anpassungen für spezielle Browser oder Displays vorzunehmen.

3.2 Basics 1

3.2.1 Grundgerüst

Ein HTML-Dokument ist eine einfache Textdatei mit der Endung .html, die prinzipiell folgende Struktur enthält:

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

Sie wissen aus dem Abschnitt über XML, dass wir es hier mit drei Elementen zu tun haben. Das Element html besagt, dass wir es hier mit einem HTML-Dokument zu tun haben. Das Element head beinhaltet Informationen über das Dokument. Diese Informationen werden nicht im Browser dargestellt. Das Element body schließlich enthält alles, was tatsächlich im Browser dargestellt werden soll.

Jetzt füllen wir das Grundgerüst mit zwei Inhalten. Das Element title zeigt an, was in der Fensterleiste des Browsers (oder im Reiter/Tab) angezeigt werden soll. Der Text in body wird dann auf der Seite angezeigt.

  <html>
      <head>
          <title>Meine Homepage</title>
      </head>
      <body>
          Willkommen auf meiner Seite!
      </body>
  </html>

Vollständiges Grundgerüst

In den obigen Beispielen fehlen noch ein paar Teile, um unser Grundgerüst komplett und rundum korrekt zu machen.

Heute ist es noch üblich, in einer ersten Zeile anzugeben, dass das Dokument ein HTML-Dokument ist. Genauer gesagt wird damit angegeben, dass wir HTML 5 verwenden und keine der früheren Versionen von HTML. Das <! zeigt an, dass es sich nicht um ein reguläres HTML-Element handelt (ähnlich wie bei Kommentaren).

<!DOCTYPE html>

Dann fügen wir noch ein Attribut lang in das html-Element ein, das aussagt, dass es sich um ein deutschsprachiges Dokument handelt. Attribute kommen in den öffnenden Tag, wie Sie im Kapitel XML gelernt haben.

Zu guter Letzt machen wir noch eine Angabe zur Zeichencodierung mit Hilfe des Elements meta: man verwendet üblicherweise UTF-8 (Unicode).

  <!DOCTYPE html>
  <html lang="de">
      <head>
          <meta charset="UTF-8"/>
          <title>Meine Homepage</title>
      </head>
      <body>
          Willkommen auf meiner Seite!
      </body>
  </html>

Formatierung Wie Sie im obigen Beispiel sehen, kann man in HTML, genauso wie in XML, flexibel mit Einrückung und Zeilenumbruch umgehen. So ist z.B. das Element title in eine Zeile gesetzt, weil es mir so übersichtlicher erschien. Wichtig ist, dass es übersichtlich bleibt (für Sie und für andere). Wenn Sie Einrückungen verwenden, achten Sie darauf, dass diese korrekt sind: Sie sollten bei </html> wieder ganz am Anfang der Zeile sein.

Anmerkung Die erste Zeile sah früher noch um einiges komplexer aus, um im Dschungel der HTML- und XHTML-Versionen Klarheit zu schaffen. Hier ein Beispiel:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Mehr dazu finden Sie bei w3schools.com.

Einstiegsseite index.html

Egal, ob Sie nur eine HTML-Seite haben, oder mehrere, nennen Sie eine Datei auf jeden Fall index.html. Diese Seite wird standardmäßig gesucht, wenn auf dem Server Ihres Providers eine Webseitenanfrage aufläuft.

3.2.2 Text

Ein einfacher Text hat eine Überschrift (engl. headline oder heading) und mehrere Absätze (engl. paragraph). In HTML gibt es dafür die Elemente h1 und p. Hier ein Beispiel:

<h1>Unglaubliche Geschichte</h1>
<p>
  Gestern passierte eine wahnsinnig unglaubliche Geschichte.
  Zwei Menschen gingen über eine Straße.
</p>
<p>
  Und wenn Sie nicht gestorben sind, dann leben sie noch heute.
</p>

Wenn Sie diesen Text in Ihre HTML-Datei im body einbetten, dann werden Sie im Browser den Text entsprechend formatiert (Überschrift groß, Abstände zwischen Absätzen) sehen.

Bei den Überschriften gibt es sechs Varianten: h1 bis h6. Diese Überschriften repräsentieren verschiedene "Ebenen". Zum Beispiel könnten ein Inhaltsverzeichnis so aussehen:

<h1>Leben des Harry Hacker</h1>

<h2>Zarte Kindheit</h2>

<p>Bla bla bla</p>

<h2>Wilde Jugend</h2>

<p>Bla bla bla</p>

<h2>Reifes Erwachsenendasein</h2>

<p>Bla bla bla</p>

Um innerhalb eines Absatzes Wörter oder Passagen hervorzuheben, gibt es die Elemente em (engl. emphasis) und strong. Das em steht für eine dezentere Hervorhebung und wird meist kursiv dargestellt, wohingegen strong eine starke Hervorhebung erreichen soll und oft fett dargestellt wird.

<p>
  In diesem Kapitel geht es um <strong>HTML</strong>.
  Eine wirklich <em>wichtige</em> Sprache.
</p>

Hinweis Früher wurden oft die Elemente b (für boldface) und i (für italic) verwendet. Da aber eine Hervorhebung auf verschiedene Weisen erfolgen kann (nicht nur fett, auch über Farbe, Größe, Schriftart etc.), sollte der Name des Elements nicht auf einen konkreten Stil hinweisen.

Weitere Formatierungs-Elemente sind:

3.2.3 Block und Inline

Ein wichtiger Unterschied sollte Ihnen zwischen Elementen wie h1 und p einerseits und em und strong andererseits aufgefallen sein.

Block-Elemente

Elemente wie h1 und p, nehmen sich viel Raum für ihren Inhalt und haben am Ende einen Zeilenumbruch. Man kann sich vorstellen, dass diese Elemente jeweils einen Block darstellen, der über die gesamte verfügbare Breite läuft. Man nennt diesen Typ Element auch Block-Elemente.

Inline-Elemente

Elemente wie em und strong nehmen nur soviel Raum ein wie notwendig und fügen sich dem Fluss von links nach rechts, genauso wie die Wörter in einer Zeile (engl. line). Man nennt diesen Typ auch Inline-Elemente.

3.2.4 Kommentare

Wie in Programmiersprachen gibt es auch in HTML die Möglichkeit, Bereiche zu definieren, wo Text ignoriert werden. Kommentare sind nützlich, um komplizierte Konstruktionen zu erklären, werden aber auch gern genutzt, um Stellen "auszukommentieren", die man gerade nicht benötigt, die man aber später evtl. wieder "einkommentieren" will.

Ein Kommentar beginnt mit <!-- und endet mit -->. Es gibt nur eine Art von Kommentar.

<!-- wichtiger Absatz -->
<p>
  Bla bla bla.
</p>

3.3 Basics 2

Ein wichtiger Bestandteil von Webseiten sind Links (auch: Hyperlink), d.h. dass ein Wort oder eine Wortgruppe beim Anklicken zu einer anderen Webseite weiterleitet.

Um z.B. im folgenden Satz das Wort "Hochschule" auf die Webseite der Hochschule Augsburg zeigen zu lassen, schreibt man

<p>
  An unserer <a href="http://www.hs-augsburg.de">Hochschule</a>
  studieren mehr als 6000 Studierende.
</p>

In diesem Fall zeigt (man sagt auch referenziert) der Link auf eine externe Webseite, d.h. es handelt sich um einen externen Link. Das Attribut href steht für hyperreference und enthält die Zieladresse der Webseite.

Man kann aber auch Dateien im eigenen Filesystem verlinken. Das nennt man einen lokalen Link. Haben Sie z.B. eine HTML-Datei kontakt.html im gleichen Verzeichnis liegen wie die Datei, in dem der Link vorkommt, so schreiben Sie einfach:

<p>
  Wie Sie uns finden, steht <a href="kontakt.html">hier</a>.
</p>

Bei lokalen Links können Sie beliebige Pfade verwenden. Dabei meint ".." das darüberliegende Verzeichnis (das "Elternverzeichnis"). Hier zwei Beispiele:

<a href="seiten/spezial/foo.html">foo</a>
<a href="../foo.html">foo</a>

Ein vorangestelltes "/" (slash) meint Ihr Web-Wurzelverzeichnis. Wenn Sie z.B. auf dem Server der Hochschule Augsburg Ihr Projekt hochladen, schieben Sie es in das Unterverzeichnis WWW in Ihrem Benutzerverzeichnis. Dieses Verzeichnis WWW ist also Ihr Web-Wurzelverzeichnis. Wenn Sie eine HTML-Seite im Verzeichnis WWW/fancy haben, können Sie so darauf zugreifen:

<a href="/fancy/seite.html">Fancy Seite</a>

3.3.2 Listen

Eine wichtiger Mechanismus in HTML sind Listen, entweder ungeordnet, z.B.

oder geordnet, d.h. die Reihenfolge spielt eine Rolle:

  1. Geld abheben
  2. Einkaufen
  3. Kochen

In HTML umgibt man eine Liste mit dem Tag ul (unordered list) oder ol (ordered list). Die einzelnen Punkte (engl. items) werden mit li (list item) eingefügt.

Also die ungeordnete Liste:

<ul>
  <li>Harry</li>
  <li>Sally</li>
  <li>Molly</li>
</ul>

Die geordnete Liste:

<ol>
  <li>Geld abheben</li>
  <li>Einkaufen</li>
  <li>Kochen</li>
</ol>

Hinweis Mit dem Attribut type können Sie bei geordneten Listen bestimmen, ob Sie für die Aufzählung lieber Buchstaben nehmen, also Kleinbuchstaben (type="a") oder Großbuchstaben (type="A") oder römische Zahlen in Groß (type="I") oder Klein (type="i"). Eigentlich gehört eine solche Angabe aber ins CSS.

Listen in Listen

Listen können verschachtelt sein mit Unterlisten:

In HTML verschachtelt man entsprechend Listenelemente in li-Elemente:

<ul>
  <li>
    Harry
    <ul>
      <li>Student</li>
      <li>21 Jahre alt</li>
    </ul>
  </li>
  <li>
    Sally
    <ul>
      <li>Designerin</li>
      <li>29 Jahre alt</li>
    </ul>
  </li>
  <li>
    Molly
    <ul>
      <li>Doktorandin</li>
      <li>25 Jahre alt</li>
    </ul>
  </li>
</ul>

Sie können beliebig "tief" verschachteln und auch geordnete und ungeordnete Listen kombinieren.

Definitionslisten

In Wörterbüchern oder Glossaren müssen Sie Definitionslisten aufstellen. Sie haben eine Liste von Begriffen (engl. terms) und - oft eingerückt - die entsprechende Definition dazu.

In HTML gibt es dafür das Element dl (definition list), welches eine Reihe von dt-Elementen (definition term) und dd-Elementen (die eigentliche Definition) enthält:

<dl>
  <dt>HTML</dt>
  <dd>
    Auszeichnungssprache für Webseiten, zuständig für Inhalt und Struktur.
  </dd>
  <dt>CSS</dt>
  <dd>
    Spezifikation für Stileigenschaften einer HTML-Seite,
    zuständig für Styling und auch für Animation/Interaktion.
  </dd>
  <dt>JavaScript</dt>
  <dd>
    Vollwertige Programmiersprache, um Webseiten mit Animation,
    Interaktion oder erweiterter Kommunikation auszustatten.
  </dd>
</dl>

Das sieht dann so aus:

HTML
Auszeichnungssprache für Webseiten, zuständig für Inhalt und Struktur.
CSS
Spezifikation für Stileigenschaften einer HTML-Seite, zuständig für Styling und auch für Animation/Interaktion.
JavaScript
Vollwertige Programmiersprache, um Webseiten mit Animation, Interaktion oder erweiterter Kommunikation auszustatten.

3.3.3 Bilder

Bilder (engl. images), egal ob Fotos, Diagramme oder Icons, spielen natürlich eine wichtige Rolle auf Webseiten. Sie werden mit dem Element img eingebunden.

Ein Bild ist ein Inline-Element, d.h. das Bild wird wie ein Wort im Textfluss eingebettet. Es werden keine Umbrüche gesetzt (es sei denn, Sie setzen vor/nach dem Bild den Text in ein <p>-Element). Die genaue Positionierung (z.B. rechtsbündig, vom Text umflossen) nehmen Sie später in CSS vor.

Bild, normal eingebunden

Im Attribut src (source) gibt man an, unter welchem Dateipfad das Bild zu finden ist. Wichtig ist auch das Attribut alt, hier gibt man einen Text an, der gezeigt wird, wenn das Bild nicht lesbar ist (Datei unvollständig oder nicht gefunden). Wichtig ist dieses Attribut vor allem aus Gründen der Barrierefreiheit. Menschen mit Sehbehinderung nutzen einen Screenreader, der ihnen die Seite vorliest. Statt des Bildes wird dann der Text in alt vorgelesen.

Ein optionales Attribut ist title. Dieser Text wird angezeigt, wenn der Mauszeiger über dem Bild schwebt und kann Informationen enthalten, die über den Inhalt des Bilds hinausgehen.

<p>
  Schönes Bild: <img src="img/nice.jpg" alt="Berge" title="Zillertaler Berge" />
</p>

Häufig werden alle Bilder einer Webseite in einem Unterverzeichnis mit Namen img, images oder Bilder abgelegt.

Für die Pfade zu dem jeweiligen Bild gilt das gleiche, was unter "Links" beschrieben wurde.

Sie können bzw. sollten aus dem HTML heraus nicht die Größe des Bildes anpassen. Diese Aufgabe ist besser in CSS aufgehoben. Für Ihre ersten Beispiele können Sie einfach kleinere (= Auflösung) Versionen der Bilder anfertigen.

Sie möchten auch Bilder verlinken, z.B. wenn Sie Icons einbauen möchten. Dazu umgeben Sie das Bildelement mit einem a-Element:

<a href="kontakt.html"><img src="img/contact_icon.png" alt="Kontakt"/></a>

3.3.4 Entitäten

Sie kennen das Problem aus der Programmierung: Wie setze ich ein Anführungszeichen in einen String? Denn das Anführungszeichen begrenzt ja den String. In Java lösen Sie das durch escaping, Sie setzen einfach ein Backslash vor das besagte Zeichen.

Ein ähnliches Problem haben Sie in HTML: Wie sage ich HTML, dass ich ein < setzen möchte (z.B. für eine mathematisch Ungleichung), denn die spitzen Klammer sind ja "reserviert", um Tags zu kennzeichnen.

Die Lösung: man erfindet einen Mechanismus, um problematische Zeichen zu beschreiben. In HTML nennt man solche Zeichen Entitäten (engl. entities). Entitäten bestehen aus einem & und einem ; und dazwischen ein paar aussagekräftige Buchstaben, z.B.

&lt;

für das < (lt steht für less than). Im Fluss sieht das dann so aus:

<p>Wir sehen also: a &lt; b.</p>

Analog schreibt man &gt; für >.

Im Deutschen können alle Umlaute und das scharfe S mit Entitäten codiert werden. Das ist i.d.R. nicht nötig, aber manchmal eben doch. Ein kleines ü kodiert man mit &uuml;, ein großes Ü mit &Uuml;. Analog mit ö und ä. Ein ß wird mit &szlig; kodiert.

Weitere interessante Zeichen sind etwa das kaufmännische Und (&) mit &amp; und das Copyright-Symbol © mit &copy; oder griechische Buchstaben wie das α mit &alpha;.

Das Kreuz als Multiplikationszeichen × bekommt man mit &times; und wird derzeit häufig als Close-Button genommen. Dazu muss man es nur vergrößern und fett setzen.

Ebenfalls nützlich ist das non-breaking space mit &nbsp, damit ist ein Leerzeichen gemeint, an dem nicht umgebrochen werden darf, z.B. bei

Wenn Sie einen Zeilenumbruch an solch sensiblen Stellen vermeiden wollen, setzen Sie die Entität &nbsp; statt eines normalen Leerzeichens.

Eine Tabelle mit vielen weiteren Zeichen finden Sie bei SELFHTML oder w3schools, u.a. auch Zeichen aus anderen Sprachen und Symbole wie verschiedene Pfeile oder mathematische Zeichen.

3.4 Basics 3

3.4.1 Semantische Elemente in HTML5

Mit dem Übergang von HTML 4.01 auf HTML 5 wurden ganz neue Elemente eingeführt. Die Idee war, dass man neben den kleinteiligen Layout-Bedeutungen (Überschrift, Aufzählung, Absatz...) auch die Bedeutung von größeren Einheiten wie "Navigationsbereich" oder "Fußbereich" ausdrücken wollte.

In HTML 4.01 hat man z.B. den Fußbereich so markiert:

<div id="footer"> ... </div>

Oder so

<div id="fussbereich"> ... </div>

Oder so

<div class="footer"> ... </div>

Der Nachteil ist offensichtlich: es ist nicht klar, wie genau der Bereich benannt ist und ob ein ID oder eine Klasse benutzt wurde.

Da dieser Bereich aber so häufig vorkommt, hat man beschlossen, ihn in HTML5 in den Status eines hauptamtlichen HTML-Elements zu erheben:

<footer> ... </footer>

Neue Elemente

In HTML5 hat man noch weitere neue Elemente definiert. Hier sehen wir einige davon in einem klassischen Webseiten-Layout:

HTML5 Semantische Elemente

Ein Beispielgerüst für eine typische HTML5-Seite würde also wie folgt aussehen:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8"/>
    <title>Meine Homepage</title>
  </head>
  <body>

    <header>
    </header>

    <nav>
    </nav>

    <main>
      <article>
      </article>

      <aside>
      </aside>
    </main>

    <footer>
    </footer>

  </body>
</html>

Der Bereich nav könnte auch im header enthalten sein.

Die verschiedenen Elemente haben die folgende Bedeutung (Semantik):

Article und Section

Das W3C gibt ein Beispiel für die Verwendung von article und section:

<article>
  <header>
    <h2>Apples</h2>
    <p>Tasty, delicious fruit!</p>
  </header>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <section>
    <h3>Red Delicious</h3>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
  </section>
  <section>
    <h3>Granny Smith</h3>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
  </section>
</article>

Abbildungen

Bilder werden allgemein mit img eingebunden, aber ein Bild kann sowohl ein Logo, ein Icon oder ein Foto sein. Das heißt, Bilder können sehr unterschiedliche Bedeutungen haben (Markensymbol, Schaltfläche, Inhalt).

Wenn es sich um ein Element mit "inhaltlicher Bedeutung" für den/die Leser/in handelt, spricht man von einer Abbildung und sollte das Element figure verwenden.

<figure>
  <img src="img/foo.jpg" alt="Ein Foo mitten auf der Straße" />
</figure>

Manchmal haben solche Abbildungen eine Bildunterschrift, die man auch Caption nennt.

<figure>
  <img src="img/foo.jpg" alt="Ein Foo mitten auf der Straße" />
  <figcaption>Abb. 3: Ein Foo im Alltag</figcaption>
</figure>

Empfehlung

Die Verwendung der genannten Elemente wird im Web noch sehr unterschiedlich gehandhabt. Meine persönliche Erfahrung ist, dass insbesondere die Elemente nav, header und footer mittlerweile stark verbreitet sind.

Bei den Elementen article und section ist die Verwendung weniger klar und häufig findet man noch das generische Element div.

Wenn Sie unsicher sind, schauen Sie in die offiziellen Dokumente:

Oft möchte man auf einer Seite navigieren, indem man ein Inhaltsverzeichnis mit Links auf die jeweilige Abschnitte bereitstellt.

Dies nennt man einen seiteninternen Link. Dazu muss man zunächst Zielmarken in Form von IDs setzen. Zum Beispiel bei den Überschriften der Abschnitte, die man anspringen möchte:

<h2 id="mauerlauer">3.2 Auf der Mauer auf der Lauer</h2>
<p> Lorem ipsum ... </p>

Jetzt kann man einen Link setzen. Man setzt der Sprungmarke ein Hash voran:

Den Liedtext finden Sie im <a href="#mauerlauer">Abschnitt 3.2</a>.

3.4.3 Zeilenumbruch, Linie, Adresse

Hier beschreiben wir ein zwei leere Elemente, die Sie in Einzelfällen benötigen könnten.

Um eine horizontale Linie als visuelle Begrenzung zu erzeugen, verwenden Sie

<hr/>

(für horizontal line).

Um einen Zeilenumbruch zu erzwingen, schreiben Sie

<br/>

(für break). Ein Zeilenumbruch sollten Sie nur im Notfall verwenden. In der Regel müssten Sie mit dem Absatz-Element <p> auskommen.

Ein Fall, wo Sie tatsächlich regelmäßig einen Zeilenumbruch benötigen, ist die Angabe einer Adresse. Es wird sehr empfohlen, Adressen im folgenden Format zu setzen:

<address>
  Johnny B. Good<br/>
  An der Hochschule 1<br/>
  86161 Augsburg<br/>
  <a href="mailto:johnny@hs-augsburg.de">johnny@hs-augsburg.de</a>
</address>

Die Verwendung des Elements address hilft Suchmaschinen, Adressangaben aus Ihren Webseiten zu ziehen.

Sie sehen oben auch die Verlinkung einer e-Mail-Adresse. Durch den Zusatz "mailto:" ruft der Browser beim Anklicken des Links automatisch das Standard-Mailtool auf und öffnet dort eine neue Mail mit obiger Zieladresse.

3.4.4 Tabellen

Eine einfache Tabelle könnte so aussehen. Sie besteht aus Zeilen (engl. row) und Spalten (engl. column). Ein einzelnes Element nennen wir auch Zelle.

eins zwei
drei vier

Eine Tabelle wird in HTML Zeile für Zeile aufgebaut. Das umgebende Element ist table. Jede Zeile ist ein tr Element (table row). Innerhalb einer Zeile kann man die einzelnen Zellen dann mit td (table data) definieren.

<table>
  <tr>
    <td>eins</td>
    <td>zwei</td>
  </tr>
  <tr>
    <td>drei</td>
    <td>vier</td>
  </tr>
</table>

Wie immer nehmen wir erstmal keinen Einfluss auf den Stil, aber das Attribut border sollten Sie jetzt schon kennen, weil einige Browser die Tabellenlinien nicht standardmäßig zeichnen. Mit border legen Sie fest, wie "dick" die Trennlinien der Tabellen gezeichnet werden sollen (0 bedeutet "keine Linien").

<table border="1">
  ...
</table>

Kopfelemente

Sehen wir uns folgende Tabelle an:

Produkt Preis
Apfel 1 EUR

Hier sind die Zellen der ersten Zeile besonders markiert, denn Sie enthalten die "Überschriften" (engl. header) für die jeweilige Spalte. Für solche speziellen Zellen verwendet man statt td das Element th (table header).

<table>
  <tr>
    <th>Produkt</th>
    <th>Preis</th>
  </tr>
  <tr>
    <td>Apfel</td>
    <td>1 EUR</td>
  </tr>
</table>

Denken Sie daran, dass solche table header auch in der ersten Spalte stehen können:

Produkt Apfel
Preis 1 EUR

Das HTML muss dann so aussehen:

<table>
  <tr>
    <th>Produkt</th>
    <td>Apfel</td>
  </tr>
  <tr>
    <th>Preis</th>
    <td>1 EUR</td>
  </tr>
</table>

Zellen zusammenfassen

Wenn Sie Zellen über mehrere Zeilen oder Spalten gehen lassen wollen, verwenden Sie die Attribute rowspan und colspan. Sie müssen dann entsprechend weniger td-Elemente angeben, damit die Tabelle korrekt gelayoutet wird.

Als Beispiel nehmen wir einen Teil eines Stundenplans:

Uhrzeit Montag Dienstag Mittwoch
8:00 Mathe Deutsch Kunst
9:00 Englisch Spanisch
10:00 Pause

Hier das entsprechende HTML:

<table>
  <tr>
    <th>Uhrzeit</th>
    <th>Montag</th>
    <th>Dienstag</th>
    <th>Mittwoch</th>
  </tr>
  <tr>
    <th>8:00</th>
    <td>Mathe</td>
    <td>Deutsch</td>
    <td rowspan="2">Kunst</td>
  </tr>
  <tr>
    <th>9:00</th>
    <td>Englisch</td>
    <td>Spanisch</td>
  </tr>
  <tr>
    <th>10:00</th>
    <td colspan="3">Pause</td>
  </tr>
</table>

Tabellen nicht für Layouts verwenden

In den frühen Zeiten des WWW wurden Tabellen auch benutzt, um komplexere Layouts zu realisieren, also um z.B. ein Bild oder eine Seiten- oder Menüleiste zu positionieren. Insbesondere hat man Tabellen in Tabellen verschachtelt, um bestimmte Positionierungen zu erreichen.

Oft wurde auch ein Design komplett als Bild (Bitmap) entworfen und dann zerschnitten und als Tabelle eingebaut (der Grund für das Zerschneiden war, dass unterschiedliche Bereiche unterschiedlich verlinkt werden sollten). Diese Praxis wurde sogar von Grafiktools wie Photoshop automatisiert angeboten, d.h. man konnte aus einem Bild eine HTML-Datei und die Bildfragmente exportieren.

Diese Praxis ist heutzutage absolut indiskutabel, da sie unflexibel, fehleranfällig und langsam ist. Nutzen Sie Tabellen also nur, wenn Sie Informationen haben, die eine tabellarische Darstellung erfordern. Für eine genaue Positionierung gibt es mittlerweile viele Mechanismen in CSS, welches bereits in Version 3 vorliegt.

Hier sind ein paar interessante Anmerkungen aus A Web Design History Lesson: 20 Years in Web Design:

The mid 90’s were undoubtedly the "wild west" for design. The motto back then was "Just get it to work". [...] Almost every major site used a table-based layout, as CSS1 was just being prepared for release. If you’ve never built a table-based layout, you’ve missed out on some fun.

3.4.5 Zitate, Abkürzungen

Wir wissen, daß der modernste Computer der Welt kein so hochentwickeltes Gehirn hat wie eine Ameise. Klar, das könnten wir auch von vielen unserer Verwandten sagen, aber mit denen müssen wir ja bloß bei Hochzeiten oder besonderen Gelegenheiten auskommen. (Woody Allen)

Zitate (engl. quotes) können auf zwei Arten gekennzeichnet werden. Das obige Zitat ist ein Blockzitat, d.h. es soll alleinstehend als Block gesetzt werden:

<blockquote cite="http://www.zitate.de/autor/Allen%2C+Woody">
  Wir wissen, daß der modernste Computer der Welt
  kein so hochentwickeltes Gehirn hat wie eine
  Ameise. Klar, das könnten wir auch von vielen
  unserer Verwandten sagen, aber mit denen müssen wir
  ja bloß bei Hochzeiten oder besonderen
  Gelegenheiten auskommen. (Woody Allen)
</blockquote>

Im Attribut cite kann man optional die Herkunft oder eine Quelle des Zitats angeben.

Noch üblicher sind Zitate im Fließtext, z.B. "Ich denke viel an die Zukunft, weil das der Ort ist, wo ich den Rest meines Lebens verbringen werde" (Woody Allen). Solche Zitate kann man mit dem Element q umgeben:

<q>Ich denke viel an die Zukunft, weil das der Ort ist, wo ich den Rest meines Lebens verbringen werde</q> (Woody Allen)

Die Anführungszeichen setzt dann der Browser bzw. vielleicht sollen solche Zitate ja auch kursiv gesetzt werden. Mit CSS haben Sie später volle Kontrolle darüber.

Abkürzungen oder auch Fachwörter können mit einer Art "tool tip", also einem kurzen Erklärtext, versehen werden, der erscheint, wenn man mit der Maus über dem Wort fährt. Sie verwenden dazu das Element abbr (für abbreviation = Abkürzung) und schreiben im Attribute title Ihren Erklärtext.

<p>
  In diesem Kapitel geht es um
  <abbr title="Hypertext Markup Language">HTML</abbr>.
</p>

Sie können natürlich auch mehrere Wörter in das Element packen.

3.4.6 Code darstellen

Wenn Sie Code einer Programmiersprache (z.B. Java oder auch HTML) ins Netz stellen wollen, möchten Sie i.d.R. eine Schrift, die "monospace" ist und Sie möchten, dass Ihre Einrückungen erhalten bleiben, die ja normalerweise ignoriert werden.

Das erreichen Sie mit dem Element pre (steht für preformatted text).

Zum Beispiel:

<pre>
  if (x > 5) {
    println("success");
  }
</pre>

Erzeugt:

if (x > 5) {
  println("success");
}

Es gibt noch das Element code, das Codeteile innerhalb der Zeile darstellt/hervorhebt.

Zum Beispiel:

Mit <code>println()</code> geben Sie Text aus.

erzeugt: Mit println() geben Sie Text aus.

3.5 HTML validieren

Wie Sie im Kapitel über XML schon gelernt haben, besteht ein großer Vorteil der XML-Sprachen darin, dass man automatisch die syntaktische Korrektheit überprüfen kann. Bei HTML müssen Sie zwischen den verschiedenen Versionen unterscheiden:

HTML 5 ist die aktuelle Version, aber viele Webseiten im Internet beruhen noch auf HTML 4.01. Bei den älteren Versionen gibt es noch Zusätze wie "strict" oder "transitional". Das braucht uns aber nicht zu interessieren, wir möchten immer auf HTML 5 testen. Das wird mit der folgenden Angabe auf der ersten Zeile unseres Dokuments sichergestellt:

<!DOCTYPE html>

Wenn Sie kleinere Fehler in Ihre Dateien einbauen (z.B. ein Element nicht schließen), werden Sie feststellen, dass das Ihren Browser nicht besonders stört. Das liegt daran, dass Browser - um konkurrenzfähig zu sein - möglichst jede noch so fehlerbehaftete Webseite einigermaßen gut darstellen möchte. Wer möchte schon Fehlermeldungen beim Browsen sehen? Kurz gesagt: Browser sind sehr fehlertolerant.

Für Sie als Entwickler ist das aber durchaus problematisch. Sie sollten darauf aus sein, möglichst "korrekte" (d.h. standardkonforme) Seiten zu erstellen. Warum?

  1. Standardkonformes HTML sieht auf allen Browsern gleich aus - Fehler werden evtl. unterschiedlich behandelt

  2. Mit einiger Wahrscheinlichkeit läuft standardkonformer Code auch in Zukunft noch - Fehlermechanismen werden evtl. irgendwann eingestellt

Wie stelle ich fest, ob mein Code korrekt ist? Ganz einfach: Sie verwenden einen der vielen Validatoren, die online arbeiten. Zum Beispiel den ganz offiziellen W3C Markup Validation Service:

W3C Markup Validation Service →

Hier können Sie den Reiter "Validate by direct Input" wählen.

Validation Service

Und dann einfach Ihren HTML-Code hinein-pasten. Anschließend müssen Sie auf "Check" drücken:

By direct input

...und Sie bekommen einen ausführlichen Bericht:

Validierungsbericht

Probieren Sie es einfach mal aus und wenn Sie dann größere Projekte entwickeln, machen Sie ab und zu einen Check.

3.6 Übungen

(a) Erste Webseite

Ziel: Eine erste HTML-Datei erstellen, speichern und im Browser betrachten.

Aufgabenstellung: Legen Sie eine Textdatei mit Namen index.html an, tippen Sie das Grundgerüst ein und betrachten Sie das Resultat im Browser.

Tipp:: Wenn Sie in dem Editor Atom arbeiten, speichern Sie die Datei direkt ab. Wichtig ist hier, dass Sie die Erweiterung .html verwenden, damit Ihr Editor weiß, dass Sie HTML eingeben wollen und z.B. das richtige Code-Highlighting verwendet.

Ich empfehle Ihnen tatsächlich, den Code zumindest einmal, vielleicht auch öfter abzutippen.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8"/>
    <title>Meine Homepage</title>
  </head>
  <body>
    Willkommen auf meiner Seite!
  </body>
</html>

Ziehen Sie die Datei anschließend in einen Browser (Chrome oder Firefox). Öffnen Sie Ihre Seite in verschiedenen Browsern. Achten Sie darauf, ob Unterschiede auftreten. Diesen Check sollten Sie sich angewöhnen.

Falls Sie Text als "Füllmaterial" benötigen, können Sie einen der vielen lorem ipsum Generatoren verwenden, z.B. http://www.loremipsum.de.

Sie finden dort pseudo-lateinischen Text wie diesen hier:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, ...

Solche Pseudotexte werden oft statt echter Texte eingesetzt, um zu vermeiden, dass ein bestimmter Text vom Layout ablenkt.

(b) Top Three

Ziel: Mit Listen, Bildern und externen Links arbeiten.

Aufgabenstellung: Schreiben Sie eine Webseite eines fiktiven Radiokanals, der die Top Three der aktuellen Songs und der aktuellen Alben veröffentlich (in Listenform). Die Songs und Alben sollen verlinkt sein (z.B. mit einem Store oder mit der Homepage der/des Künstlers/in).

Zu guter letzt sollen noch die Top Three der Musikvideos verlinkt sein. Dazu binden Sie Bilder ein, die Sie mit den jeweiligen YouTube-Videos verlinken.

Natürlich müssen die Angaben nicht korrekt sein, aber die Ziele der Links sollten echte Adressen sein. Überprüfen Sie immer alle Links. Nichts ist enttäuschender als ein "toter Link".

(c) Wikipedia-Clone

Ziel: Eine HTML-Datei mit möglichst vielen der gelernten Mechanismen anreichern und die Seite auf den Hochschulserver hochladen.

Schritt 1: Seite erstellen

Erstellen Sie ein neues HTML-Dokument, dass Sie z.B. edward.html nennen.

Tipp: Wenn Sie in Atom die Buchstabenfolge "html" eingeben und dann die Tab-Taste drücken, erzeugt Atom automatisch das HTML-Grundgerüst. Bei vielen HTML-Elementen (z.B. p oder ul funktioniert ein ähnlicher Mechanismus).

Wählen Sie einen Eintrag auf Wikipedia, z.B. den über Edward Snowden, und versuchen Sie, diesen Eintrag - teilweise - mit einer HTML-Datei nachzubilden (Sie müssen natürlich nicht jeden Link nachbilden). Sie können Texte und Bilder einfach aus der Webseite rausschneiden. Lassen Sie auch weg, was Sie noch nicht gelernt haben. Probieren Sie, ansonsten alle gelernten Mechanismen anzuwenden, also:

Denken Sie daran, dass es nicht darum geht, dass Ihre Seite gut aussieht. Das sogenannte Styling gehen wir im nächsten Kapitel mit CSS an.

Schritt 2: Seite hochladen

Stellen Sie Ihre Datei online, z.B. unter

http://hs-augsburg.de/~mueller/test/edward.html

(wenn "mueller" Ihr RZ-Name ist.)

Wie das funktioniert, steht im Kapitel Netzthemen.

Sobald Sie eine Seite "ins Internet" hochladen, müssen Sie darauf achten, dass Sie möglichst nur eigenes Material nutzen (Texte, Bilder etc.). Bei Texten empfiehlt sich Lorem ipsum, bei Bildern können Sie auch Bilder nutzen, die über freie Lizenzen verfügen (Public Domain oder CC0).

Schritt 3: Validieren

Validieren Sie alle Ihre bisher erstellen HTML-Seiten und versuchen Sie, das HTML jeweils so anzupassen, dass Sie keine Fehlermeldungen (und evtl. auch keine Warnings) mehr zurückbekommen.

W3C Markup Validation Service

(d) Mehrseitige Website

Ziel: Eine Website mit mehreren Seiten erstellen, validieren und hochladen.

Wir wissen jetzt, wie wir eine einzelne Seite in HTML definieren. Wir sprechen aber von einer Website im Sinne einer "Webpräsenz" oder eines "Internetauftritts" und meinen damit in der Regel mehrere Einzelseiten. Der Begriff Homepage wird ähnlich verwendet.

Eine Website mit mehreren Seiten kann man mit Hilfe einer Sitemap (= Seitenübersicht) visualisieren. Die Sitemap dient zur Planung und als Diskussionsgrundlage in der Konzeption einer Website. Manchmal findet man eine Sitemap auch als Navigationselement aktiver Webseiten mit anklickbaren Seiten.

Hier ein Beispiel für eine einfache Sitemap (die folgende Grafik soll nur die Struktur der Website zeigen und nicht ein Menüelement - bei Ihnen soll das einfach als verschachtelte Liste erscheinen). Dabei ist jede Box eine eigene Seite und demnach auch eine eigene HTML-Datei:

Sitemap einer einfachen Sitemap

Wie Sie sehen, besteht die Website besteht aus 6 Einzelseiten, die einzelnen HTML-Dateien entsprechen. Davon bilden vier Seiten (Start, Projekte, About, Kontakt) die "Top-Ebene". Diese vier bilden klassischerweise die Haupteinträge eines Hauptmenüs.

Nennen Sie die Datei mit Ihrer Startseite immer index.html.

Zwei Seiten (Lichtschalter, Sonnenuhr) sind "Unterseiten" des Menüpunkts "Projekte", was sich im Hauptmenü oft so niederschlägt, dass diese zwei Punkte erst aufgeklappt werden müssen, um anklickbar zu sein (das machen wir dann in CSS).

Aufgabenstellung: Erstellen Sie eine Website mit den obigen Seiten. Wichtig ist, dass Sie ein funktionierendes Menüsystem entwicklen, das auch die Unterseiten erfasst. Außerdem sollte Ihr Layout so stabil sein, dass beim Seitenwechsel der Kopf der Seite und das Navigationselement unverändert bleiben. Versuchen Sie, auf den Seiten möglichst viele der in diesem Kapitel angesprochenen Features zu nutzen, z.B. Tabellen, Listen, Bilder, Tabellen, Codeschnipsel etc. Erstellen Sie ein Hauptmenü mit einer verschachtelten Liste (nicht-nummeriert), die auch tatsächlich als Liste (und nicht als Leiste) dargestellt wird.