HTML verstehen Teil 5: Listen

HTML verstehen: Die Listen

Es geht weiter!

Lassen Sie mich heute zu 2 weiteren Formatierungs-Tags kommen. Mit diesen Tags kann man Aufzählungslisten erstellen. Sie kennen das ja schon von Word, auch dort gibt es Auszählungslisten in Form unnummerierter und nummerierter Listen.

Die nummerierte Liste <ol>

Machen wir doch gleich so eine nummerierte Liste und fragen uns, welche Tags gehören dazu?

  1. Das <ol>-Tag leitet die nummerierte Liste ein
  2. Mit dem <li>-Tag werden die einzelnen Listenelemente aufgezählt. Am Ende steht dann ein </li>
  3. Mit </ol> beendet man die Liste

Und da ist sie auch schon unsere nummerierte Liste. Also wir brauchen die 3 Tags! Jetzt schreibe ich mal die Liste so wie Sie sie schreiben müssten, dass sie so erscheint!

<ol>
  <li> Das ol-Tag leitet die nummerierte Liste ein</li&gt,
  <li> Mit dem li-Tag werden die einzelnen Listenelemente aufgezählt. Am Ende steht dann ein /li</li>
  <li> Mit </ol> beendet man die Liste</li>
</ol>

Bemerkung zum Text

Ihnen ist bestimmt aufgefallen, dass ich in dem Text nun die < und > weggelassen habe! Ich kann mir aber auch vorstellen, dass die diese Zeichen gerne im Text haben würden. Nur wenn Sie sie hinschreiben, werden sie fast alle verschluckt!

Wer hat da so viel Hunger, dass der meine Tag-Anfangszeichen frisst?

Jetzt stellen Sie sich mal vor Sie wären Mr. Html-Übersetzer. Sie sind wie ein Hund darauf abgerichtet auf <xx> zu reagieren. Immer wenn Sie eine Seite lesen, dann achten Sie wie der Lux auf diese Zeichen. Was aber wenn der Autor es gar nicht so gemeint hat, und hier wirklich ein Kleiner- bzw Größerzeichen schreiben will. Der Autor schreibt < 5 und Sie suchen nach dem > finden aber keines und sind sauer! Nur Fehler macht dieser Autor, am liebsten würd‘ ich die ganze Seite nicht ausgeben!

Gemach, gemach! Mr. Html-Übersetzer, darf man so nicht behandeln, wenn er ein < bekommt, dann interpretiert er das. Also geben wir im kein < Sie brauchen also ein Ersatzzeichen und das ist in unserem Fall &lt und &gt;

Schwer? Nein! Ich habe hier einen Link für Sie, den Sie zu den Favoriten im Browser stellen können, dort sind alle Ersatzzeichen aufgezählt.
http://de.selfhtml.org/html/referenz/zeichen.htm

[Ich schreibe diesen Text in HTML direkt im Blog-Editor! Was glauben Sie wie oft ich hier die Ersatzzeichen statt < – schon wieder – nehmen muss, um Ihnen die Tags bezeichnen zu können]

Sie sagen nun gut die Zahlen sind langweilig! Wenn Sie den Tag mit einem Type-Attribut versehen, dann wird es weniger langweilig.
Durch das Attribut type und start können Sie für die Zahlen eine Startzahl festlegen und eine Zahlenart wählen: Als type können Sie angeben

  • l ⇒ Dezimalzahlen
  • a ⇒ Kleinbuchstaben
  • a ⇒ Großbuchstaben
  • i ⇒ Kleine römische Zahlen
  • I ⇒ große römische Zahlen

Also z.B. mit <ol start=“5″ type=“i“>

  1. Das <ol>-Tag leitet die nummerierte Liste ein
  2. Mit dem <li>-Tag werden die einzelnen Listenelemente aufgezählt. Am Ende steht dann ein </li>
  3. Mit </ol> beendet man die Liste

Die nicht-nummerierte Liste <ul>

Machen auch hier doch eine nicht-nummerierte Liste und fragen uns, welche Tags gehören dazu?

  • Das <ul>-Tag leitet die nummerierte Liste ein
  • Mit dem <li>-Tag werden die einzelnen Listenelemente aufgezählt. Am Ende steht dann ein </li>
  • Mit </ul> beendet man die Liste

Und da ist sie auch schon unsere nummerierte Liste. Also wir brauchen die 3 Tags! Jetzt schreibe ich mal die Liste so wie Sie sie schreiben müssten, dass sie so erscheint!

<ul>
  <li> Das ul-Tag leitet die nummerierte Liste ein</li&gt,
  <li> Mit dem li-Tag werden die einzelnen Listenelemente aufgezählt. Am Ende steht dann ein /li</li>
  <li> Mit </ul> beendet man die Liste</li>
</ul>

Sieht also fast gleich aus nur dass statt Zahlen die Punkte stehen.

Auch beim <ul>-Tag gibt es ein Attribut type:

  • type=“disc“ ⇒ Kleine gefüllte Kreise, ist der Standard
  • type=“square“ ⇒ Kleine gefüllte Kreise Quadrate
  • type=“circle“ ⇒ Kleine leere Kreise

Das ist aber noch nicht alles, was man als Symbole anwenden kann. Es gibt ja schließlich noch das CSS. Hier gibt es undenkbar viele Möglichkeiten, wie Sie solche Listen aufpeppen können. Doch CSS gehört hier im Moment noch nicht zu unserem Betrachtungselement!

Zusammenfassug und Warnung

So, jetzt können Sie auch schon mit Listen umgehen. Sie benötigen das im Blog öfters. Doch Vorsicht mit dem Blogeditor: Der Visuelle Teil des Blogeditors kann zwar nummerierte und nicht nummerierte Listen, doch ist er da sehr eigen.

Wenn Sie beispielsweise eine nummerierte Liste als Überschriften über Kapitel haben wollen, nach der Art “ 10 gute Tipps für xxx“ und Sie wollen nach dieser Überschrift anfangen mit 1. xxxx, dann einen oder mehrere Absätze folgen lassen, bevor Sie zu 2. yyy kommen, ist der Editor im visuellen Teil nicht fähig Ihnen zu folgen.
Bestenfalls nummeriert er jedes <li> mit 1. ! Das ist ganz einfach die Schwäche solcher Editoren, sie können den Standard nicht so ausgefallene Dinge wie „10 Tipps“ !

Was können Sie tun, nun Sie wechseln in den HTML-Teil und nehmen dort die <ol> Einstellungen vor.

Aber auch hier liegt ein Fallstrick: Der Editor versucht am Ende beim Update nochmals die HTML-Syntax zu ergänzen, und macht natürlich dabei viel falsch! So werden ganze Bereiche weggeworfen, weil der Editor Ihnen nicht glaubt HTML zu können! Deshalb empfehle ich Ihnen, diesem Schurken die Suppe zu versalzen.
Gehen Sie in das Blog-Menü Einstellungen | Schreiben und löschen Sie den Haken bei „WordPress soll falsch verschachteles XHTML…“! (Siehe Bild unten)

Und gleich lässt er das böse Treiben und entlastet Sie vom Fehlersuchen.

Gruß
Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar