Erstellen von HTML-Listen mit verschiedenen Stilen

Einführung

In diesem Lab werden die Teilnehmer die Erstellung und Gestaltung von HTML-Listen erkunden, wobei der Schwerpunkt auf verschiedenen Listentypen und ihren Attributen liegt. Das Lab führt die Lernenden durch den Aufbau verschiedener Listenstrukturen, einschließlich geordneter Listen mit numerischer und alphabetischer Nummerierung, ungeordneter Listen mit benutzerdefinierten Markierungsstilen und Beschreibungslisten mit mehreren Einträgen.

Die Teilnehmer beginnen mit dem Aufbau einer standardmäßigen HTML5-Dokumentstruktur und erstellen schrittweise komplexe Listenbeispiele. Sie lernen, wie sie Tags wie <ol>, <ul>, <li> und <dl> verwenden können, um semantische und optisch ansprechende Listenlayouts zu erstellen. Durch Experimentieren mit Listenattributen und verschachtelten Listenstrukturen werden die Schüler praktische Fähigkeiten in der HTML-Listendesignung erwerben und verstehen, wie sie die Organisation des Webseiteninhalts verbessern können.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 93% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Einrichten der HTML-Dokumentstruktur

In diesem Schritt lernen Sie, wie Sie die grundlegende HTML-Dokumentstruktur für Ihre Listen-Demonstration erstellen. HTML-Dokumente haben eine Standardstruktur, die die Grundlage für Webinhalte bildet.

Öffnen Sie die WebIDE und navigieren Sie zum Verzeichnis ~/project. Erstellen Sie eine neue Datei namens lists.html, indem Sie im Dateiexplorer mit der rechten Maustaste klicken und "Neue Datei" auswählen.

Jetzt erstellen wir die grundlegende HTML5-Dokumentstruktur. Geben Sie den folgenden Code in die Datei lists.html ein:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Lists Example</title>
  </head>
  <body>
    <!-- We'll add our lists here in the next steps -->
  </body>
</html>

Lassen Sie uns die wichtigsten Komponenten dieser HTML-Struktur analysieren:

<!DOCTYPE html> deklariert, dass dies ein HTML5-Dokument ist.
<html lang="en"> ist das Wurzelelement mit Sprachangabe.
<head> enthält Metadaten über das Dokument.
<meta charset="UTF-8"> stellt die richtige Zeichenkodierung sicher.
<meta name="viewport"> unterstützt das responsive Design.
<title> legt den Seitentitel fest, der in der Browser-Symbolleiste angezeigt wird.
<body> ist der Bereich, in dem der Hauptinhalt platziert wird.

Beim Anzeigen in einem Webbrowser würde eine leere Seite mit dem Titel "HTML Lists Example" in der Browser-Symbolleiste angezeigt werden.

Anmerkungen: Erfahren Sie mehr über Wie Sie HTML-Dateien in der WebIDE vorschauen können.

Erstellen von geordneten Listen mit numerischen und alphabetischen Typen

In diesem Schritt lernen Sie, wie Sie in HTML geordnete Listen mit den Tags <ol> (geordnete Liste) und <li> (Listenelement) erstellen. Geordnete Listen nummerieren ihre Elemente automatisch und können mit verschiedenen Nummerierungsstilen angepasst werden.

Öffnen Sie die Datei lists.html, die Sie im vorherigen Schritt erstellt haben. Fügen Sie innerhalb des <body>-Tags den folgenden Code ein, um verschiedene Arten von geordneten Listen zu erstellen:

<h2>Numeric Ordered List (Default)</h2>
<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

<h2>Alphabetic Ordered List</h2>
<ol type="a">
  <li>First alphabetic item</li>
  <li>Second alphabetic item</li>
  <li>Third alphabetic item</li>
</ol>

<h2>Uppercase Alphabetic Ordered List</h2>
<ol type="A">
  <li>First uppercase item</li>
  <li>Second uppercase item</li>
  <li>Third uppercase item</li>
