Stell dir vor es ist Krieg, und keiner geht hin
79 INFOS  HTML GRAFIK   
MM.WEB.
FOT GR.
BILDBEARB.
PHOTOSH.
FOTOGR.
ANIMATION
VID.TV
PREM.PRO
AUDIO
EDV IT
KOMMUNIKATION
HARDWARE
SOFTW.INF.
SOFTWARE
OFFICE
WORD
EXCEL
POWERPOINT
HTML
PHP MYSQL
PHP
DREAMWEAVER
BUSINESS WIRTSCHAFT
MUSIK
Links/Seite: Suchen im aktuellen Thema:
Sortieren nach: steigend Stichwort fallend  steigend Thema(Code) fallend   steigend Reihung fallend  Aktueller ausgewählter Code:
4h  
Thema Frage Mehr... Anklicken
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRAFIK
Frage 183
ImageMaps, Grundlagen, Hotspots
MULTIMEDIA WEBDESIGN HTML GRAFIK ImageMaps - Grundlagen
ImageMaps sind Bilder bzw. Grafiken, die im Gegensatz zu normalen Grafiken für den Benutzer unsichtbare Bereiche (Hotspots) enthält. Diese Hotspots können voneinander unabhängig mit Dateien verlinkt oder mit anderen Aktionen (zB über EventHandler) verknüpft werden.

Die Hotspots der Grafiken können drei verschiedene geometrische Formen haben:
[1] Kreis
[2] Rechteck
[3] Polygon (Vieleck)
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRAFIK
Frage 313
ImageMaps, < map>, Hotspots definieren
MULTIMEDIA WEBDESIGN HTML GRAFIK 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 178
HTML. Hyperlink, Link, relativer Verweis, absoluter Verweis
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN Relative und absolute Hyperlinks
Mit Hyperlinks (Links, Verweise) kann auf ein Ziel im gleichen oder in einem anderen Dokument verwiesen werden. Normalerweise gelangt man durch Anklicken des Hyperlinks zum verknüpften Ziel.
Ein Ziel ist ein Anker, der mit dem Tag <a> definiert wird.
Wird auf eine andere Datei verwiesen und kein spezielles Ziel in der verknüpften Seite angegeben, gelangt man zum Beginn der verknüpften Seite.
Relative Verweise (Hyperlinks) verweisen auf ein Ziel im Bereich der Website,
absolute Verweise auf eine einmalige Adresse im Bereich des eigenen Computers, des lokalen Netzwerkes oder im Internet.
Verlinkt können Texte, Grafiken oder Medien-Objekte werden.


Beispiele:
Anker zB: <a name="ziel">Hier ist das Ziel</a>
Relativer Verweis zB: <a href="#zielname">Zum Ziel in der aktuellen Seite</a> oder
<a href="dateiname.htm">Zu einer anderen Datei</a> oder
<a href="dateiname.htm#zielname">Zu einem Ziel in einer anderen Datei</a>
Absoluter Verweis zB im Internet: <a href=http://www.cadat.at/acd/xxc_info_alle.php>Zu den Short-Infos</a>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 1288
HTML, Web-Farben, Zuweisung von Farben
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN 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
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 438
HTML, Web-Farben, Hexadezimalsystem
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN 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)
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 1283
HTML, Web-Farben, Farbsysteme
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN 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%)
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TEXTFORMAT LISTE
Frage 1004
HTML, Textformatierung, Tags für Überschriften
MULTIMEDIA WEBDESIGN HTML TEXTFORMAT LISTE Überschriften
In HTML gibt es sechs Tags für Überschriften, die standardmäßig eine bestimmte Größenabstufung haben. Die Abstände vor und nach Überschriften sind ebenfalls vorgegeben, hängen jedoch auch vom verwendeten Browser ab.

Quellcode:

<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>
<h6>Überschrift 6</h6>

Browseransicht:

Überschrift 1


Überschrift 2


Überschrift 3


Überschrift 4


Überschrift 5

