HTML, CSS und JavaScript

HTML-Dokument­struktur

 aufwärts

Elemente

Elemente sind in HTML die Struktur­bestandteile eines Dokuments, also z.B. ein Absatz, eine Überschrift, ein Bild, ein hervor­gehobenes Stück Text, ein Verweis usw. Um ein Element zu kennzeichnen, werden Tags verwendet (engl.: tag – Markierung, Etikett). Ein Stück Text, das einen Absatz darstellt, wird beispielsweise dadurch gekennzeichnet, dass es zwischen die Tags <p> und </p> eingeschlossen wird. Hierbei ist <p> das Starttag und </p> das Endtag; p ist die HTML-Bezeichnung für das Element Absatz (engl.: paragraph).

Beispiel:  Der HTML-Quelltext für

Diese Zeile ist ein Absatz.

ist also folgender:

<p>Diese Zeile ist ein Absatz.</p>

Es gibt auch Elemente, die nur aus einem einzigen Tag bestehen. Ein Bild etwa wird durch ein einzelnes img-Tag (engl.: image) gekennzeichnet, das den Namen der Bilddatei enthält.

Beispiel:  Der HTML-Quelltext für

ist folgender:

<img src="apple.gif">

 

Attribute

Das img-Tag enthält als Attribut src (engl.: source) den Namen der Datei, in der das Bild gespeichert ist. Als weitere Attribute kann das img-Tag u.a. auch noch eine Beschreibung des Bildes sowie die Größe der Darstellung in Pixeln enthalten.

Beispiel:  Der HTML-Quelltext für

Ein Apfel

ist folgender:

<img src="apple.gif" alt="Ein Apfel" width="52" height="37">

Häufig beziehen sich Attribute auf die Darstellung der Elemente. So lässt sich beispielsweise bei einem p-Tag mit dem Attribut align die Ausrichtung des Absatzes angeben.

Beispiel:  Der HTML-Quelltext für

Diese Zeile ist ein zentrierter Absatz.

ist folgender:

<p align="center">Diese Zeile ist ein zentrierter Absatz.</p>

 

Trennung von Struktur und Darstellung

Es ist sinnvoll, die Beschreibung der Struktur des Dokuments und die Beschreibung der Darstellung der einzelnen Struktur­elemente zu trennen. Auf diese Weise ist es möglich, ein und dasselbe Dokument auf unter­schiedlichen Ausgabemedien (Bildschirm, Drucker, Handy) unter­schiedlich darzustellen. Ebenso ist es leichter möglich, die Darstellung bei Bedarf zu ändern, wie z.B. alle Überschriften mit einem farbigen Hintergrund zu versehen.

Zwar ist in HTML auch die Kennzeichnung der Darstellung der Elemente vorgesehen, entweder durch entsprechende Tags (etwa <b> für Fettdruck) oder durch die Angabe von Attributen (wie in obigem Beispiel align="center"), wenn von der Standard-Darstellung abgewichen werden soll.

Wir wollen dagegen so vorgehen, dass wir HTML nur zur Kennzeichnung der Struktur des Dokuments verwenden. Auf alle Möglichkeiten, in HTML auch die Darstellung zu beeinflussen, verzichten wir weitgehend. Anstelle dessen verwenden wir eine davon getrennte Beschreibung der Darstellung in Form von sogenannten Style Sheets (dazu später mehr).

Im Beispiel des zentrierten Absatzes gehen wir so vor, dass wir in HTML kennzeichnen, warum der Absatz anders dargestellt werden soll als die anderen Absätze, etwa weil es sich um einen wichtigen Merksatz handelt. Dies geschieht durch Angabe des Attributs class, das die Bedeutung des Absatzes innerhalb der Dokument­struktur genauer spezifiziert:

<p class="merksatz">Diese Zeile ist ein wichtiger Merksatz.</p>

In der davon getrennten Beschreibung der Darstellung legen wir dann fest, dass alle Merksätze zentriert dargestellt werden sollen (oder farbig hinterlegt oder fettgedruckt oder eingerahmt, oder nur bei der Darstellung auf dem Bildschirm farbig hinterlegt, beim Druck dagegen eingerahmt usw.)

 

Wichtige HTML-Elemente

Die Grundstruktur eines HTML-Dokuments ist folgende:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

Die folgende Tabelle gibt eine Übersicht über die wichtigsten Elemente, die innerhalb des body-Elements erlaubt sind, und die jeweils dazugehörigen wichtigsten Attribute (das Attribut class ist bei allen Elementen erlaubt):

Element BeschreibungAttribute
pAbsatz 
h1Überschrift 1. Ordnung 
h2Überschrift 2. Ordnung 
imgBildsrc, alt, width, height, border
divAbschnitt 
tableTabelle 
formFormularname
hrwaagerechte Linie 
brZeilenumbruch 
aVerweishref, title
emhervor­gehobener Text 
spanallgemeines Element 

 

 

Weiter mit:   [HTML-Sonderzeichen]   oder   up

 

homeH.W. Lang   FH Flensburg   lang@fh-flensburg.de   Impressum   ©  
Valid HTML 4.01 Transitional