Medienproduktion: Silvia's Blog

Meine Homepage wird in HTML5 Semantisch codiert.

Verwendete HTML5-Tags:

• <nav>
• <article>
• <header>
• <footer>
• <figure>
• <figcaption>
• <aside>
• <video>

Meine Startseite ist gleichzeitig die Navigation und mit dem <nav>-Tag versehen. Die Links in den einzelnen Wölkchen sind <div>s, die über CSS positioniert wurden.

Weiters gibt es drei verschiedene Header (Tag <header>), je nachdem wie viele Unterseiten von der Seite weggehen. Das Header-Bild wird entsprechend ausgetauscht.

CSS-Auszug:

header.ohnewolken {
    background-image:url(Layout/header.jpg);
    width:800px;
    height:121px;
    margin: 0 auto;
    }

header.zweiwolken {
    background-image:url(Layout/header_2w.jpg);
    ...
    }

header.vierwolken {
    background-image:url(Layout/header_4w.jpg);
    ...
    }

Der Content-Teil steht im Tag <article> und kann später noch in mehrere <sections> unterteilt werden. Die Länge des Contents passt sich entsprechend der Länge des Textes an. Das Hintergrund-Bild stellt eine Textur da, die vertikal wiederholt wird. Die Umsetzung mittels CSS sieht so aus (Auszug):

article {
    position:relative;
    background:url(Layout/textur.jpg) repeat-y center top;
    width:800px;
    margin: 0 auto;
    min-height:300px;
    }

Der Footer (Tag <footer>) ist ein eigenes Bild, welches den Rahmen rund um die Homepage komplett macht und nach unten abschließt.

Bilder werden mit dem <figure>-Tag ausgestattet. Eine entsprechende Bild-Beschreibung gelangt in den <figcaption>-Tag und wird mittels CSS formatiert.

Für Videos wird der <video>-Tag verwendet.

Mit dem <aside>-Tag werden bestimmte Textteile hervorgehoben (zB Hinweise, Tipps).

Ich finde die graphische Gestaltung sehr gelungen, auch die Navigation in Form von Wölkchen passt gut zum Gesamtkonzept der Homepage.