HTML 5

HTML ist die Abkürzung für Hyper Text Markup Language und ist eine Auszeichnungssprache zur Erstellung von Textdokumenten in Webseiten und Webapplikationen.

HTML ist eine Dokument Auszeichnungssprache. Für die Entwicklung einer Webseite wird keine spezielle Software benötigt, da Webseiten als Textdokumente erstellt und danach konvertiert werden. Zur Anwendung kommen dabei Code-Editoren.

Der Inhalt eines HTML-Dokumentes steht in HTML-Elementen, welche durch Tags markiert werden. HTML-Elemente haben fast immer ein einleitendes und ein abschließendes Tag. Der Bereich zwischen den Tags ist der Gültigkeitsbereich des HTML-Elementes.

 

Der HTML Standart Grundgerüst der vierten Edition sieht wie folgt aus:

<HTML>
<HEAD>
< TITLE > Überschrift der Website< /TITLE >
< /HEAD >

< BODY >
< H1 > Hauptüberschrift < /H1 >
Jetzt kommt der Text.
< /BODY >
< /HTML >

in HTML-Dokument besteht aus zwei Teilen:
einem durch < HEAD > …. < /HEAD > eingeklammerten Kopfteil mit dem Titel des Dokuments und dem Inhalt zwischen den Markierungen < BODY > …. < /BODY >.
Mit < H1 > legen wir unsere Hauptüberschrift fest und eingerahmt wird das Ganze mit
< HTML >…..< /HTML >
Damit läßt sich bereits ein erstes Dokument verfassen.

 

Grundgerüst einer Webseite:

“Meta-Tags” sind eine Art versteckter Code, den die Suchmaschinen benutzen, um auf Ihre Seite hinzuweisen.

Mit “link rel” wird der HTML Code mit einer CSS-Datei verbunden und gibt somit vor wie ein Inhalt dargestellt werden soll

 

Die wichtigsten Neuerungen in HTML5 auf einen Blick

Neue semantische Elemente: Zusätzlich zu den bestehenden Elementen wurden in HTML5 Tags für bestimmte, häufig genutzte Seitenbereiche wie <header>, <footer> und <section> ergänzt.

Canvas: Das <canvas>-Element gehört zu den spannendsten neuen Features von HTML5. Streng genommen sorgt es lediglich dafür, dass eine leere Zeichenfläche in eine Website eingebunden wird. Auf dieser Fläche lassen sich dann aber mithilfe von JavaScript beliebige Diagramme, Grafiken für Spiele oder Videos erstellen und sogar animieren. Um sich einen ersten Eindruck darüber zu verschaffen, gibt es unter http://html5demos.com/canvas ein Beispiel für das <canvas>-Element.

Video: Mithilfe des ebenfalls in HTML5 neu hinzugekommenen <video>-Elements lassen sich Videos in Websites einbetten – ganz ohne externe Plug-ins wie Apple QuickTime oder den Adobe Flash Player.

Geolocation: Die neue Geolocation-API ermöglicht es, einer Website den Aufenthaltsort eines Besuchers mitzuteilen, der mit einem mobilen Gerät darauf zugreift. Auf diese Weise können ortsgebundene Services angeboten und dem Nutzer der Website beispielsweise Geschäfte in seiner Nähe oder seine Position auf einer Karte angezeigt werden. Ein Beispiel für die neue Geolocation-API gibt es unter http://html5demos.com/geo.

HTML5 Storage: HTML5 Storage (auch Local Storage genannt) bietet Websites eine Möglichkeit, Daten auf dem Rechner eines Besuchers zu speichern und später wieder abzurufen. Ähnlich wie bei Cookies bleiben diese Daten erhalten, wenn der Besucher die Website verlassen hat oder den Browser schließt. Anders als bei Cookies werden diese Daten jedoch nicht an den Webserver zurückgespielt.

Offline-Webanwendungen: Mit HTML5 haben Sie die Möglichkeit, Websites zu entwickeln, die auch offline nutzbar sind. Dafür muss Ihr Webserver dem Browser des Besuchers lediglich mitteilen, welche Dateien er hierfür laden muss. Eine Synchronisierung der Daten erfolgt automatisch, sobald der User wieder online ist.

Mikrodaten: Mit ihnen können Sie Ihre Website mit zusätzlichen semantischen Informationen ausstatten und beispielsweise Ihre Kontaktdaten in eine vCard umwandeln.

Verbesserungen für Formulare: Die Usability von Formularen lässt sich dank HTML5 deutlich verbessern. So können Sie beispielsweise Platzhaltertext in Webformulare aufnehmen, der den Nutzern verrät, welche Informationen an dieser Stelle eingegeben werden sollen. Oder Sie nutzen die Autofokusfunktion, die den Cursor des Besuchers automatisch im ersten Eingabefeld eines Formulars platziert.

Bildquelle Quelltext: http://webventil.de/wp-content/uploads/2011/02/html5.jpg

Quelltext: http://winfwiki.wi-fom.de/index.php/Analyse_der_Funktionen_und_Demonstrationen_von_HTML5_im_Hinblick_auf_Video

http://www.educat.hu-berlin.de/kurse/kurs/beispiel.html

http://www.meta-tags.de/meta_tags_information