Das IMG Element / Pflichtangaben [Brecht Wiki]

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

~~SLIDESHOW~~

<img src="selfhtml.png" alt="Selfhtml" />

alt=alternative Der Alternativtext, der angezeigt wird, wenn das Bild nicht geladen werden kann.

src=source Die Referenz der Bilddatei.

Dateiname + Erweiterung
Pfad des Bildes, wenn nicht im gleichen Verzeichnis

Diese Attribute müssen immer vorhanden sein.

Diese Angaben können verwendet werden, um das Layout der Seite besser zu kontrollieren.

<img src="Hund.gif" width="104" height="90" alt="Hund"/>

width=Breite

height=Höhe

In pixels oder %

Immer in Relation zu der Originaldatei zu verwenden.

<img src="Hund.gif" width="104" height="90" alt="Hund" align="left"/>

align=Ausrichtung

Kopiere die Datei img.html in dein Laufwerk
Bearbeite die Datei und füge ein eigenes Bild hinzu. Achte, dass alle Attribute richtig sind
Kopiere die Datei mit deinem Name in austausch_alle/Toufexis

s7inf/bilder.txt
Zuletzt geändert: 2016/01/25 22:17
von 127.0.0.1

Header = div-Element

Bestandteile des Headers

Link zur Startseite

Navigationsleiste

Formatierung der Navigationsleiste per CSS

Beispiel: Vertikale Navigationsleiste

Beispiel: Horizontale Navigationsleiste

Tipp

Das IMG Element / Pflichtangaben

Das IMG Element / Optionale Angaben

Höhe und Breite

Ausrichtung

Aufgabe

Brecht Wiki

Bestandteile des footer