Text: Vertikaler Text
Mit bestimmten Attributen des Tags Text (text) <text>...</ text> kann in SVG [1] Text vertikal ausgegeben werden.
[1] Die vertikale Ausrichtung des Textes wird durch das Attribut writing-mode bestimmt:
[1A] writing-mode="tb" oder [1B] style="writing-mode: tb;" Einige Browser akzeptieren die Anweisung nur in Verbindung mit Attribut style.
[2] Zusätzlich kann auch die Ausrichtung (Orientierung) der Zeichen bestimmt werden:
glyph-orientation-vertical:="deg" oder style="lyph-orientation-vertical: deg;"
Für deg werden ganze Zahlen in Grad für die Orientierung der Zeichen erwartet:
[2A] glyph-orientation-vertical:="0" Die Zeichen sind horizontal ausgerichtet
[2B] glyph-orientation-vertical:="180" Die Zeichen sind horizontal ausgerichtet und stehen auf dem Kopf
[2C] glyph-orientation-vertical:="270" Die Zeichen sind vertikal und spiegelverkehrt ausgerichtet.
Das Attribut glyph-orientation-vertical ist nur in Verbindung mit dem Attribut writing-mode sinnvoll. Manche Browser ignorieren es vollkommen.
Siehe auch -> Text: Grundlagen!

Beispiele:
<svg width="300" height="400">
[3]<text x="20" y="20" font-size="24px" writing-mode="tb">Text vertikal</text>
<!-- Beispiel 3: Vertikale Textausrichtung Standard-->
[4] <text x="50" y="20" font-size="24px" style="writing-mode: tb;">Text vertikal</text>
<!-- Beispiel 4: Vertikale Textausrichtung Standard, in Verbindung mit Attribut style -->
[5] <text x="80" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="0">Text vertikal</text>
<!-- Beispiel 5: Vertikale Textausrichtung, Zeichenorientierung waagrecht -->
[6] <text x="110" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 0;">Text vertikal</text>
<!-- Beispiel 6: Vertikale Textausrichtung, Zeichenorientierung waagrecht , in Verbindung mit Attribut style -->
[7] <text x="140" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="180">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf -->
[8] <text x="170" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 180;">Text vertikal</text>
<!-- Beispiel 7: Vertikale Textausrichtung, Zeichen stehen auf dem Kopf, in Verbindung mit Attribut style -->
[9] <text x="200" y="20" font-size="24px" writing-mode="tb" glyph-orientation-vertical="270">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt -->
[10] <text x="230" y="20" font-size="24px" style="writing-mode: tb; glyph-orientation-vertical: 270;">Text vertikal</text>
<!-- Beispiel 9: Vertikale Textausrichtung, Zeichen spiegelverkehrt, in Verbindung mit Attribut style --> </svg>

Text - <text>...</ text>: Grundlagen
Mit dem Tag Text (text) <text>...</ text> kann in SVG [1] Text gezeichnet werden. Anzugeben ist zumindest der Startpunkt des Textes und der Textinhalt.
<text x="x1" y="y1">Textinhalt</text>
Der Startpunkt wird durch die X-Koordinate und die Y-Koordinate festgelegt.

Beispiele:<svg width="400" height="500">
[1]<text x="10" y="20">Text</text>
<!-- Beispiel 1: Minimale Angaben für einen Text mit Standardbeschriftung und Standardfarbe-->
[2] <text x="10" y="40" fill="green"> Text: grün</text>
<!-- Beispiel 2: Text mit grüner Füllung -->
[3] <text x="10" y="70" fill="blue" font-size="24px">Text: blau, 24 Pixel</text>
<!-- Beispiel 3: Text mit blauer Füllung, 24 Pixel groß-->
[4] <text x="10" y="100" fill="none" font-size="24px" stroke="#000000">Text: ohne Füllung, nur Umriss</text>
<!-- Beispiel 4: Text ohne Füllung, 24 Pixel groß, mit Umriss in Standardbreite und Standardfarbe-->
[5] <text x="10" y="150" fill="yellow" font-size="44px" stroke="red" stroke-width="2">Text: Umriss 2 Pixel</text>
<!-- Beispiel 5: Text mit gelber Füllung, 44 Pixel groß, mit 2 Pixel breitem roten Umriss--> </svg>

Pfad - <path... />, Ellipsenbogen: A (Elliptical Arc)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. [1] Ellipsenbogen gezeichnet werden. Anzugeben sind für die Ellipse die beiden Radien, die Rotation der X-Achse, welcher Teil und in welche Richtung gezeichnet werden soll, sowie Anfang und Endpunkt der Ellipse.
<path d="Mx1 y1 Arx ry alpha larg-arc-flag sweep-flag x4 y4" />

Im Einzelnen sind folgende Parameter anzugeben:
[2] M oder m: Startpunkt der Ellipse
[3] nach A oder a - Parameter des Ellipsenbogens:
 [3A] rx: Radius der Ellipse auf der X-Achse (zB 120)
 [3B] ry: Radius der Ellipse auf der Y-Achse (zB 80)
 [3C]  [7C] alpha: Rotation der X-Achse der Ellipse: [3C] 0 = keine Rotation;  [7C] Rotation in Grad (zB 90)
 [3D] larg-arc-flag: 0 = kleiner Teil der Ellipse, 1 = großer Teil der Ellipse
 [3E] sweep-flag: 0 = Bogen wird entgegen dem Uhrzeugersinn gezeichnet, 1 = Bogen wird im Uhrzeugersinn gezeichnet
 [3F] x₄ y₄: Absolute bzw. relative Koordinaten des Endpunkts des Ellipsenbogens
[4] Die strichlierten Bögen wären die Ergänzungsbögen zur vollständigen Ellipse
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="400" height="380">
[1]<path d="M80 186 A120 100 0 1 1 260 186" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breiter, magenta Ellipsenbogen wird vom Startpunkt [2] M zum [3F] Endpunkt gezeichnet; [3A] Radius der X-Achse = 120; [3B] Radius der XY-Achse = 100;  [3C] 0 = keine Rotation; [3D] 1 = großer Teil der Ellipse; [3E] 1 = gezeichnet im Uhrzeigersainn, keine Füllung -->
[5] <path d="M100 350 A100 80 90 0 0 260 350" stroke="#00ddb6" stroke-width="6" fill="none"/>
<!-- Beispiel 2: [5] 6 Pixel breiter, blaugrüne Ellipsenbogen wird vom Startpunkt [6] M zum [7F] Endpunkt gezeichnet; [7A] Radius der X-Achse = 100; [7B] Radius der Y-Achse = 80; [7C] 90 = Rotation der X-Achse des Bogens um 90 Grad; [7D] 0 = kleiner Teil der Ellipse (hier die Hälfte); [7E] 0 = gezeichnet entgegen dem Uhrzeigersainn, [8] Füllung: gelb -->
</svg>

