HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Attribute von Elementen: Das style Tag und sein Attribut type

In diesem Abschnitt werden wir das body Tag und sein Attribut type besprechen. Was sind Attribute? Attribute sind spezielle Eigenschaften von Elementen. Wie ein Objekt in der Objektorientierten Programmierung, so hat jedes Element eine festdefinierte Menge an Attributen, die eine definierte Menge an Strings als Wert haben können. Die Notation lautet allgemein:

<elem attr="wert">

Das bedeutet: das Attribut attr des Elements elem erhält den Wert "wert". Alle Elemente von HTML (und auch allgemein von XML) basieren auf solchen so genannten Attribut-Wert-Paaren (attribute-value pairs). Wir werden das am Beispiel des style-Elements sehen, das für die Formatierung des Textes verwendet wird.

<html>

<head>

<title>Mustermanns Blumenladen</title>

<!--

body {background-color:#33EE00; color:#003333}

-->

</style>

</head>

<body>

Dies ist ein Test !

</body>
</html>

So sieht's im Browser aus!

Erklärung:

Mit dem style-Element werden die Formatierungen für den darzustellenden Fensterinhalt definiert. Sein Attribut lautet type und erhält üblichwereise den Wert "text/css". (style hat genaugenommen mehrere Attribute, aber nur type ist obligatorisch anzugeben und das einzige, das wir hier verwenden.) Das bedeutet, dass die Formatierung als CSS (Cascading Style Sheets) definiert werden, eine Art Formatvorlage. Näheres zu CSS finden Sie in meinem CSS-Tutorial oder unter de.selfhtml.org/css/.
Die CSS-Anweisungen werden stets als Kommentar gekennzeichnet. Ein Kommentar in HTML wird durch  beendet:

Ein Kommentar kann sich über mehrere Zeilen erstrecken.
Das body-Element wird formatiert, indem man in die CSS-Anweisung den Elementnamen schreibt und die zu verändernden CSS-Eigenschaften in geschweiften Klammern dahinter, jede CSS-Eigenschaft nach einem Doppelpunkt mit ihrem Wert angegeben und mit einem Semikolon vom nächsten getrennt:
body {background-color:#33EE00; color:#00EE33}
Mit background-color wird die Hintergrundfarbe festgelegt, mit color die Farbe des Textes. Üblichwerweise wird für die Farbdarstellung der RGB-Farbencode als Hexadezimalzahl ( = 0, 1, 2, ..., 9, A, B, C, D, E, F) nach folgendem Schema verwendet:

Die Farbe #33EE00 hat also einen geringen Rotanteil, ist sehr hell im Grünen und hat keinen Blauanteil. Weiß hat den RGB-Code #FFFFFF, Schwarz hat #000000. Eine Farbtabelle finden Sie unter de.selfhtml.org/diverses/anzeige/farbpalette_216.htm
Für einige spezielle Farben gibt es vordefinierte Farbnamen, z.B. black, white, green red oder blue. Eine vollständige Liste finden Sie unter de.selfhtml.org/diverses/anzeige/farbnamen_16.htm
Man kann auch natürlich auch Bilder als Hintergrund verwenden, das geschieht dann mit der Anweisung
body { background-image:url(Pfad-zum-Bild.gif); }
Die eingetragene URL (Uniform Resource Locator) ist ein Pfad, der zu einer Datei (hier z.B. ein Bild) führt. Es gibt zwei Arten von Pfadangaben: die absolute und die relative Pfadangabe. Bei der absoluten müssen Sie einen vollständigen Pfad angeben:
http://www.meine-website.de/bilder/bild.gif
(verwenden Sie nie den Pfad Ihres lokalen Dateisystems, also C:\Eigene Dateien\... - die kann niemand im Netz finden!)

Bei der relativen Pfadangabe wird vom augenblicklichen Ort des HTML-Dokuments ausgegangen. Es gibt nur zwei Angaben:

./ bedeutet: Beginne den Start im aktuellen Verzeichnis;

../ bedeutet: Beginne den Start eine Verzeichniseben über dem aktuellen Verzeichnis.
Hat man also ein Verzeichnis /bilder im gleichen Verzeichnis wie das HTML-Dokument und wäre in dem Verzeichnis das Bild grafik.gif, so wäre der URL also: ./bilder/grafik.gif
Hinweis: Verwenden Sie in Pfadangaben stets die UNIX-Notation, also "/" als Verzeichnisanfang, und niemals "\"!
Hinweis: Verwenden Sie für Dateinamen, die Sie selbst benennen, nur Kleinbuchstaben und keine Sonderzeichen! Eine der Hauptursachen für Fehler der Art, dass Bilder oder andere Dateien nicht gefunden werden, nachdem man sie auf den Webserver hochgeladen hat, liegt darin begründet.

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]