Little Boxes – der HTML-Crashkurs

Listen lassen sich ineinander verschachteln

Testen Sie unsere 1865 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Listen können problemlos ineinander verschachtelt werden. Allerdings sind dabei bestimmte Grammatikregeln einzuhalten, die Sie unbedingt kennen sollten.

Transkript

Listen können ineinder verschachtelt werden und dabei sind im HTML, im Quelltext, ein paar Dinge zu beachten, die vielleicht nicht ganz selbstverständlich sind. So, ich werde jetzt hier diese vorhandene Liste, die sieht im Browser so aus, hier drei Aufzählungspunkte. Die bekommt eine Ergänzung, nämlich hier "Wichtige HTML-Elemente". Das soll um drei Unterpunkte ergänzt werden. Dazu müssen Sie das Endetag hier etwas nach unten schieben. Das ist etwas ugewöhnlich, intuitiv denkt man immer hier li und /li. Dazwischen schiebe ich dann noch eine Liste hinein. Die innere Liste, die verschachtelte Liste ist ein Teil dieses Listenelements. Ich rücke das ein bisschen ein, beginne dann wieder mit ul und Sie sehen, das machen wir hier gleich so, dass die Einrückung übersichtlich bleibt. Und das li auch wieder ein Stück rein. Es gibt wieder drei Punkte, diesmal "Überschriften", so, und li "Absätze und Listen" L-i-s-t-e-n. Und der dritte Punkt ist hier "Links und Graphiken". Das sind so die wichtigsten Typen HTML-Elemente. Also, hier beginnt das li, dann kommt der Text für diesen Aufzählungspunkt, dann kommt kein schließendes /li, sondern stattdessen die innere Liste und dann erst wird das li oben geschlossen. Speichern, rüber in den Browser, neu laden und so sieht das hier im Browserfenster aus. Da die inneren Punkte etwas weiter eingerückt, alles das kommt vom Browser-Stylesheet. Das haben wir nicht gesagt. HTML hat kein Aussehen, sondern strukturiert nur. Also, wir sagen dem Browser, hier beginnt eine Liste mit einem Listenelement und das zweite Listenelement hat eine Unterliste und das dritte wird wieder ganz normal auf der ersten Ebene angezeigt. So, das möchte ich Ihnen jetzt hier noch einmal im formatierten Quelltext zeigen. Seitenquelltext formatiert anzeigen im rechten Kontextmenü. So, in diesem View Souce Chart-Modul, in diesem Add-on, kann man auch auf die Tags klicken und dann klappen die ein. Das sehen Sie, wenn Sie hier den Wrapper zusammenklicken, dann ist fast nichts mehr zu sehen, weil das da alles drin enthalten ist. So, und hier sehen Sie jetzt diese verschachtelte Liste. Das ist im Moment das Wichtigste. Wenn ich hier rüber fahre, ist das li. Dann in diesem li sind die anderen alle drin enthalten. Da unten ist erst das /li. Wenn ich also die innere Liste zusammenklappe, dann bleibt hier noch das li und das /li stehen. Und dann klappe ich das wieder raus. Diese Verschachtelung ist wichtig, damit das hinterher gut gestaltet werden kann.

Little Boxes – der HTML-Crashkurs

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 5 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
Erscheinungsdatum:11.03.2015
Aktualisiert am:28.09.2016
Laufzeit:3 Std. 5 min (41 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!