4 Aufzählungen und Listen erstellen

Transkript

1 4 4 Aufzählungen und Listen erstellen Beim Strukturieren von Dokumenten und Inhalten stellen Listen und Aufzählungen wichtige Werkzeuge dar. Mit ihnen lässt sich so ziemlich alles sortieren, was auf einer HTML-Seite wichtig ist. Das kann eine ganz einfache Aneinanderreihung von Stichwörtern sein, eine nummerierte Liste mit Schritten oder Ähnliches. Sehr viel häufiger kommt es aber vor, dass Listen und Aufzählungen für die Organisation von Inhalten zum Einsatz kommen, z. B. für Menüs, Links, Artikel, Überschriften und ähnliche Elemente. Durch den geschickten Einsatz von CSS wird den Listen dann ein völlig anderes Aussehen gegeben, sodass sie als solche kaum noch zu erkennen sind. Aus diesem Grund ist es sehr wichtig, dass Sie sich mit Aufzählungen und Listen auskennen. Abbildung 4.1: Verschiedene Listen einfach erstellen 93

2 KAPITEL 4 UL unsortierte Listen erstellen 4.1 UL unsortierte Listen erstellen Eine ganze einfache Auflistung von Elementen erzielen Sie unter HTML mit der unsortierten Listen (= unordered list). Damit können Sie beliebige Stichwörter, Begriffe oder Menüeinträge auflisten, ohne dass komplizierte Befehle oder Verschachtelungen notwendig sind. Der Befehl hierzu lautet schlicht. Damit eröffnen und schließen Sie eine unsortierte Liste. Die einzelnen Punkte werden dabei als Listeneintrag (= List Item) mit dem Befehl deklariert. Die Listeneinträge müssen nicht zwingend geschlossen werden, um einen sauberen Code zu erhalten, Sie sollten es aber trotzdem tun. Dieser HTML-Code zeigt eine kurze Auflistung, was Sie alles zum Erlernen von HTML benötigen. Die Liste wird mit dem -Tag geöffnet, dann folgen die einzelnen Punkte per -Tag und am Ende wird die Liste wieder geschlossen. Jede Liste wird automatisch auch ein wenig formatiert, damit sie sich deutlich vom Fließtext abhebt: Vor und nach der Liste wird ein Absatz eingefügt. Alle Listeneinträge erhalten eine eigene Zeile. Vor jedem Listeneintrag wird ein Punkt als Aufzählungszeichen gesetzt. Abbildung 4.2: Unsortierte Listen einfach erstellen 94

3 Aufzählungen und Listen erstellen KAPITEL 4 Sie haben dabei keinen Einfluss auf das Aussehen der Liste. Sie können also weder die Abstände vor und nach der Liste noch die Einrückung der Einträge bestimmen. Das wird erst möglich, wenn Sie sich mit CSS beschäftigen. Ebenso besitzen Listen keine eigenen Überschriften. Sie können aber ganz einfach die Überschriften-Befehle bis verwenden. Das passt in der Regel gut und sieht vernünftig aus. 4.2 OL nummerierte Listen erstellen Mit HTML lassen sich auch nummerierte Listen erstellen. Das ist besonders praktisch, wenn Sie eine Aufzählung von Schritten, eine Rangfolge oder Ähnliches erstellen möchten. Der Befehl hierfür lautet schlicht und steht für»ordered list«(= nummerierte Liste). Die Handhabung ist genauso einfach wie bei der unsortierten Listen. Ebenso erfolgt die gleiche automatische Formatierung mit den Absätzen und der Einrückung. Der Unterschied besteht jedoch darin, dass anstatt eines Aufzählungszeichens eine fortlaufende Nummer an die Einträge vergeben wird. Abbildung 4.3: So sehen nummerierte Listen im Browser aus 95

