Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » Websites nachbauen – Schritt für Schritt » 3-Spalten-Layout mit CSS erstellen » Bereiche über HTML5 festlegen

Bereiche der Website über HTML5-Elemente festlegen

Durch die neuen HTML5-Elemente können wir die Bereiche, die früher ohne Bezug zum Inhalt immer als <div> gekennzeichnet wurden, jetzt mit den entsprechenden HTML5-Befehlen logisch auszeichnen.

Auf der Website haben wir einen Kopfbereich (<header>), 2 Bereiche für Steuerung (<nav>), Inhalt (<section>), einen Seitenbereich mit weiterführendem Inhalt bzw. Bildern (<aside>) und einen Fußbereich (<footer>).

Somit packen wir nun die einzelnen Bereiche in die neuen HTML5-TAGs:

  • <header>
  • <nav>
  • <section>
  • <aside>
  • <footer>

Um unseren eigentlichen Inhalt kommt der TAG <section>

<section>
<h1>Fennek - Wüstenläufer</h1>

<p>Der Fennek bzw. der Wüstenfuchs ...
...

</section>

Um die Bildersammlung kommt, da diese den Inhalt ergänzt, der HTML-TAG <aside> und der Textinhalt „Bildersammlung“ wird mit <p> und <b> ausgezeichnet.

<aside>
<p><b>Bildersammlung:</b>
…
</p>
</aside>

Die Steuerung links erhält nun das entsprechende Element für Steuerungen (Navigation) – das <nav>-Element. Innerhalb des <nav>-Elements fehlen uns noch die für Steuerungen typischen HTML-Befehle <ul> und <li> und der Befehl für die Links „<a href="">“.

<nav>
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">über diese Website</a>
      <ul>
        <li><a href="einzelteile.htm">Einzelteile</a></li>
        <li><a href="design-verwenden.htm">Design verwenden</a></li>
      </ul>
    </li>
  </ul>
</nav>

Die Steuerung oberhalb, die sich über die komplette Breite erstreckt, ist wieder ein Fall für <nav>. Diese wird in derselben Art aufgebaut wie unsere Steuerung links.

<nav>
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">Vorstellung</a></li>
    <li><a href="einzelteile.htm">Einzelteile</a></li>
  </ul>
</nav>

Wenn wir uns die Ausgabe im Browser ansehen, sehen wir nun die typischen blauen Unterstreichungen und dass die Listenpunkte untereinander angeordnet dargestellt werden.

Steuerung über <nav>-HTML5-Befehl
Steuerung über <nav>-HTML5-Befehl

Noch sind die einzelnen Punkte in der Steuerung untereinander. Dies wird sich später ändern, wenn wir über CSS das Design nach unseren Wünschen anpassen und die Punkte nebeneinander anzeigen lassen.

Um die 2 unterschiedlichen nav-Bereiche über CSS ansprechen zu können, nutzen wir das ID-Attribut und vergeben die Namen „steuerungoben“ und „steuerunglinks“.

Der komplette HTML-Code für die 2 Navigationsbereiche sieht dann wie folgt aus:

<nav id="steuerungoben">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">Vorstellung</a>
    <li><a href="einzelteile.htm">Einzelteile</a>
  </ul>
</nav>

<nav id="steuerunglinks">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">über diese Website</a>
      <ul>
        <li><a href="einzelteile.htm">Einzelteile</a></li>
        <li><a href="design-verwenden.htm">Design verwenden</a></li>
      </ul>
    </li>
  </ul>
</nav>

Jetzt kommen wir in den Kopfbereich. Auch dort gibt es Links. Möchte man es extrem sauber machen, kann dort eine weitere <ul>-Liste erstellt werden. Macht man es sich einfach, werden die Elemente in einen Absatz (<p>) gepackt und die Links gesetzt.

Über den Links gibt es das Motto der Website, das später sehr groß angezeigt wird. Trotzdem ist das keine Überschrift! Wir packen es in einen Absatz (<p>) und nutzen den HTML-Befehl <strong>, um es hervorzuheben.

Um den Kopfbereich kommt nun das neue HTML-Element <header>. Der komplette HTML-Quellcode für den Kopfbereich:

