| (Kommentare: 3)

Webdesign Lohmann | modern webdesign - Mit HTML5 zur eigenen Webseite

Auch wenn HTML5 noch nicht in der finalen Version vorliegt, ist es mittlerweile einsatzbereit. Mit HTML5 kommen Neuerungen, die die Arbeit als Webdesigner grundlegend verbessern und vereinfachen. In diesem Tutorial zeige ich, wie das Grundgerüst einer HTML5-Webseite erzeugt wird.

HTML5-Webseite erstellen

Die Grundstruktur einer HTML5-Webseite können wir problemlos in einem ganz gewöhnlichen Code-Editor erstellen. Wir gehen hierzu wie folgt vor:

Wir erstellen ein neues Textdokument und speichern dieses mit der Dateiendung ".html" und der Codierung UTF-8 ab. Nun fügen wir dem Dokument die Dokumenttypdeklaration für HTML5 hinzu, die es als HTML5-Webseite kennzeichnet:

<!doctype html>

Unterhalb der Dokumenttypdeklarartion gibt es nur noch die eigentliche Webseite. Dieser Bereich des Dokumentes ist in zwei HTML-Tags eingeschlossen:

<html>
</html>

Falls gewünscht, können wir diesem Element mittels JavaScript später etwa eine mouseover-Verhalten zuweisen.

Hinter das öffnende <html>-Tag gehört der <head>-Abschnitt der Seite. Da die Dokumenttypdeklaration keinerlei Angaben zur verwendeten Codierung beinhaltet, fügen wir diesen Abschnitt jetzt die benötigten Informationen hinzu:

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Außerdem können wir im <head>-Abschnitt der Seite nach wie vor Scripte unterbringen und den Titel des Dokumentes definieren:

<title>Webseiten mit HTML5 erstellen</title>

Nicht zuletzt sollten wir noch einen Verweis auf die CSS-Stylesheets unterbringen:

<style type="text/css">
     /* CSS-Code oder Link zum Code einfügen */
</style>

Der <body>-Abschnitt der Webseite ist wie gewohnt in den <body>-Tag eingeschlossen. Im Moment sieht unser Dokument im Quelltext (vereinfacht) etwa so aus:

<!doctype html>
<html>
	<head></head>
	<body></body>
</html>

Die eigentlichen Inhalte der HTML5-Webseite werden in den beiden <body>-Tags eingeschlossen sein.

Wir nutzen jetzt konsequent semantische Tags aus HTML5. Direkt hinter dem öffnenden <body>-Tag erstellen wir jetzt die Kopfzeile der Seite.

<header>
	<h1>Willkommen auf unserer HTML5-Webseite</h1>
</header>

Auf das <header>-Element der Seite können wir die Navigation folgen lassen. Erfassen wir die einzelnen Links in einer nicht nummerierten Liste und schließen wir diese Liste in <nav>-Tags ein:

<nav>
	<ul>
		<li>Startseite</li>
		<li>Kontakt</li>
		<li>Impressum</li>
	</ul>
</nav>

Der nächste Abschnitt unserer Seite ist zwischen zwei <section>-Tags enthalten und besteht üblicherweise aus einer Überschrift und einem Artikel:

<section>
	<h1>Der erste Artikel</h1>
	<article>
    	<p>Hier steht der Fließtext des Artikels</p>
    </article>
</section>

Jede HTML5-Webseite verfügt üblicherweise eine Fußzeile, die direkt auf das schließende <section>-Tag folgt:

<footer>
	<p>Hier steht der Inhalt der Fußzeile</p>
</footer>

Vergessen wir nicht die schließenden </body> und </html>-Tag, um die Konformität des Quelltextes zu gewährleisten:

</body>
</html>

Als Letztes gilt es, die CSS-Regeln für die jeweiligen Elemente unserer HTML5-Webseite zu definieren:

header {
	display:block;
	font-size: 36px;
	font-weight: bold;
	color: #f00;
}

Alle aktuellen Webbrowser, mit Ausnahme des Internet Explorer in der neusten Version 8, beherrschen bereits hinreichend viel HTML5, um komfortables Surfen mit neuen Effekten zu erlauben. Ältere Generationen des Internet Explorers, einschließlich der Version 8, wissen mit HTML5 nicht anzufangen. Diesen Webbrowsern können wir mittels JavaScript leicht auf die Sprünge helfen.


Kommentare lesen

Regine

Mit ganz herzlichem Dank - auch mit copy & paste kann man lernen, wenn es anders nioch nicht klappt. Ich bin glücklich, Ihre Seite gefunden zu haben!
Regine

Webmaster

Html5 ist 100 % für die Mozilla Firefox gemeinde. Jemand der mit dem IE, Opera, usw. unterwegs ist wird davon nicht sehen. Wozu also der Aufwand ?

Michael Lohmann

@webmaster,

leider kann ich die Aussage nicht teilen. Grundsätzlich wird man von HTML5 so und so nicht viel sehen, ausser man schaut sich den Quelltext an. Man darf HTML5 nicht mit CSS3 verwechselt. HTML5 ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. CSS3 hingegen ist eine deklarative Sprache für Stilvorlagen von strukturierten Dokumenten. Durch den Einsatz von HTML5 wird der Quellcode des Dokumentes übersichtlicher und für den Browser einfacher zu lesen. Welche Befehle von den einzelnen Browsern unterstützt wird, kann man unter http://fmbip.com/litmus/ vergleichen. Zur Frage "Wozu also der Aufwand?" - um zukunftsreicher zu sein und dem User ein semantischen Dokument zu liefern, welchen mit modernen Browser, ob für den Desktop- oder mobilen Einsatz lesbar und funktionsfähig ist.

Chris

Ich habe auf meinem Blog ein Schritt für Schritt-Tutorial zu responsive HTML5-Webseiten mit CSS3-Features erstellt. Bei Interesse schaut doch einfach mal vorbei: http://www.lingulo.com/de/tutorials/css/how-to-build-a-html5-website-from-scratch


Einen Kommentar schreiben

Was ist die Summe aus 9 und 1?

Zurück