html5
Grundgerüst
Ein Beispiel für ein HTML5 Grundgerüst.Im Kopfbereich „Doctype“ mit Sprach. und Zeichensatzangabe. Für den Internet Explorer wird über Conditional Comments, ein JavaScript eingebunden, denn es sorgt dafür, daß der IE HTMLl5 Elemente erkennt.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Beispiel HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen,projection">
</head>
<body>
<header>
<h1>Beispiel HTML5</h1>
<p>HTML5</p>
</header>
<div id="cont">
<!-- Seiteninhalt -->
</div>
<aside id="sideleft">
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impress.html">Impressum</a></li>
</ul>
</nav>
</aside>
<footer>
<p>2010 universum <a href="#">Impressum</a></p>
</footer>
</body>
</html>
Beschreibung:
- header ⇒ Seitenkopf oder Banner.
- aside ⇒ Seitenleisten Kontainer.
- nav ⇒ Navigation.
- footer ⇒ Seiten Fussleiste.
Formulare
Beispiel für ein Suchformular mit dem „form“ Kontainer.
<form id="suchform">
<fieldset>
<legend>Suche</legend>
<label for="suchbegriff" class="invisible">
Suchbegriff eingeben
</label>
<input name="suchbegriff"id="suchbegriff" type="search" size="15">
<input type="submit" value="Suche">
</fieldset>
</form>
Navigation
Das HTML5 Navigationselement „nav“.
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="imress.html">Impressum</a></li>
</ul>
</nav>
Seitenleiste
Ein Seitenleisten Kontainer und Navigation mit „aside“ und „nav“.
<aside id="sidebar">
<nav>
<h2>Navigationsleiste</h2>
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impress.html">Impressum</a></li>
</ul>
</nav>
</aside>
Bild mit definierten Bereichen
Mit „map“, ein Bild oder eine Karte mit anklickbaren Bereichen versehen.
<img src="bild.gif" width="200" height="150" alt="Bild" usemap="#beispiel" /> <map name="beispielmap"> <area shape="rect" coords="0,0,75,200" alt="bsp1" href="link_1.htm" /> <area shape="circle" coords="90,66,6" alt="bsp2" href="link_2.htm" /> <area shape="circle" coords="142,42,7" alt="bsp3" href="link_3.htm" /> </map>
Das „name“ Attribut wird benötigt, um die Karte dem „<img>“ zuzuordnen und stellen so die Beziehung zwischen Karte und Bild her. „<map>“ unterstützt auch „globale“ und „event“ Attribute von HTML5.
Den Bereich innerhalb einer „<map>“ definiert „<area>“.
Attribute:
- alt ⇒ alternativer Text für Region
- coords ⇒ Koordinaten eines Raumes
- href ⇒ Zielurl der Region
- hreflang ⇒ Sprache der Zielurl
- shape ⇒ Form der Fläche
Multimedia
audio
Das HTMLl5 „audio“ Tag kann zur Wiedergabe von Audiodateien, ohne eine andere Erweiterung wie „Flash“ verwendet werden. Das Audio Tag unterstützt derzeit ogg, wav und mp3 Dateien. Die Unterstützung der Audioformate hängt vom verwendeten Browser ab.
<audio controls="controls" preload="preload"> <source src="/pfad/zu/audio/audio.ogg" type="audio/ogg; codecs=vorbis" controls> Dein Browser unterstützt das html5 audio Element nicht. </audio>
Beispielausgabe im Firefox.
video
Das „video“ Tag kann zur Wiedegabe von Videos verwendet werden. Auch hier muss dann natürlich dieses Video Tag vom Webbrowser unterstützt werden.
<video width="320" height="240" controls="controls" preload="preload"> <source src="video.mp4" type="video/mp4"> <source src="video.ogg" type="video/ogg"> Dein Browser unterstützt das video Element nicht. </video>
Beispielausgabe im Firefox.
Cloud