HTML Grundkurs: Navigation erstellen
In diesem Tutorial zeigen wir dir, wie du im HTML eine Navigationsleiste erstellst.
Die Navigationsleiste
Die Navigationsleiste ist ein sehr wichtiges Element einer Webseite. Durch sie bekommen die Besucher eine schnelle Übersicht über die Struktur einer Webseite und können sich so ganz einfach von Seite zu Seite navigieren.
Für die Navigationsleiste verwendet man im HTML üblicherweise eine unsortierte Liste. In seltenen Fällen werden aber auch sortierte Listen verwendet.
Wir werden heute gemeinsam eine Menüstruktur für unsere HTML Grundkurs Webseite erstellen. Mit der Navigationsleiste möchten wir erreichen, dass wir uns im weiteren Verlauf des HTML Tutorial ganz einfach von Seite zu Seite klicken können. Jede Seite in unserem Menü sollte dabei einem wichtigen HTML Tutorial entsprechen.
Navigationsleiste erstellen
Öffne als erstes deine index.html Datei. Entferne dann den Link, der sich vom „Links erstelle“ Tutorial noch in deinem Header befindet. Anstelle des Links erstellst du dort eine unsortierte Liste.
- Startseite
- Text formatieren
- Bilder hinzufügen
- Links erstellen
- Listen erstellen
- Tabellen erstellen
- Formulare erstellen
Menüpunkte mit HTML-Datei verknüpfen
Nun hast du eine umsortierte Liste mit verschiedenen Menüpunkten erstellt. Um deine Navigationsleiste funktionsfähig zu machen, musst du noch die verschiedenen Menüpunkte mit der jeweiligen HTML-Datei verknüpfen. Das bedeutet, dass du nun für jeden Menüpunkt einen Link erstellen musst, der zur passenden HTML-Datei führt.
Da die HTML-Dateien, dir wir soeben mit den einzelnen Menüpunkten verknüpft haben, noch nicht existieren, wird unsere Navigationsleiste im Moment noch nicht funktionieren. Im nächsten HTML Grundkurs Tutorial werden wir daher diese HTML-Dateien erstellen und unsere Navigationsleiste funktionsfähig machen.
Die index.html Datei
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
Das ist der erste Textabschnitt
Das ist der zweite Textabschnitt
b-Tag: Teststrong-Tag: Test
i-Tag: Test
em-Tag: Test
u-Tag: Test
s-Tag:


YouTube
- Eintrag 01
- Eintrag 02
- Eintrag 03
- Eintrag A
- Eintrag B
- Eintrag C
- Eintrag 04