HTML: Difference between revisions

Revision as of 17:32, 30 January 2010

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><i>Das</i> ist eine HTML-Seite…</p>
</body>
</html>

Erläuterung der Zeilen:

Definition des Dokumentenformats
Es gibt folgende sog. DTD:
1. Strict: Trennung zwischen Inhalt und Design, strenge Verschachtelungsregeln
2. Transitional/Loose: Weniger Beschränkungen als Strict
3. 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 italic Teil (i-Tag = italic; ginge auch ein em-Tag = emphasized)
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>

.

Ressourcen

de.selfHTML.org - die (deutsche) Standard-HTML-Referenz!
HTML5 Referenz
Kursbegleitende Quelldateien 011-017.zip
siehe auch Kurs "Web-Technologie" / Part. Dokumentsprachen der Medien-Informatik

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.

@@ Line 1: / Line 1: @@
-bitte mithelfen!
+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:
+<source lang="HTML4Strict">
+<html>
+	<head>Hier ist der Kopf</head>
+	<body>..und hier der Körper</body>
+</html>
+</source>
+== Struktur ==
+Das Grundgerüst einer HTML-Datei sieht typischerweise wie folgt aus:
+<source lang="HTML4Strict" line>
+<!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><i>Das</i> ist eine HTML-Seite…</p>
+</body>
+</html>
+</source>
+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 &szlig;
+# Der Seitentitel wie im Browserfenster angezeigt
+# Head Ende
+# Body Anfang
+# Ein P-Tag (Paragraph = Absatz)
+# Ein Paragraph mit einem ''italic'' Teil (i-Tag = italic; ginge auch ein em-Tag = emphasized)
+# 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. <source lang="HTML4Strict"><br/></source> statt einem (recht sinnlosen) <source lang="HTML4Strict"><br></br></source>.
 == Ressourcen ==
+* [http://de.selfhtml.org/ de.selfHTML.org] - '''''die''''' (deutsche) Standard-HTML-Referenz!
+* [http://www.w3schools.com/html5/html5_reference.asp HTML5 Referenz]
 * [http://web.uni-weimar.de/medien/wiki/index.php5/File:Webgrundlagen_wki_011-017.zip Kursbegleitende Quelldateien 011-017.zip]
+* siehe auch Kurs "Web-Technologie" / [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html#web-technology Part. Dokumentsprachen] der Medien-Informatik
 {{Template:Webprogramming}}