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.

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.

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.

CSS - Selektor und Deklaration
CSS-Anweisungen bestehen aus zwei Teilen, und zwar dem Selektor und der Deklaration.
Der Selektor bestimmt, für welches Element eine Formatierung vorgenommen wird.
Die Deklaration steht innerhalb von geschwungenen Klammern und bestimmt die Gestaltung von Elementen. Die Deklaration wiederum besteht aus der Eigenschaft und dem zugehörigen Wert, getrennt durch einen Doppelpunkt.

Beispiel:
h1 {color:blue}, d.h. Ãœberschriften 1 (<h1>) werden blau geschrieben.

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)

CSS-Anweisungen, Einsatz
CSS-Anweisungen (Formatierungsanweisungen, Stile) können auf folgende Weise eingesetzt werden.
[1] Inline CSS-Anweisungen: im Beginn-Tag als Attribut, wobei dem Attribut "style" die Werte innerhalb von Anführungzeichen zugewiesen werden.
[2] Interne CSS-Anweisungen: im Headbereich, wobei die CSS-Anweisungen zwischen den Tags <style type="text/css"> und </style> stehen.
[3] Externe CSS-Anweisungen: in einer externen Datei, deren Dateiendung üblicherweise ".css" heißt.

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.

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 - 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.

Framesets
Framesets unterteilen das Browserfenster in zwei oder mehrere Bereiche, Frames genannt. In jedem Frame kann eine HTML-Datei geladen und angezeigt werden. Durch die Verlinkungsmöglichkeiten können in den einzelnen Frames weitere Dateien geladen bzw. ersetzt werden.
Das linke Frame wird meistens für die Navigation verwendet, während das große, meistens rechte, die Inhalte zeigt. Bei einem drei- oder vierteiligen Frame wird das obere Frame häufig für Banner oder Menüs, das untere auch für Werbung eingesetzt.
Um in einem Frame eine Datei durch eine andere zu ersetzen, wird bei der Verlinkung das Attribut "target", welches das Ziel (Frame- bzw. Fensternamen) der Verlinkung im Frameset angibt, benötigt (zB <a href="aktuell.html" target = "inhalt">).

Das Minimum, ein zweiteiliges Frameset, benötigt am Anfang drei Dateien, nämlich das Frameset, eine HTML-Datei, welche die Einteilung des Browserfensters bestimmt, und zwei HTML-Dateien, die in den beiden Frames aufgerufen und angezeigt werden. Für ein dreiteiliges Frameset sind vier Dateien erforderlich.

Frameset im Quellcode
Im Quellcode wird das Frameset, im Prinzip eine HTML-Datei, durch den Tag <frameset> eingeleitet und mit </frameset> beendet. Die horizontale Teilung wird mit dem Attribut "rows" und die vertikale mit dem Attribut "cols" vorgenommen. Als Werte können Zahlen (zB "30"), welche die Breite der Spalten oder Zeilen in Pixel bestimmen, oder Prozenangaben (zB "30%") eingegeben werden.
Eine Sonderstellung nimmt das Zeichen "*" ein: Es steht für alle Pixel oder Prozent bzw. für den Rest der zur Verfügung stehenden Fenstergröße.
Ein Browser, der keine Frames anzeigen kann, ignoriert das Frameset und zeigt nur den Inhalt zwischen den Tags <noframes> und </noframes>.

Beispiel:
cols="80,*": Im folgenden Frameset wird das Browserfenster vertikal geteilt, wobei die linke Spalte 80 Pixel breit ist und die rechte Spalte so breit wie möglich angezeigt wird.
<frameset cols="80,*" frameborder="no" border="0" framespacing="0">
<frame src="menue.html" name="navigation" scrolling="No" noresize="noresize" id="navigation" title="Men" />
<frame src="aktuell.html" name="inhalt" id="inhalt" title="Aktuell" />
</frameset>
<noframes><body>Ihr alter Browser kann leider keine Frames anzeigen.
</body>
</noframes>

Bilder in HTML - Grundlagen
Grafiken bzw. Bilder werden in HTML mit dem Tag <img> eingebunden. Der Browser kann Grafik-Dateien im JPG-Format, im GIF-Format und im PNG-Format anzeigen.
Dazu wird als minimale Angabe das Attribut "src" benötigt, das auf die "Quelle" d.h. den Speicherort, erforderlichenfalls mit Pfadangabe, hinweist. Die Bilder bzw. Grafiken sollen so groß wie tatsächlich benötigt sein, um nicht unnötig Webspeicher zu verbrauchen oder die Ausgangsqualität zu verschlechtern. Ãœblicherweise werden sie in eigenen Ordnern (meistens mit "images" oder "bilder" benannt) abgelegt.
Besonders erwünscht sind in jedem Fall die Angaben für die Breite (Attribut "width"), Höhe (Attribut "height") und das Attribut "alt". Das Attribut "alt" gibt einen Hinweis auf das Bild, falls es aus irgend einem Grund nicht angezeigt werden kann und ist für barrierefreie Zugänge wichtig, weil Software beispielsweise Blinden den Inhalt des Attributes "alt" vorlesen kann.

