m (Struktur)
(HTML5)
Line 68: Line 68:
 
* [http://dev.w3.org/html5/html4-differences/ Differences between HTML 4 & 5 (W3C)]
 
* [http://dev.w3.org/html5/html4-differences/ Differences between HTML 4 & 5 (W3C)]
 
* [http://html5doctor.com/article-archive/ HTML 5 Doctor]
 
* [http://html5doctor.com/article-archive/ HTML 5 Doctor]
 +
* [http://www.feierfeil.at/html/index_html.htm HTML-Übersicht]
  
 
== Ressourcen ==
 
== Ressourcen ==

Revision as of 17:59, 30 December 2010

HTML[[HTML|Hypertext Markup Language]] steht zwar für Hypertext Markup Language, trotzdem ist HTML[[HTML|Hypertext Markup Language]] keine Programmiersprache, sondern eine sog. Auszeichnungssprache - ein dokumentenbeschreibendes Format. HTML[[HTML|Hypertext Markup Language]] 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[[HTML|Hypertext Markup Language]]-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:

  1. Definition des Dokumentenformats
  2. 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
  3. HTML[[HTML|Hypertext Markup Language]] Anfang
  4. Head Anfang
  5. 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 ß
  6. Der Seitentitel wie im Browserfenster angezeigt
  7. Head Ende
  8. Body Anfang
  9. Ein P-Tag (Paragraph = Absatz)
  10. Ein Paragraph mit einem emphasized Teil (em-Tag = hervorgehoben; i wäre nicht strict-konform)
  11. Body Ende
  12. HTML[[HTML|Hypertext Markup Language]] Ende

Tags

Tags kann man sich einfach merken, wenn man weiß, wofür sie stehen. Die gängisten Tags sind:

  • HTML[[HTML|Hypertext Markup Language]]
  • head
    • title
    • meta
    • link (kein umgangsspr. Link, sondern Einbettung von weiteren Ressourcen wie z.B. CSS[[CSS|Cascading Style Sheets]]-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

Ressourcen




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.