x

HTML Grundkurs: Navigation erstellen

In diesem Tutorial zeigen wir dir, wie du im HTML eine Navigationsleiste erstellst.

Play Video

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.

<ul> <li>Startseite</li> <li>Text formatieren</li> <li>Bilder hinzufügen</li> <li>Links erstellen</li> <li>Listen erstellen</li> <li>Tabellen erstellen</li> <li>Formulare erstellen</li> </ul>

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.

<ul> <li> <a href="./index.html">Startseite</a> </li> <li> <a href="./text-formatieren.html">Text formatieren</a> </li> <li> <a href="./bilder-hinzufuegen.html">Bilder hinzufügen</a> </li> <li> <a href="./links-erstellen.html">Links erstellen</a> </li> <li> <a href="./listen-erstellen.html">Listen erstellen</a> </li> <li> <a href="./tabellen-erstellen.html">Tabellen erstellen</a> </li> <li> <a href="./formulare-erstellen.html">Formulare erstellen</a> </li> </ul>


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

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.3, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital HTML Grundkurs."> <meta name="keywords" content="html, grundkurs, tutorial, youtube, sifa digital"> <title>Index - HTML Grundkurs</title> </head> <body> <header> <ul> <li> <a href="./index.html">Startseite</a> </li> <li> <a href="./text-formatieren.html">Text formatieren</a> </li> <li> <a href="./bilder-hinzufuegen.html">Bilder hinzufügen</a> </li> <li> <a href="./links-erstellen.html">Links erstellen</a> </li> <li> <a href="./listen-erstellen.html">Listen erstellen</a> </li> <li> <a href="./tabellen-erstellen.html">Tabellen erstellen</a> </li> <li> <a href="./formulare-erstellen.html">Formulare erstellen</a> </li> </ul> </header> <div> <h1>Überschrift 1</h1> <h2>Überschrift 2</h2> <h3>Überschrift 3</h3> <h4>Überschrift 4</h4> <h5>Überschrift 5</h5> <h6>Überschrift 6</h6> <p>Das ist der erste Textabschnitt</p> <p>Das ist der zweite Textabschnitt</p> b-Tag: <b>Test</b> <br> strong-Tag: <strong>Test</strong> <br><br> i-Tag: <i>Test</i> <br> em-Tag: <em>Test</em> <br><br> u-Tag: <u>Test</u> <br> s-Tag: <s>Test</s> <br><br> <img id="katze" src="./bilder/katze_beim_markt.jpg" alt="Foto von einer Katze"> <br><br> <img src="https://www.sifa-digital.de/wp-content/uploads/2017/01/html_grundkurs_video_03_aufbau_einer_html-datei.jpg" alt="Thumbnail HTML Grundkurs Video 03"><br><br> <a href="https://www.youtube.com/">YouTube</a><br><br> <ol> <li>Eintrag 01</li> <li>Eintrag 02</li> <li>Eintrag 03 <ul> <li>Eintrag A</li> <li>Eintrag B</li> <li>Eintrag C</li> </ul> </li> <li>Eintrag 04</li> </ol> </div> <footer></footer> </body> </html>

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: