decocode decocode deco    

HTML – Hypertext Markup Language #

(HTML5)

HTML ist eine semantische Textbeschreibungssprache, in der vor allem Hypertextdokumente für das World Wide Web erstellt werden. Über die semantische Textbeschreibung wird einem Programm (der User-Agent oder Browser), mit dem das betreffende Dokument dargestellt wird, mitgeteilt, welche logische Bedeutung die einzelnen Bestandteile des Dokuments besitzen, also bei welchen Abschnitten es sich um eine Überschrift, einen Textabsatz, eine Tabelle, eine Liste, ein Formular, eine Grafik usw. handelt.

Die grafische Darstellung des Dokuments wird dagegen üblicherweise mit im HTML-Dokument referenziertem oder eingebettetem CSS (Cascading Style Sheets) realisiert. Daher kommen bei der Erstellung von Webseiten in der Regel beide Techniken zum Einsatz. Ein HTML-Dokument, das keine Angaben über die grafische Darstellung enthält, wird von grafischen Browsern mit Hilfe von Default-Stylesheets dargestellt, die im Browser integriert sind, minimale CSS-Eigenschaften enthalten und sich zwischen den verschiedenen Browsern unterscheiden. Man darf sich also nicht zu dem Glauben verleiten lassen, die Darstellung werde durch HTML bewirkt und sei zwischen den Browsern einheitlich.

Der Vorteil der Trennung von semantischer Textbeschreibung und grafischer Auszeichnung liegt vor allem darin, dass für die Anpassung eines Dokuments an die Anforderungen verschiedener Ausgabemedien lediglich das Stylesheet geändert werden muss. Der HTML-Quelltext des Dokuments kann dagegen unverändert verwendet werden.

Im Laufe der Entwicklungsgeschichte von HTML hat diese Sprache eine ganze Reihe von Veränderungen erfahren, die sich in verschiedenen, teilweise nicht kompatiblen Versionen niedergeschlagen haben. In diesem Tutorial wird die aktuelle Version HTML5 vorgestellt. Um zu testen, ob der Quelltext eines HTML-Dokuments dem aktuellen Standard entspricht, kann dieser mit dem Validator des W3C überprüft werden. Ein weiterer Validator ist bei validator.nu zu finden.

Mit HTML5 ist es nun auch möglich, andere Markup-Sprachen wie beispielsweise SVG und MathML direkt in die Baumstruktur des HTML-Dokuments einzubinden.

Um ein HTML-Dokument zu erstellen wird lediglich ein Texteditor und ein Browser benötig, mit dem das Dokument geöffnet werden kann. Der Texteditor sollte die Zeichenkodierung UTF-8 unterstützen. Um sich den Quelltext eines HTML-Dokuments im Browser anzeigen zu lassen, kann man eine entsprechende Menü-Option wählen oder die Tastenkombination Strg+U verwenden.

Dieses HTML-Tutorial ist folgendermaßen gegliedert:

HTML-Grundlagen
<!DOCTYPE> <html> <head> <title> <base> <meta> <link> <style> <script> <noscript> <body>

Alle HTML-Elemente

Textblockelemente
<h1> <h2> <h3> <h4> <h5> <h6> <p> <blockquote> <pre> <address> <details> <summary>

Zeilenumbrüche
<br> <wbr> &#8203; &nbsp; &#8239; &#8209; &shy;

Textauszeichnung
<b> <strong> <i> <em> <u> <ins> <del> <s> <sup> <sub> <var> <code> <samp> <kbd> <mark> <small> <span> <abbr> <dfn> <q> <cite> <time> <data> <output> <meter> <progress> <ruby> <rb> <rp> <rt> <rtc> <bdi> <bdo>

Zeichensätze und Sonderzeichen
ASCII, ISO-8859-1, UTF-8

Struktur der Seiteninhalte
<header> <nav> <main> <footer> <article> <section> <aside> <fieldset> <legend> <div> <hr>

Verweise und Downloads
<a> <map> <area>

Bilder und Grafiken
<img> <figure> <figcaption> <canvas> <picture>

Listen
<ul> <ol> <li> <dl> <dt> <dd>

Tabellen
<table> <tr> <td> <th> <thead> <tbody> <tfoot> <col> <colgroup> <caption>

Formulare
<form> <label> <input> <textarea> <select> <optgroup> <option> <button> <datalist>

Dateiobjekte einbinden
<iframe>

Multimedia-Objekte einbinden
<audio> <video>