</ol>

<h2>Roman Numeral Ordered List</h2>
<ol type="i">
  <li>First roman numeral item</li>
  <li>Second roman numeral item</li>
  <li>Third roman numeral item</li>
</ol>

Lassen Sie uns die verschiedenen Listentypen analysieren:

Die Standard geordnete Liste verwendet numerische Nummerierung (1, 2, 3).
type="a" erstellt eine Kleinbuchstaben-Alphabet-Nummerierung (a, b, c).
type="A" erstellt eine Großbuchstaben-Alphabet-Nummerierung (A, B, C).
type="i" erstellt eine Kleinbuchstaben-Römische-Zahlen-Nummerierung (i, ii, iii).

Beim Anzeigen in einem Webbrowser würden vier verschiedene geordnete Listen mit ihren jeweiligen Nummerierungsstilen angezeigt werden.

Implementierung von ungeordneten Listen mit verschiedenen Markierungsstilen

In diesem Schritt lernen Sie, wie Sie in HTML ungeordnete Listen mit den Tags <ul> (ungeordnete Liste) und <li> (Listenelement) erstellen. Ungeordnete Listen verwenden verschiedene Markierungsstile, um Listenelemente ohne numerische oder alphabetische Reihenfolge anzuzeigen.

Öffnen Sie die Datei lists.html und fügen Sie den folgenden Code nach den vorherigen geordneten Listen hinzu:

<h2>Default Unordered List (Bullet Points)</h2>
<ul>
  <li>First bullet point</li>
  <li>Second bullet point</li>
  <li>Third bullet point</li>
</ul>

<h2>Disc Marker Style</h2>
<ul type="disc">
  <li>Disc marker item</li>
  <li>Another disc marker item</li>
  <li>Third disc marker item</li>
</ul>

<h2>Circle Marker Style</h2>
<ul type="circle">
  <li>Circle marker item</li>
  <li>Another circle marker item</li>
  <li>Third circle marker item</li>
</ul>

<h2>Square Marker Style</h2>
<ul type="square">
  <li>Square marker item</li>
  <li>Another square marker item</li>
  <li>Third square marker item</li>
</ul>

Lassen Sie uns die verschiedenen Markierungsstile für ungeordnete Listen untersuchen:

Die Standard ungeordnete Liste verwendet feste Aufzählungspunkte.
type="disc" erstellt feste kreisförmige Marker (Standard).
type="circle" erstellt hohle kreisförmige Marker.
type="square" erstellt feste quadratische Marker.

Beim Anzeigen in einem Webbrowser würden vier verschiedene ungeordnete Listen mit ihren jeweiligen Markierungsstilen angezeigt werden.

Gestaltung einer benutzerdefinierten Beschreibungsliste mit mehreren Einträgen

In diesem Schritt lernen Sie, wie Sie in HTML Beschreibungslisten mit den Tags <dl> (Beschreibungsliste), <dt> (Beschreibungsterm) und <dd> (Beschreibungsdetails) erstellen. Beschreibungslisten eignen sich hervorragend für die Anzeige von Schlüssel-Wert-Paaren oder Begriffen mit ihren Erklärungen.

Öffnen Sie die Datei lists.html und fügen Sie den folgenden Code nach den vorherigen Listenbeispielen hinzu:

<h2>Programming Languages Description List</h2>
<dl>
  <dt>HTML</dt>
  <dd>A markup language for creating web pages</dd>

  <dt>CSS</dt>
  <dd>A styling language used to design web page appearance</dd>

  <dt>JavaScript</dt>
  <dd>A programming language that adds interactivity to web pages</dd>
</dl>

<h2>Contact Information Description List</h2>
<dl>
  <dt>Name</dt>
  <dd>John Doe</dd>

  <dt>Email</dt>
  <dd>[email protected]</dd>

  <dt>Phone</dt>
  <dd>+1 (555) 123-4567</dd>
