html5


FIXME




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.






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>






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>






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>






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






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