Wenn jemand vor dir steht... Dreh dich um.
79 INFOS      MULTIMEDIA WEBDESIGN | HTML
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
Frage 22
HTML (Hypertext Markup Language)
MULTIMEDIA  WEBDESIGN HTML   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>
Thema auswählen: MULTIMEDIA  WEBDESIGN HTML
Frage 812
HTML 4
MULTIMEDIA  WEBDESIGN HTML   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.
Thema auswählen: MULTIMEDIA  WEBDESIGN HTML
Frage 813
HTML 4, HTML-Varianten, Strict, Transitional, Frameset
MULTIMEDIA  WEBDESIGN HTML   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">
Thema auswählen: MULTIMEDIA  WEBDESIGN HTML
Frage 814
HTML 5
MULTIMEDIA  WEBDESIGN HTML   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");


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 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 GRUNDLAGEN
Frage 822
HTML, Attribute (Eigenschaften)
MULTIMEDIA  WEBDESIGN HTML  GRUNDLAGEN 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.

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 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 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 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 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 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 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 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 GRAFIK
Frage 310
Grafik, Bilder, < img >, Grundlagen
MULTIMEDIA  WEBDESIGN HTML  GRAFIK 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">
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 29
CSS, Aufbau, Selektor, Deklaration
MULTIMEDIA WEBDESIGN HTML  CSS 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 30
CSS, CSS-Anweisungen, Einsatz
MULTIMEDIA WEBDESIGN HTML  CSS 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML FRAMES
Frage 28
Frameset, Frames, Grundlagen
MULTIMEDIA WEBDESIGN HTML  FRAMES 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML FRAMES
Frage 312
Frameset, Quellcode
MULTIMEDIA WEBDESIGN HTML  FRAMES 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>
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 MEDIEN
Frage 913
HTML 5, Medien, <video>, Video einbetten, minmaler Quellcode ohne Bedienelemente
MULTIMEDIA WEBDESIGN HTML  MEDIEN 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.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML MEDIEN
Frage 918
HTML 5, Medien, <video>, Video einbetten, mit Bedienelementen (Kontrollleiste), (controls)
MULTIMEDIA WEBDESIGN HTML  MEDIEN 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
Thema auswählen: MULTIMEDIA WEBDESIGN HTML MEDIEN
Frage 917
HTML 5, Medien, <video>, Video einbetten, automatisch abspielen (autoplay)
MULTIMEDIA WEBDESIGN HTML  MEDIEN 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
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 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 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 HEAD
Frage 234
HTML, , Mindestangaben
MULTIMEDIA WEBDESIGN HTML  HEAD <head>, Mindestangaben
Der Teil <head> als Teil des HTML-Dokuments enthält Informationen und Anweisungen, die - mit einer Ausnahme, nämlich <head> - im Browser-Fenster nicht sichtbar sind. Als absolutes Minimum ist der Titel, welcher in der Titelleiste des Webbrowser angezeigt wird, des Dokuments anzugeben.
Weiters sind Attribute, Werte und Angaben in den Meta-Tags enthalten. Jeder Meta-Tag enthält in der Regel zwei Attribute. Das erste Attribut heißt entweder 'name' oder 'http-equiv', und das zweite 'content'. Eines der wichtigsten Attribute in Meta-Tags bezieht sich auf die Sprache des HTML-Dokuments: charset= Angabe des zu verwendenden Zeichensatzes.


Beispiel: Im Metatage mit den Attributen 'http-equiv' und 'content' wird der westeuropäische Zeichensatz iso-8859-1 als Standardzeichensatz für dieses Dokument festgelegt.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Head - Mindestangaben</title>
</head>
Thema auswählen: MULTIMEDIA  WEBDESIGN HTML GRUNDLAGEN
Frage 293
CSS (Cascading Style Sheets), Grundlagen
MULTIMEDIA  WEBDESIGN HTML  GRUNDLAGEN CSS - Grundlagen
CSS (Cascading Style Sheets) sind im weitesten Sinn Formatvorlagen (Formatierungsanweisungen, Stile), deren Quellcode als Text vorliegt, für HTML- und XML-Dokumente.
Mit CSS kann Inhalt und Darstellung getrennt werden. So kann zB das Aussehen einer ganzen Website durch Änderung der Formatierungsanweisung in einer einzigen CSS-Datei geändert werden.
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 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 HEAD
Frage 314
HTML, <head>, Meta Tags, Aufbau, Grundlagen
MULTIMEDIA WEBDESIGN HTML  HEAD Aufbau von Meta-Tags
Meta-Tags stehen im Head-Teil einer Webseite (HTML, PHP etc.) und liefern zB Informationen für Suchmaschinen. Es gibt eine große Anzahl von Meta-Tags, die aber von Suchmaschinen häufig ignoriert werden. Sie sind im Browser nicht sichtbar und bestehen aus dem Tag <meta> selbst und aus zwei Attributen im Tag. Das erste Attribut hat entweder die Bezeichnung "name" oder "http-equiv", Das zweite Attribut hat die Bezeichnung "content" und enthält sozusagen den Inhalt bzw die Werte.

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