</dl>

Wichtige Punkte zu Beschreibungslisten:

<dl> definiert die gesamte Beschreibungsliste.
<dt> repräsentiert den Begriff oder Namen.
<dd> liefert die Beschreibung oder Details.
Mehrere <dd>-Tags können für ein einzelnes <dt> verwendet werden.
Nützlich für Glossare, Metadaten und Schlüssel-Wert-Präsentationen.

Beim Anzeigen in einem Webbrowser würden zwei Beschreibungslisten mit Begriffen und ihren entsprechenden Beschreibungen angezeigt werden.

Experimentieren mit Listenattributen und verschachtelten Listenstrukturen

In diesem Schritt werden Sie fortgeschrittene Listen-Techniken erkunden, indem Sie verschachtelte Listen erstellen und zusätzliche Listenattribute verwenden. Verschachtelte Listen ermöglichen es Ihnen, hierarchischen Inhalt zu erstellen, während Attribute Ihnen helfen können, das Aussehen und das Verhalten von Listen anzupassen.

Öffnen Sie die Datei lists.html und fügen Sie den folgenden Code nach den vorherigen Listenbeispielen hinzu:

<h2>Nested Unordered List</h2>
<ul>
  <li>
    Main Category 1
    <ul>
      <li>Subcategory 1.1</li>
      <li>Subcategory 1.2</li>
    </ul>
  </li>
  <li>
    Main Category 2
    <ul>
      <li>Subcategory 2.1</li>
      <li>Subcategory 2.2</li>
    </ul>
  </li>
</ul>

<h2>Nested Ordered List with Start Attribute</h2>
<ol start="5">
  <li>
    First main item
    <ol type="a">
      <li>First nested item</li>
      <li>Second nested item</li>
    </ol>
  </li>
  <li>
    Second main item
    <ol type="a">
      <li>Third nested item</li>
      <li>Fourth nested item</li>
    </ol>
  </li>
</ol>

<h2>Mixed Nested List</h2>
<ul>
  <li>
    Web Development
    <ol>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>Flexbox</li>
          <li>Grid</li>
        </ul>
      </li>
      <li>JavaScript</li>
    </ol>
  </li>
</ul>

Dargestellte Schlüsselkonzepte:

Verschachtelte Listen können erstellt werden, indem eine neue Liste innerhalb eines Listenelements platziert wird.
Listen können gemischt werden (ungeordnete innerhalb geordneter oder umgekehrt).
Das start-Attribut ermöglicht es, die Startnummer einer geordneten Liste zu ändern.
Das type-Attribut kann verwendet werden, um die Nummerierungs- oder Markierungsstile in verschachtelten Listen zu ändern.

Beim Anzeigen in einem Webbrowser würden drei verschiedene verschachtelte Listenstrukturen mit verschiedenen Stilen und Hierarchien angezeigt werden.

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man HTML-Listen mit verschiedenen Techniken erstellt und gestaltet. Das Lab begann mit der Einrichtung einer Standard-HTML5-Dokumentstruktur und demonstrierte essentielle Elemente wie DOCTYPE, html-, head- und body-Tags, wobei der Schwerpunkt auf richtiger Metadatenverwaltung und Zeichenkodierung lag.

Die praktischen Übungen umfassten die Erstellung verschiedener Arten von geordneten und ungeordneten Listen, einschließlich numerischer und alphabetischer Listenstile. Die Teilnehmer haben Listenattribute und verschachtelte Listenstrukturen untersucht und praktische Erfahrungen in der Gestaltung von strukturiertem HTML-Inhalt mit semantischem Markup gesammelt. Das Lab bot eine umfassende Einführung in HTML-Listenelemente und ermöglichte es den Lernenden, Informationen in Webbereitstellungen effektiv zu organisieren und darzustellen.