HTML steht zwar für Hypertext Markup Language, trotzdem ist HTML keine Programmiersprache, sondern eine sog. Auszeichnungssprache - ein dokumentenbeschreibendes Format. HTML besteht eigentlich nur aus Tags, die (wenn XML-kompatibel) den Inhalt umschließen und verschachtelt sein können. In der Regel gibt es zu jedem Tag, der geöffnet wurde, das Gegenstück, das geschlossen wird; Gibt es das Gegenstück nicht, ist das meist ein Fehler:
<html>
<head>Hier ist der Kopf</head>
<body>..und hier der Körper</body>
</html>Struktur
Das Grundgerüst einer HTML-Datei sieht typischerweise wie folgt aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Seitentitel</title>
</head>
<body>
<p>Hallo Welt!</p>
<p><em>Das</em> ist eine HTML-Seite…</p>
</body>
</html>Erläuterung der Zeilen:
- Definition des Dokumentenformats
- Es gibt folgende sog. DTD:
- Strict: Trennung zwischen Inhalt und Design, strenge Verschachtelungsregeln
- Transitional/Loose: Weniger Beschränkungen als Strict
- Frameset: Nicht mehr gebräuchlich
- HTML Anfang
- Head Anfang
- Durch die Festlegung des Charset auf UTF-8 (das Dokument muss natürlich auch diese Zeichenkodierung verwenden!), kann man Umlaute wie ä,ü und ß verwenden ohne diese speziell codieren zu müssen; z.B. in &auuml;, &üuml; und ß
- Der Seitentitel wie im Browserfenster angezeigt
- Head Ende
- Body Anfang
- Ein P-Tag (Paragraph = Absatz)
- Ein Paragraph mit einem emphasized Teil (em-Tag = hervorgehoben; i wäre nicht strict-konform)
- Body Ende
- HTML Ende
Tags
Tags kann man sich einfach merken, wenn man weiß, wofür sie stehen. Die gängisten Tags sind:
- HTML
- head
- title
- meta
- link (kein umgangsspr. Link, sondern Einbettung von weiteren Ressourcen wie z.B. CSS-Dateien oder JavaScripts)
- body
- p (paragraph)
- i (italic), em (emphasized), b (bold), strong
- a (anchor, z.B. a href = anchor hyper-reference für das, was man gewöhnlich umgangssprachlich als "Link" bezeichnet)
- br (line break), hr (horizonal roule)
- div (division), span
- img (image)
- script
Außer dem script-Tag kann man Tags ohne Inhalt auch verkürzt notieren, z.B.
<br/>statt einem (recht sinnlosen)
<br></br>HTML5
HTML5 und CSS3 bringen in Verbindung mit JavaScript einige interessante Neuerungen, vor allem im Hinblick auf die Erweiterung von HTML5 als Programmierungebung für Browser-basierte Apps.
Die aufregendsten Neuerungen sind in Kürze:
Audio & Video
Die neuen <audio> und <video> Tags ermöglichen die Wiedergabe von Audio & Video-Dateien ohne Flash-Plugin. Die Implementierungen variieren noch von Browser zu Browser, zumindest als Alternative für Browser ohne Flash-Plugin ist der Einsatz bereits empfehlenswert:
<audio src="myFile.mp3" controls>
Your Browser does not support the <code>audio</code> element.
</audio>
Canvas
Das Canvas-Element kann mit JavaScript "bemalt" werden. Der Canvas Kontext ist in 2D und 3D verfügbar, 3D wird allerdings noch von sehr wenigen Browsern unterstützt. Das Zeichnen in 2D funktioniert ähnlich wie in anderen Sprachen (z.B. Java, Processing, Quartz). Man holt sich zuerst den Kontext und kann dann Basis-Shapes, Bilder, Text u.v.m. auf diesen Kontext zeichnen. Das Canvas-Element ist Pixel-basiert.
<html>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
// get the context
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.fillStyle = "rgba(200,0,0, 1.0)";
context.fillRect(40,60,250,100);
context.fillStyle = "rgba(0,200,0, 0.5)";
context.fillRect(140,100,250,100);
</script>
</html>Es gibt mittlerweile sehr interessante Projekte rund um das canvas Element:
- processing.js - JavaScript Library, (fast) voll kompatibel zur Java-basierten Processing Programmierumgebung
- Ai->Canvas exportiert Illustrator Dokumente in HTML-Dateien mit Canvas-Element
Siehe auch:
SVG
HTML5 unterstützt das Zeichnen von SVG (Scaleable Vector Graphics). SVG-Grafiken können entweder in einem Grafikprogramm (wie z.B. Illustrator) gezeichnet und als SVG exportiert oder per Code gezeichnet werden:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40"
stroke="black" stroke-width="2" fill="red"
onmousedown="alert('Hello World!');"/>
</svg>Siehe auch:
Weitere Ressourcen
Ressourcen
- de.selfHTML.org - die (deutsche) Standard-HTML-Referenz!
- Kursbegleitende Quelldateien 011-017.zip
- Kursbegleitende Quelldateien 050-055.zip (HTML5)
- siehe auch Kurs "Web-Technologie" / Part. Dokumentsprachen der Medien-Informatik
- Zen-Coding - Text-Expander for HTML/CSS
Diese Seite ist Teil der Werkmodule Grundlagen der Webprogrammierung und WebApps - Grundlagen Webprogrammierung von Michael Markert für Interface Design / Fakultät Medien an der Bauhaus-Universität Weimar.