:WEBPUBLISH: Prinzipieller Aufbau von HTML-Dokumenten :WEBPUBLISH: Prinzipieller Aufbau von HTML-DokumentenHTML-Dokumente waren reine ASCII-Text-Dateien 7Bit. Sie können mit jedem einfachen Text-Editor bearbeitet werden.
In reinem 7Bit ASCII Text sind keine Umlaute, keine Sonderzeichen vereinbart, daher kam es zu einer plattformabhängigen Codierung dieser Zeichen (ein 'ü' hat unter Windows einen anderen Code als unter Mac OS oder Unix).
Um Dokumente plattformübergreifend darstellen zu können, wurden für nicht ASCII Zeichen in HTML sogenannte Entities (Konstanten) vereinbart :
Bsp.: "für" heißt auf HTML "für" das 'ü' wurde durch 'ü' ersetzt.
Außerdem wurden für bestimmte Schlüsselzeichen '<','>','&' in HTML Entities definiert.
|
Heute wird immer mehr die UTF-8 Codierung eingesetzt, hierbei können z.B. die Entities für die Umlaute entfallen. Mehr zur Codierung...
Als "Markup Language" ist HTML eine Auszeichnungssprache für Informationsobjekte. Informationsobjekte sind z.B. Überschriften, Absätze, Tabellen, Bilder, Links, Videos, Sound usw. Entweder befinden sich diese Objekte direkt in der HTML-Datei, oder sie werden nachgeladen und in das Dokument eingebunden.
In einem HTML-Dokument wird die Information inhaltlich strukturiert.
Um eine Zeichenfolge "Winter ist vorbei" als Überschrift kenntlich zu machen, wird diese in sogenannte Tags eingeschlossen -verpackt.
Die Tags werden nach der Klasse benannt, der in ihnen steht.
Es gibt zwei Typen von Tags:
<...> einleitende Tags (Anfang der Verpackung)
</...> abschließende Tags (Ende der Verpackung)
Beispiele für Informationsobjekte:
Überschrift1 (Headline1): größte Überschrift von 1..6. sprich: "ha eins täg"
| <h1> | Winter ist vorbei | </h1> |
|---|
Textabsatz (Paragraph) sprich: "pe täg"
| <p> | Die Temperaturen steigen wieder | </p> |
|---|
Kommentare im Quelltext -nicht jedes Tag braucht einen Abschluß:
| <!-- | wichtige Anmerkung, nur im Quelltext, nicht im Browser sichtbar! | --> |
|---|
Früher spielte es keine Rolle, ob die Tags in Form von Klein- oder Großbuchstaben notiert werden. Somit waren z.B. <h1> und <H1> äquivalent. Heute soll alles klein geschrieben werden.
Damit aus den einzelnen Informationsobjekten ein richtiges HTML-Dokument wird, bedarf es noch etwas Umverpackung:
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <html> | |||||||||||||||
|
|||||||||||||||
|
|||||||||||||||
| </html> | |||||||||||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Gibt die Referenz der verwendeten Tags an. Es gibt mittlerweile so viele Dialekte von Auszeichnungssprachen, daß man angeben sollte welcher DTD (Dokument Type Definition) dem Dokument zu Grunde liegt.
<html> und </html> Umklammern den HTML-Teil.
Im Head-Abschnitt befindet sich die Aufschrift (der Titel, zu sehen im Titel des Browserfensters) der Packung.
Optional außerdem eine Beschreibung des Inhalts, die Zutatenliste (Stichwörter) usw. siehe Meta-Tags..
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> Gibt die verwendete Zeichenkodierung an.
Der Body-Abschnitt umschließt den im Browser sichtbaren Inhalt des Dokuments.
Wichtig: html, head, title, body dürfen nie fehlen! Auch wenn die Browser ein Auge zudrücken ;-)
 |
Aufgabe: Erstelle eine sehr einfache Web-Site!
Testen mit validator.w3.org |
<!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>Praxis: Erstelle ein Dokument</title>
</head>
<body>
<h1>Der schnelle Weg zum Erfolg</h1>
<p>Ruhig und klar vorgehen</p>
<p>Save often, Save early</p>
<p>Sichere oft und möglichst früh, denn Rechner stürzen ab...</p>
</body>
</html>
Wichtig: Formatierung des Textes zur besseren Lesbarkeit zwei Leerzeichen innerhalb eines Blockes einrücken!
<table>
<tr>
<td>Bla Bla</td>
</tr>
</table>
Die Blockstruktur soll erkennbar sein! |