BHAK & BHAS Bludenz

Grundkurs HTML & CSS

Grundgerüst


Wenn ein HyperTextMarkupLanguage(=HTML)-Dokument erstellt werden soll, braucht es neben dem Text und allfälligen Bildern sogenannte Tags, also HTML-typische Befehle, mit deren Hilfe die Browser von Microsoft, Mozilla, Netscape oder Opera die Formatierung der Bildschirmausgabe vornehmen.

Um einem Browser grundsätzlich mitzuteilen, dass er ein - in diesem Fall leeres - HTML-Dokument vor sich hat, bedarf es folgender Tags:

Zu Beginn benötigen wir eine DOCTYPE-Definition. Darin wird festgelegt, ob es sich bei unserem Dokument um HTML oder um XHTML handelt. Man unterscheidet jeweils grundsätzlich zwischen "strict" und "transitional". Der Unterschied ist, dass bei "transitional" noch Formatierungen via HTML-Attribut gestattet sind, bei "strict" aber nicht mehr, sondern nur mehr über CSS.

HTML

HTML Strict DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML

XHTML Strict DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Transitional DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Nachdem man eine dieser vier DTDs ausgewählt hat, folgt:

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

Die Bedeutung der Grundgerüst-Tags im einzelnen

  1. <html> eröffnet das HTML-Dokument.
  2. <head> beginnt den Kopfteil des Dokuments, der im Browser nicht sichtbar ist. Dorthin kommen Angaben zum Autor, zum Inhalt, für Suchmaschinen usw.
  3. <title> ermöglicht, einen halbwegs sinnvollen Dokumenttitel zu vergeben, der im blauen Balken des Browsers oberhalb der Dropdown-Menüs dargestellt und von einigen Suchmaschinen ausgewertet wird.
    Ein Beispiel wäre: <title>Erste Hinweise für Einsteiger</title>.
  4. </head> schließt den Kopfbereich.
  5. <body> öffnet den im Browserfenster sichtbaren Hauptbereich, in dem Text, Tabellen und Bilder platziert werden.
  6. </body> schließt den Hauptbereich.
  7. </html> zeigt an, dass das HTML-Dokument hier endet.

Geöffnete Tags müssen fast immer auch geschlossen werden. Dies geschieht unter Verwendung des forward-slash und des Tags, zB: </body>. Dabei geht man im Zwiebelschalenverfahren vor, d.h., der zuerst geöffnete Tag wird zuletzt geschlossen. Man sehe:

<head><title></title></head>


Aufgabe 1

Erstelle im Windows-Editor ein HTML-Dokument mit dem Grundgerüst und speichere dieses unter Verwendung der Option Datei speichern unter: Dateityp: Alle Dateien (*.*) als geruest.htm ab. Es ist aus Gründen der Übersichtlichkeit empfehlenswert, für jeden neuen Tag eine neue Zeile zu verwenden.