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>

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.

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