Wie gestalte ich eine Webseite mit HTML 5 – Teil 2

Im 1. Teil haben wir uns ja bereits um die Seitenstruktur gekümmert. Nun fangen wir an, dem Ganzen ein Aussehen zu verpassen mit Hilfe von CSS3. Zur Zeit gibt es 4 große Rendering Bibliotheken, die das Verwenden von CSS3 schon ermöglichen. Das wären Webkit für Safari und Google Chrome, Presto für Opera und Gecko für Mozilla Firefox. Der Internet Explorer wird ab Version 9  mit Trident auch endlich im Internet von Heute ankommen.

Zur Zeit kocht jede Rendering Bibliothek noch ihr eigenes Süppchen bei der Umsetzung der CSS3 Spezifikationen. Deshalb muss man die CSS3 Tags mit einem Präfix versehen. Bei Webkit -webkit, bei Presto -o und bei Gecko -moz. Bei der Umsetzung von CSS3 ist Webkit zur Zeit am weitesten. Für Firefox gibt es die in diesem Tutorial verwendeten CSS Transitions noch nicht. Deshalb sind einige Effekte nur mit der Firefox Beta möglich. Die CSS3 Animation funktioniert nur mit Webkit Browsern.

In diesem Tutorial werde ich noch nicht das CSS3 Font-Face Feature verwenden, sondern Google Webfonts. Diese binde ich oben in meinem Dokument ein. Des weiteren lege ich noch für meinen HTML body ein Hintergrundbild und eine Farbe fest. Hierfür verwende ich das neue rgba Farbmodell. Die ersten drei Parameter sind die rgb Farbwerte und der letzte der Alphakanal. Continue reading

Wie gestalte ich eine Webseite mit HTML 5 – Teil 1

Im vorangegangen Tutorial habe ich schon ein paar Grundlagen in HTML5 vermittelt. Ich möchte in diesem Tutorial erst einmal nur auf die Semantik eingehen. Ziel ist es, einen Blog zu designen, der in etwa so aussehen wird:

In diesem Tutorial kümmern wir uns erstmal die Seitenstruktur. Das nächste Tutorial wird sich mit dem Gestalten der Seite mit Hilfe von CSS3 kümmern. In einem dritten Tutorial werden wir versuchen den Blog so anzupassen, dass er möglichst auch abwärtskompatibel ist.

Fangen wir also an. Die Seite ist untergliedert in einen Header, der auch die Seitennavigation beinhaltet, einem Inhaltsbereich, der in zwei Spalten geteilt ist und dem Footer, wo Copyright oder ähnliches später drinstehen soll.

Wie schon im vorangegangen Post erwähnt ist unser HTML head durch HTML5 sehr aufgeräumt. Das Attribute lang im html Tag weißt auf die verwendete Sprache im Dokument hin, das Attribut charset im meta Tag gibt das Encoding der Seite an. Continue reading