[2] Meta-Tags mit dem Attribut "name" bieten vor allem Informationen für Web-Browser und Suchmaschinen-Robots.
Beispiel 2: <meta name="author" content="Martin Forinstance">
Dieser Meta-Tag informiert, wer der Autor dieser Webseite ist.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 295
CSS, Selektoren-Typen
MULTIMEDIA WEBDESIGN HTML  CSS CSS - Selektoren-Typen
Bei CSS gibt es drei Arten von Selektorentypen:

[1] Typselektoren sind HTML-Tags wie zB <body> oder <h1>.
[2] Attributselektoren werden in Klassenselektoren und ID-Selektoren eingeteilt. Klassen (Stile) können in einer HTML-Datei, gekennzeichnet mit dem Attribut "class", beliebig oft eingesetzt werden, während IDs in einem HTML-Dokument, gekennzeichnet mit dem Attribut "id", eindeutig sein müssen.
[3] Pseudoklassen werden üblicherweise im Zusammenhang mit Hyperlinks verwendet.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 294
CSS, Aufbau, mehrere Deklarationen
MULTIMEDIA WEBDESIGN HTML  CSS CSS - mehrere Deklarationen
Deklarationen in CSS-Anweisungen, die für den gleichen Selektor bestimmt sind, werden innerhalb der geschwungenen Klammer durch Strichpunkte (Semikola) getrennt.
Mehrere Werte, die für dieselbe Deklaration bestimmt sind, werden durch Beistriche getrennt.
Beispiel:
h1 {font-family: Arial, Helevetica, sans-serif; font: bold; font-size: 18px}, d.h. Überschriften 1 (<h1>) werden - je nach Verfügbarkeit - mit der Schriftfamilie Arial, Helvetica oder sans-serif, fett und mit einer Schriftgröße von 18 Pixel geschrieben.
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 181
CSS, Positionierung
MULTIMEDIA WEBDESIGN HTML  CSS CSS - Positionierung
Mit Hilfe von CSS-Anweisungen können Elemente wie Bilder oder Ebenen in einem Browserfenster positioniert werden. Dabei werden die Attribute "id" für ID-Selektoren oder "style" für unmittelbare Anweisungen direkt im Beginn-Tag verwendet.
Für die Eigenschaft "position" sind folgende Möglichkeiten von praktischer Bedeutung:
[1] position:absolute --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen mitbewegt.
[2] position:relative --> die Lage des Elements wird durch die Abstände zum übergeordneten Element bestimmt.
[3] position:fixed --> die Lage des Elements ist fixiert durch Abstände zum Fensterrand, das Objekt wird jedoch beim Scrollen nicht mitbewegt. Nicht alle Browser-Versionen verstehen diese CSS-Anweisung.
Die Abstände werden durch folgende Eigenschaften festgelegt:
[1] top: Abstand von oben;
[2] left: Abstand von links
[3] bottom: Abstand von unten;
[4] right: Abstand von rechts;
Die Abstände können in Pixel (px) oder als Prozentzahlen (%) angegeben werden.

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

In der CSS-Anweisung:
#layer1 {
position:absolute;
left:20px;
top:30px;
width:120px;
height:60px;
}

d.h. das DIV-Element (Ebene "layer1") mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel wird 200 Pixel und 50 Pixel vom oberen Fensterrand fix positioniert.
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 209
HTML, <div>, <span>
MULTIMEDIA  WEBDESIGN HTML  GRUNDLAGEN <div> - <span>
Die Tags <div> und <span> werden zum Gruppieren und Strukturieren des Dokuments, meistens in Zusammenhang mit den Attributen "class" und "id" benutzt.
Das Element <div> wird häufig auch, in Verbindung mit "id", zur Erstellung und Positionierung von Ebenen, die ihrerseits Elemente wie zB Bilder und Text enthalten können, auf der Webseite eingesetzt.
Das Element <span> kann in Verbindung mit "class" auch mitten im Text zur Formatierung von Textteilen verwendet werden, ohne dass der Textfluss beeinträchtigt wird.

