html-Lehrgang erster Tag: Listen

Seid ihr noch aufnahmefähig? Dann wollen wir uns den Listen zuwenden.

Es gibt verschiedene Arten von Listen: Listen mit Aufzählungszeichen ( = ungeordnete Listen bzw. unordered Lists) bzw. Listen mit Nummerierung ( = geordnete Listen bzw. ordered Lists). Was wir zur Erstellung der Listen tun müssen ist, dem Browser mitzuteilen, welche Arten von Listen erstellt werden sollen. Beginnen wir mit den ungeordneten Listen:

<ul></ul>

Dieses Tag sagt dem Browser, dass er nun eine ungeordnete Liste erstellen soll. Den Inhalt, also die einzelnen Listenpunkte, fügen wir folgendermaßen ein:

<li>Hier steht dann der Inhalt</li>

Machen wir uns also ans Werk und erstellen die erste ungeordnete Liste:

html ungeordnete Listen im Browser

Im Browser erscheint:

html ungeordnete Listen im Browser

Folgendes gilt es zu beachten:

  1. <ul></ul>-Tags umschließen die <li></li>-Tags. Das muss auch so sein, denn wir müssen ja dem Browser mitteilen, wann die Liste endet.
  2. Die <li></li>-Tags lösen automatisch einen Zeilenumburch aus, rücken den Text etwas ein und fügen ganz von selbst die Listenpunkte hinzu.

Wir sehen also: diese Listentags nehmen uns eine ganze Menge Arbeit ab.

Gehen wir gleich zu den geordneten Listen:

html geordnete Listen

Ich habe diesmal nur <ul> und </ul> gegen <ol> und </ol> ausgetauscht, und wir erhalten folgendes Ergebnis:

html geordnete Listen im Browser

Wie von Zauberhand nummiert nun der Browser die einzelnen Listenpunkte. Das ist recht praktisch, wenn wir z.B. innerhalb der Liste einen weiteren Listenpunkt hinzufügen wollen:

html geordnete Listen

Die Nummerierung wird automatisch angepasst, wie das Ergebnis zeigt:

html geordnete Listen im Browser

Verschachtelte Listen

Machen wir es etwas schwieriger und erstellen wir Listen mit Unterpunkten:

html verschachtelte Listen

Das Ergebnis:

html verschachtelte Listen im Browser

Wir sehen, dass die Unterpunkte, in diesem Beispiel die Länder der Kontinente, wiederum etwas eingerückt sind und einen anderen Listenpunkt bekommen haben. Gehen wir einen Schritt weiter:

html verschachtelte Listen

Diesmal haben wir die Länder als geordnete Liste dargestellt mit folgendem Ergebnis:

html verschachtelte Listen im Browser

Was aber, wenn wir auch die Kontinente als geordnete Liste darstellen lassen? Probieren wir es aus:

html verschachtelte Listen

Und so erscheint das Ganze:

html verschachtelte Listen im Browser

Und wenn wir die Länder durchnummeriert haben wollen, also nicht bei jedem Kontinent wieder mit "1" beginnen sollen? Auch dafür gibt es eine Möglichkeit:

html geordnete Listen start-Attribut

Wir weisen den Länder-Listenpunkten einfach einen Startwert über das Attribut "start=" zu, und schon erhalten wir das gewünschte Ergebnis:

html geordnete Listen start-Attribut im Browser

Halt, wir haben soeben ein neues Wort kennen gelernt: "Attribut". Was bedeutet das eigentlich?

Ein Attibut ist eine Eigenschaft, die wir einem Tag zuweisen können, wie in diesem Fall der Startwert der Listenpunkte. Es gibt noch viele weitere Attribute, so dass wir diesen einen eigenen Lehrgangsblock widmen sollten, und bis dahin werden wir auch noch das eine oder andere Attribut kennenlernen. Schauen wir uns doch einmal die Attribute für Listen an:

<ol type="I"</ol>. Setzen wir das einmal ein und schauen wir, was passiert:

html-Listen-Attribute

Dies ergibt folgendes Ergebnis:

html-Listen-Attribute im Browser

Nun haben wir also eine Nummerierung mit römischen Ziffern. Und noch etwas haben wir gelernt: Wir können ein Tag durch mehrere Attribute auch mehrere Eigenschaften zuweisen. Das muss auch so sein, denn wir müssen ja oft ein Tag mehrere Attribute zuweisen können, wenn wir z.B. eine Schrift in Schriftart, Farbe, Größe usw. verändern wollen. Dazu aber später mehr.

Machen wir noch das Gleiche mit <ol type="i"</ol>:

html-Listen-Attribute

Wir erhalten folgendes Erscheinungsbild:

html-Listen-Attribute im Browser

Nun mit <ol type="A"></ol>:

html-Listen-Attribute

Wir sehen:

html-Listen-Attribute im Browser

Und nun mit <ol type="a"></ol>:

html-Listen-Attribute

Ergibt, wie nicht anders zu erwarten:

html-Listen-Attribute im Browser

Das soll es zu den "Listen" gewesen sein.

Und damit wollen wir den heutigen Tag beenden.

Wir haben doch eine ganze Menge gelernt. Und wer möchte kann sich nun den folgenden kleinen Übungen widmen. Versucht doch einmal, die nachfolgend abgebildeten Seiten nachzubauen. Hier geht es zu den Lösungen der Übungsaufgaben.

Übung 1

html-lehrgang 1.Aufgabe

Übung 2

html-lehrgang 2.Aufgabe

Hier geht es nochmal zu den Lösungen der Übungsaufgaben.

Viel Spaß und Erfolg beim Üben!

Morgen geht es dann u.a. um Bilder und Verweise, Umlaute und Sonderzeichen.



« zurück