HTML nummerierte Liste

Einführung

In HTML können wir eine nummerierte Liste erstellen, indem wir das <ol>-Tag verwenden. Die nummerierte Liste ist eine Liste von Elementen, die in einer bestimmten Reihenfolge nummeriert sind. Das <ol>-Tag wird verwendet, um die nummerierte Liste zu erstellen, und das <li>-Tag wird verwendet, um jedes Element in der Liste zu definieren.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70806{{"HTML nummerierte Liste"}} html/head_elems -.-> lab-70806{{"HTML nummerierte Liste"}} html/lists_desc -.-> lab-70806{{"HTML nummerierte Liste"}} html/doc_flow -.-> lab-70806{{"HTML nummerierte Liste"}} html/inter_elems -.-> lab-70806{{"HTML nummerierte Liste"}} end

HTML-Datei einrichten

In diesem Schritt werden wir eine einfache HTML-Datei erstellen und das <ol>-Tag einrichten. Öffnen Sie die Datei "index.html" und geben Sie folgenden Code ein:

<!doctype html>
<html>
  <head>
    <title>Beispiel nummerierte Liste</title>
  </head>
  <body>
    <h1>Beispiel nummerierte Liste</h1>
    <ol>
      <li>Element 1</li>
      <li>Element 2</li>
    </ol>
  </body>
</html>

Weitere Elemente zur Liste hinzufügen

In diesem Schritt werden wir der nummerierten Liste weitere Elemente hinzufügen. Dazu fügen Sie einfach weitere <li>-Tags zwischen den öffnenden und schließenden <ol>-Tags hinzu:

<!doctype html>
<html>
  <head>
    <title>Beispiel nummerierte Liste</title>
  </head>
  <body>
    <h1>Beispiel nummerierte Liste</h1>
    <ol>
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
      <li>Element 5</li>
    </ol>
  </body>
</html>

Die Nummerierungstyp ändern

In diesem Schritt werden wir den Typ der Nummerierung in der nummerierten Liste ändern. Standardmäßig verwendet die nummerierte Liste die Dezimalnummerierung. Wir können jedoch dies in andere Nummerierungstypen umändern, wie römische Zahlen oder Buchstaben. Um den Nummerierungstyp zu ändern, verwenden Sie das type-Attribut im <ol>-Tag. Beispielsweise:

<!doctype html>
<html>
  <head>
    <title>Beispiel nummerierte Liste</title>
  </head>
  <body>
    <h1>Beispiel nummerierte Liste</h1>
    <ol type="I">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
      <li>Element 5</li>
    </ol>
  </body>
</html>

In obigem Code haben wir das type-Attribut auf I gesetzt, was für römische Zahlen im Großbuchstaben verwendet wird.

Nummerierung ab einer bestimmten Zahl beginnen

In diesem Schritt werden wir die Startnummer der Elemente in der nummerierten Liste ändern. Standardmäßig beginnt das erste Element in der nummerierten Liste mit "1". Wir können jedoch dies ändern, um von einer bestimmten Zahl aus zu beginnen. Um die Startnummer zu ändern, verwenden Sie das start-Attribut im <ol>-Tag. Beispielsweise:

<!doctype html>
<html>
  <head>
    <title>Beispiel nummerierte Liste</title>
  </head>
  <body>
    <h1>Beispiel nummerierte Liste</h1>
    <ol start="3">
      <li>Element 3</li>
      <li>Element 4</li>
      <li>Element 5</li>
    </ol>
  </body>
</html>

In obigem Code haben wir das start-Attribut auf 3 gesetzt, was bedeutet, dass das erste Element in der nummerierten Liste als "3" nummeriert wird.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man in HTML eine nummerierte Liste mit dem <ol>-Tag erstellt. Wir haben auch gelernt, wie man Elemente zur Liste hinzufügt, den Nummerierungstyp ändert und die Nummerierung von einer bestimmten Zahl aus startet. Mit diesen Kenntnissen können wir auf unseren Webseiten professionell aussehende Listen erstellen.