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

CSS (Cascading Style Sheets), 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.

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

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

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

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

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>

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.

CSS, Selektoren-Typen

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.

CSS, Aufbau, mehrere Deklarationen

CSS - mehrere Deklarationen
Deklarationen in CSS-Anweisungen, die fÃ¼r den gleichen Selektor bestimmt sind, werden innerhalb der geschwungenen Klammer durch Strichpunkte (Semikola) getrennt.
Mehrere Werte, die fÃ¼r dieselbe Deklaration bestimmt sind, werden durch Beistriche getrennt.
Beispiel:
h1 {font-family: Arial, Helevetica, sans-serif; font: bold; font-size: 18px}, d.h. Ãœberschriften 1 (<h1>) werden - je nach VerfÃ¼gbarkeit - mit der Schriftfamilie Arial, Helvetica oder sans-serif, fett und mit einer SchriftgrÃ¶ÃŸe von 18 Pixel geschrieben.

CSS, Positionierung

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.

HTML, CSS, Ebenen, Positionierung, Anordnung, z-Index

CSS - Ebenen: Positionierung, z-Index
Ebenen (Layer) sind in HTML Objekte, die durch den Tag <div> und das Attribut "id" definiert sind.
Die Position wird durch Abstandangaben und die GrÃ¶ÃŸe des rechteckigen Objekts durch Breiten- und HÃ¶henangaben bestimmt.
Werden Ebenen Ã¼berlappend angeordnet, kÃ¶nnen oben liegende Ebenen darunter liegende verdecken. Dies wird durch das Attribut "z-index" geregelt. Ebenen mit einem grÃ¶ÃŸeren Z-Index sind weiter vorne bzw. weiter oben angeordnet.
Die Eigenschaften der Layer werden mittels CSS im Beginntag durch das Attribut "style", im Head oder in einer externen CSS-Datei mit dem Layernamen und dem voreingestellten Zeichen "#" beschrieben.
In Dreamweaver werden die Ebenen im Ebenenfenster hierarchisch und namentlich angezeigt und kÃ¶nnen im Layout-Modus auch mit der Maus verschoben bzw. grÃ¶ÃŸenmÃ¤ÃŸig geÃ¤ndert werden.

Beispiel:

<div id="layer1" style="position:absolute; width:130px; height:60px; z-index:1; left: 103px; top: 100px;">

<div id="layer2" style="position:absolute; width:130px; height:60px; z-index:2; left: 120px; top: 130px;">

<div id="layer3" style="position:absolute; width:130px; height:60px; z-index:3; left: 140px; top: 160px;">

CSS, Attributselektoren, Class-Selektoren, Klassen

CSS - Attributselektoren: Class-Selektoren (Klassen)
Unter den Attributselektoren bei CSS sind Class-Selektoren (Klassen) jene, die in einem Dokument mit dem Attribut "class" gekennzeichnet sind und beliebig oft vorkommen dÃ¼rfen. Sie werden fÃ¼r selbst definierte Stile bzw. "Formatvorlagen" verwendet und ergÃ¤nzen die Formatierungsvorgaben von HTML-Tags.
Im Beginn-Tag wird dem Attribut "class" ein Name fÃ¼r die Klasse bzw. den Selektor zugewiesen, wobei die Formateigenschaften fÃ¼r die Klasse in den CSS-Anweisungen im "Head-Teil" oder in einer CSS-Datei festgelegt sind.
In einer CSS-Anweisung wird der Class-Selektor durch das Zeichen "." (Punkt) vor dem Namen des Selektoren gekennzeichnet.

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

CSS, Attributselektoren, ID-Selektoren

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.

HTML, CSS, HTML-Tags, Typselektoren

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.

HTML, CSS, CSS-Code in Textdatei

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.

HTML, CSS, CSS-Datei in HTML einbinden

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

Beispiel
CSS-Dateien: "basis.css" und "layout1.css"

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>CSS extern</title>

[1] <link href="basis.css" rel="stylesheet" type="text/css">

[2] <link href="css/layout1.css" rel="stylesheet" type="text/css">