4 KAPITEL 4 Die Werte von nummerierten Listen anpassen 4.3 Die Werte von nummerierten Listen anpassen Erzeugen Sie mit dem -Tag eine nummerierte Liste, werden die -Elemente automatisch durchnummeriert. HTML5 bietet Ihnen die Möglichkeit, diese Nummerierung ein wenig anzupassen. Dabei handelt es sich um numerische Veränderungen und nicht um optische. Diese lassen sich nur über CSS deklarieren. Startwert Eine nummerierte Liste beginnt immer mit der Nummer 1. Auf Wunsch lässt sich das aber ändern, indem Sie einen anderen Startwert angeben. Hierzu dient das Attribut, das Sie einfach dem eröffnenden -Tag hinzufügen. Die Einträge werden ab diesem Startwert normal weiter durchgezählt. Abbildung 4.4: Passen Sie die Werte der Listeneinträge an Einzelwerte Manchmal ist es erwünscht, einem einzelnen Eintrag in der Liste einen speziellen Wert zu geben. Das erreichen Sie mit dem Attribut. Sie setzen es in den -Tag des gewünschten Eintrags und fügen den gewünschten Wert hinzu. Die nachfolgenden Einträge wer- 96

5 Aufzählungen und Listen erstellen KAPITEL 4 den ab diesem Wert normal weitergezählt. Möchten Sie das nicht, müssen Sie ihnen ebenfalls eigene Werte zuweisen. Countdown Die Listen werden automatisch mit 1 beginnend aufsteigend durchnummeriert. Mit dem Attribut lässt sich das umkehren. Dann erhält der oberste Eintrag den höchsten Wert und die folgenden werden heruntergezählt. Sie erzeugen also eine Art Countdown. 4.4 DL Definitionslisten erstellen Eine weitere Form der Aufzählungen stellen die sogenannten Definitionslisten dar. Diese eignen sich besonders für Glossare, wissenschaftliche Erläuterungen oder andere Seiten mit Begriffserklärungen. Zum reinen Aufzählen von Inhalten sind sie hingegen nicht geeignet. Der Befehl für eine Definitionsliste lautet für»definition list«. Damit wird die Liste wie bei den vorherigen Befehlen geöffnet und auch geschlossen. Jeder Eintrag in dieser Liste wird mit dem Befehl für»definition term«(= Definitionsausdruck) gekennzeichnet. Da ein Glossar natürlich nicht nur eine Aufzählung von Wörtern ist, benötigt jeder Ausdruck eine Erläuterung. Diese fügen Sie mit dem Befehl für»definition (list) definition«(= Definition des Ausdrucks) hinzu. 97

6 KAPITEL 4 DL Definitionslisten erstellen Der HTML-Code für Definitionslisten sieht am Anfang etwas kompliziert aus, aber im Grunde funktionieren sie wie die anderen Auflistungen auch. Der Unterschied besteht nur darin, dass jeder Eintrag in der Liste immer aus zwei Elementen besteht: dem Eintrag selbst und seiner Erläuterung. Besonders geeignet sind Definitionslisten für Erläuterungen, Glossare, Zusammenfassungen und Ähnliches. Für solche Textelemente gibt es in HTML auch keine Alternative, um sie logisch und übersichtlich zu strukturieren. Eine Art Erläuterung oder Glossar könnte z. B. wie folgt aussehen: Abbildung 4.5: So sehen Definitionslisten im Browser aus 98

