Header = div-Element

Der Header jeder einzelner Seite wird meistens mit dem Element div realisiert.

Mit einer Klasse, z. B. header kann man den Header individuell per CSS formatieren.

Dieses div-Element wird dann in allen Unterseiten der Website kopiert.

<div class="header">
[Hier werden alle Bestandteile des Headers kopiert].
</div>

Bestandteile des Headers

Alle Bestandteile des Headers werden innerhalb des div-Elements kopiert.

Link zur Startseite

Meistens oben links. Oft als Logo oder Bilddatei.

Navigationsleiste

Enthält Links zu allen Unterseiten der Website.

Wird immer mit dem Element nav realisiert. Innerhalb von <nav> werden die Links zu den Unterseiten als einzelne Punkte (<li>) einer ungeordneten Liste <ul>. Wir brauchen so viele <li> Elemente, wie die Zahl unserer Unterseiten/Links.

<nav>
<ul>
<li><a href="#">Seite 1</a></li>
<li><a href="#">Seite 2</a></li>
<li><a href="#">Seite 3</a></li>
<li><a href="#">Seite 4</a></li>
</ul>
</nav>

Formatierung der Navigationsleiste per CSS

Die Formatierung der Navigationsleiste erfolgt per CSS.

Beispiel: Vertikale Navigationsleiste

body {
font: normal 1em Helvetica, Arial, sans-serif;
color: black;
}
nav ul {
width: 10em;
padding: 0.8em;
border: 1px solid black;
background-color: silver;
}
nav li {
list-style: none;
margin: 0.4em;
padding: 0.2em;
border: 1px solid gray;
background-color: #eee;
}
nav a {
text-decoration: none;
font-weight: bold;
color: gold;
background-color: royalblue;
}
nav a:focus,
nav a:hover,
nav a:active {
color: royalblue;
background-color: gold;
}

Quelle: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS_Men%C3%BCs2.html

Beispiel: Horizontale Navigationsleiste

nav ul {
text-align: center;
/* weitere Angaben */
}
nav li {
display: inline-block;
/* weitere Angaben */
}
nav a, nav span {
display: block;
width: 8em;
/* weitere Angaben */
}

Quelle: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS_Men%C3%BCs5.html

Tipp

Plane sorgfältig deinen Header und deine Navigationsleiste und kopiere sie als letztes in all deinen Unterseiten.