Überschrift 6
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 23
HTML, Tags,
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN Tags
HTML-Befehle, sogenannte Tags, werden im Quellcode zwischen spitze Klammern gesetzt. Sind diese Befehle bzw. Tags dem Browser bekannt, führt er sie aus, andernfalls ignoriert er sie. Tags können sowohl groß als auch klein geschrieben werden, werden in der Regel jedoch klein geschrieben.
"Empty tags" sind Anweisungen ohne Ende-Tag, die der Browsern sofort und ohne weitere Anweisungen ausführen kann.
"Conainer tags" haben einen Anfangs- und Ende-Tag, wobei sich der Ende-Tag vom Anfangs-Tag nur durch einen Schrägstrich ("slash") vor dem Tag-Namen unterscheidet. Anfangs- und Ende-Tag umschließen meistens einen Textbereich, auf den sich die Anweisungen beziehen.

Beispiele für "empty tags": <hr> oder <br>
Beispiele für "container tags": <i>italic</i> oder <h1>Überschrift 1</h1>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 43
HTML, Tabelle, Zellausrichtung, horizontal, vertikal
MULTIMEDIA WEBDESIGN HTML TABELLEN Horizontale und vertikale Zellausrichtung
Die Ausrichtung des Zellinhalts wird durch Attribute des Tags <td> für die Zelle oder des Tags <tr> für die ganze Zeile bestimmt. Horizontale Zellausrichtungen regelt das Attribut "align", vertikale das Attirbut "valign". Werden beide Attribute nicht angegeben, bestimmt der Browser die Standard-Zellausrichtung.

Horizontale Zellausrichtungen:
[1] Standard (kein Attribut): Ãœblicherweise links ausgerichtet;
[2] align="left": links ausgerichtet;
[3] align="center": zentriert ausgerichtet;
[4] align="right": rechts ausgerichtet;

Vertikale Zellausrichtungen:
[6] Standard (kein Attribut): Ãœblicherweise vertikal mittig ausgerichtet;
[7] valign="top": am oberen Zellrand ausgerichtet;
[8] valign="middle": vertikal mittig ausgerichtet;
[9] valign="bottom": am unteren Zellrand ausgerichtet;
[10] valign="baseline": Zellen in einer Reihe an der Grundlinie ausgerichtet;
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 25
HTML, Tabelle, Zellabstand, cellspacing
MULTIMEDIA WEBDESIGN HTML TABELLEN Zellabstand - cellspacing
Der Abstand zwischen den Zellen einer HTML-Tabelle kann durch das Attribut "cellspacing" im Anfangs-Tag von <table> bestimmt werden. In Dreamweaver wird dieses Attribut in der Entwurfsdarstellung mit "Zellraum" bezeichnet.

Beispiel:
<table width="120" border="1" callspacing="0"> kein Abstand zwischen den Zellen;
<table width="120" border="1" callspacing="10"> Abstand von 10 Pixel zwischen den Zellen
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 657
HTML, Tabelle, Zeilenumbruch in Zellen
MULTIMEDIA WEBDESIGN HTML TABELLEN Zellen - kein Zeilenumbruch
[1] Standardmäßig wird Text in den Zellen von Tabellen an die Zellengröße angepasst und, wenn erforderlich umgebrochen.
[2] Soll der Zeilenumbruch verhindert werden, sodass Text immer nut einzeilig ausgegeben wird, muss das Attribut "nowrap" im Beginntag für eine Zelle (<td> oder <th>) gesetzt werden.

Beispiel für Text mit und ohne Zeilenumbruch:
[1] Mit möglichem Zeilenumbruch: <td>Kann die einzeilige Ausgabe von Text erzwungen werden?</td>;
[2] Ohne Zeilenumbruch: <td nowrap="nowrap">Kann die einzeilige Ausgabe von Text erzwungen werden?</td>
oder <th nowrap>Kann die einzeilige Ausgabe von Text erzwungen werden?</th>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 25
HTML, Tabelle, Tabellenbreite, width
MULTIMEDIA WEBDESIGN HTML TABELLEN Tabellenbreite, width
Die Breite einer HTML-Tabelle kann durch das Attribut "width" im Anfangs-Tag <table> festgelegt werden. Werden keine Einheiten angegeben, wird die Breite in Pixel angenommen. Bei einer Angabe in Prozent wird Bezug auf die Breite des Browserfensters oder des übergeordneten Objekts (zB Ebene oder Zelle einer übergeordneten Tabelle) genommen.

