Das automatische Inhaltsverzeichnis mit Seitenzahlen ist ein sehr nützliches Element zum Strukturieren großer Dokumente. Dank des automatischen Inhalts können die Leser schnell die benötigten Informationen finden und bequem durch das Dokument navigieren. In diesem Artikel werde ich Ihnen erklären, wie Sie ein automatisches Inhaltsverzeichnis mit Seitenzahlen mit HTML und CSS erstellen.
Zunächst müssen Sie die Struktur des Dokuments anhand von Überschriften verschiedener Ebenen (H1, H2, H3 usw.) definieren. Jeder Titel stellt einen neuen Eintrag für das automatische Inhaltsverzeichnis dar. Überschriften können mit Tags erstellt werden oder , um sie ausdrucksvoller und attraktiver zum Lesen zu machen.
Nachdem Sie die Struktur des Dokuments definiert und die Überschriften erstellt haben, können Sie mit der Erstellung des Inhalts beginnen. Dazu müssen Sie die Tag- und CSS-Eigenschaft "counter-increment" verwenden, um die aktuelle Seitennummer zu verfolgen. Jeder Artikel im Inhaltsverzeichnis stellt einen Link zu dem entsprechenden Abschnitt des Dokuments dar. Sie können Links mit einem Tag erstellen, indem Sie Klassen und Stile hinzufügen.
Wie mache ich ein Inhaltsverzeichnis für Seiten mit Zahlen
"- Verwenden Sie die CSS-Eigenschaft "counter-increment", um Werte für Seitenzahlen festzulegen
- Verwenden Sie spezielle CSS-Selektoren, um Seitenzahlen zu stylen
- Fügen Sie Links zum Inhaltsverzeichnis mithilfe des HTML-Tags "" und der Anker-Links hinzu
Skript verbinden
Zum Beispiel, wenn das Skript "table_of_contents" heißt.js" und befindet sich im selben Verzeichnis wie Ihre HTML-Seite, dann innerhalb des Tags Sie müssen den folgenden Pfad zum Skript angeben:
Wenn Sie eine externe Quelle verwenden, um ein Skript zu verbinden, zum Beispiel "https://example.com/table_of_contents.js " dann wird Ihr Tag wie folgt aussehen:
Nachdem Sie das Skript angeschlossen haben, können Sie seine Funktionalität verwenden, um ein automatisches Inhaltsverzeichnis mit Seiten zu erstellen. Dazu müssen Sie die Elemente definieren, die Sie in das Inhaltsverzeichnis aufnehmen möchten, sowie die Seitennummerierung.
Erstellen einer Seitenstruktur
HTML-Header werden durch Tags von bis dargestellt, wobei es sich um die höchste Ebene und um die niedrigste Ebene handelt. Es bietet auch Strukturierbarkeit für Suchmaschinen wie Google, was bei der Verbesserung der Sichtbarkeit Ihrer Seite in den Suchergebnissen hilft.
Zusätzlich können Sie Tags und verwenden, um eine komplexere Seitenstruktur zu erstellen. Das Tag wird verwendet, um den Inhalt einer Seite in semantische Abschnitte zu gruppieren, und um einen einzelnen autarken Artikel oder einen unabhängigen Abschnitt auf einer Seite zu definieren.
| Kennung | Die Beschreibung |
|---|---|
| - | Titel auf verschiedenen Ebenen |
| Gruppieren von Inhalten innerhalb einer Seite | |
| Unabhängiger Inhaltsblock auf einer Seite |
Das Erstellen einer Seitenstruktur macht sie nicht nur für Benutzer lesbar, sondern hilft auch, die Suchmaschinenoptimierung zu verbessern und Inhalte zu organisieren, was besonders für große und komplexe Websites nützlich ist.
Inhaltsverzeichnis generieren
Um zu beginnen, müssen Sie die Abschnittsüberschriften Ihres Dokuments mithilfe von Tags definieren, , und so weiter. Die Überschriften werden als Anker für das Inhaltsverzeichnis verwendet.
Sie können ein Tag verwenden, um ein Inhaltsverzeichnis zu erstellen, und innerhalb dieses Tags können Sie eine Liste mit einem Tag erstellen. Jedes Element in der Liste ist ein Verweis auf den entsprechenden Abschnitt im Dokument.
Um einen Anker-Verweis zu erstellen, müssen Sie das ID-Attribut mit dem gewünschten Wert verwenden. zum Beispiel: . Ein Verweis auf diesen Anker würde folgendermaßen aussehen: .
Sie können CSS verwenden, um die Anker auf der Seite genau zu positionieren. Sie können beispielsweise vor jedem Anker einen kleinen vertikalen Einzug hinzufügen, sodass der entsprechende Titel leicht vom oberen Rand des Browserfensters abweicht.
Wenn Sie das Dokument öffnen, kann der Benutzer nun mit dem erstellten Inhaltsverzeichnis leicht durch das Dokument navigieren. Dies macht die Navigation einfacher und erhöht den allgemeinen Nutzen Ihres Dokuments.
