Mit HTML5 zur eigenen Webseite

22. August 2010 // Michael Lohmann // Kommentare: 0

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-Weibseite 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 überlicherweise 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.

Bleiben Sie uns treu!

Seite durchsuchen