Beispiel:
<table width="100" border="1"> Die Tabellenbreite beträgt 100 Pixel;
<table width="100%" border="1"> Die Tabellenbreite beträgt 100 Prozent, füllt also die zur Verfügung stehende Gesamtbreite aus.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 175
HTML, Tabelle, Rahmen
MULTIMEDIA WEBDESIGN HTML TABELLEN Tabelle - Rahmen
Der Tabellenrahmen kann unsichtbar sein oder unterschiedliche Breiten, Farben und Linientypen erhalten:
[1] Unsichtbarer Tabellenrahmen: Rahmenbreite = 0 --> Attribut border="0";
[2] Sichtbarer Tabellenrahmen: Rahmenbreite = ganze Zahl --> Attribut zB border="10";
[3] Sichtbarer färbiger Tabellenrahmen: Rahmenbreite = ganze Zahl, Rahmenfarbe = Hexdezimal-Farbcode --> Attribute zB border="10" bordercolor="#FF0000";
[4] Sichtbarer färbiger Tabellenrahmen mit Zellabständen: Rahmenbreite = ganze Zahl, Rahmenfarbe = Hexdezimal-Farbcode, Zellabstand = ganze Zahl --> Attribute zB border="10" bordercolor="#FF0000" cellspacing="3";
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 27
HTML, Tabelle, Bilder, cellspacing, cellpadding
MULTIMEDIA WEBDESIGN HTML TABELLEN Bildteile in Zellen ohne Abstnd
HTML-Tabellen können auch für Layout-Funktionen eingesetzt werden, wobei Grafiken und Bilder in Verbindung mit oder ohne Text in Zellem positioniert werden.
Werden große Bilder so unterteilt, dass deren Teile genau zusammenpassen, können Zellabstand (cellspacing), die Abstände zwischen Bildteil und Zellenrand (cellpadding) und der Rahmen (border) auf Null gesetzt werden, sodass das Bild mit den Bildteilen in den Zellen wie ein einziges Bild wirkt. Die Ladezeiten aus dem Internet verringern sich scheinbar, da bereits Bildteile sichtbar sind, ohne dass das gesamte Bild geladen sein muss.

Beispiel:
<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0">
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 24
HTML, Tabelle, Aufbau
MULTIMEDIA WEBDESIGN HTML TABELLEN Tabelle - Aufbau
Eine HTML-Tabelle besteht, wie andere Tabellen auch, aus Zellen, die horizontal in Zeilen und vertikal in Spalten gegliedert sind.
Im Quellcode wird der Beginn der Tabelle mit <table> und das Ende mit </table> definiert.
Die Tags für die Zeilen sind <tr> und </tr> und für die Zellen, welche gleichzeitig als Spalten interpretiert werden können, sind <td> und </td>.

Beispiel für den Aufbau einer einfachen Tabelle mit zwei Zeilen und zwei Spalten:
<table width="120" border="1">
<tr> <td>1.Zeile, 1.Spalte</td> <td>1.Zeile, 2.Spalte</td> </tr>
<tr> <td>2.Zeile, 1.Spalte</td> <td>2.Zeile, 2.Spalte</td> </tr>
</table>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TABELLEN
Frage 26
HTML, Tabelle, Abstand zum Zellrand, cellpadding
MULTIMEDIA WEBDESIGN HTML TABELLEN Abstand zum Zellrand, cellpadding
Der Abstand vom Zellinhalt zum Zellrand einer HTML-Tabelle kann durch das Attribut cellpaddinging im Anfangs-Tag von <table> bestimmt werden. In Dreamweaver wird dieses Attribut in der Entwurfsdarstellung mit "Zellauffüllung" bezeichnet.