7 Aufzählungen und Listen erstellen KAPITEL 4 Verzeichnis- und Menülisten In HTML4 gab es spezielle Befehle für Verzeichnis- und Menülisten, auf die Sie in älteren HTML-Dokumenten sicherlich gelegentlich stoßen werden. Deshalb sollen sie die an dieser Stelle kurz erläutert werden. Mit dem -Befehl (directory = Verzeichnis) ließen sich die Verzeichnisstrukturen eines Computers auflisten. Diesen Befehl gibt es in HTML5 nicht mehr und es soll stattdessen der -Befehl verwendet werden. Mit dem -Befehl ließen sich Listen mit Menüeinträgen erstellen. Diese Art von Liste gibt es in HTML5 ebenfalls nicht mehr. Allerdings ist der -Befehl selbst geblieben und seine Funktion wurde neu definiert. Er dient nun tatsächlich zum Erstellen von Menüs. Er wird in diesem Buch an anderer Stelle erläutert. 4.5 Listen ineinander verschachteln Die vorgestellten Arten von Listen sind in der Handhabung sehr einfach. Sie können damit aber durchaus komplexe Listen mit mehreren Ebenen und Unterpunkten erstellen. Im Grunde handelt es sich dabei dann um Listen innerhalb von Listen. Das mag kompliziert klingen, ist aber ganz einfach. Dabei wird auch sofort deutlich, warum es sehr sinnvoll ist, jeden Befehl korrekt zu öffnen und zu schließen. Sobald Sie anfangen, HTML-Befehle miteinander zu verschachteln, kann sich sonst sehr schnell ein Durcheinander einstellen und der Browser zeigt den Inhalt nicht mehr richtig an. Nummerierte und nichtnummerierte Listen mit den Befehlen und lassen sich besonders einfach miteinander verschachteln. Dabei erstellen Sie wie gewohnt eine Liste und eröffnen innerhalb eines -Eintrags eine neue. 99

8 KAPITEL 4 Listen ineinander verschachteln Abbildung 4.6: Unsortierte Listen ineinander verschachteln Mit einer nummerierten Liste sieht der HTML-Code genauso aus. Der Unterschied besteht nur darin, dass Sie natürlich den Befehl verwenden und dass die Einträge jeweils durchnummeriert werden. Beachten Sie hierbei aber, dass HTML keine durchgehende Nummerierung der Unterpunkte vorsieht. Sie erhalten also keine Zahlen in der Form 1., 1.1., usw. Stattdessen wird jede Unterliste für sich alleine durchnummeriert. 100

9 Aufzählungen und Listen erstellen KAPITEL 4 Abbildung 4.7: Nummerierte Listen ineinander verschachteln Auch die Definitionslisten lassen sich ineinander verschachteln. Dabei gibt es ein paar zusätzliche Regeln bzw. Details, die Sie beachten müssen: Die Reihenfolge der Elemente ist nicht streng geregelt und Sie dürfen das je nach Bedarf variieren. Sie können also auf einen Begriff () auch mehrere Erläuterungen () folgen lassen. Genauso ist es möglich, mehrere Begriffe () aufeinander folgen zu lassen, ohne dass sie eine Erläuterung besitzen. Das Erstellen von Unterlisten ist nur innerhalb der Erläuterung () erlaubt. Der Begriff selbst () darf keine Unterliste besitzen. 101

10 KAPITEL 4 Listen ineinander verschachteln Abbildung 4.8: Definitionslisten ineinander verschachteln 102

11 Aufzählungen und Listen erstellen KAPITEL 4 Das Aussehen der Listen beeinflussen In HTML4 war es möglich, das Aussehen der Listen mit dem Attribut zu beeinflussen. Damit ließ sich z. B. das Aufzählungszeichen in einen Kreis, einen Kasten oder einen Punkt ändern. Außerdem konnten anstatt arabischer Zahlen auch römische Ziffern oder Buchstaben für die Nummerierung gewählt werden. Mit HTML5 wurden das Attribut und auch der Zusatz ersatzlos gestrichen. Finden Sie diese Befehle noch in einem älteren HTML- Dokument, entfernen Sie diese. Diese Art von Formatierung ist in HTML5 nicht mehr erlaubt und wird stattdessen per CSS durchgeführt. 4.6 Übungen Übung Nr. 1 Erstellen Sie zunächst das Grundgerüst für eine Webseite. Im Textkörper erzeugen Sie nun eine unsortierte Liste, in der Sie Ideen aufführen, was Sie alles mit HTML-Kenntnissen tun können. Übung Nr. 2 Ändern Sie die unsortierte Liste in eine nummerierte Liste um. Kehren Sie dabei die Sortierung um, sodass der höchste Wert oben steht. Übung Nr. 3 Nehmen Sie die Liste aus Übung Nr. 2. Kehren Sie die Nummerierung wieder um, sodass sie aufsteigend ist. Nun geben Sie jedem der nummerierten Hauptpunkte drei nichtnummerierte Unterpunkte. 103