Einstieg in HTML

Das Grundgerüst einer HTML-Seite

Hier sehen wir das Grundgerüst einer HTML-Seite:

Ruft man diese Seite im Browser auf, so sieht man noch nicht besonders viel:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Woran man HTML-Code schnell erkennen kann, sind die typischen spitzen Klammern. Mit diesen Klammern kennzeichnet man sogenannte Tags.
Die allermeisten Tags müssen geöffnet und wieder geschlossen werden - so wie Klammern in der Mathematik. Alles was innerhalb eines Tags steht wird dann durch dieses Tag beeinflusst.

Schauen wir uns einmal Schritt für Schritt dieses erste Beispiel an:

Überschriften in HTML

Ein erstes anschauliches Beispiel für öffnende und schließende Tags sind die Tags <h1> </h1> bis <h6> </h6> zum Kennzeichnen von Überschriften:

Diese werden standardmäßig in unterschiedlichen Größen dargestellt:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Texte strukturieren mit Absätzen

Einen Absatz - oder besser gesagt Textblock - umschließt man den Tags <p> und </p>. Man kann sich merken, dass das p für Paragraph steht.

Davon unterscheiden sollte man einen einfachen Zeilenumbruch, den man mit <br> erzeugt. Im folgenden Beispiel sollte der Unterschied deutlich werden:

Das Ergebnis im Browser:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Hervorheben von Wörtern und Textpassagen

Möchte man ein Wort betonen, kann man das Tag <em> verwenden. (Dieses steht für emphasized, also betont.) Für eine stärkere Betonung oder Hervorhebung kann man <strong> verwenden. Die meisten Browser verwenden Kursiv- bzw. Fettdruck, um die Betonung umzusetzen. Dies kann sich aber von Browser zu Browser unterscheiden. Später lernen wir, wie man selbst bestimmen kann, wie die Betonung aussehen soll.
Sehr ähnliche Tags sind <i> und <b>. Das Tag <i> wird zum Beispiel zur Hervorhebung von Fachbegriffen oder Eigennamen verwendet. Das Tag <b> kann zum Beispiel für Produktnamen verwendet werden. In der Fachliteratur wird allerdings dazu geraten, diese beiden nur zu verwenden, wenn kein anderes Tag besser passt.

Hier das Resultat:

Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!

Übungsaufgabe

Erstelle ein HTML-Dokument, das eine solche Darstellung liefert:

Eine Beispielseite zum Nachbauen