Wie kann ich Bibelstellen in einer HTML-Seite automatisch nummerieren?
- Grundidee der automatischen Nummerierung
- Beispiel für HTML-Struktur
- CSS für die Darstellung der Nummer
- JavaScript zur automatischen Nummerierung
- Kompletter Beispielcode
- Erweiterungsmöglichkeiten
Wenn Sie in einer HTML-Seite Bibelstellen wie Verse oder Absätze aus der Bibel auflisten möchten und diese automatisch nummerieren wollen, gibt es verschiedene Möglichkeiten, dies zu realisieren. Eine elegante Herangehensweise ist die Nutzung von JavaScript, um die Nummerierung dynamisch einzufügen, sobald die Seite geladen wird.
Grundidee der automatischen Nummerierung
Sie markieren jede Bibelstelle im HTML-Code mit einer bestimmten CSS-Klasse, beispielsweise bibelstelle. Beim Laden der Webseite durchsucht ein kleines JavaScript-Skript alle diese Elemente und versieht sie nacheinander mit einer Nummer. Diese Nummer wird meist vor der Bibelstelle angezeigt und kann entweder in den Text integriert sein oder über CSS positioniert werden.
Beispiel für HTML-Struktur
Jede Bibelstelle wird in einem eigenen <div> oder <p> mit der Klasse bibelstelle gesetzt. Beispiel:
<div class="bibelstelle">Johannes 3,16: Denn also hat Gott die Welt geliebt...</div>CSS für die Darstellung der Nummer
Mit CSS kann man eine feste Breite am linken Rand reservieren, damit die Nummer links vom Text erscheint und optisch hervorsticht. Das macht den Text übersichtlicher und die Nummerierung leichter lesbar.
JavaScript zur automatischen Nummerierung
Im <script>-Block läuft ein kleines Skript, das alle Elemente mit der Klasse bibelstelle selektiert, sie durchläuft und vor jedem Element eine neue Nummer hinzufügt. Dieses Element mit der Nummer bekommt beispielsweise die Klasse bibelnummer, welche per CSS formatiert wird.
Kompletter Beispielcode
Hier sehen Sie den gesamten Code, der die automatische Nummerierung ermöglicht. Fügen Sie diesen in Ihre HTML-Seite ein und definieren Sie Ihre Bibelstellen in den entsprechenden <div class="bibelstelle">-Tags:
Erweiterungsmöglichkeiten
Diese Grundlösung kann weiter angepasst werden, zum Beispiel um Unterteilungen in Kapitel oder Abschnitte einzufügen, verschiedene Nummernsysteme (römische Zahlen, Buchstaben) zu verwenden oder die Nummerierung dynamisch beim Einfügen neuer Bibelstellen zu aktualisieren.
Falls Sie serverseitige Technologien verwenden (z.B. PHP, Python), könnten Sie die Nummerierung auch schon beim Generieren der Seite durchführen. Mit reinem HTML ist die automatische Nummerierung ohne Skript jedoch nicht möglich.