Beispiel für absolutes Minimum:
<img src="images/bildname.jpg">;
Standardbeispiel mit Pfadangabe:
<img src="images/bildname.jpg" alt="Fachschule" width="200" height="100">

HTML
HTML (Hypertext Markup Language) ist eine auf Text basierende Sprache, die vor allem für das Internet entwickelt wurde und deren Inhalt von den Web-Browsern gelesen und auf den Bildschirmen angezeigt werden kann. HTML ist eine sogenannte Auszeichnungssprache, wobei die Anweisungen für Browser in TAGs, einem Text zwischen spitzen Klammern (zB <HTML>), stehen. Der anzuzeigende Inhalt steht zwischen öffnenden und schließenden Tags, wobei sich der schließende Tag durch einen Schrägstrich zwischen den spitzen Klammern vom öffnenden Tag unterscheidet.
Beispiel: <td>Dieser Text steht in einer Tabellenzelle</td>

HTML 4
HTML 4.0 wurde im Dezember 1997 vom W3C (World Wide Web Consortium) als neuer Standard für HTML eingeführt und ersetzte HTML 3.2. Im Dezember 1999 gab es mit HTML 4.01 eine neue Version, welche viele kleinere Korrekturen berücksichtigte.
Neu waren in HTML 4 u.a.:
Neue Möglichkeiten für die Einbettung von Objekten (zB Multimedia-Objekte);
Einbinden von Skriptsprachen;
Stylesheets (Formatvorlagen);
Besser Druckfunktionen;
Bessere Unterstützung von barreierefreien Websiten;
Unterstützung von Frames und Framesets;
Erweiterung der Möglichkeiten für Formulare und Tabellen;

Es wurden 24 neue Elemente (Tags) in HTML 4 eingeführt.
Um sowohl ältere als auch neu erstellte Webseiten zu unterstützen, wurden drei HTML-Varianten definiert, wobei die jeweilige Version am Beginn der HTML-Datei eingetragen wird.

HTML 4, HTML-Varianten
Regeln für HTML-Dateien sind in den Dokumenttypdefinition (DTD = document type definition) festgelegt. Für alte und neue Websites gibt es drei unterschiedliche Dokumenttypdefinitionen:
[1] Strict: Eine bestimmte Auswahl von Elementen (Tags und Attribute) darf verwendet werden. Früher verwendete Elemente bzw. deren Eigenschaften zur Präsentation von Elementen sollen in Stylesheets (Formatvorlagen) definiert werden.
[2] Transitional: Auch ältere Tags und Attribute dürfen verwendet werden, damit auch ältere Wensites vom Browes angezeigt werden können.
[3] Frameset: Diese Variante ist identisch mit der Variante "Transitional", ist jedoch für die Erstellung von Framesets vorgesehen. Anstatt des Elements <body> wird jedoch <frameset> erwartet.

Beispiele:
Die Angabe der Dokumenttypdefinition muss immer vor dem Element <HTML> stehen.
[1] Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[2] Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[3] Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML 5
HTML 5 wurde 2009 als "Working Draft" erstamls vorgestellt und befindet sich zur Zeit (2012) noch immer in Entwicklung. Trotzdem wird HTML 5 bereits jetzt, vor allem im Bereich des Mobilfunks mit zunehmender starker Verbreitung eingesetzt. HTML 5 ersetzt HTML 4.01, XHTML 1.0 und DOM HTML Level 2. HTML 5 ist praktisch seit 2011 fertiggestellt, soll jedoch erst 2014 offiziell verabschiedet werden.
Neue Funktionalitäten sind u.a.:
Direkte Unterstützung von einigen Video- und Audio-Formaten (zB mit den Tags "video" und "audio" ohne zusätzliche Plugins);
Neue Elemente zur Strukturierung von Dokumenten (zB "header", "nav", "footer");
Neue Formularelementen und Attribute (zB "time" für Datumseingabe, "email" für Email-Adressen);
Beschriftungen für Abbildungen ("figure");
Bereitstellung von Zeichenflächen für Anwendungen ("canvas");

Medien: <video> - automatisch abspielen
In HTML 5 können Videos mit Hilfe des Tags <video> und mit dem Attribut autoplay automatisch abgespielt werden
Siehe auch -> Medien: <video> - minimaler Quellcode ohne Bedienelemente

Beispiel 3:
<video width="320" height="180" autoplay>
<source src="Volleyball320x180.mp4" type="video/mp4">
<source src="Volleyball320x180.ogv" type="video/ogg">
Ihr Browser versteht HTML5 nicht.
</video>
Ohne "autoplay" wird das Video nicht automatisch abgespielt. Das Attribut "autoplay" benötigt keine Werte, sein Vorhandensein bewirkt den automatischen Start des Videos.
Das Video in Zeile 2 im H.264 Codec wird von Google Chrome, Internet Explorer und Safari verstanden, das Video in Zeile 3 im Ogg Theora Codec (freier Codec) von Firefox.
-> Video-Test mit kleiner Datei in geringer Qualität auf eigener Seite

