ImageMaps, Grundlagen, Hotspots

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)

ImageMaps, < map>, Hotspots definieren

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>

HTML. Hyperlink, Link, relativer Verweis, absoluter Verweis

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>

HTML, Web-Farben, Zuweisung von Farben

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

HTML, Web-Farben, Hexadezimalsystem

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)

HTML, Web-Farben, Farbsysteme

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%)

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

HTML, Tags,

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>

HTML, Tabelle, Zellausrichtung, horizontal, vertikal

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;

HTML, Tabelle, Zellabstand, cellspacing

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

HTML, Tabelle, Zeilenumbruch in Zellen

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>

HTML, Tabelle, Tabellenbreite, width

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.

HTML, Tabelle, Rahmen

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

HTML, Tabelle, Bilder, cellspacing, cellpadding

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

HTML, Tabelle, Aufbau

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>

HTML, Tabelle, Abstand zum Zellrand, cellpadding

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

HTML, Medien, <object>, <embed>, Video, Mindestangaben

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>

HTML, Medien, <object >, <embed >, Grundlagen

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>

HTML, Listen, geordnete, ungeordnete

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>

HTML, Head

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

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

HTML, Formulare, Grundlagen

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:

HTML, Formulare, Datei hochladen [file upload], Grundlagen

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.

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.

HTML, Erweiterungen, VRML (Virtual Reality Modeling Language)

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.

Links/Seite:	Suchen im aktuellen Thema:
Sortieren nach:	Stichwort	Thema(Code)	Reihung	Aktueller ausgewählter Code: 4h

Thema	Frage	Mehr... Anklicken
		ImageMaps, Grundlagen, Hotspots 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)
		ImageMaps, < map>, Hotspots definieren 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>`
		HTML. Hyperlink, Link, relativer Verweis, absoluter Verweis 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>`
		HTML, Web-Farben, Zuweisung von Farben 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
		HTML, Web-Farben, Hexadezimalsystem 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)
		HTML, Web-Farben, Farbsysteme 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%)
		HTML, Textformatierung, Tags für Überschriften Ü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
		HTML, Tags, 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>`
		HTML, Tabelle, Zellausrichtung, horizontal, vertikal 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;
		HTML, Tabelle, Zellabstand, cellspacing 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
		HTML, Tabelle, Zeilenumbruch in Zellen 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>`
		HTML, Tabelle, Tabellenbreite, width 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.
		HTML, Tabelle, Rahmen 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"`;
		HTML, Tabelle, Bilder, cellspacing, cellpadding 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">`
		HTML, Tabelle, Aufbau 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>`
		HTML, Tabelle, Abstand zum Zellrand, cellpadding 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
		HTML, Medien, <object>, <embed>, Video, Mindestangaben 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>`
		HTML, Medien, <object >, <embed >, Grundlagen 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>`
		HTML, Listen, geordnete, ungeordnete 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>`
		HTML, Head 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
		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).
		HTML, Formulare, Grundlagen HTML - Formulare, Grundlagen Formulare werden in HTML fÃ¼r User-Interaktionen (zB Eingeben von Daten, An- und Abmeldungen, Verkauf). Meistens werden sie in Verbindung mit dynamischen Webseiten und Datenbanken (CMS, PHP), aber auch zur Erstellung von Anfragen Ã¼ber E-Mail-Kontakte eingesetzt. Der Container, der alle Formular-Objekte enthÃ¤lt, ist der Formular-Tag [1] `< form ...>... < /form>`. Folgende Objekte fÃ¼r Formulare werden standardmÃ¤ÃŸig eingesetzt: [2] Textfeld, einzeilig: `< input type="text" ... />` [3] Textbereich, mehrzeilig; `< textarea ...>Text Text ... < /textarea>` [4] Checkbox: `< input type="checkbox" ... />` (AuswÃ¤hlen von einer oder mehreren Optionen) [5] Optionsschalter: `< input type="radio" ... />` (Nur 1 Option kann ausgewÃ¤hlt werden) [6] Liste / MenÃ¼: `< select ...> < option>Eintrag 1< /option> .... < /select>` (Auswahl aus Liste oder MenÃ¼) [7] Dateifeld: `< input type="file" .... />` (Feld fÃ¼r Datei-Upload) [8] Bildfeld: `< input type="image" src="images/bildfeld.jpg" .... />` (VerknÃ¼pfung mit einer Grafik zB als Alternative zur SchatlflÃ¤che) [9] Verstecktes Feld: `< input type="hidden" ... />` (fÃ¼r den User unsichtbares Feld zur Ãœbertragung von Werten) [10] SchaltflÃ¤che: `< input type="submit" ... />` (Absenden des Formulars) siehe auch ->Dreamweaver, Formulare, Grundlagen, Formularobjekte Beispiel: Textfeld, einzeilig: Textbereich, mehrzeilig: Text Text ... Checkbox: Optionsschalter: Liste / MenÃ¼: Dateifeld: Bildfeld: Verstecktes Feld: SchaltflÃ¤che:
		HTML, Formulare, Datei hochladen [file upload], Grundlagen 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.
		HTML, Erweiterungen, X3D (Extensible 3D) 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.
		HTML, Erweiterungen, VRML (Virtual Reality Modeling Language) 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.
Seite 1


Atomenergie hat eine strahlende Zukunft.


	79 INFOS HTML GRAFIK