HTML-Primer: Was in HTML-Büchern fehlt
Tags für mehr Struktur
Überschriften und Textabschnitte (Paragraphen)
In der vorigen Lektion haben wir bereits gelernt, mit dem H1-Element eine Haupt-Überschrift zu erzeugen. Darunter kann man Unter-Überschriften (das Wort klingt jetzt etwas komisch) von H2 bis H6 erzeugen. Hier nur ein Beispiel, welches wir in die Seite von der vorigen Lektion hinzufügen können:
<h1>Musik-Archiv</h1>
<h2>Pop</h2>
<h3>ABBA</h3>
<p>
ABBA war eine schwedische Pop-Band, die
1972 gegründet wurde. Der Name der Band
steht für die Vornamen der Musiker:
Anni-Frid, Benny, Björn und Agnetha.
...
</p>
<h3>Beatles</h3>
<p>
Die Beatles wurden 1960 in Liverpool (England)
gegründet. Ihre eigentliche Erfolgsgeschichte
begann allerdings in Hamburg ...
</p>
Zum Thema Paragraph (Abschnitt) muss man noch wissen: Zeilenumbrüche werden vom Browser festgelegt. Ob man im HTML-Code zwei Wörter durch ein Leerzeichen oder durch einen Zeilenumbruch trennt, macht in der Darstellung keinen Unterschied. Der Grund ist einfach: Wenn man den HTML-Code schreibt, weiß man ja nicht, wie breit der Bildschirm sein wird, auf dem die Zeichen dargestellt werden. Man weiß auch nicht, wie groß die Schrift ist, die der Browser-Benutzer ja auch noch in seinem Browser einstellen kann. Man kann zwar auch feste Schriftarten und -größen vorgeben (wir lernen das später) aber: Der Browser-Benutzer kann das jederzeit an seinem PC (oder Handy) umstellen. (Vielleicht sieht er ja nicht gut und hat den Browser so eingestellt, dass alle Schriften sehr groß dargestellt werden.) Daher überlässt man es dem Browser-Programm, den Text an den vorhandenen Bildschirm anzupassen.
Es ist auch völlig egal, ob man ein oder mehrere Leerzeichen zwischen zwei Wörtern oder Sätzen verwendet. Ebenso kann man am Anfang der Zeile Leerzeichen verwenden, um z.B. den Aufbau der Seite klarer zu machen. Diese haben keinen Einfluss auf die Darstellung im Browser.
Was jetzt für die Paragraphen geschrieben wurde, gilt praktisch für alle HTML-Elemente; um technisch korrekt zu bleiben: für alle Block-Level-Elemente. (Vorerst müssen wir nicht wissen, was ein Block-Level-Element ist. Wir lernen das viel spáter.)
Einfache Listen
Listen sind Aufzählungen wie die folgenden:
- Hund
- Katze
- Maus
Die Liste selbst wird durch das Element UL (Unsortierte Liste bzw. englisch Unordered List) markiert. Die einzelnen Listen-Elemente (englisch List Item) werden als LI-elemente markiert. Eine Liste (UL) entählt ein oder mehrere Listen-Elemente. Obige Liste als Markup:
<ul>
<li>Hund</li>
<li>Katze</li>
<li>Maus</li>
</ul<
Sortierte Listen
Eine sortierte Liste verwendet statt der Aufzählungspunkte Zahlen oder Buchstaben. Wenn wir im vorherigen Beispiel (einfache Liste) in den HTML-Markierungen für das Listen-Element stattt UL (Unordered List, also einfache/unsortierte Liste) durch ein OL (Ordered Liste, also sortierte Liste) austauschen, erhalten wir folgenden HTML-Code:
<ol>
<li>Hund</li>
<li>Katze</li>
<li>Maus</li>
</ol>
Das Ergebnis sieht dann etwa so aus:
- Hund
- Katze
- Maus
Anmerkungen zur Darstellung der Beispiele
Das Ergebnis, insbesondere die Schriftarten und -größen, kann etwas anders aussehen als oben dargestellt. Das hat damit zu tun, dass im Prinzip jeder Browser seine eigene Art hat, die HTML-Elemente darzustellen. Normalerweise erlauben Browser dem Web-Designer allerdings, auf die Darstellung ganz großen Einfluss zu nehmen. Dazu werden Cascading Style Sheets (CSS) benutzt. Im Internet und in der Fachliteratur gibt es ausreichend gute Information hierzu.
Als nächstes kommt ein HTML-Element mit Attributen.