mNo edit summary |
(created) |
||
| Line 1: | Line 1: | ||
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 ß | |||
# 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 == | == 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] | * [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}} | {{Template:Webprogramming}} | ||