Little Boxes – die HTML-Basics

Die Navigation als ungeordnete Liste mit Hyperlinks

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Navigation innerhalb einer Website ist im Prinzip nichts anderes als eine Aufzählung von Hyperlinks. In HTML lässt sich daher eine Navigation als ungeordnete Liste notieren.

Transkript

Eine Navigation ist auf Webseiten ein wichtiges Merkmal, denn oft gibt es ja nicht nur eine Seite, sondern mehrere Seiten zusammen, die dann eine Website bilden. Und damit der Besucher gut von einer Seite zur anderen kommt, gibt es eine Navigation so, wie hier zum Beispiel diese hier oben. Navigationen sind im Quelltext. Wenn ich hier auf Element untersuchen klicke, dann sehen Sie das hier schon. Eine ungeordnete Liste mit Hyperlinks darin. Sie sehen oben li li. Das Ganze ist eine ungeordnete Liste, die per CSS gestaltet und nebeneinander gestellt wird. Aber im HTML, das Fundament für diese Navigation, wird eine ungeordnete Liste sein. Im Quelltext hier im Editor index.html, die Startseite, gibt es schon einen Bereich, mit dem HTML 5-Element nav *id="navibereich" Hier soll die Navigation rein. Und ich baue hier schon mal eine ungeordnete Liste. So. Und in dieser Liste kommen zwei li-Elemente. Die Navigation soll im Moment nur zwei Elemente haben. Das erste heißt Startseite. Und der geht auf die index-Seite, so, auf der wir schon sind. So, Startseite. Die zweite Seite soll heißen Kontakt. Und da es die Kontaktseite noch nicht gibt, baue ich hier quasi einen Platzhalter ein und das ist das Rautezeichen. So, das können wir dann später ändern, wenn es die Kontaktseite gibt. So vermeidet man, dass wir darauf klicken versehentlich und dann gibt's 'ne Fehlermeldung, weil es die Seite noch nicht gibt. Aber mit diesem Rautezeichen darin, mit dem Doppelkreuz, verhält sich das wie ein echter Hyperlink. So, ich gehe in den Browser, lade das neu und Sie sehen, hier gibt es die blaue Startseite. Wenn ich darauf klicke, bleibe ich auf dieser Seite. Und Kontakt, das ist mit dem Platzhalter, da kann ich ruhig darauf klicken, da passiert nichts, außer dass oben hier das Doppelkreuz an die Adresse gehängt wird. Das ist unsere Mini-Navigation, soweit schon mal fertig. Eine ungeordnete Liste mit zwei Listenelementen und darin jeweils einem Hyperlink. Ich kann hier jetzt noch title-Attribute dazu schreiben und zum Beispiel sagen "Zur Startseite". Und bei Kontakt dann später "Schreiben Sie uns eine Nachricht." So könnte man das machen. So, und dann erscheinen hier im Browserfenster, wenn ich das neu lade, und man bleibt darauf, Zur Startseite, was ziemlich eindeutig ist, und hier noch eine freundliche Nachricht. Fertig ist die Navigation.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 3 min (41 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!