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

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


Wollt ihr die totale Vernetzung?


	79 INFOS HTML