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>
Alle Bestandteile des Headers werden innerhalb des div-Elements kopiert.
Meistens oben links. Oft als Logo oder Bilddatei.
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>
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
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
Plane sorgfältig deinen Header und deine Navigationsleiste und kopiere sie als letztes in all deinen Unterseiten.
s7inf:stand