Anmerkung:Der Hauptunterschied zwischen den beiden Tags besteht darin, dass nach <div>...</div> ein Zeilenumbruch erfolgt und nach <span>...</span> nicht.
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 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 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;">
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 179
CSS, Attributselektoren, Class-Selektoren, Klassen
MULTIMEDIA WEBDESIGN HTML  CSS CSS - Attributselektoren: Class-Selektoren (Klassen)
Unter den Attributselektoren bei CSS sind Class-Selektoren (Klassen) jene, die in einem Dokument mit dem Attribut "class" gekennzeichnet sind und beliebig oft vorkommen dürfen. Sie werden für selbst definierte Stile bzw. "Formatvorlagen" verwendet und ergänzen die Formatierungsvorgaben von HTML-Tags.
Im Beginn-Tag wird dem Attribut "class" ein Name für die Klasse bzw. den Selektor zugewiesen, wobei die Formateigenschaften für die Klasse in den CSS-Anweisungen im "Head-Teil" oder in einer CSS-Datei festgelegt sind.
In einer CSS-Anweisung wird der Class-Selektor durch das Zeichen "." (Punkt) vor dem Namen des Selektoren gekennzeichnet.

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

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

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

Beispiel:
<meta name="description" content="Informationen für Lernende zu Bildbearbeitung und Webdesign">
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 HEAD
Frage 1105
HTML, <head>, Meta Tags, name="keywords"
MULTIMEDIA WEBDESIGN HTML  HEAD Meta-Tag: name="keywords"
Mit dem Meta-Tag "keywords" können bestimmte Stichwörter, die in einer Webseite enthalten sind, angegeben werden. Diese Stichwörter können zB in den Suchdatenbanken von Suchmaschinen vorhanden sein und als Begriffe für die Suche im Internet verwendet werden. Mehrere Stichwörter sollen durch Beistriche getrennt werden:
[1]<meta name="keywords" content="Stichwörter">
Meta-Tags werden im <head> (Kopf) einer Webseite platziert.

Beispiel:
<meta name="keywords" content="Foto, Grafik, Gemälde, visuelle Kompositionen, Objektkunst">
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 HEAD
Frage 1106
HTML, <head>, Meta Tags, charset, Zeichenkodierung
MULTIMEDIA WEBDESIGN HTML  HEAD Meta-Tag: charset="Zeichenkodierung"
Durch das Attribut "charset" eines Meta-Tags wird die Zeichenkodierung, die in der zugehörigen HTML- oder XML-Datei verwendet wird, angegeben. Die Zeichencodierung teilt dem Browser mit, welche Zeichen für die Anzeige verwendet werden müssen. Ist dieser Meta-Tag nicht vorhanden oder der falsche Zeichensatz angegeben, werden Sonderzeichen einer Sprache sehr wahrscheinlich falsch angezeigt.
[1]<meta charset="Zeichenkodierung">
Meta-Tags werden im <head> (Kopf) einer Webseite platziert.

Beispiel:
<meta charset="UTF-8">
Thema auswählen: MULTIMEDIA WEBDESIGN HTML CSS
Frage 1248
HTML, CSS, CSS-Code in Textdatei
MULTIMEDIA WEBDESIGN HTML  CSS CSS-Code in Textdatei
Der CSS-Code kann auch in eine externe Textdatei geschrieben werden. Diese [1] Textdatei hat normalerweise die Dateiendung "css" (zB basis.css) und enthält nur den reinen CSS-Code. Das sind die Selektoren und zwischen den geschweiften Klammern die Deklarationen.

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

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

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

Beispiel
CSS-Dateien: "basis.css" und "layout1.css"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS extern</title>
[1] <link href="basis.css" rel="stylesheet" type="text/css">
[2] <link href="css/layout1.css" rel="stylesheet" type="text/css">
</head>

Hier werden zwei CSS-Dateien eingebunden, wobei [1] ."basis.css" im gleichen Verzeichnis wie die HTML-Datei und [2] "layout1.css" im Unterverzeichnis "css" liegt.
Seite 1 erste
schließen