Pfad - <path... />, Kubische Bézierkurve: S (Shorthand / Smooth CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [1] Kubische Bézierkurve: kann mit dem Pfad-Kommando [6] S (Shorthand / Smooth CurveTo) weitergeführt werden. Dabei wird als erster Kontrollpunkt der letzte gespiegelte Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Cx2 y2 x3 y3 x4 y4 Sx5 y5 x6 y6" />

Ergänzend zur Kubischen Bézierkurve sind für die weiterführende kubische Bézierkurve mindestens zwei Punkte anzugeben:
[6A] [6B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von zwei Punkten: [6A] 1. Punkt nach S (oder s) = weiterer Kontrollpunkt für die weiterführende kubische Bézierkurve, der gleichzeitig ein Punkt der [6C] Tangente zum [6B] Endpunkt der weiterführenden kubischen Bézierkurve ist; erster Kontrollpunkt ist der letzte [6D] gespiegelte Kontrollpunkt der [1] vorherigen Kurve; weitere Kontrollpunkte und Punkte der weiterführenden kubischen Bézierkurve können hinzugefügt werden;
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="470" height="420">
[6] <path d="M10 10 C120 200 210 10 310 50 S329 10 450 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [1] 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach S definieren einen weiteren [6A] Kontrollpunkt und den [6B] Endpunkt für die [6] weiterführende Kurve, keine Füllung-->

[7] <path d="M10 300 c50 -110 160 110 300 30 s303 30 150 60" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [2] 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; relative Koordinaten nach s definieren einen weiteren Kontrollpunkt [7A] und den neuen [7B] Endpunkt für die [7] weiterführende Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: S (Shorthand / Smooth Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine [8] Quadratische Bézierkurve: kann mit dem Pfad-Kommando [9] T (Shorthand / Smooth Quadratic Bézier CurveTo) weitergeführt werden. Dabei wird als Kontrollpunkt der letzte gespiegelte [9A] Kontrollpunkt der vorher definierten Bezierkurce verwendet <path d="Mx1 y1 Qx2 y2 x3 y3 Tx4 y4" />

Ergänzend zur Quadratischen Bézierkurve sind für die weiterführende quadratische Bézierkurve mindestens ein Punkt anzugeben:
[9B] S (absolute Koordinaten) oder s (relative Koordinaten) mit Angabe von einem Punkte nach S (oder s) = [9B] Endpunkt der weiterführenden Quadratischen Bézierkurve; neuer [9A] Kontrollpunkt ist der gespiegelte vorherige Kontrollpunkt, der auch ein Punkt der [9C] Tangente zum Endpunkt der weiterführenden Quadratischen Bézierkurve ist; weitere Punkte für die Quadratische Bezierkurve können hinzgefügt werden
; siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="430" height="480">
[9]<path d="M10 100 Q80 180 200 100 T400 100" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: [8] 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt M zum Endpunkt gezeichnet; absolute Koordinaten nach T definieren einen neuen [9B] Endpunkt für die [9] weiterführende Kurve, [9A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, keine Füllung-->

[11] <path d="M10 300 q100 -60 160 200 40 t200 -40" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: [10] 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom StartpunktM zum Endpunkt gezeichnet; relative Koordinaten nach t definieren einen neuen [11B] Endpunkt für die für die [11] weiterführende Kurve, [11A] Kontrollpunkt ist der gespiegelte Kontrollpunkt der vorherigen Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Kubische Bézierkurve: C (CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Kubische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Kubischen Bézierkurve (zB "M10 10 )
[1B] [1C] [1D] C (absolute Koordinaten) oder c (relative Koordinaten) mit Angabe von drei Punkten: [1B] 1. Punkt und [1C] 2. Punkt = zwei Kontrollpunkte für die Kubische Bézierkurve und Punkt der [1E] Tangente vom Startpunkt und der [1F] Tangente vom Endpunkt der Kubischen Bézierkurve; [1D] 3. Punkt = Endpunkt der Kubischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele:
<svg width="330" height="350">
<path d="M10 10 C 120 200 210 10 310 50" stroke="magenta" stroke-width="4" fill="none"/>
[1]<!-- Beispiel 1: 4 Pixel breite, magenta Kubische Bézierkurve wird vom Startpunkt [1A] M zum [1D] Endpunkt gezeichnet; Koordinaten nach C definieren zwei [1B] [1C] Kontrollpunkte und den [1D] Endpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 c 50 -110 160 110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Kubische Bézierkurve wird vom Startpunkt [2A] M zum [2D] Endpunkt gezeichnet; Koordinaten nach c definieren relative Koordinaten der zwei [2B] [2C] Kontrollpunkte für und den [2D] Endpunkt für die Kurve, [5] Füllung: gelb-->
</svg>

Pfad - <path... />, Quadratische Bézierkurve: Q (Quadratic Bézier CurveTo)
Mit dem Tag Pfad (path) <path... /> können in SVG u.a. verschiedene Bézierkurven gezeichnet werden. Eine dieser Bézierkurven ist die [1] Quadratische Bézierkurve: <path d="Mx1 y1 Qx2 y2 x3 y3" />

Anzugeben ist:
[1A] M oder m: Startpunkt des Pfades bzw. der Quadratische Bézierkurve (zB "M10 10 )
[1B] [1C] Q (absolute Koordinaten) oder q (relative Koordinaten) mit Angabe von zwei Punkten: [1B] 1. Punkt = Kontrollpunkt für die Quadratische Bézierkurve und Punkte der [1D] Tangente vom Startpunkt und der [1E] Tangente vom Endpunkt der Quadratische Bézierkurve; [1C] 2. Punkt = Endpunkt der Quadratischen Bézierkurve; [1F] Verbindungslinie durch die Halbierungspunkte der beiden Tangenten ergibt Tangente durch Scheitel der Quadratischen Bézierkurve;
[3] Farbe des Pfades (zB stroke="magenta")
[4] Breite des Pfades (zB stroke-width="4")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht

Beispiele: <svg width="330" height="350">
[1] <path d="M10 10 Q 120 200 310 50" stroke="magenta" stroke-width="4" fill="none"/>
<!-- Beispiel 1: 4 Pixel breite, magenta Quadratische Bézierkurve wird vom Startpunkt [1A] M zum [1C] Endpunkt gezeichnet; absolute Koordinaten nach Q definieren [1B] Kontrollpunkt für die Kurve, keine Füllung-->
[2] <path d="M10 300 q 50 -110 300 30" stroke="#00ddb6" stroke-width="6" fill="yellow"/>
<!-- Beispiel 2: 6 Pixel breite, blaugrüne Quadratische Bézierkurve wird vom Startpunkt [2A] M zum [2C] Endpunkt gezeichnet; relative Koordinaten nach q definieren [2B] Kontrollpunkt für die Kurve, Füllung: gelb-->
</svg>

Pfad - <path... />, Linie horizontal, Linie vertikal
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. mit einfachen Angaben eine horizontale oder vertikale Linie gezeichnet werden. Außer dem Startpunkt muß bei der horizontalen .Linie nur die X-Kordinate des Endpunktes und bei der vertikalen Linie die Y-Koordinate des Endpunktes eingegeben werden. Die Endpunkte können in relativen oder absoluten Koordinaten angegeben werden. Der Koordinaten des Startpunkts M oder m werden immer als absolute Koordinaten interpretiert. Außerdem sind noch die Farbe der Linie und die Linienbreite anzugeben.

[1] horizontale Linie: <path d="Mx1 y1 Hx2" ... />
Es wird eine horizontale Linie vom [2] Startpunkt M bis zum [3] Endpunkt H oder h gzeichnet.

[4] vertikale Linie: <path d="Mx1 y1 Vy2" ... />
Es wird eine vertikale Linie vom Startpunkt M bis zum Endpunkt V oder v gzeichnet
Anzugeben ist in absoluten oder relativen Koordinaten:
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Linie - <line... />

Beispiele: <svg width="1000" height="1000" fill="black">
<path d="M0 100 H200" stroke="blue" stroke-width="2"/>
<!-- Beispiel 1: 2 Pixel breite, blaue, horizontale Linie wird vom Startpunkt M zum Endpunkt H gezeichnet, absolute X-Koordinate = 200 -->
<path d="M100 0 V200" stroke="#f336ff" stroke-width="5"/>
<!-- Beispiel 2: 5 Pixel breite, pinke, vertikale Linie wird vom Startpunkt M zum Endpunkt V gezeichnet, absolute Y-Koordinate = 200 -->
<path d="m20 80 h200" stroke="#ffac36" stroke-width="5"/>
<!-- Beispiel 3: 5 Pixel breite, orange, horizontale Linie wird vom Startpunkt M zum Endpunkt h gezeichnet, relative X-Koordinate = 200 | absolute X-Koordinate = 220 -->
<path d="m120 20 v200" stroke="green" stroke-width="10"/>
<!-- Beispiel 4: 10 Pixel breite, grüne, vertikale Linie wird vom Startpunkt M zum Endpunkt v gezeichnet, relative Y-Koordinate = 200 | absolute Y-Koordinate = 220 -->
<!-- Die neue gezeichneten Linien liegen über der den vorher gezeichneten Linien -->
</svg>

Pfad - <path... />, Linienzug geschlossen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als geschlossener Linienzug gezeichnet werden. Der Unterschied zum offenen Linienzug besteht nur darin, dass nach den Koordinaten für die Punkte der Buchstabe Z eingegeben werden muss: <path d="... ...Z" />
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="400">
[8] <path d="M10 10 L110 50 L180 10 L250 70 Z" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als geschlossener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung, letzter Punkt wird mit Startpunkt verbunden -->
[9] <path d="m0 50 l80 50 l90 -40 l110 60 z" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als geschlossener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün, letzter Punkt wird mit Startpunkt verbunden -->
</svg>

Pfad - <path... />, Linienzug offen
Mit dem Tag <path... /> kann in SVG ein Pfad (path) u.a. als offener Linienzug gezeichnet werden. Der Tag dafür beginnt mit <path d="... ..." />
Anzugeben ist in absoluten oder relativen Koordinaten:
[1] M oder m: Startpunkt des Pfades bzw. Linienzuges (zB "M10 10 )
[2] L oder l: Weitere Punkte des Pfades bzw. Linienzuges (zB "L110 50 )
[3] Farbe des Pfades (zB stroke="blue")
[4] Breite des Pfades (zB stroke-width="5")
[5] Farbe oder Füllung (zB fill="yellow" oder keine Füllung (zB fill="none)
siehe auch -> Pfad - <path... />, Übersicht
siehe auch -> Polylinie - <polyline... />

Beispiele: <svg width="300" height="400">
[6] <path d="M10 10 L110 50 L180 10 L250 70" stroke="black" stroke-width="3" fill="none" />
<!-- Beispiel 1: Pfad als offener Linienzug, absolute Koordinaten, 3 Pixel breit, schwarz, keine Füllung -->
[7] <path d="m0 50 l80 50 l90 -40 l110 60" stroke="black" stroke-width="3" fill="#44fd4d" />
<!-- Beispiel 2: Pfad als offener Linienzug, relative Koordinaten, 3 Pixel breit, schwarz, Füllung hellgrün -->
</svg>

Pfad - <path... />, Übersicht
Mit dem Tag <path... /> wird in SVG ein Pfad (path) erstellt. Damit können Linien, Polygonzüge, Kurven, aber auch komplexe Formen gezeichnet werden. Alle Anweisungen für Pfade beginnen mit <path d="..." .../>. Buchstaben innerhalb des Tags bestimmen, welche Art von Pfad gezeichnet wird. (zB mit dem Buchstaben L werden Linien oder Polygonzüge gezeichnet). Dabei werden bei Großbuchstaben absolute Koordinaten (zB Q20 100) und bei Kleinbuchstaben relative Koordinaten (zB q20 100) verwendet.

Übersicht über grundsätzliche Möglichkeiten zum Zeichnen von Pfaden:
[1] Beginn: Punkt, bei dem der Pfad beginnen soll - M (Move to)
[2] Linienzug offen: Linie oder zusammenhängende Linien - L (LineTo)
[3] Linienzug geschlossen: Linie oder zusammenhängende Linien, wobei der letzte Punkt mit dem ersten verbunden wird - Z (ClosePath)
[4] Linie horizontal: horizontale Linie vom aktuellen Punkt bis zum Endpunkt - H (Horizontal LineTo)
[5] Linie vertikal: vertikale Linie vom aktuellen Punkt bis zum Endpunkt - V (Vertical LineTo)
[6] Bézier-Kurven: verschiedene Bézierkurven - Kubische Bézierkurven (Standard-Bézierkurven): C (CurveTo), S (Shorthand/Smooth CurveTo) - quadratische Bézierkurven: Q (Quadratic Bézier CurveTo), T (Shorthand/Smooth Quadratic Bézier CurveTo)
[7] Ellipsenbogen: Ausschnitte von Ellipsen in verschiedenen Varianten - A (Elliptical Arc)

Polygon - <polygon... />
Mit dem Tag <polygon... /> wird in SVG ein Polygon (geschlossener Linienzug) gezeichnet. Es sind mindestens[1] [2] [3] drei Punkte (zB points=20,50 190,20 0,0"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Anfangs- und Endpunkt werden durch eine gerade Linie verbunden. Mit diesen Angaben wird ein [4] Polygon mit 3 Liniensegmenten (Dreieck), der Farbe der SVG-Ansichtsfläche und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[5] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 6 Liniensegmente) eines Polygons angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polygone auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[6] Vorgabemäßig wird die Farbe der Fläche, die der Polygonlinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe (zB fill="yellow") bestimmt. (siehe Beispiel 3).
siehe auch -> Polylinie - <polyline... />

Beispiele:<svg width="300" height="300" fill="#91f581">
[4]<polygon points="20,50 190,20 0,0" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für ein blaues, 1 Pixel breites Polygon mit drei Punkten; Ergebnis: Dreieck mit Füllungsfarbe der SVG-Ansichtsfläche -->
[5]<polygon points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#fa19c3" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Ein 8 Pixel breites, pinkes Polylgon mit 6 Punkten und 6 Liniensegmenten, ohne Füllung -->
[6]<polygon points="10,120 98,144 183,232 40,288" stroke="blue" stroke-width="15" fill="yellow" />
<!-- Beispiel 3: Ein 15 Pixel breites, blaues Polygon mit 4 Punkten und 5 Liniensegmenten sowie der Füllfarbe gelb -->
</svg>

Polylinie - <polyline... />
Mit dem Tag <polyline... /> wird in SVG eine Polylinie (Linienzug) gezeichnet. Es sind mindestens[1] [2] zwei Punkte (zB points=20,50 190,20"), die durch ein Leerzeichen und deren x-Koordinaten und y-Koordinaten durch einen Beistrich getrennt sind, und die Farbe der Polylinie (zB stroke="blue") anzugeben. Mit diesen Angaben wird eine [3] Polylinie mit 1 Liniensegment und der Vorgabelinienbreite 1 gezeichnet (siehe Beispiel 1).
[4] Normalerweise werden mehrere Punkte (zB 6 Punkte) für die zusammenhängenden Liniensegmente (zB für 5 Liniensegmente) einer Polylinie angegeben. Außer der Farbe für die gesamte Poylinie (zB stroke="#5a00ff") muß für breitere Polylinien auch die Linienbreite (zB stroke-width="8") festgelegt werden. Soll keine Flächenfüllung dargestellt werden muss fill="none" hinzugefügt werden (siehe Beispiel 2).
[5] Vorgabemäßig wird die Farbe der Fläche, die der Polylinienzug umschliesst, durch die Farbe der SVG-Ansichtsfläche oder durch eine zusätzlich angegebene Füllfarbe fill="green" bestimmt . Ist die Polylinie nicht geschlossen, begrenzt eine Verbindungsline zwischen Anfangs- und Endpunkte der Polylinie die Fläche (siehe Beispiel 3).
siehe auch -> Polygon - <polygon... />

Beispiele: <svg width="300" height="300" fill="#ffd200">
[3]<polyline points="20,50 190,20" stroke="blue"/>
<!-- Beispiel 1: Minimale Angaben für eine blaue, 1 Pixel breite Polylinie mit zwei Punkten eines einzigen Liniensegments -->
[4]<polyline points="30,80 190,125 220,220 230,35 258,65 265,5" stroke="#5a00ff" stroke-width="8" fill="none"/>
<!-- Beispiel 2: Eine 8 Pixel breite, violette Polylinie mit 6 Punkten und 5 Liniensegmenten, ohne Füllung -->
[5]<polyline points="10,120 98,144 183,232 40,288" stroke="black" stroke-width="15"/>
<!-- Beispiel 3: Eine 16 Pixel breite, schwarze Polylinie mit 4 Punkten und 3 Liniensegmenten sowie der Füllfarbe des SVG-Ansichtsfensters -->
</svg>

Ellipse - <ellipse... />
Mit dem Tag <ellipse... /> wird in SVG eine Ellipse gezeichnet. Es ist mindestens der [1] horizontale Radius (zB rx="80") und der [2] vertikale Radius (zB ry="160") der Ellipse anzugeben. Für den Mittelpunkt der Ellipse wird der [3] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich der Ellipse außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel der Ellipse zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt der Ellipse
(zB [5] cx="200" cy="90"), der [6] horizontale Radius (zB rx="99.999"), der [7] vertikale Radius (zB ry="55.55") und die [8] Füllfarbe der Ellipse (zB fill="yellow") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="330" height="180" fill="#fe799e">
<ellipse rx="80" ry="160"/>
<!-- Beispiel 1: Minimale Angaben für eine Ellipse mit den beiden Radien 80 und 160, deren nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<ellipse cx="200" cy="90" rx="99.999" ry="55.55" fill="yellow"/>
<!-- Beispiel 2: Gelbe Ellipse mit dem Mittelpunkt auf den Koordinaten x=200 und y=90 und den beiden Radien 99,999 und 55,55-->
</svg>

Kreis - <circle... />
Mit dem Tag <circle... /> wird in SVG ein Kreis gezeichnet. Es ist mindestens der [1] Radius (zB r="100") des Kreises anzugeben. Für den Mittelpunkt des Kreises wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet
(zB Vorgabe cx="0" cy="0"). Als Füllfarbe wird die [3] Füllfarbe des SVG-Ansichtsfensters verwendet). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet. Der Bereich des Kreises außerhalb der SVG-Ansichtsfläche wird nicht angezeigt, sodass in diesem Fall nur ein Viertel des Kreises zu sehen ist (siehe Beispiel 1).
Normalerweise wird zumindest der Mittelpunkt des Kreises
(zB [4] cx="140" cy="110"), der [5] Radius (zB r="66.66") und die [6] Füllfarbe des Kreises (zB fill="#fd40dc") angegeben (siehe Beispiel 2).

Beispiele:
<svg width="250" height="200" fill="#21ff8f">
<circle r="100"/>
<!-- Beispiel 1: Minimale Angaben für einen Kreis mit dem Radius 100, dessen nicht angegebener Mittelpunkt auf dem SVG-Koordinatenursprung liegt -->
<circle cx="160" cy="110" r="77.77" fill="#f9b256"/>
<!-- Beispiel 2: Oranger Kreis mit dem Mittelpunkt auf den Koordinaten x=160 und y=110 und dem Radius 77,77 -->
</svg>

Linie - <line... />
Mit dem Tag <line... /> wird in SVG eine Linie gezeichnet. Es ist mindestens einer der [1] Endpunkte (zB x2="300" Y2="100") der Linie anzugeben. Für den anderen Endpunkt der Linie wird der [2] SVG-Koordinatenursprung als Vorgabe verwendet (zB Vorgabe x1="0" Y1="0"). Außerdem muß die [3] Linienfarbe eingetragen werden (zB stroke="#9000ff") . Ist keine Linienbreite angegeben, wird die kleinste Linienbreite (Vorgabe stroke-width="1") angenommen. (siehe Beispiel 1).
Normalerweise werden beide Endpunkte der Linie (zB [4] x1="0" Y1="80" [5] x2="290" Y2="80") und für breitere Linien außer der Linienfarbe (zB stroke="#fd40dc") auch die [6] Linienbreite (zB stroke-width="3") angegeben (siehe Beispiel 2).
Liegt ein Linienendpunkt [7] außerhalb der SVG-Ansichtsfläche (zB x2="355" Y2="-100") wird die Linie an der Grenze der SVG-Ansichtsfläche abgeschnitten (siehe Beispiel 3).

Beispiele:
<svg width="400" height="400">
<line x2="300" y2="100" stroke="#9000ff" />
<!-- Beispiel 1: Minimale Angaben für lila 1 Pixel breite Linie vom Koordinatenursprung nach rechts unten -->
<line x1="0" y1="80" x2="290" y2="80" stroke="#fd40dc" stroke-width="3"/>
<!-- Beispiel 2: Pinkfarbige horizontale 3 Pixel breite Linie von links nach rechts -->
<line x1="50" y1="200" x2="355" y2="-100" stroke="blue" stroke-width="6" />
<!-- Beispiel 3: Blaue 6 Pixel breite Linie von links unten nach rechts oben, außerhalb des SVG-Ansichtsfenstes unsichtbar-->
</svg>

Rechteck - <rect... />
Mit dem Tag <rect... /> wird in SVG ein Rechteck gezeichnet. Es sind mindestens die horizontale Länge bzw. [1] Breite (zB width="200") und die [2] Höhe (zB height="100") anzugeben. In diesem Fall wird ein Rechteck gezeichnet, das mit der linken oberen Ecke im [3] SVG-Koordinatenursprung beginnt und die angegebene Breite und Höhe erhält. Als Füllfarbe wird die [4] Füllfarbe des SVG-Ansichtsfensters verwendet (siehe Beispiel 1). Ist diese Füllfarbe nicht angegeben, wird die Vorgabefüllfarbe Schwarz verwendet.

Soll das Rechteck nicht beim Koordinatenursprung beginnen sind für den [5] linken oberen Eckpunkt des Rechtecks die x-Koordinate (zB x="20") und die y-Koordinate (zB y="105.13345") anzugeben.
Durch Angabe der [6] Rechteckfüllfarbe (zB fill="#64fd6f") in hexadezimaler Schreibweise erhält das Rechteck die angegebene Farbe (siehe Beispiel 2).

Beispiel 1:
<svg width="400" height="400" fill="#feef89">
<rect width="200" height="100" />
</svg>
Diese SVG-Datei im XML-Format erzeugt in einer Ansichtsebene mit 400x400 Pixel und gelber Füllfarbe ein gelbes 200 Pixel breites und 100 Pixel hohes Rechteck, dessen linke obere Ecke im Koordinatenursprung liegt.

Beispiel 2:
<svg width="400" height="400">
<rect x="20" y="122.13345" fill="#64fd6f" width="190" height="75.35" />
</svg>
Diese SVG-Datei zeichnet in einer Ansichtsebene ein hellgrünes 190 Pixel breites und 75,35 Pixel hohes Rechteck, dessen linke obere Ecke vom Koordinatenursprung horizontal 20 Pixel und vertikal 122,13345 Pixel entfernt ist.

-> Text + Kreis + Pfad: österreichische Städte

SVG (Scalable Vector Graphics)
SVG (Scalable Vector Graphics) ist eine HTML-Erweiterung zur Darstellung von zweidimensionalen Vektorgrafiken in Webbrowsern. SVG-Dateien sind im XML-Format geschrieben und können von den meisten neuen Webbrowsern ohne zusätzliches Plug-In angezeigt werden.

Das Koordinatensystem hat seinen Ursprung in der linken oberen Ecke des Zeichenbereichs.
Verwendet werden drei Typen von Elementen:
Vkektorgrafiken: Rechteck, Ellipse und Kreis, Polygon und Pfad
Pixelgrafiken: JPG-, PNG- und BMP-Datein, die innerhalb desKoordinatenssystems verlinkt werden
Text
Die Elemente können verschoben, gruppiert, mit Hilfe von CSS gestaltet und animiert werden.

Beispiel:
<?xml version="1.0" encoding="windows-1250"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<rect x="50" y="40" fill="#FBB03B" stroke="#0000ff" width="200" height="120"/>
</svg>

CSS: Schrift definieren - Schriftfamilie und Schriftstärke
Für die Zuordnung von Eigenschaften für Schriftstile gibt es in CSS mehrere Möglichkeiten. Für Schriftfamilie und Schriftstärke einer Schrift gibt es folgende Eigenschaften:
[4] Schriftfamilie - font-family: kann mehrere zusammengehörige Schriftarten definieren: zB font-family: Courier New, Courier, monospace; - Wenn eine Schhriftart nicht installiert ist, wird die nächste verwendet. Wenn keine Schriftart angegeben wird oder keine der angegebenen vorhanden ist, wird die Standardschriftart verwendet.
[5]Schriftstärke - font-weight:
[5A] fett - bold: font-weight: bold;
[5B] Werte in 9 Zahlenstufen von 100 bis 900 (nur sichtbar, wenn Schriftart mehrere Schriftstärken anbietet): bolder (fetter als die übergeordnte Schrift), lighter (dünner als die übergeordnete Schrift), normal (normale Stärke = Standard ohne Angaben)
[5C] Werte in 9 Zahlenstufen von 100 bis 900 (nur sichtbar, wenn Schriftart mehrere Schriftstärken anbietet): 100 (geringste Schriftstärke), 700 (entspricht etwa Schriftstärke bold), 900 (größte Schriftstärke)
Siehe auch -> CSS: Schrift definieren - Farbe und Schriftgröße!
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[6A] .text4 {font-family: Verdana, Geneva, sans-serif; font-weight: bold;}
<!--Schriftfamilie Verdana..., Schriftstärke fett -->
[6B] .text5 {font-family: "Times New Roman", Times, serif; font-weight: lighter;}
<!--Schriftfamilie TimesNewRoman..., Schriftstärke dünner -->
[6C] .text6 {font-family: Arial, Helvetica, sans-serif; font-weight: 900;}
<!--Schriftfamilie Arial..., Schriftstärke 800 (sehr fett) -->
</style>

CSS: Schrift definieren - Farbe und Schriftgröße
Für die Zuordnung von Eigenschaften für Schriftstile gibt es in CSS mehrere Möglichkeiten. Für Farbe und Schriftgröße einer Schrift gibt es folgende Eigenschaften:
[1] Farbe color - Wird definiert mit einem gültigen Wert für eine Web-Farbe (Dafür gibt es wie immer drei Möglichkeiten):
[1A] Im Beginntag mit dem style-Attribut: style="color: farbcode" (zB farbcode = #F6F)
[1B] Im Head einer HTML-Datei: color: farbcode; (zB farbcode = lightgreen)
[1C] In einer externen CSS-Datei: color: farbcode; (zB farbcode = rgb(117,211,255) )

[2] Schriftgröße - font-size(CSS-Code im Head oder in einer CSS-Datei):
[2A] Pixel px: zB font-size: 16px;
[2B] Weitere Einheiten: pt (Punkt), in (Inch), cm (Zentimeter), mm (Millimeter), pc (Pica), em (lt. Schriftsatz), ex (Bezug auf Höhe von "x");
[2C] Prozent % in Relation zur Ausgangschriftgröße zB font-size: 75%;
[2D] Schlüsselwörter für die Größe: xx-small(winzig), x-small (sehr klein), small (klein), medium (mittelgroß), large (groß), x-large (sehr groß), xx-large (riesig)
[2E] Schlüsselwörter zum Ändern der Schriftgröße: smaller (Verkleinern), larger (Vergrößern)
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[3A] .color1 {font-size: 16px; color: #F00;}
<!--Schriftgröße 16 Pixel, Schriftfarbe im Hexadezimalsystem rot-->
[3B] .color2 {font-size: 125%; color: blue;}
<!--Schriftgröße 125% gegenüber der Normalgröße, Schriftfarbe blau-->
[3C] .color3 {font-size: x-large; color: #007D00;}
<!--Schriftgröße sehr groß, Schriftfarbe im Hexadezimalsystem #007D00-->
.</style>

CSS: Hintergrund definieren
Für die Zuordnung von Hintergründen gibt es in CSS zwei Möglichkeiten:
[1] Zuweisung einer Farbe mit der Eigenschaft background-color: Diese wird mit einem gültigen Wert für eine Web-Farbe definiert.
Dafür gibt es wie immer drei Möglichkeiten:
[1A] Farbzuweisung im Beginntag mit dem style-Attribut: style="background-color: farbcode" (zB farbcode = #F6F)
[1B] Farbzuweisung im Head einer HTML-Datei: background-color: farbcode; (zB farbcode = lightgreen)
[1C] Farbzuweisung in einer externen CSS-Datei: background-color: farbcode; (zB farbcode = rgb(117,211,255) )
[2] Zuweisung eines Bildes oder einer Grafik mit der Eigenschaft background-image. Wie bei der Hintergrundfarbe können diese Attribute ebenfalls auf drei Arten zugewiesen werden: zB im Head:
[2A] background-image: url(pfad/bildname); pfad bezieht sich auf ein Unetrverzeichnis oder eine Internetaddresse (zB images), bildname ist der Dateiname des Bildes (zB meer.jpg)
[2B1] background-repeat: repeat; Bild wird so oft wie möglich horizontal und vertikal wiederholt (Standardeinstellung)
[2B2] background-repeat: no-repeat; Bild wird nur einmal gezeigt
[2B3] background-repeat: repeat-x; Bild wird nur horizontal wiederholt
[2C1] background-position: center; Bild wird in der Mitte zentriert
[2C2] background-position: 10px; Bild beginnt in einer Entfernung von zB 10 Pixel
[2C3] background-position: left; Bild ist am linken Rand (Standardeinstellung)
[2C4] background-position: right; Bild ist am rechten Rand
[2C5] background-position: top; Bild ist am oberen Rand
[2C6] background-position: bottom; Bild ist am unteren Rand
[2C7] background-position: center 30px; Die Werte für Ausrichtung und Abstände können beliebig kombiniert werden. Der erste Wert bezieht sich auf die horizontale Position, der zweite Wert auf die verikale Position (zB horizontal zentriert, Abstand von oben 30 Pixel)
[2D1] background-attachment: scroll; Bild wird beim Scrollen mitbewegt (Standardeinstellung)
[2D2] background-attachment: fixed; Bild wird behält seine fixe Position bei
Siehe auch -> CSS: Farben definieren!
->Link Beispiel-HTML-Datei

Beispiele:
<style type="text/css">
[3] .back_color1 {background-color: #F6F;}
<!--Hintergrundfarbe im Hexadezimalsystem -->
[4] .back_color2 {background-color: lightblue;}
<!--Hintergrundfarbe im Hexadezimalsystem -->
[5] .back_img1 {background-image: url(img/Gr11_0890.jpg);}
<!--Hintergrund als Bild, wird horizontal und vertikal wiederholt-->
[6] .back_img2 {background-image: url(img/PortAn15120.png); background-repeat: no-repeat; background-position: 5px 10px ;}
<!--Hintergrund als Bild, keine Wiederholung, Abstände: links 5 Pixel, oben 10 Pixel-->
[7] .back_img3 {background-image: url(img/hbw_055400.jpg); background-repeat: no-repeat; background-position: center; background-attachment: fixed; }
<!--Hintergrund als Bild, keine Wiederholung, wird in der Mittr zentriert, bleibt an Position, hier als Tabellenhintergrund-->
[8] .back_imgrep1 {background-image: url(img/bl12650A2.png); }
<!--Hintergrund als Bild, wird horizontal und vertikal wiederholt, transparenter Hintergrund: Tabellenhintergrundbild hier sichtbar-->
[9] .back_imgrep2 {background-image: url(img/bl12650C2.png); background-repeat: repeat-x; }
<!--Hintergrund als Bild, wird horizontal wiederholt-->
[10] .back_imgrep3 {background-image: url(img/bl12650B2.png); background-repeat: repeat-y;
background-position: center; }
[11] .back_imgrep4 {background-color: #AA2D39; background-image: url(img/BLwg_090q100.jpg); background-position: center; background-repeat: no-repeat; }
<!--Hintergrundfarbe im Hexadezimalsystem, kombiniert mit Hintergrund als Bid: keine Wiederholung, zentriert-->
span class="nummer">[11] .back_imgrepno {background-image: url(img/bl12650B2.png); background-repeat: no-repeat; background-position: 70px 10px; background-color: #FDD0ED;}
<!--Hintergrundfarbe im Hexadezimalsystem, kombiniert mit Hintergrund als Bidmit transparentem Hintergund: keine Wiederholung, Abstände links 70 Pixel, oben 10 Pixel-->
</style>

HTML-Formulare: Hochladen einer Datei
Zum Hochladen [file upload] einer Datei wird in HTML ein Formular erstellt, das folgende Elemente und Eigenschaften (Attribute) hat:
[1] Tag <form ...> ... </form> für das Formular:
[1A] action="...": Hier steht der Name der Datei oder die Aktion, die das Hochladen [upload] der Datei durchführt:
PHP-Datei (zB action="upload.php"), eine ASP-Datei (zB action="upload.asp"), ein CGI-Script oder eine andere Datei, welche das Hochladen durchführen kann und auf welche hier verwiesen wird, oder
PHP-Anweisung in der aktuellen PHP-Datei: action="<?php echo $_SERVER['PHP_SELF']; ?>" ( Pfad und Name der aktuellen Datei)
[1B] method="post": Daten werden übertragen ohne die Adresszeile zu verwenden
[1C] enctype="multipart/form-data": Festlegung der Verarbeitungsmethode, hier für für das Hochladen von Dateien notwendig
[2] Tag <input ... /> als Dateifeld:
[2A] type="file" Browser bietet hier ein Feld zum Auswählen einer Datei an
[2B] name="feldname" (zB name="fileupload" bzw id="fileupload") zur Identifikation und Weiterverarbeitung der ausgewählten Datei
[3] Tag <input .... /> als Schaltfläche:
[3A] type="submit": zum Absenden und Hochladen der ausgewählten Datei
Siehe auch -> HTML - Formulare, Grundlagen!

Beispiel:
[4] <form action="fileupload1.php" method="post" enctype="multipart/form-data" name="fm_fileupload" id="fm_fileupload">
<input name="fileup1" id="fileup1" type="file">
<input name="upok" type="submit" value="Datei Hochladen">
</form>
In diesem einfachen Formular wird mit action="fileupload1.php" in der hier nicht dargestellten Datei "fileupload1.php" das Hochladen (upload) der im Dateifeld (type="file") ausgewählten Datei durchgeführt. Mit der Schaltfläche (type="submit") wird die Datei an "fileupload1.php" übergeben:
Im Browser kann über [5] "Datei auswählen" aus einem der Verzeichnisse im Computer eine Datei ausgewählt werden. Der [6] Dateiname der ausgewählten Datei (zB "RiMas_0961200.jpg") wird angezeigt und durch das Klicken auf die Schaltfläche [7] "Datei hochladen" hochgeladen.

CSS: Farben definieren
Farben werden in CSS mit der Eigenschaft color und mit einem gültigen Wert für eine Web-Farbe definiert.
Dafür gibt es natürlich drei Möglichkeiten:
[1] Farbzuweisung im Beginntag mit dem style-Attribut: style="color: farbcode" (zB farbcode = #00FF00)
[2] Farbzuweisung im Head einer HTML-Datei: color: farbcode; (zB farbcode = green)
[3] Farbzuweisung in einer externen CSS-Datei: color: farbcode; (zB farbcode = rgb(117,255,233) )
->Link Beispiel-HTML-Datei

Beispiele
[4] Farbzuweisung im Beginntag von <p> mit dem style-Attribut:
<p style="color:#9b02db;">Farbe LILA mit style-Attribut: style=&quot;color: #9b02db;&quot;</p>
[5] Farbzuweisung durch die Klasse ".farbe_a" im im Head der HTML-Datei:
<style type="text/css">
.farbe_a {
color:blue;
}
</style>
[6] Farbzuweisung durch die Klasse ".farbe1" in der externen CSS-Datei "farben.css":
.farbe1 {
color: #237C8F;
}

Zuweisung von Web-Farben
Die direkte Zuweisung von Farben geschieht im HTML-Code über Attribute in den Tags. Nur bestimmte Tags akzeptieren die direkte Zuweisung von Farben für HTML-Objekte oder Hintergründe. Die Farbangabe erfolgt entsprechend den in HTML gültigen Web-Farben bzw. Farbsystemen.
[1] Attribut für Farbe des Objekts (zB für Text oder horizontale Linien): color="benannteFarbe" (zB color="red") oder color="#RGB" (zB color="#FF00CA")
[2] Attribut für die Hintergrundfarbe (zB für für die Seite oder eine Tabelle): bgcolor="benannteFarbe" (zB bgcolor="gray") oder color="#RGB" (zB color="#B033FF")
[3] Attribute für die Seite <body>: [3A] Hintergrundfarbe: bgcolor - [3B] neuer Link: link - [3C] besuchter Link: vlink - [3D] aktiver Link: alink - [3E] Textfarbe: text
[4] Attribute für Rahmen von Tabellen und Zellen: [4A] Hintergrundfarbe: bgcolor - [4B] Rahmenfarbe: bordercolor - [4C] heller Rahmenteil: bordercolorlight - [4D] dunkler Rahmenteil: bordercolordark

Beispiele:
<body [3A] bgcolor="#D8F4FF" [3B] link="#0000FF"[3C] vlink="#9900CC" [3D][3D] alink="#FF3366" [3E] text="#003333">
<hr [1B] color="#3f0075" width="300" >
<h3 align="center"><font [1A] color="#FF00FF">Ich bin eine lilafarbene Überschrift</font></h3>
<table width="300" border="4" align="center" [4A] bgcolor="#C5EFFF" [4B] bordercolor="#FF6666" [4C] bordercolorlight="#60D0f9" [4D] bordercolordark="#012773" >
<tr>
<td align="center" ><strong>GLÜCKLICHE UND<br>
ERFOLGREICHE TAGE</strong></td>
</tr>
<tr>
<td align="center" ><strong><a href="http://www.cadat.at/" target="_blank">WÜNSCHT CADAT</a></strong></td>
</tr>
</table>
</body>
Die Attribute bordercolorlight und bordercolordark werden nicht von allen Browsern angezeigt. Einige zeigen anstelle dieser Attribute die Farbe von bordercolor
->Link Beispiel-HTML-Datei

Anmerkung Meistens erfolgt die Farbzuweisung jedoch über CSS

Web-Farben: Farbsysteme
Die meisten heutigen Web-Browser verstehen verschiedene Angaben zur Darstellung von Farben im additiven Farbsystem für Displays und Monitore. Daher bestehen die Farben auch für den HTML-Code aus den drei Farbkomponenten [1] Rot, [2] Grün und [3] Blau.
[4] Hexadezimalsystem:
Dieses Sytem wird von allen Webbrowsern richtig interpretiert, wenn der Farbcode folgenden Aufbau hat:
#RGB (Rot-Grün-Blau): Jeder Farbanteil kann die Werte von 00 bis FF annehmen. Bei Grautönen sind alle Werte gleich. Die Code-Kombinationen ergeben theoretisch 15125 Farbtöne und 256 Grautöne inklusive Weiß (#000000) und Schwarz (#FFFFFF).
[5] Benannte Farben [Named Colors]
Einige dieser Farbkombinationen können auch duch Farbnamen definiert werden. Jeder Browser kennt zumindest namentlich 16 Farbnamen (zB Black, White, Blue). Einige Browser kennen jedoch wesentlich mehr Farbnamen.
[5] [6] RGB-Farbsystem
Viele Browser können auch Farben im RGB-Farbsystem richtig interpretieren. Dadurch sind noch wesentlich mehr Farbkombinationen theoretisch möglich. Nach der Buchstaben kombination rgb stehen die Farbanteile für Rot, Grün und Blau in Klammer:
[5] rgb(R,G,B) - Werte für Rot, Grün und Blau von 0 bis 255
oder
[6] rgb(R%,G%,B%) - Werte für Rot, Grün und Blau in Prozent von 0% bis 100%

Beispiele:
[7] Hexadezimalsystem: #FF00FF - Benannte Farben: Fuchsia - RGB-System rgb(255,0,255) oder rgb(100%,0%,100%)
[8] Hexadezimalsystem: #7FFFD4 - Benannte Farben: Aquamarine - RGB-System rgb(177,255,212) oder rgb(69%,100%,83%)
[9] Hexadezimalsystem: #808080 - Benannte Farben: Gray - RGB-System rgb(128,128,128) oder rgb(50%,50%,50%)

Neuerungen in CSS 3
CSS 3 (Cascading Style Sheet Level 3) als Nachfolger von CSS 2.1 ist, basierend auf den Elementen und der Syntax von CSS 2, modular aufgebaut und enthält eine große Anzahl von neuen Elementen, Funktionen und Modulen. Dies sind unter anderem:
Einbetten von Schriftarten, die nicht auf dem Computer des Users installiert sind
Neue Schrift-Eigenschaften (zB Regeln für Zeilenumbruch, Mehrspaltigkeit)
Farbverläufe (zB für Hintergründe)
Halbtransparente Hintergründe und Elemente (von durchsichtigt bis undurchsichtig)
Rotationen (zB Drehung von Ebenen mit Inhalt)
Schlagschatten (zB für Texte und Box)
Animationen, Transitions (zB weiche Bildübergänge)
2D- und 3D-Transformationen (Verformungen)
Neue Pseudoelemente (zB für Tabellenelemente und Listen)
Veränderung von Farbe und Position in Eingabefeldern
Neue Eigenschaften für Medien (zB Positionierung)

X3D (Extensible 3D)
X3D (Extensible 3D) ist eine HTML-Erweiterung um 3D-Modelle in einem Webbrowser mit einem geeigneten Plugin bzw. Player anzeigen zu können. X3D-Dateien sind im XML-Format geschrieben, basieren auf einem ISO-Standard und sind eine Weiterentwicklung von VRML.

Ausgehend von Definitionen für eine 3D-Szene werden in einem dreidimensionalen Raum Objekte mit bestimmten Eigenschaften, Lichtquellen und eine Kameras mit Standort und Blickwinkel definiert. Mit Hilfe des verwendeten Players bzw. Plugin des Browsers kann sich der Betrachter im 3D-Raum bewegen (zB Zoomen, Ansicht verändern...)

Beispiel:
<?xml version="1.0" encoding="UTF-8"?>>
<X3D profile='Immersive'>
<Scene>
<Viewpoint position="6 4 5" orientation='1 0 0 -0.5'/>
<Transform translation='4 1 0'>
<Shape>
<Box size='2 2 2'/>
<Appearance>
<Material diffuseColor="1 0 0"/>
</Appearance>
</Shape>
</Transform>
</Scene>
</X3D>

Diese X3D-Datei (Dateiendung: .x3d) erzeugt einen verschobenen Würfel mit einer Seitenlänge von 2 Einheiten und der Materialfarbe "Rot". Zu Beginn werden für eine Kamera Standpunkt und Blickrichtung für die Ansicht des 3D-Objekts festgelegt.

CSS-Datei in HTML einbinden
Eine externe CSS-Datei, die den CSS-Code enthält, kann in beliebig vielen HTML-Dateien eingebunden bzw. mit diesen verknüpft werden. Im Regelfall wird der entsprechende Code im Head der HTML-Datei eingetragen, damit die CSS-Formate von Anfang an zur Verfügung stehen. Befindet sich die CSS-Datei nicht im gleichen Verzeichnis, sind auch die Pfade anzugeben.
<link href="basis.css" rel="stylesheet" type="text/css">
Es können auch mehrere CSS-Dateien veknüpft werden.

Beispiel
CSS-Dateien: "basis.css" und "layout1.css"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS extern</title>
[1] <link href="basis.css" rel="stylesheet" type="text/css">
[2] <link href="css/layout1.css" rel="stylesheet" type="text/css">
</head>
Hier werden zwei CSS-Dateien eingebunden, wobei [1] ."basis.css" im gleichen Verzeichnis wie die HTML-Datei und [2] "layout1.css" im Unterverzeichnis "css" liegt.

Pseudoklassen für Hyperlinks
Mit Pseudoklassen können mit CSS bestimmte Eigenschaften eines Elements formatiert werden. Sie beginnen mit einem Doppelpunkt (:) und dürfen weder davor noch dahinter Leerzeichen aufweisen. Am häufigsten werden Pseudoklassen zum dynamischen Formatieren von Hyperlinks (Links) verwendet. Sie beziehen sich auf den Tag <a> und müssen in der folgenden Reihenfolge definiert werden:
[1] :link - Neuer Hyperlink, der noch nicht ausgewählt bzw. besucht wurde
[2] :visited - Bereits ausgewählter bzw. besuchter Hyperlink
[3] :hover - Hyperlink, über dem sich gerade das Zeigegerät befindet
[4] :active - Hyperlink, der gerade aktiv bzw. ausgewählt ist.

Beispiel
HTML-Quellcode des Hyperlinks (zB): <a href="http://www.cadat.at/">www.cadat.at</a>
CSS-Quellcode für Pseudoklassen, angewendet auf den Hyperlink ( <a href=.....>...</a>);
a:link {color: #096;}
a:visited {color: #666;}
a:hover {color: #F00;}
a:active {text-decoration: underline overline;}
Der neue Link wird in einer grün-blauen und der besuchte in einer grauen Farbe angezeigt. Beim Darüberfahren mit dem Zeigegerät erscheint der Link rot. Beim aktiven Link wird noch ein waagrechter Strich oben (overline) hinzugefügt,

CSS-Code in Textdatei
Der CSS-Code kann auch in eine externe Textdatei geschrieben werden. Diese [1] Textdatei hat normalerweise die Dateiendung "css" (zB basis.css) und enthält nur den reinen CSS-Code. Das sind die Selektoren und zwischen den geschweiften Klammern die Deklarationen.

Alle Seleketorentypen können hier definiert werden:
[2] Typselektoren (HTML-Tags): Name des Selektors (zB body) ohne Zusatzzeichen und Deklarationen
[3] Klassenselektoren: Punkt (.) vor dem Namen des Selektors (zB body) und Deklarationen
[4] ID-Selektoren: Raute (#) vor dem Namen des Selektors (zB #layer1) und Deklarationen
[5] Pseudoklassen: Nach HTML-Element ein Doppelpunkt (:) vor dem Namen des Selektors (zB a:link) und Deklarationen
Siehe u.a. auch -> CSS - Selektoren-Typen und -> CSS, Aufbau, mehrere Deklarationen
Die CSS-Datei kann in beliebig vielen HTML-Dateien aufgerufen werden. Das hat den Vorteil, dass Änderungen nur in der CSS-Datei und nicht in jeder zugehörigen HTML-Datei gemacht werden müssen.

Beispiel
[1] CSS-Datei: "basis.css"
body {
font-family: Arial, Helvetica, sans-serif;
color: #1c1c1c;
}
.titel {
font-size: 14pt;
font-weight: bold;
}
#layer1 {
position:relative;
width:300px;
height:200px;
z-index:7;
left: 0px;
top: 0px;
overflow: hidden;
border: 1px solid #6e6e6e;
}
a:link,
{
text-decoration:none;
color: #ff0000;
}
In dieser CSS-Datei werden als Beispiel alle 4 Selektorentypen definiert.

HTML-Tags mit CSS formatieren
Gültige HTML-Tags können mit Hilfe von CSS umformatiert bzw. neu gestaltet werden. Im Quellcode sind die Tags ohne zusätzliche Zeichen zu erkennen. Innerhalb der geschwungene Klammer können dem Selektor (zB Tag <h1>) eine oder mehrere Deklarationen zugewiesen werden. Änderungen der Eigenschaften des Tags <body> gelten für die gesamte HTML-Seite (zB Festlegen der Schriftfamilie).

Beispiel
[1] Text als Überschrift 1 (Tag <h1>) ohne Anwendung von CSS-Regeln formatiert;
[2] Text als Überschrift 1 (Tag <h1>) mit Anwendung von CSS-Regeln formatiert;

CSS-Quellcode für Tag <h1> (Überschrift 1):
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 24pt;
font-weight: bold;
color: #33C;
}
Mit <h1> formatierte Texte werden im Textstil "Verdana" (wenn vorhanden) mit einer Größe von 24 Punkt, fett und in einem dunklen Blauton (Webfarbe #33C) geschrieben.

Meta-Tag: charset="Zeichenkodierung"
Durch das Attribut "charset" eines Meta-Tags wird die Zeichenkodierung, die in der zugehörigen HTML- oder XML-Datei verwendet wird, angegeben. Die Zeichencodierung teilt dem Browser mit, welche Zeichen für die Anzeige verwendet werden müssen. Ist dieser Meta-Tag nicht vorhanden oder der falsche Zeichensatz angegeben, werden Sonderzeichen einer Sprache sehr wahrscheinlich falsch angezeigt.
[1]<meta charset="Zeichenkodierung">
Meta-Tags werden im <head> (Kopf) einer Webseite platziert.

Beispiel:
<meta charset="UTF-8">

Meta-Tag: name="keywords"
Mit dem Meta-Tag "keywords" können bestimmte Stichwörter, die in einer Webseite enthalten sind, angegeben werden. Diese Stichwörter können zB in den Suchdatenbanken von Suchmaschinen vorhanden sein und als Begriffe für die Suche im Internet verwendet werden. Mehrere Stichwörter sollen durch Beistriche getrennt werden:
[1]<meta name="keywords" content="Stichwörter">
Meta-Tags werden im <head> (Kopf) einer Webseite platziert.

Beispiel:
<meta name="keywords" content="Foto, Grafik, Gemälde, visuelle Kompositionen, Objektkunst">

Web-Farben: Hexadezimalsystem
Web-Farben sind eine Auswahl aus dem additiven Farbsystem, die in allen Web-Browsern auf allen Systemen gleich angezeigt werden. Entsprechend dem RGB-Farbmodus setzen sie sich aus den Farbkomponenten Rot, Grün und Blau zusammen.
Im allgemeinen werden sie im HTML-Quellcode nach dem Hexadezimalsystem codiert, wobei ihnen zur Kennzeichnung das Zeichen "#" vorangestellt wird.
Für die drei Farbkomponenten werden nur folgende Hexadezimal-Codes verwendet:
00, 33, 66, 99, CC, FF.
Werden diese sechs Codes, jeweils für Rot, Grün und Blau, kombiniert, entstehen daraus die 216 gültigen Web-Farben.

Beispiel:
Web-Farbe #6600FF hat folgende Farbanteile: Rot 66 (=102 dezimal), Grün 00 (=00 dezimal), Blau FF (=255 dezimal)

<div> - <span>
Die Tags <div> und <span> werden zum Gruppieren und Strukturieren des Dokuments, meistens in Zusammenhang mit den Attributen "class" und "id" benutzt.
Das Element <div> wird häufig auch, in Verbindung mit "id", zur Erstellung und Positionierung von Ebenen, die ihrerseits Elemente wie zB Bilder und Text enthalten können, auf der Webseite eingesetzt.
Das Element <span> kann in Verbindung mit "class" auch mitten im Text zur Formatierung von Textteilen verwendet werden, ohne dass der Textfluss beeinträchtigt wird.

Anmerkung:Der Hauptunterschied zwischen den beiden Tags besteht darin, dass nach <div>...</div> ein Zeilenumbruch erfolgt und nach <span>...</span> nicht.

Head
Der Head-Teil ist vom übrigen HTML-Dokument durch den Tag <head>...</head> abgegrenzt. Zumindest der Titel des Dokuments (zB: <head>Aktuelles</head>), der in der Titelleiste des Webbrowser angezeigt wird, soll angegeben werden. Im Head-Bereich können eine große Anzahl von weiteren Informationen durch META-Tag (<meta... >), die im Browser-Fenster nicht angezeigt werden, definiert werden.
Außerdem können CSS-Definitionen (Formatierungsanweisungen) und Scripts (zB JavaScript) enthalten sein oder mit externen Dateien verknüpft sein.

Beispiel für einen wichtigen META-Tag:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> = Info für den Browser: Westeuropäischer Zeichensatz

Medien: <object> und <embed>: Mindestangaen
Um ein Video in möglichst allen Browsern abspielen zu können sind außer den beiden Tags <object> und <embed> folgende Angaben und Attribute mindestens erforderlich:
Attribute im Tag <object>:
[1] classid= Angabe des ActiveX-Elements (zB für den Windows-Media-Player);
[2] width= und height= Angabe der Breite und Höhe des Videos;
Parameter im Tag <object>:
[3] <param name="Filename" value= Angabe der Video-Datei, erforderlichenfalls mit Pfadangabe;
Attribute im Tag <embed>:
[4] src = Angabe der Video-Datei, erforderlichenfalls mit Pfadangabe;
[5] width= und height= Angabe der Breite und Höhe des Videos;
Es gibt eine große Anzahl von weiteren Attributen und Parametern. Werden keine weiteren angegeben, werden bestimmte Vorgaben ausgeführt: Das Video wird mit einer Steuerleiste angezeigt und automatisch gestartet.

Beispiel:
object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="176" height="144">
<param name="Filename" value="video01.wmv" />
<embed src="video01.wmv" width="176" height="144" />
</object>

CSS - Ebenen: Positionierung, z-Index
Ebenen (Layer) sind in HTML Objekte, die durch den Tag <div> und das Attribut "id" definiert sind.
Die Position wird durch Abstandangaben und die Größe des rechteckigen Objekts durch Breiten- und Höhenangaben bestimmt.
Werden Ebenen überlappend angeordnet, können oben liegende Ebenen darunter liegende verdecken. Dies wird durch das Attribut "z-index" geregelt. Ebenen mit einem größeren Z-Index sind weiter vorne bzw. weiter oben angeordnet.
Die Eigenschaften der Layer werden mittels CSS im Beginntag durch das Attribut "style", im Head oder in einer externen CSS-Datei mit dem Layernamen und dem voreingestellten Zeichen "#" beschrieben.
In Dreamweaver werden die Ebenen im Ebenenfenster hierarchisch und namentlich angezeigt und können im Layout-Modus auch mit der Maus verschoben bzw. größenmäßig geändert werden.

Beispiel:
<div id="layer1" style="position:absolute; width:130px; height:60px; z-index:1; left: 103px; top: 100px;">
<div id="layer2" style="position:absolute; width:130px; height:60px; z-index:2; left: 120px; top: 130px;">
<div id="layer3" style="position:absolute; width:130px; height:60px; z-index:3; left: 140px; top: 160px;">

CSS - Attributselektoren: Class-Selektoren (Klassen)
Unter den Attributselektoren bei CSS sind Class-Selektoren (Klassen) jene, die in einem Dokument mit dem Attribut "class" gekennzeichnet sind und beliebig oft vorkommen dürfen. Sie werden für selbst definierte Stile bzw. "Formatvorlagen" verwendet und ergänzen die Formatierungsvorgaben von HTML-Tags.
Im Beginn-Tag wird dem Attribut "class" ein Name für die Klasse bzw. den Selektor zugewiesen, wobei die Formateigenschaften für die Klasse in den CSS-Anweisungen im "Head-Teil" oder in einer CSS-Datei festgelegt sind.
In einer CSS-Anweisung wird der Class-Selektor durch das Zeichen "." (Punkt) vor dem Namen des Selektoren gekennzeichnet.

Beispiel:
Im Beginntag: <td class="text1">;
In der CSS-Anweisung: .text1 {color:red; font-weight:bold;}, d.h. in der zugehörigen Tabellen-Zelle wird die Text-Formatierung von der Klasse "text1" bestimmt und somit rot und fett geschrieben.

CSS - Attributselektoren: ID-Selektoren
Unter den Attributselektoren bei CSS sind ID-Selektoren jene, die in einem Dokument mit dem Attribut "id" gekennzeichnet sind und deren Name eindeutig sein soll, d.h. im selben Dokument nur einmal vorkommen sollen und deshalb eindeutig identifiziert werden können.
ID-Selektoren werden u.a. für Positionierungen von Elementen im Browser-Fenster und häufig zusammen mit DIV-Tags verwendet.
Im Beginn-Tag wird dem Attribut "id" ein eindeutiger Wert als Name, der auch in anderen Programmiersprachen verwendet werden kann, zugewiesen.
In einer CSS-Datei oder im "Head-Teil" eines HTML-Dokuments wird der ID-Selektor durch das Zeichen "#" (Raute) vor dem Namen des Selektoren gekennzeichnet.
Beispiel:
Im Beginntag: <div id="objekt1">;
in der CSS-Anweisung: #objekt1 {position:absolute; left:20px; top:50px;}, d.h. "Objekt1" wird im Browser-Fenster mit einem linken Abstand von 20 Pixel und einem oberen Abstand von 50 Pixel positioniert.

Meta-Tag: name="description"
Mit dem Meta-Tag "description" kann eine kurze Beschreibung einer Webseite angegeben werden, die zB Suchmaschinen verwenden um bestimmte Seiten mit bestimmten Inhalten in ihren Suchergebnissen anzeigen:
[1]<meta name="description" content="Beschreibung">
Meta-Tags werden im <head> (Kopf) einer Webseite platziert.

Beispiel:
<meta name="description" content="Informationen für Lernende zu Bildbearbeitung und Webdesign">

VRML (Virtual Reality Modeling Language)
VRML (Virtual Reality Modeling Language) ist eine HTML-Erweiterung, die es ermöglicht, 3D-Szenen mit einem geeigneten Browser oder einem entsprechenden PlugIn oder Viewer darzustellen. VRML ist eine Skriptsprache, die hauptsächlich Objekte durch sogenannte Knoten erzeugt. Außerdem können Materialeigenschaften, Standpunkte und Lichtquellen definiert werden.
3D-Szenen werden online erzeugt. Daher wird eine schnelle Performance benötigt.

Anmerkung: Aktuell wäre nach wie vor die Version VRML2. VRML wurde jedoch nicht mehr weiterentwickelt
Beispiel:
# VRML V2.0
Shape {
geometry Box {
size 2 3 4
}
Diese VRML-Anweisung erzeugt einen Quader mit den Kantenlängen 2, 3 und 4.

CSS - Positionierung
Mit Hilfe von CSS-Anweisungen können Elemente wie Bilder oder Ebenen in einem Browserfenster positioniert werden. Dabei werden die Attribute "id" für ID-Selektoren oder "style" für unmittelbare Anweisungen direkt im Beginn-Tag verwendet.
Für die Eigenschaft "position" sind folgende Möglichkeiten von praktischer Bedeutung:
[1] position:absolute --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen mitbewegt.
[2] position:relative --> die Lage des Elements wird durch die Abstände zum übergeordneten Element bestimmt.
[3] position:fixed --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen nicht mitbewegt. Nicht alle Browser-Versionen verstehen diese CSS-Anweisung.
Die Abstände werden durch folgende Eigenschaften festgelegt:
[1] top: Abstand von oben;
[2] left: Abstand von links
[3] bottom: Abstand von unten;
[4] right: Abstand von rechts;
Die Abstände können in Pixel (px) oder als Prozentzahlen (%) angegeben werden.

Beispiel:
Im Beginn-Tag mit "style":
<div style="position:absolute; left:20px; top:30px; width:120px; height:60px;">;
das gleiche Beispiel mit ID-Selektor (wird als "Ebene" bezeichnet):
<div id="layer1">;

In der CSS-Anweisung:
#layer1 {
position:absolute;
left:20px;
top:30px;
width:120px;
height:60px;
}
d.h. das DIV-Element (Ebene "layer1") mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel wird 200 Pixel und 50 Pixel vom oberen Fensterrand fix positioniert.

CSS - Selektoren-Typen
Bei CSS gibt es drei Arten von Selektorentypen:

[1] Typselektoren sind HTML-Tags wie zB <body> oder <h1>.
[2] Attributselektoren werden in Klassenselektoren und ID-Selektoren eingeteilt. Klassen (Stile) können in einer HTML-Datei, gekennzeichnet mit dem Attribut "class", beliebig oft eingesetzt werden, während IDs in einem HTML-Dokument, gekennzeichnet mit dem Attribut "id", eindeutig sein müssen.
[3] Pseudoklassen werden üblicherweise im Zusammenhang mit Hyperlinks verwendet.

CSS - mehrere Deklarationen
Deklarationen in CSS-Anweisungen, die für den gleichen Selektor bestimmt sind, werden innerhalb der geschwungenen Klammer durch Strichpunkte (Semikola) getrennt.
Mehrere Werte, die für dieselbe Deklaration bestimmt sind, werden durch Beistriche getrennt.
Beispiel:
h1 {font-family: Arial, Helevetica, sans-serif; font: bold; font-size: 18px}, d.h. Ãœberschriften 1 (<h1>) werden - je nach Verfügbarkeit - mit der Schriftfamilie Arial, Helvetica oder sans-serif, fett und mit einer Schriftgröße von 18 Pixel geschrieben.

HTML - Formulare, Grundlagen
Formulare werden in HTML für User-Interaktionen (zB Eingeben von Daten, An- und Abmeldungen, Verkauf). Meistens werden sie in Verbindung mit dynamischen Webseiten und Datenbanken (CMS, PHP), aber auch zur Erstellung von Anfragen über E-Mail-Kontakte eingesetzt.
Der Container, der alle Formular-Objekte enthält, ist der Formular-Tag
[1] < form ...>... < /form>.
Folgende Objekte für Formulare werden standardmäßig eingesetzt:
[2] Textfeld, einzeilig: < input type="text" ... />
[3] Textbereich, mehrzeilig; < textarea ...>Text Text ... < /textarea>
[4] Checkbox: < input type="checkbox" ... /> (Auswählen von einer oder mehreren Optionen)
[5] Optionsschalter: < input type="radio" ... /> (Nur 1 Option kann ausgewählt werden)
[6] Liste / Menü: < select ...> < option>Eintrag 1< /option> .... < /select> (Auswahl aus Liste oder Menü)
[7] Dateifeld: < input type="file" .... /> (Feld für Datei-Upload)
[8] Bildfeld: < input type="image" src="images/bildfeld.jpg" .... /> (Verknüpfung mit einer Grafik zB als Alternative zur Schatlfläche)
[9] Verstecktes Feld: < input type="hidden" ... /> (für den User unsichtbares Feld zur Ãœbertragung von Werten)
[10] Schaltfläche: < input type="submit" ... /> (Absenden des Formulars)
siehe auch ->Dreamweaver, Formulare, Grundlagen, Formularobjekte

Beispiel:

Textfeld, einzeilig:
Textbereich, mehrzeilig: Text Text ...
Checkbox:
Optionsschalter:
Liste / Menü: Eintrag 1 Eintrag 2
Dateifeld:
Bildfeld:
Verstecktes Feld:
Schaltfläche:

Aufbau von Meta-Tags
Meta-Tags stehen im Head-Teil einer Webseite (HTML, PHP etc.) und liefern zB Informationen für Suchmaschinen. Es gibt eine große Anzahl von Meta-Tags, die aber von Suchmaschinen häufig ignoriert werden. Sie sind im Browser nicht sichtbar und bestehen aus dem Tag <meta> selbst und aus zwei Attributen im Tag. Das erste Attribut hat entweder die Bezeichnung "name" oder "http-equiv", Das zweite Attribut hat die Bezeichnung "content" und enthält sozusagen den Inhalt bzw die Werte.

[1] Meta-Tags mit dem Attribut "http-equiv" beziehen sich zB auf die Sprache oder den Zeichensatz der Webseite und waren ursprünglich als Information für den Webserver gedacht.
Beispiel 1: <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Dieser Meta-Tag informiert, dass auf dieser Webseite der UTF-8 Zeichensatz verwendet wird

[2] Meta-Tags mit dem Attribut "name" bieten vor allem Informationen für Web-Browser und Suchmaschinen-Robots.
Beispiel 2: <meta name="author" content="Martin Forinstance">
Dieser Meta-Tag informiert, wer der Autor dieser Webseite ist.

Hotspots definieren
Die Hotspots der ImageMaps werden innerhalb des Tags <map> .... </map> definiert. Damit der Browser weiß, welche Map-Definition mit der Grafik verbunden werden soll, muss im Tag <img> der Wert des Attributs "usemap" mit dem Map-Namen übereinstimmen:
(zB <img src="bild1.jpg" usemap="#mapname" ....>
<map name="mapname" id="mapname">
... </map>).

Beispiel mit drei Hotspots (Rechteck, Kreis, Polygon):
<img src="images/wegweiser.jpg" alt="Wegweiser" name="tafel" width="400" height="104" border="0" usemap="#map_tafel" id="tafel">
<map name="map_tafel">
<area shape="rect" coords="282,45,387,96" href="rastsstation.html" alt="Raststation">
<area shape="circle" coords="172,26,15" href="ungarn.html" alt="nach Ungarn">
<area shape="poly" coords="53,29,41,44,41,94,60,96,98,32" href="abzweigung.html" alt="nach Graz oder Eisenstadt">
</map>


CSS - Grundlagen
CSS (Cascading Style Sheets) sind im weitesten Sinn Formatvorlagen (Formatierungsanweisungen, Stile), deren Quellcode als Text vorliegt, für HTML- und XML-Dokumente.
Mit CSS kann Inhalt und Darstellung getrennt werden. So kann zB das Aussehen einer ganzen Website durch Änderung der Formatierungsanweisung in einer einzigen CSS-Datei geändert werden.