<header>
  <p>
    <strong>Wüstenläufer</strong>
  </p>
  <p>
    <a href="kontakt.htm">Kontakt</a><br />
    <a href="impressum.htm">Impressum</a>
  </p>
</header>

Als letztes kommt der Fußbereich. Hier kommt das HTML5-Element <footer> zum Einsatz. Der Inhalt selber kommt in ein Absatz-Element. Der Quellcode dazu:

<footer>
  <p>© www.fennek.mobi</p>
</footer>

Nun haben wir die Seite sauber strukturiert und alle Elemente mit den entsprechenden strukturierenden HTML-Befehlen versehen.

Unser kompletter HTML-Code für das 3-Spalten-Layout

Hier noch der komplette HTML-Quellcode der Startseite mit allen oben durchgeführten Schritten:

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <title>Fennek und seine Umwelt – Beispielseite HTML5</title>
    <meta name="description" 
          content="160 Zeichen zum Beschreiben des Inhalts">
    <link href="design.css" rel="stylesheet">
</head>

<body>

<header>
  <p>
    <strong>Wüstenläufer</strong>
  </p>
  <p>
    <a href="kontakt.htm">Kontakt</a><br />
    <a href="impressum.htm">Impressum</a>
  </p>
</header>

<nav id="steuerungoben">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">Vorstellung</a></li>
    <li><a href="einzelteile.htm">Einzelteile</a></li>
  </ul>
</nav>

<nav id="steuerunglinks">
  <ul>
    <li><a href="index.htm">Startseite</a></li>
    <li><a href="ueber-die-website.htm">über diese Website</a>
      <ul>
        <li><a href="einzelteile.htm">Einzelteile</a></li>
        <li><a href="design-verwenden.htm">Design verwenden</a></li>
      </ul>
    </li>
  </ul>
</nav>

<aside>
<p><b>Bildersammlung:</b></p>
Fennek schlafend
Fennek schläft noch immer
Fenneks sind Nachts wach
</aside>

<section>
<h1>Fennek - Wüstenläufer</h1>

<p>Der Fennek bzw. der Wüstenfuchs ist ein Wildhund mit extrem großen Ohren, 
die dem Wärmeausgleich dienen. Die Ohren sind ca. 15 cm lang - bei einer 
Gesamtläge von ca. 40 cm ist das proportional beachtlich.</p>

<p>Lebt gerne im Sand sprich in Wüsten und schläft tagsüber.</p>

<h2>Mahlzeiten des Fennek</h2>

<p>Zu der Nahrung der Fenneks zählen:</p>

<ul>
    <li>Mäuse</li>
    <li>Heuschrecken</li>
    <li>Eidechsen</li>
    <li>Vögel</li>
    <li>Obst und Beeren (in Gefangenschaft)</li>
</ul>

<hr />

<h2>Der Mozilla-Fennec</h2>

<p>Bei dem Fennec von Mozilla handelt es sich um einen mobilen Webbrowser, 
der als kleiner Bruder des Firefox einen passenden Namen benötigt hat. 
Und ein Fennek ist definitiv kleiner als ein Fuchs:)</p>

<p>Diese Seite hat nichts mit Fennec von mozilla.org zu tun - wenn Sie 
aber zu Mozillas mobilem Webbrowser Fennec wollen, gehen Sie zu 
http://www.mozilla.org/projects/fennec/1.0a1/releasenotes</p>

<hr />

<h2>Sinn und Zweck dieser Website</h2>

<p>Diese Website dient als Nachbau-Objekt und zum Lernen von HTML und CSS. 
Alle benötigten Einzelteile bekommen Sie auf den Unterseiten. Beachten Sie, 
dass der Hintergrund frei ausgetauscht werden kann.</p>

<p>So - nun viel Spaß daran.</p>

<p>Axel</p>
</section>

<footer>
  <p>© www.fennek.mobi</p>
</footer>

</body>
</html>

Zu guter Letzt sollte man kontrollieren, ob der erstellte HTML-Code valide ist. Also einmal den kompletten HTML-Code durch den vom W3C bereitgestellten https://validator.w3.org/ laufen lassen und erst weiterarbeiten, wenn alles 100% fehlerfrei ist! Der Validator sollte folgende Meldung anzeigen: „This document was successfully checked as HTML5!“.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details