Cadat EDU - Infos-Stichworte

HTML (Hypertext Markup Language)

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

HTML 4

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

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

HTML 4, HTML-Varianten, Strict, Transitional, Frameset

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

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

HTML 5

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

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, 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, Attribute (Eigenschaften)

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

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

Im Webbrowser:

Dieser Absatz ist zentriert.

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

Grafik, Bilder, < img >, Grundlagen

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

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

CSS, Aufbau, Selektor, Deklaration

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

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

CSS, CSS-Anweisungen, Einsatz

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

Frameset, Frames, Grundlagen

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

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

Frameset, Quellcode

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

Beispiel:
cols="80,*": Im folgenden Frameset wird das Browserfenster vertikal geteilt, wobei die linke Spalte 80 Pixel breit ist und die rechte Spalte so breit wie mÃ¶glich angezeigt wird.

<frameset cols="80,*" frameborder="no" border="0" framespacing="0">

  <frame src="menue.html" name="navigation" scrolling="No" noresize="noresize" id="navigation" title="Men" />

  <frame src="aktuell.html" name="inhalt" id="inhalt" title="Aktuell" />

</frameset>

<noframes><body>Ihr alter Browser kann leider keine Frames anzeigen.

</body>

</noframes>

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 5, Medien, <video>, Video einbetten, minmaler Quellcode ohne Bedienelemente

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

Beispiel 1:

<video>

<source src="Volleyball480x270.mp4" type="video/mp4">

</video>

Das sind minimale Angaben, wobei der HTML5-fähige Browser in der Regel die Framegröße des Videos ermittelt und ohne Kontrolleiste abspielt, wenn mit der rechten Maustaste auf den Eintrag "Start" des Kontextrmenüs geklickt wird.

Beispiel 2:

<video width="480" height="270">

<source src="Volleyball480x270.mp4" type="video/mp4">

<source src="Volleyball480x270.ogv" type="video/ogg">

Ihr Browser ist zu alt und versteht HTML 5 nicht!

</video>

Innerhalb des Tags <video> ist hier auch die Breite und Höhe des Videoframes (480 x 270 Pixel) angegeben. Der Browser spielt das erste Video, das er decodieren kann, ab (2. und 3. Zeile). In der vorletzten Zeile steht eine Botschaft an alle alten Browser, die HTML 5 noch nicht verstehen.

HTML 5, Medien, <video>, Video einbetten, mit Bedienelementen (Kontrollleiste), (controls)

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

Beispiel 4:

<video width="320" height="180" controls>

<source src="Volleyball320x180.mp4" type="video/mp4">

<source src="Volleyball320x180.ogv" type="video/ogg">

Ihr Browser versteht HTML5 nicht.

</video>

Das Attribut "controls" benötigt keine Werte. Beispiel für Darstellung und Verhalten der Bedienleiste:
[1] Google Chrome: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt
[2] Microsoft Internet Explorer: Kontrolleiste wird am Anfang nicht angezeigt, jedoch beim Darüberfahren mit dem Zeigegeät eingeblendet
[3] Mozilla Firefox: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt,
[4] Apple Safari: Kontrolleiste wird am Anfang und am Ende und beim Darüberfahren mit dem Zeigegeätt angezeigt

HTML 5, Medien, <video>, Video einbetten, automatisch abspielen (autoplay)

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

Beispiel 3:

<video width="320" height="180" autoplay>

<source src="Volleyball320x180.mp4" type="video/mp4">

<source src="Volleyball320x180.ogv" type="video/ogg">

Ihr Browser versteht HTML5 nicht.

</video>

Ohne "autoplay" wird das Video nicht automatisch abgespielt. Das Attribut "autoplay" benötigt keine Werte, sein Vorhandensein bewirkt den automatischen Start des Videos.
Das Video in Zeile 2 im H.264 Codec wird von Google Chrome, Internet Explorer und Safari verstanden, das Video in Zeile 3 im Ogg Theora Codec (freier Codec) von Firefox.
-> Video-Test mit kleiner Datei in geringer Qualität auf eigener Seite

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>

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


Es gibt einen Himmel des Sehens, HÃ¶rens, Denkens, FÃ¼hlens und Tuns.


	79 INFOS HTML