Heute möchte ich einmal einen Einstieg in HTML5 liefern und das Ganze etwas optisch verschönern. Dies machen wir mithilfe eines CSS3 Schlagschattens. Im letzten Teil haben wir bereits angefangen unsere Seite zu strukturieren und zwar mit sogenannten Div Container. Hier könnt ihr das Ganze noch einmal nachlesen. Heute werden wir die Container vom letzten Mal allerdings wieder entfernen, denn in HTML5 ist es möglich, seine Seite mittels neuer Tags aufzubauen. Natürlich brauchen wir weiterhin DIV Container, sodass dieses Wissen alles andere umsonst ist.

Ich habe lediglich die drei großen Bereiche Header, Content und Footer lediglich an HTML5 angepasst. Es gibt beispielsweise die Tags header und footer. Diese werden in < > geschrieben und sind ansonsten sicherlich selbsterklärend. Diese ersetzen deshalb unsere anfänglichen Container div id=”header” und div id=”footer”. Für den Content Bereich habe ich ein section Tag genommen. Zugegeben, ich bin mir nicht sicher, ob die Entwickler von HTML5 genau dieses Element für einen Inhaltsbereich vorgesehen habe, aber das Ergebnis ist das selbe und sieht gut aus.

Desweiteren habe um die Hauptbereiche einen weiteren Container gesetzt. Dies macht man eigentlich bei den meisten Seiten, um dem Ganzen eine Breite und eine Ausrichtung zu geben. Dieser Div Container ist quasi eine Ummantelung des Ganzen und wird in der Regel wrapper genannt.

Mein Code sieht nun folgendermaßen aus:

	
Hallo ich bin der Header
 
 


	
Content Bereich 1
	
Content Bereich 2
 

 	
 

Was ich noch eingefügt habe sind Kommentare. Diese dienen dazu, den Code für sich selber als Entwickler übersichtlicher zu gestalten. Kommentare werden natürlich im Browser nicht dargestellt und sind lediglich im Code zu sehen. Allerdings kann man sich ja bekanntlich jeden Code einer Seite über die rechte Maustaste ansehen, deshalb würde ich mich dann doch wirklich nur auf das beziehen, worum es geht und nicht direkt private Sachen hinein schreiben, was allerdings auch gar nicht so sinnvoll ist. Kommentare lassen sich in HTML also in schreiben.

Kommen wir nun zu der CSS Datei, denn auch hier hat sich einiges getan. Wie letzte mal bereits erklärt, lassen sich Divs über eine vorgeschriebene # ansprechen. Durch die neuen HTML5 Tags müssen wir dieses Zeichen weglassen. Aber natürlich nur bei diesen. Den Wrapper sprechen wir trotzdem mit #wrapper an. Diesem wollen wir eine Breite von 960 Pixel geben und mittig des Browserfenster ausrichten. Dies gelingt uns durch den Befehl margin: 0 auto;
Kurz zur Erklärung. Die 0 steht für die Ausrichtung nach oben und unten. Sie ist also nicht vorhanden. Das auto bezieht sich auf die linke und rechte Positionierung. Durch diesen Befehl wird der Container automatisch in die Mitte gesetzt und da alle weiteren vom Wrapper ummantelt werden, liegt unsere komplette Seite nun genau da, wo wir sie gerne hinhaben möchten.

Die CSS Datei sieht nun so aus:

body {
	background-color: #fff;
	margin-top: 10px;
	padding: 0;
}

* {
	margin-top: 0;
	padding: 0;
}


h1 {
	color: #ff0018;
}

h3 {
	color: #000;
}

#wrapper {
	margin: 0 auto;
	width: 960px;
	-webkit-box-shadow: 0px 3px 8px #000000;	/* webkit browser */ 
	-moz-box-shadow: 0px 3px 8px #000000;	/* firefox */ 
	box-shadow: 0px 3px 8px #000000;
}

header {
	height: 150px;
}

section {
	height: 350px;
}

footer {
	height: 100px;
}

Sehen wir uns den Wrapper einmal genau an

#wrapper {
	margin: 0 auto;
	width: 960px;
	-webkit-box-shadow: 0px 3px 8px #000000; /* webkit browser */ 
	-moz-box-shadow: 0px 3px 8px #000000;	/* firefox */ 
	box-shadow: 0px 3px 8px #000000;
}

Wir haben die mittige Ausrichtung, die Breitenangabe und drei Zeilen, die sehr komisch aussehen. Zwischen /* und */ steht wieder ein Kommentar. Die Kommentare in HTML und CSS sind also unterschiedlich.
0px Das ist die Horizontale. Bei 0 wird der Schatten also gleichmäßig nach Links und Rechts verteilt.
3px Das ist die Vertikale. Bei positiven Werten befindet sich der Schatten unterhalb des gewünschten Containers, bei negativen oberhalb.
8px Diese Angabe ist verantwortlich für die Unschärfe.
#000000 Das ist die Farbe, die der Schatten haben wird, also Schwarz in unserem Fall.
; Ende vom Befehl

Das Ganze steht drei Mal dort, weil es angepasst werden muss für die unterschiedlichen Browser. Die Browser interpretieren CSS3 anders, vor allem die älteren, falls man sein Opera etc. nicht regelmäßig updatet. Irgendwann wird das sicherlich vereinheitlicht, aber bis dahin sollte man noch die ein oder andere Anpassung vornehmen, sei es beim Schlagschatten in CSS3, bei den Animationen, zu denen wir auch bald kommen oder noch an der ein oder anderen weiteren Stelle. Für diejenigen, die nicht so lange Zahlen verändern wollen, bis sie den perfekten Schatten gefunden haben, können auf webmaster-elite.de ganz einfach einen generieren.

Das war es auch schon, gar nicht so schwer oder ?