Beispiel:
<table width="80" border="1" callpadding="0"> kein Abstand zwischen Zellinhalt und Zellrand;
<table width="80" border="1" callpadding="10"> Abstand von 10 Pixel zwischen Zellinhalt und Zellrand
Thema auswählen: MULTIMEDIA WEBDESIGN HTML MEDIEN
Frage 33
HTML, Medien, <object>, <embed>, Video, Mindestangaben
MULTIMEDIA WEBDESIGN HTML MEDIEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML MEDIEN
Frage 31
HTML, Medien, <object >, <embed >, Grundlagen
MULTIMEDIA WEBDESIGN HTML MEDIEN Medien: <object> und <embed>
Medien, vor allem Video- und Audio-Dateien werden in den meisten Fällen mit dem Tags <object> und <embed> in eine HTML-Datei eingebunden. Damit Medien präsentiert werden können, muss der Browser selbst in der Lage sein, diese Medien abzuspielen, oder es muss ein Zusatzprogramm, ein Plug-In, das diese Medien interpretieren kann, installiert sein. Der MS Internet-Explorer und andere Browser interpretieren die Angaben, in der Regel ActiveX-Steuerelemente, innerhalb des Tags <object>...</object>, während Firefox und andere Browser die Angaben im Tag <embed> auslesen.
Damit alle Browser die Medien (Videos, Audio-Dateien) abspielen können, kann der Tag <embed> innerhalb des Tags <object> eingebettet werden:
<object ...>
...
<embed ...>
</object>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML TEXTFORMAT LISTE
Frage 177
HTML, Listen, geordnete, ungeordnete
MULTIMEDIA WEBDESIGN HTML TEXTFORMAT LISTE Geordnete und ungeordnete Listen
Listen dienen zur Gliederung und Strukturierung von Daten, Aufzählungen und Stichwörtern. Listen in HTML können in unnummerierte (ungeordnete) und nummerierte (geordnete) Listen unterteilt werden. Jedes Listenelement beginnt mit dem Tag <li>.
Ungeordnete Listen werden durch Listenpunkte (Bullets) gekennzeichnet und werden mit dem Tag <ul> eingeleitet.
Geordnete Listen haben fortlaufende Nummerierungen und sind innerhealb des Tag <ol> positioniert.
Sowohl geordnete als auch ungeordnete Listen können verschachtelt werden.

Beispiel für ungeordnete Liste:
<ul>
<li>Einzoomen & auszoomen</li>
<li>Zoom</li>
<li>Zoom [Kästchen]</li>
<li>Zoom [Spuren]</li>
</ul>