</head>

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

CSS, Pseudoklassen für Hyperlinks

Pseudoklassen für Hyperlinks
Mit Pseudoklassen können mit CSS bestimmte Eigenschaften eines Elements formatiert werden. Sie beginnen mit einem Doppelpunkt (:) und dürfen weder davor noch dahinter Leerzeichen aufweisen. Am häufigsten werden Pseudoklassen zum dynamischen Formatieren von Hyperlinks (Links) verwendet. Sie beziehen sich auf den Tag <a> und müssen in der folgenden Reihenfolge definiert werden:
[1] :link - Neuer Hyperlink, der noch nicht ausgewählt bzw. besucht wurde
[2] :visited - Bereits ausgewählter bzw. besuchter Hyperlink
[3] :hover - Hyperlink, über dem sich gerade das Zeigegerät befindet
[4] :active - Hyperlink, der gerade aktiv bzw. ausgewählt ist.

Beispiel
HTML-Quellcode des Hyperlinks (zB): <a href="http://www.cadat.at/">www.cadat.at</a>
CSS-Quellcode für Pseudoklassen, angewendet auf den Hyperlink ( <a href=.....>...</a>);

a:link {color: #096;}

      a:visited {color: #666;}

      a:hover {color: #F00;}

      a:active {text-decoration: underline overline;}

Der neue Link wird in einer grün-blauen und der besuchte in einer grauen Farbe angezeigt. Beim Darüberfahren mit dem Zeigegerät erscheint der Link rot. Beim aktiven Link wird noch ein waagrechter Strich oben (overline) hinzugefügt,

CSS, CSS 3 (Cascading Style Sheet Level 3), Neuerungen

Neuerungen in CSS 3
CSS 3 (Cascading Style Sheet Level 3) als Nachfolger von CSS 2.1 ist, basierend auf den Elementen und der Syntax von CSS 2, modular aufgebaut und enthält eine große Anzahl von neuen Elementen, Funktionen und Modulen. Dies sind unter anderem:
Einbetten von Schriftarten, die nicht auf dem Computer des Users installiert sind
Neue Schrift-Eigenschaften (zB Regeln für Zeilenumbruch, Mehrspaltigkeit)
Farbverläufe (zB für Hintergründe)
Halbtransparente Hintergründe und Elemente (von durchsichtigt bis undurchsichtig)
Rotationen (zB Drehung von Ebenen mit Inhalt)
Schlagschatten (zB für Texte und Box)
Animationen, Transitions (zB weiche Bildübergänge)
2D- und 3D-Transformationen (Verformungen)
Neue Pseudoelemente (zB für Tabellenelemente und Listen)
Veränderung von Farbe und Position in Eingabefeldern
Neue Eigenschaften für Medien (zB Positionierung)

HTML, CSS, Farben definieren

CSS: Farben definieren
Farben werden in CSS mit der Eigenschaft color und mit einem gültigen Wert für eine Web-Farbe definiert.
Dafür gibt es natürlich drei Möglichkeiten:
[1] Farbzuweisung im Beginntag mit dem style-Attribut: style="color: farbcode" (zB farbcode = #00FF00)
[2] Farbzuweisung im Head einer HTML-Datei: color: farbcode; (zB farbcode = green)
[3] Farbzuweisung in einer externen CSS-Datei: color: farbcode; (zB farbcode = rgb(117,255,233) )
->Link Beispiel-HTML-Datei

Beispiele
[4] Farbzuweisung im Beginntag von <p> mit dem style-Attribut:
<p style="color:#9b02db;">Farbe LILA mit style-Attribut: style="color: #9b02db;"</p>
[5] Farbzuweisung durch die Klasse ".farbe_a" im im Head der HTML-Datei:

<style type="text/css">

      .farbe_a {

      color:blue;

      }

  </style>

[6] Farbzuweisung durch die Klasse ".farbe1" in der externen CSS-Datei "farben.css":

.farbe1 {

    color: #237C8F;

    }

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


Du kannst mehr als du glaubst, aber weniger als du denkst.


	79 INFOS HTML