====== 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.

<code>

<div class="header">

[Hier werden alle Bestandteile des Headers kopiert].

</div>

</code>

===== 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.

<code><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></code>

===== Formatierung der Navigationsleiste per CSS =====

Die Formatierung der Navigationsleiste erfolgt per CSS. 

==== Beispiel: Vertikale Navigationsleiste ====


<code>

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;
}

</code>

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

=== Beispiel: Horizontale Navigationsleiste ===

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

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.