Beispiel für geordnete Liste:
<ol>
<li>Einzoomen & auszoomen</li>
<li>Zoom</li>
<li>Zoom [Kästchen]</li>
<li>Zoom [Spuren]</li>
</ol>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
HTML, Head
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN 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
Thema auswählen: MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN
Frage 821
HTML, Grundlagen
MULTIMEDIA WEBDESIGN HTML GRUNDLAGEN HTML, Grundlagen
Ein HTML-Dokument (HTML = Hypertext Markup Language) ist ein Text-Dokument, das außer Text auch andere Objekte wie zB Bilder, Links, Formulare, Audio-Dateien und Videos enthalten kann. Der Unterschied zu normalem Text besteht darin, dass ein HTML-Dokument durch sogenannte Tags "ausgezeichnet" ("Auszeichnungssprache") ist, welche Aussehen und andere Eigenschaften bestimmen. Diese Textelemente zwischen spitzen Klammern (zB <p> erzeugt einen Absatz) sagen dem Webbrowser, wie er die Seite und deren Inhalte behandeln soll. Mit sehr wenigen Ausnahme haben Tags einen öffnenden Teil (zB <h1>) und einen schließenden Teil (zB </h1>, wobei innerhalb dieser beiden Teile die Anweisungen, die sich auf diesen Tag beziehen, gültig sind.
Ein HTML-Dokument beginnt mit dem Tag <html> und endet mit </html> und ist prinzipiell in zwei Teile gegliedert, und zwar in "head" ("Kopf") und "body" ("Körper"):
<head>Hier steht der Titel (im Browser als Titelleiste sichtbar) und weitere, im Browser nicht sichtbare Informationen.</head>
<body>Hier steht alles, was im Webbrowser zu sehen ist.</body>.
Zusätzlich enthalten HTML-Dokumente zu Beginn eine Textzeile <!DOCTYPE.... >, die Informationen über Regeln für die aktuelle Webseite (page) enthält.

Ein einfaches Beispiel im Quellcode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML-Grundlagen</title>
</head>
<body>
<h3>Guten Morgen! Hallo! Guten Tag!</h3>
Dies ist eine sehr, sehr einfache HTML-Seite (page).
</body>
</html>

.. und im Webbrowser:

Guten Morgen! Hallo! Guten Tag!

Dies ist eine sehr, sehr einfache HTML-Seite (page).
Thema auswählen: MULTIMEDIA WEBDESIGN HTML FORMULAR
Frage 729
HTML, Formulare, Grundlagen
MULTIMEDIA WEBDESIGN HTML FORMULAR 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:
Checkbox:
Optionsschalter:
Liste / Menü:
Dateifeld:
Bildfeld:
Verstecktes Feld:
Schaltfläche:
Thema auswählen: MULTIMEDIA WEBDESIGN HTML FORMULAR
Frage 1305
HTML, Formulare, Datei hochladen [file upload], Grundlagen
MULTIMEDIA WEBDESIGN HTML FORMULAR 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1133
HTML, Erweiterungen, X3D (Extensible 3D)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1132
HTML, Erweiterungen, VRML (Virtual Reality Modeling Language)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
HTML, Erweiterungen, SVG, Beispiel: Mitteleuropa
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG -> Text + Kreis + Pfad: österreichische Städte
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1273
HTML, Erweiterungen, SVG, Text - <text>...</ text>, Grundlagen
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1242
HTML, Erweiterungen, SVG, Pfad - <path... />, Ellipsenbogen: A (Elliptical Arc)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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] x4 y4: 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1240
HTML, Erweiterungen, SVG, Pfad - <path... />, Bézier-Kurven, Quadratische Bézierkurve: T (Shorthand / Smooth Quadratic Bézier CurveTo)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1299
HTML, Erweiterungen, SVG, Vertikaler Text, writing-mode, glyph-orientation-vertical
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1219
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Rechteck - <rect... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1220
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Linie - <line... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1224
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Polylinie (Linienzug)- <polyline... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1124
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Polygon (Vieleck, geschlossener Linienzug) - <polygon... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1228
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Linienzug offen
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1229
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Linienzug geschlossen
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1230
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Linie horizontal, Linie vertikal
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1234
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Bézier-Kurven, Quadratische Bézierkurve: Q (Quadratic Bézier CurveTo)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1238
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Bézier-Kurven, Kubische Bézierkurve: S (Shorthand / Smooth CurveTo)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1236
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Bézier-Kurven, Kubische Bézierkurve (Cubic Bézier curve): C (CurveTo)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1227
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Pfad - <path... />, Übersicht
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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)
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1221
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Kreis - <circle... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1222
HTML, Erweiterungen, SVG (Scalable Vector Graphics), Ellipse - <ellipse... />
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG
Frage 1134
HTML, Erweiterungen, SVG (Scalable Vector Graphics)
MULTIMEDIA WEBDESIGN HTML ERWEITERUNGEN SVG 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1319
HTML, CSS, Schrift definieren, Schriftfamilie und Schriftstärke
MULTIMEDIA WEBDESIGN HTML CSS 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1318
HTML, CSS, Schrift definieren, Farbe und Schriftgröße
MULTIMEDIA WEBDESIGN HTML CSS 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1129
HTML, CSS, HTML-Tags, Typselektoren
MULTIMEDIA WEBDESIGN HTML CSS 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1300
HTML, CSS, Hintergrund definieren
MULTIMEDIA WEBDESIGN HTML CSS 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>
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1291
HTML, CSS, Farben definieren
MULTIMEDIA WEBDESIGN HTML CSS 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;
}
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 402
HTML, CSS, Ebenen, Positionierung, Anordnung, z-Index
MULTIMEDIA WEBDESIGN HTML CSS 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;">
Seite 1 erste
schließen