HTML-Listen: Ungeordnete und geordnete Listen erstellen

Einführung

HTML-Listen sind ein fundamentaler Bestandteil der Webentwicklung und werden verwendet, um zusammengehörige Elemente zu gruppieren und zu organisieren. Sie machen Inhalte lesbarer und zugänglicher. Es gibt zwei Haupttypen von Listen:

Ungeordnete Listen (<ul>): Werden verwendet, wenn die Reihenfolge der Elemente keine Rolle spielt. Diese werden typischerweise mit Aufzählungspunkten dargestellt.
Geordnete Listen (<ol>): Werden verwendet, wenn die Reihenfolge der Elemente wichtig ist. Diese werden typischerweise mit Zahlen dargestellt.

In diesem Lab lernen Sie, wie Sie beide Listentypen erstellen, Elemente zu ihnen hinzufügen und sogar verschachtelte Unterlisten erstellen, um komplexere Strukturen aufzubauen. Am Ende werden Sie eine einzige HTML-Seite haben, die diese Listentypen demonstriert.

Erstellen Sie das ul-Tag für eine ungeordnete Liste

In diesem Schritt erstellen Sie eine ungeordnete Liste. Ungeordnete Listen werden mit dem <ul>-Tag definiert und für Elemente verwendet, bei denen die Reihenfolge keine Rolle spielt.

Suchen Sie zuerst die Datei index.html im Dateiexplorer auf der linken Seite der WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen Sie innerhalb des <body> Ihrer index.html-Datei eine leere ungeordnete Liste hinzu, indem Sie die <ul>- und </ul>-Tags direkt nach der <h1>-Überschrift platzieren.

Ihre index.html-Datei sollte nun wie folgt aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul></ul>
  </body>
</html>

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei. Sie können Ihre Änderungen in der Registerkarte Web 8080 in der Vorschau anzeigen. Zu diesem Zeitpunkt werden Sie noch keine Listenelemente sehen, da wir noch keine hinzugefügt haben.

Fügen Sie li-Tags innerhalb von ul für Listenelemente hinzu

In diesem Schritt fügen Sie Elemente zur ungeordneten Liste hinzu. Jedes Element in einer Liste wird mit dem <li> (list item) Tag definiert. Diese <li>-Tags müssen innerhalb des übergeordneten <ul>-Tags platziert werden.

Fügen wir unserer Einkaufsliste drei Elemente hinzu. Ändern Sie Ihre index.html-Datei, um "Milk", "Bread" und "Cheese" als Listenelemente einzufügen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>
  </body>
</html>

Speichern Sie die Datei und wechseln Sie zur Registerkarte Web 8080, um Ihre Änderungen anzuzeigen. Sie sollten nun eine Liste mit Aufzählungspunkten und den drei Lebensmitteln sehen.

Erstellen Sie das ol-Tag für eine geordnete Liste

In diesem Schritt erstellen Sie eine geordnete Liste. Geordnete Listen werden mit dem <ol>-Tag definiert und verwendet, wenn die Reihenfolge der Elemente wichtig ist, z. B. in einem Rezept oder einer To-Do-Liste. Der Browser nummeriert die Elemente automatisch.

Fügen wir einen neuen Abschnitt für eine To-Do-Liste hinzu. Fügen Sie in Ihrer index.html-Datei eine neue Überschrift <h2>To-Do List</h2> und eine leere geordnete Liste <ol></ol> unterhalb der vorhandenen ungeordneten Liste ein.

Ihre index.html-Datei sollte nun beide Listenstrukturen enthalten:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol></ol>
  </body>
</html>

Speichern Sie die Datei und überprüfen Sie die Vorschau im Tab Web 8080. Sie sehen die neue Überschrift, aber die geordnete Liste ist vorerst leer.

Fügen Sie li-Tags innerhalb von ol für nummerierte Elemente hinzu

In diesem Schritt fügen Sie Elemente zu Ihrer neuen geordneten Liste hinzu. Genau wie bei ungeordneten Listen verwenden Sie das <li>-Tag, um jedes Element zu definieren. Der Browser kümmert sich automatisch um die Nummerierung.

Fügen wir unserer To-Do-Liste drei Aufgaben hinzu. Bearbeiten Sie die Datei index.html und platzieren Sie die folgenden <li>-Elemente innerhalb Ihrer <ol>-Tags.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>Go to the gym</li>
    </ol>
  </body>
</html>

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Sie sehen nun eine nummerierte Liste mit Ihren drei Aufgaben.

Verschachteln Sie ul innerhalb von ol für Unterlisten

In diesem Schritt lernen Sie, wie Sie verschachtelte Listen, auch Unterlisten genannt, erstellen. Dies ist nützlich, um einen Listeneintrag in kleinere, zusammenhängende Punkte aufzuteilen. Sie können eine Liste (<ul> oder <ol>) innerhalb eines <li>-Elements verschachteln.

Fügen wir der Aufgabe "Go to the gym" weitere Details hinzu. Wir fügen eine verschachtelte ungeordnete Liste hinzu, um die Trainingsaktivitäten anzugeben. Tun Sie dies, indem Sie einen neuen <ul>-Block innerhalb des <li>Go to the gym</li>-Elements platzieren.

Aktualisieren Sie Ihre index.html-Datei mit dem folgenden Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Lists</title>
  </head>
  <body>
    <h1>My Grocery List</h1>
    <ul>
      <li>Milk</li>
      <li>Bread</li>
      <li>Cheese</li>
    </ul>

    <h2>To-Do List</h2>
    <ol>
      <li>Pay bills</li>
      <li>Walk the dog</li>
      <li>
        Go to the gym
        <ul>
          <li>Treadmill</li>
          <li>Weights</li>
        </ul>
      </li>
    </ol>
  </body>
</html>

Speichern Sie die Datei und betrachten Sie sie im Tab Web 8080. Sie sehen eine eingerückte, mit Aufzählungszeichen versehene Unterliste unter dem Eintrag "Go to the gym". Dies zeigt, wie Sie komplexere und besser organisierte Inhaltsstrukturen erstellen können.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs!

In diesem Lab haben Sie die Grundlagen der Erstellung von Listen in HTML gelernt. Sie haben erfolgreich:

Eine ungeordnete Liste (<ul>) für Elemente ohne spezifische Reihenfolge erstellt.
Eine geordnete Liste (<ol>) für Elemente erstellt, bei denen die Reihenfolge wichtig ist.
Das Listenelement-Tag (<li>) verwendet, um Elemente zu beiden Listentypen hinzuzufügen.
Eine verschachtelte Liste erstellt, um eine hierarchische Struktur aufzubauen.

Listen sind ein wichtiges Werkzeug zur Organisation von Inhalten und zur Verbesserung der Lesbarkeit Ihrer Webseiten. Sie können sie nun effektiv in Ihren zukünftigen Webprojekten einsetzen.