Impressum
< Text fett etc. Inhalt Links >

Listen in HTML

Listen dienen der strukturieren Aufzählung in Texten. Es gibt in HTML nummerierte (<ol>) und nicht nummerierte Listen (<ul>).
Zwischen das Listen-Starttag und dessen Endtag kommen die Listen-Einträge, die mit <li> und </li> umschlossen werden.
Listen sind auch Blockelemente und dürfen somit nicht in Absätzen stehen!

Beispiel:

<b>Einkaufsliste:</b>
<ul>
<li> Kartoffeln</li>
<li> Eier</li>
<li> Milch</li>
<li> HTML-Buch</li>
</ul>
Einkaufsliste:

Beispiel:

<b>HTML-Seiten schreiben</b>
<ol>
<li> HTML-Grundgerüst in die Datei schreiben</li>
<li> im <i>HEAD</i> den Titel anpassen</li>
<li> im <i>BODY</i> den Inhalt einfügen</li>
<li> Mit Tags formatieren</li>
</ol>
HTML-Seiten schreiben
  1. HTML-Grundgerüst in die Datei schreiben
  2. im HEAD den Titel anpassen
  3. im BODY den Inhalt einfügen
  4. Mit Tags formatieren

Beispiel:

Listen können auch ineinander verschachtelt werden. D.h. ein List-Item (<li>) kann eine ganze Liste enthalten.
<b>HTML-Seiten schreiben</b>
<ol>
<li> HTML-Grundgerüst in die Datei schreiben</li>
<li> im <i>HEAD</i> den Titel anpassen</li>
<li> im <i>BODY</i> den Inhalt einfügen</li>
<li> Mit Tags formatieren
<ul>
<li>Überschrift mit h1</li>
<li>Text in Absätze</li>
<li>Fett und kursiv</li>
</ul>
</li>
</ol>
HTML-Seiten schreiben
  1. HTML-Grundgerüst in die Datei schreiben
  2. im HEAD den Titel anpassen
  3. im BODY den Inhalt einfügen
  4. Mit Tags formatieren
    • Überschrift mit h1
    • Text in Absätze
    • Fett und kursiv

Listen anpassen

Bei nicht nummerierten Listen (<ul>) gibt es das Attribute type, welches die Werte haben kann.
Das Attribute kommt nach dem Tag-Namen und einem Leerzeichen, dann kommt ein Gleichheitszeichen und zuletzt der Wert in Anführungszeichen.
Beispiel: <ul type="square">
Bei nummerierten Listen (<ol>) kann der Startwert mit dem Attribut start angegeben werden. Z.B. <ol start="100">.
Außerdem gibt es auch hier ein type-Attribute:

Beispiel:


<ol start="100">
<li> es gibt viel zu tun
<ul type="square">
<li>Aufgaben aufschreiben</li>
<li>Zettel verlegen</li>
<li>Arbeit verschieben</li>
</li>
</ol>
  1. es gibt viel zu tun
    • Aufgaben aufschreiben
    • Zettel verlegen
    • Arbeit verschieben

Beispiel:

<ol type="i" start="3">
<li> Start auf 3 festgelegt </li>
<li> und römisch nummeriert </li>
</ol>

<ol type="A">
<li>mit Buchstaben</li>
<li>kann man auch</li>
<li>nummerieren</li>
</ol>
  1. Start auf 3 festgelegt
  2. und römisch nummeriert
  1. mit Buchstaben
  2. kann man auch
  3. nummerieren

Aufgaben

Nehmen Sie einen Texteditor ihrer Wahl und kopieren Sie das HTML-Gründgerüst hinein.
Speichern Sie die Seite als .html-Datei.
  1. Fügen Sie eine Aufzählungs-Liste mit ihren 3 Lieblingsessen in die HTML-Datei ein.
    Ergänzen Sie eine Überschrift Lieblingsessen am Seitenanfang.

    Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Browser.

    Lieblingsessen

    • Pizza
    • Pommes
    • Bruger

  2. Erstellen sie eine Liste, welche mit Kleinbuchstaben nummeriert.
    Die Liste soll Eigenschaften eines guten Lehrers enthalten.

    Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Browser.

    1. kompetent
    2. freundlich
    3. pünktlich
    4. gerecht
    5. bei euch hoffentlich länger

  3. Erstellen sie eine Liste, welche Großbuchstaben nummeriert.
    Jeder Listeneintrag soll 2 Einträge mit Ziffern nummeriert enthalten
    Die Liste kann z.B. das Erstellen einer Webseite beschreiben.

    Speichern Sie Ihre Datei und überprüfen Sie das Ergebnis im Browser.

    1. Datei anlegen
      1. Texteditor öffnen
      2. Datei mit Endung .html speichern
    2. HTML erstellen
      1. HTML-Grundgerüst kopieren
      2. Inhalt einfügen

  4. Erzeugen Sie folgende Liste mit Anlageformen. Ergänzen Sie eine nette Überschrift, wenn sie wollen.
    1. Niedriges Risiko
      • Tagesgeld
      • Bundeswertpapiere
      • Festgeld
    2. Mittleres Risiko
      • Unternehmensanleihen
      • Immobilien
      • Rohstoffe
      • Indexfonds (ETFs)
      • Immobilienfonds
    3. Hohes Risiko
      • Fremdwährung
      • Aktienfonds
      • Aktie
  5. Experimentieren Sie mit Listen.