Medien: <video> - minimaler Quellcode ohne Bedienelemente
In HTML 5 können Videos mit Hilfe des neuen Tags <video> wesentlich einfacher eingebettet und abgespielt werden als in früheren HTML-Versionen. Es werden keine zusätzlichen Plug-ins und Add-ons benötigt, Allerdings muss der Browser den Codec des abzuspielenden Videos unterstützen. Derzeit werden zwei Video-Codecs favorisiert : Ogg (lizenzfrei, Dateieendung "ogv", type="video/ogg") und H.264 (Dateieindung "mp4", type="video/mp4").
Minimal ist zwischen den Tags <video> und </video> die Videodatei als Source ("Quelle") und der Codec-Typ ("type=...") anzugeben. Zu empfehlen ist auch die Breite und Hohe des Videoframes in Pixel als Attribute ind den Video-Tag zu schreiben.

Beispiel 1:
<video>
<source src="Volleyball480x270.mp4" type="video/mp4">
</video>
Das sind minimale Angaben, wobei der HTML5-fähige Browser in der Regel die Framegröße des Videos ermittelt und ohne Kontrolleiste abspielt, wenn mit der rechten Maustaste auf den Eintrag "Start" des Kontextrmenüs geklickt wird.

Beispiel 2:
<video width="480" height="270">
<source src="Volleyball480x270.mp4" type="video/mp4">
<source src="Volleyball480x270.ogv" type="video/ogg">
Ihr Browser ist zu alt und versteht HTML 5 nicht!
</video>
Innerhalb des Tags <video> ist hier auch die Breite und Höhe des Videoframes (480 x 270 Pixel) angegeben. Der Browser spielt das erste Video, das er decodieren kann, ab (2. und 3. Zeile). In der vorletzten Zeile steht eine Botschaft an alle alten Browser, die HTML 5 noch nicht verstehen.

Medien: <video> - Quellcode mit Bedienelementen
In HTML 5 können Videos mit Hilfe des neuen Tags <video> mit und ohne Bedienelementen (Kontrollleisten) einfacher angezeigt und abgespielt werden als in früheren HTML-Versionen. Durch das Attribut "controls" im Tag <video> werden die Bedienelemente aktiviert und angezeigt. Die Darstelllung und Verhaltensweise dieser Kontrolleiste ist in jedem Browser anders.

Beispiel 4:
<video width="320" height="180" controls>
<source src="Volleyball320x180.mp4" type="video/mp4">
<source src="Volleyball320x180.ogv" type="video/ogg">
Ihr Browser versteht HTML5 nicht.
</video>
Das Attribut "controls" benötigt keine Werte. Beispiel für Darstellung und Verhalten der Bedienleiste:
[1] Google Chrome: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt
[2] Microsoft Internet Explorer: Kontrolleiste wird am Anfang nicht angezeigt, jedoch beim Darüberfahren mit dem Zeigegeät eingeblendet
[3] Mozilla Firefox: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt,
[4] Apple Safari: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt

<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.

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.

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="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">

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">

<head>, Mindestangaben
Der Teil <head> als Teil des HTML-Dokuments enthält Informationen und Anweisungen, die - mit einer Ausnahme, nämlich <head> - im Browser-Fenster nicht sichtbar sind. Als absolutes Minimum ist der Titel, welcher in der Titelleiste des Webbrowser angezeigt wird, des Dokuments anzugeben.
Weiters sind Attribute, Werte und Angaben in den Meta-Tags enthalten. Jeder Meta-Tag enthält in der Regel zwei Attribute. Das erste Attribut heißt entweder 'name' oder 'http-equiv', und das zweite 'content'. Eines der wichtigsten Attribute in Meta-Tags bezieht sich auf die Sprache des HTML-Dokuments: charset= Angabe des zu verwendenden Zeichensatzes.


Beispiel: Im Metatage mit den Attributen 'http-equiv' und 'content' wird der westeuropäische Zeichensatz iso-8859-1 als Standardzeichensatz für dieses Dokument festgelegt.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Head - Mindestangaben</title>
</head>

HTML, Attribute (Eigenschaften)
Attribute (Eigenschaften) in HTML-Dokumenten geben dem Browser, zusätzlich zu den Tags, weitere Informationen über Struktur, Aussehen usw. Attribute stehen immer im Beginntag innerhalb der spitzen Klammern nach dem Tagnamen.
Sie bestehen aus dem Namen des Attributes (= Variablenname) und nach dem Ist-Gleich-Zeichen (=) dem zugehörigen Wert. Attribute können zB Höhe und Breite von HTML-Objekten bestimmen und Aussagen über eine Vielzahl von anderen Eigenschaften treffen (siehe auch -> CSS).

Beispiel für Attribut "align"
im Quellcode:
<p align="center">Dieser Absatz ist zentriert.</p>

Im Webbrowser:

Dieser Absatz ist zentriert.

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.

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.

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: 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;
}

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-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.

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: 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>

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>

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>

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)

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... />, 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: 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>

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>

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: 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>