HTML / CSS Grundkurs und Einführung

Möchtest du nicht lieber direkt mit dem modernen neuen HTML5 / CSS3 Webstandard starten? Hier findest du eine umfangreiche Einführung inkl. Video-Training zu HTML5 und CSS3. Falls du gerne mit Video-Workshops arbeitest, schau dir doch einmal mein neues HTML5- & CSS3-Video-Training mit über 8 Stunden Video-Material an.

Inhaltsverzeichnis:

• Einführung
• Grundelemente
• Überschriften und Absätze
• Zeichen hervorheben
• Aufzählungen und Listen
• Hypertext Links
• Multimedia-Elemente
• Formulare
• Tabellen
• CSS Cascading Style Sheets
• Autoren

1. Einführung

HTML steht für HyperText Markup Language und ist die Standard-Sprache, mit der statische Internetseiten programmiert werden. Sie besteht im Prinzip aus einer Untermenge der weltweit anerkannten Standard-Hypertextsprache SGML (Standard Generalized Markup Language). Beide Sprachen legen fest, wie Strukturdefinitionen aufgeschrieben und verwendet werden sollen. Ziel beider Sprachen ist es, einen Standard vorzugeben, in dem Dokumente einwandfrei ausgetauscht und größeren Gruppen zur Verfügung gestellt werden können. Dokumente und Datenbestände sollen über die engen Grenzen von Rechnerplattformen und spezifischer Software austauschbar sein. Dies läßt sich nur realisieren, indem die Dokumente nur durch ihre Syntax und nicht durch ihre Semantik beschrieben werden.

Grundsätzlich bestehen HTML-Dokumente aus Texten im 7-Bit ASCII-Code. Damit lassen sie sich unproblematisch durch die unterschiedlichsten Netzwerkgateways transportieren. Neben dem ganz normalen ASCII-Text enthalten die Dokumente auch Steuerbefehle („Auszeichnungen“).

Durch die rasante Verbreitung des WWW in den 90er Jahren stieg der Sprachumfang von HTML immer mehr an. Verschiedenste Entwicklergruppen entwickelten unterschiedliche Strukturelemente und Darstellungsmöglichkeiten, so dass eine problemlose Austauschbarkeit bald nicht mehr gewährleistet war. Aus diesem Grunde ist man übereingekommen, den Sprachumfang von HTML zu standardisieren. Die derzeitig aktuelle Version ist HTML 4.1. Neben dem aktuellen HTML-Standard gibt es noch den XHTML-Standard. Die Struktur von XHTML ist im Vergleich zu HTML sehr ähnlich, dennoch gibt es einige Unterschiede. Wir beschäftigen uns hier allerdings mit HTML, da der HTML-Standard näher an dem bald erscheinenden HTML5-Standard liegt.

Den aktuellen Standard können Sie unter http://www.w3.org/TR/html401/ einsehen.

2 Grundelemente

HTML-Dokumente sind ASCII-Texte und können mit jedem normalen ASCII-Editor erstellt werden. Abgespeichert werden diese Dokumente als Dateien mit den Endungen .html für UNIX oder unter .htm für Windows. Die Dokumente können sofort nach jedem Arbeitsschritt mit einem „Browser“ betrachtet werden. Es ist keine Übersetzung in ein Binärformat notwendig.

Im Folgenden werden die wichtigsten Sprachelemente und die grundsätzliche Dokumentenstruktur beschrieben.

2.1 Tags

Eine HTML-Datei besteht aus ASCII-Text, der bestimmte, definierte Tags (Formatanweisungen) enthält. Erst beim Benutzer werden diese Formatanweisungen durch den jeweiligen Browser in eine entsprechende Darstellung gebracht. Dies bedeutet, dass die Darstellung des Dokumentes auf dem Bildschirm im Grunde von den speziellen Darstellungseigenschaften des Browsers abhängt. So können z. B. Schrifttypen, Schriftsätze und Textumbrüche von Fall zu Fall unterschiedlich interpretiert werden.

Die Steuer- und Formatierungselemente sind relativ schnell erlernbar und führen genauso schnell zu Erfolgserlebnissen.

Ein „Tag“ ist ein Steuerelement, das durch die beiden Klammern „kleiner als“ (<) und „größer als“ (>) eingeschlossen ist.

Es lassen sich zwei Arten von Tags unterscheiden:

leere Tags <elementname>
container Tags <elementname>Text</elementname>

Leere Tags können sofort und ohne Rücksicht auf nachfolgende Steuerelemente interpretiert werden, wie z. B. einen Zeilenumbruch <br>.

Container Tags dagegen schließen Teile des Dokumentes ein und erzeugen eine Umgebung. Innerhalb dieser Umgebung können selbst wieder Tags stehen, sowohl leere als auch Container Tags. Das Ende einer Formatauszeichnung ist stets durch einen Schrägstrich (/) gekennzeichnet. Ein Beispiel für einen Container-Tag ist das HTML-Tag, das den Anfang und das Ende eines HTML-Dokumentes markiert: <HTML>……….</HTML>

Die Tags können mit „Attributen“ erweitert werden. Diese Attribute beeinflussen die Funktionsweise der jeweiligen Tags. (In der Folge sprechen wir auch von Kommandos oder Befehlen, wenn die Tags gemeint sind.)

Die vollständige Syntax für die Tags lautet somit:

<elementname attribut1="Wert1" attribut2="Wert2" ...>Element</elementname>

Im Laufe der weiteren Ausführung werden wir nur die wichtigsten Tags im Detail vorstellen.

2.2 Gerüst eines Dokuments

Ein HTML-Dokument wird eingerahmt von den Kommandos:

<html>..........</html>

und besteht im wesentlichen aus dem Kopf des Dokumentes (head) und aus dem eigentlichen Textkörper (body).

Die HTML-Befehle lauten:

<head>..........</head>
<body>..........</body>

Der Dokumententitel erscheint innerhalb des HEADs und wird wie folgt gekennzeichnet:

<title>Text</title>

muss des bodys werden mit den Headers-Befehlen (<h1> bis <h6>) gekennzeichnet:

<h1>Text</h1>

Innerhalb der Absätze kann durch verschiedenste Textattribute wie z.B. Aufzählungen, Fettdruck oder Kursivschrift der Text verschiedenartig gestaltet werden.
Das Skelett eines HTML-Dokuments sieht folgendermaßen aus:

<html>
	<head>
		<title>Text der Titelleiste</title>
		Elemente des Kopfteils.
	</head>
	<body>
		<h1>Überschrift1</h1>
		<p>Absatztext</p>
 
		<h2>Überschrift2</h2>
		<p>Absatztext usw.</p>
	</body>
</html>

2.3 Meta-Informationen

Meta-Informationen sind Anweisungen, die bei der Organisation der Informationsflut behilflich sind. Diese Anweisungen sind im HEAD eines Dokumentes zu finden und werden gewöhnlich nicht von den jeweiligen Browsern dargestellt. Als Beispiele für Meta- Informationen wird im Folgenden kurz auf den Dokumenttyp und das META-Element eingegangen.

(1) Dokumenttyp
Die Definition der Dokumentenstruktur wird als Dokumenttyp bezeichnet. Der Dokumenttyp kann nun von den Browsern heraus aus den einzelnen Dokumenten aufgerufen werden. Dazu dient die DOCTYPE-Direktive, die am Anfang eines HTML- Dokumentes eingefügt werden sollte. Damit erhält der Browser frühzeitig Informationen über das darzustellende Dokument.

Syntax: <!DOCTYPE>

(2) META-Element
Im META-Element finden allen Informationen ihren Platz, die nicht durch ein spezielles HTML-Tag dargestellt werden können. Diese Angaben können sein, Informationen zur Identifikation, Indizierung und Katalogisierung von Dokumenten. Man sollte aber darauf achten, dass keine Informationen mit META markiert werden, die nicht schon vom Server selber erzeugt werden. Zum heutigen Zeitpunkt machen nicht alle Browser von diesen Informationen Gebrauch.

3 Überschriften und Absätze

3.1 Absätze
Mit Hilfe von Absätzen kann der Text der Webseite strukturiert werden. Grundsätzliche Elemente zur Absatzformatierung sind:

Neuer Absatz – <p>

Vorformatierter Text – <pre>
Textblöcke mit ähnlichem Layout – <div>
Wörtliche Rede – <blockquote>
Stilelemente – <style> (gehört zu Style Sheets)
Überschriften – <h1> bis <h6>

(1) Absatzmarken und Steuerung der Zeilenumbrüche
Jeder neue Absatz wird mit dem Tag <p> begonnen und mit </p> beendet. Möchte man lediglich einen Zeilenumbruch ohne eine Leerzeile zwischen den Zeilen erreicht man dies mit <br> an der Stelle an der der Zeilenumbruch stattfinden soll.

Linksbündig – <p align= „left“> (Standardeinstellung)
Rechtsbündig – <p align= „right“>
Zentriert – <p align= „center“>
Blocksatz – <p align= „justify“>

Absätze können aber auch an Bildern ausgerichtet werden.

(2) Vorformatierter Text
Soll ein Text in einem bestimmten Format ausgegeben werden, d.h. unerwünschte Worttrennungen sollen vermieden werden, im Quellcode gesetzte Zeilenumbrüche sollen berücksichtigt werden ohne <br>, langer Zeilentext soll nicht einfach umgebrochen werden oder ähnliches, so empfiehlt es sich den Text mit <pre> Text </pre> vorzuformatieren.

Die Ausgabe des Textes auf dem Bildschirm erscheint so, wie sie im Quelltext eingegeben wurde.

Die Verwendung von   kann hier ebenfalls sinnvoll sein. Dies wird häufig bei Beträgen verwendet, um zu verhindern, dass die Währung in einer anderen Zeile steht. Zum Beispiel „…. ein Betrag von 100.000&nbsp;€“.

(3) Abschnittformatierung
<div> ermöglicht es, ganze Dokumenteinheiten zu formatieren. Alles was zwischen den Tags <div> Text </div> steht, wird Teil der Division (Bereich) erkannt und der ganze Block kann mit align ausgerichtet werden.

Linksbündig – <div align= „left“> (Standardeinstellung)
Rechtsbündig – <div align= „right“>
Zentriert – <div align= „center“>
Blocksatz – <div align= „justify“>

(4) Blockquote
<blockquote> Text </blockquote> wird häufig für Zitate verwendet. Ziel ist es den zitierten Absatz vom übrigen Text schnell unterscheiden zu können. < blockquote cite=“http://de.selfhtml.org/“> ermöglicht es zudem den folgenden Text als Zitat von der angegebenen URL zu kennzeichnen.

(5) Stilelemente (siehe auch CSS Kapitel 12)
<style> dient als Formatvorlage, um für eine ganzen Absatz Schriftfarbe (color), Schriftgröße (font-size), Zeichenabstand (letter-spacing) und Schriftfamilie / Schriftart (font-family) festzulegen.

<p style="color:#00000; font-family:arial; font-size:12pt"> Text </p>

Dieses Element ist sinnvoll, wenn auf Cascading Style Sheets verzichtet wird, oder wenn Ausnahmen formatiert werden.

3.2 Überschriften

HTML kennt sechs verschiedene Überschriften <h1> bis <h6>, die Hierarchisch angeordnet sind. <h1> Überschrift stellt die Hauptüberschrift auf oberster Ebene dar. Nachfolgende müssen chronologisch folgen. Das Ausrichten der Überschriften erfolgt analog zur Absatzausrichtung. Jede Überschrift bildet einen eigenen Absatz, es muss also kein Zeilenumbruch definiert werden.

4 Zeichen hervorheben

Diese Elemente sind sinnvoll, wenn auf Cascading Style Sheets verzichtet wird, oder wenn Ausnahmen formatiert werden.

4.1 Schriftstil-Elemente

<b>...</b> - fett (bold)
<i>...</i> - kursiv (italic)
<u>...</u> - unterstrichen (underline)
<s>...</s> - durchgestrichen (strike)
<big>...</big> - größere Schrift
<small>...</small> - kleinere Schrift
<sub>...</sub> - tiefgestellt
<sup>...</sup> - hochgestellt
<tt>...</tt> - Schrift mit fester Breite

4.2 Textart-Elemente

<em>...</em> - Betonung
<strong>...</strong> - Betonung
<cite>...</cite> - Zitat
<code>...</code> - Markierung von Quelltext
<dfn>...</dfn> - Definitionen
<kbd>...</kbd> - Tastatureingaben
<samp>...</samp> - Ausgabe wie Eingabe (BSP. Sie sagte: $%&$!!)
<var>...</var> - Variablenname

4.3 Besondere Zeichen-Elemente

Mit besonderen Zeichen-Elementen können Abweichungen von der Standardformatierung realisiert werden.

<basefont size=""> - ändert Normalschriftgrösse
<basefont color=""> - ändert Normalschriftfarbe
<basefont face=""> - ändert Normalschriftart/familie

Diese Veränderungen gelten bis zum nächsten Befehl oder bis zum Dateiende. Diese Tags hat kein abschließendes Tag.

Die Standardschriftgrösse 3 kann aber auch wie folgt verändert werden:

<font size="7"> riesiger Text </font>
<font size="1"> winziger Text </font>
<font size="+1"> etwas größer als normal </font>
<font size="-2"> kleiner als normal </font>

Wird der Zahl ein Plus- oder Minus-Zeichen vorangestellt, ändert sich die Schriftgröße im Verhältnis zur Standardschriftgrösse.

Analog zu basefont kann auch hier Schriftfarbe und Schriftart / Familie geändert werden.

<font face="Arial"> Text </font>
<font color="red"> Text </font>

Diese Veränderungen gelten nur innerhalb des Tags, anders als bei BASEFONT SIZE werden Sie mit einem Abschluss-Tag geschlossen.

4.4 Tags kombinieren

Die Textformatierungs-Tags lassen sich beliebig miteinander sinnvoll kombinieren.

Beispiel:

<p> <b> <i> <u> Text </u> </i> </b> </p>

4.5 Farbtabelle

Folgende Tabelle zeigt die Grundfarben mit den dazugehörigen Codes

5 Aufzählungen und Listen

Grundsätzlich unterscheidet man zwischen nummerierten Listen und Aufzählungslisten. Die nummerierten Listen verwendet man bei Inhaltsverzeichnissen beziehungsweise Hierarchien oder Schritt-für-Schritt-Erklärungen. Aufzählungslisten werden nicht automatisch durchnummeriert, hier werden lediglich Aufzählungszeichen (Bullet) vor den Listeneintrag gesetzt. Sie werden beim Aufzählen von zum Beispiel Produkten verwendet. Aufzählungen (sortiert oder unsortiert) sind wie in den Textverarbeitungsprogrammen auch in HTML möglich. Allerdings gilt hier zu beachten, dass bei verschachtelten Strukturen, ein Neu angegebenes Bullet oder die Art der Aufzählung für untergeordnete Listen nicht übernommen wird. Das Bullet oder die Art der Aufzählung muss für jede untergeordnete Liste explizit angegeben werden.

5.1 Aufzählungen mit Gliederungspunkten

(1) Aufbau Aufzählungsliste
Der Aufbau der Aufzählungsliste – unsortierte Liste – sieht folgendermassen aus:

<ul>
	<li>Aufzählungspunkt</li>
	<li>Aufzählungspunkt</li>
	<li>Aufzählungspunkt</li>
</ul>

(2) Arten von Gliederungspunkten
Es gibt verschiedene Arten von Gliederungspunkten

<li> - Punkt als disc / bullet (Standard)
<li type="disc"> - Punkt als ausgefüllter Kreis
<li type="circle"> - Punkt als Kreis
<li type="square"> - Punkt als Quadrat

(3) Verschachtelte Aufzählungen
Eine Verschachtelung ist möglich. Die Bullets werden in der Unterliste entsprechend anders dargestellt als in der Hauptliste.

<ul>
	<li> Aufzählungspunkt </li>
	<li> Aufzählungspunkt </li>
	<ul>
		<li> Aufzählungspunkt </li>	
		<li> Aufzählungspunkt </li>	
	</ul>
	<li> Aufzählungspunkt </li>
	<li> Aufzählungspunkt </li>
</ul>

5.2 Nummerierte Aufzählungen

Nummerierungen sind ebenfalls wie in den Textverarbeitungsprogrammen auch in HTML möglich.

(1) Aufbau der nummerierten Liste (Ordered List)

<ol>
	<li> Aufzählungspunkt </li>
	<li> Aufzählungspunkt </li>
	<li> Aufzählungspunkt </li>
</ol>

(2) Arten von Nummerierungen
Analog zu den Textverarbeitungsprogrammen gibt Nummerierungs-Zeichen

<ol type="1"> - 1, 2, 3, 4, 5, (Standard)
<ol type ="A"> - A, B, C, D, E,
<ol type ="a"> - a, b, c, d, e,
<ol type ="I"> - I, II, III, IV, V,
<ol type ="i"> - i, ii, iii, iv, v,

(3) Start der Nummerierung
Um die Nummerierung mit einem bestimmten Wert beginnen zu lassen, muss im Start-Tag der Ordered List <ol> das Attribut START gesetzt werden, sowie der geforderte Startwert.

<ol start="3"> - Startwert 3

Soll die Nummerierung innerhalb einer Liste verändert werden, muss im Listen-Element <li> das Attribut VALUE gesetzt werden.

<li value="6"> - Startwert 6

5.3 Definitionslisten

Definitionslisten werden in der Regel für das Erstellen von Glossaren verwendet. Sie lassen sich aber auch für Menüleisten mit zusätzlichen Erklärungen oder als Vokabellisten verwenden. Definitionslisten kennen drei verschiedene Elemente.

DL definition list – Definitionsliste – Hauptelement (enthhält DT und DD)
DT definition term – Definitionsbegriff – erklärender Begriff
DD definition – Definition – Definition von DL

<dl>
	<dt>
		<dd>
	<dt>
		<dd>
		<dd>
		<dd>
	<dt>
		<dd>
		<dd>
</dl>

6 Hypertext Links

Mit Hilfe der Hypertext-Links können Dateien verknüpft werden, unabhängig davon, auf welchem Rechner sie liegen und unabhängig von den jeweiligen Datenformaten. Hypertext-Links können Text-, Grafik-, Sound- oder Film-Dateien sein. Im HTML- Dokument werden dazu nun sogenannte Anker gesetzt, die auf die entsprechende Datei zeigen. Möchte man ein Dokument X auf ein Dokument Y verweisen lassen, so muss man die folgende Syntax verwenden:

<a href="URL des Dokumentes Y"> markierter Text </a>

Das „A“ steht hierbei für den Anker und das HREF-Attribut initialisiert einen Hypertext- Link. Der URL (Uniform Resource Locator) kann alle möglichen Formen annehmen. Der „markierte Text“ von oben wird vom Browser farblich dargestellt. Beim Anklicken des markierten Textes wird das referenzierte Dokument angefordert. Beispiel:

<a href="http://www.irgendo.net/dokument.html">Dokument</a>

6.1 Links innerhalb des gleichen Dokuments

In langen Dokumenten macht es Sinn, lokale Anker zu definieren und dann über ein vorangestelltes Inhaltsverzeichnis Sprungmarken zu diesen Textstellen anzubieten. Dafür ist es notwendig, neben der Angabe der Referenz auch noch die Textstelle, zu der gesprungen werden soll, zu definieren. Folgende Definitionen müssen erstellt werden:

Referenz auf die Textstelle im gleichen Dokument:

<a href="#beispiele"> hier finden Sie weitere Beispiele </a>

Anker im gleichen Dokument:

<a name="beispiele"> weitere Beispiele </a>

Beim Referenzieren im Text muss nicht der vollständige URL angegeben werden, sondern es reicht die obige Angabe.

6.2 Links zu Textstellen in anderen Dokumenten

Es ist nicht nur möglich Textstellen innerhalb des gleichen Dokumentes zu referenzieren, sondern man kann auch auf eine Textstelle in einem anderen Dokument verweisen. Das folgende Beispiel soll dies erklären:

Link auf eine Textstelle in einem anderen Dokument:

Beim Klicken auf den farblich hervorgehobenen Text „hier finden Sie weitere Beispiele“ wird auf eine Textstelle in dem Dokument „dokument.html“ auf den Server „www.domain.de“ gesprungen, wenn diese Textstelle mit folgendem Anker gekennzeichnet wurde:

Anker in einem anderen Dokument:

<a name = “beispiele“> weitere Beispiele </a>

6.3 Relative und absolute Links

Es ist nicht immer notwendig, die vollständigen URLs bei der Referenzierung von Dokumenten zu verwenden. Es macht zum Beispiel wenig Sinn, einen Link zwischen zwei Dokumenten vollständig ausschreiben zu müssen, wenn diese beiden Dokumente im gleichen Verzeichnis liegen. Es reicht bei einem so geschilderten Fall als URL nur den Namen des zweiten Dokumentes zu verwenden. Dies bezeichnet man als einen relativen bzw. partiellen URL. Absolute URLs beinhalten immer die vollständige Angaben bei der Referenzierung von Dokumenten. Immer dann, wenn ein Link zu einem anderen Rechner aufgebaut werden soll, muss absolut referenziert werden, wenn man Links auf Dateien des selben Rechners anlegen will, ist es sinnvoll immer relative URLs zu benutzen.

Das folgende Beispiel referenziert eine Datei, die zwei Verzeichnisse weiter höher liegt (relativer URL):

<a href="../../home.html"> Home Page </a>

Das Referenzieren mit relativen URLs hat den Vorteil, dass man zum Beispiel den gesamten Verzeichnisbaum der WWW-Dokumente an eine andere Stelle verschieben kann, ohne die URLs in den Dokumenten anpassen zu müssen. Bei einer großen Anzahl von Dokumenten kann dies sehr hilfreich sein.

Eine weitere Möglichkeit die Hypertext-Links relativ zu adressieren ist die Verwendung von <base> im HEAD eines Dokumentes. Mit dem BASE-Element wird eine Adresse angegeben, die dann innerhalb des Textes mit einem <a>-Tag vervollständigt wird. Beispiel:

<base href="http://firma.com/dokumente/meins.html">
..........
<a href="../texte/ich.html"> ich </a>
wird die Adresse innerhalb das <a>-Tags zu
“http://firma.com/texte/ich.html“
vervollständigt.

Bei einer Adressänderung reicht es dann, einmal pro Dokument die Adresse im BASE- Element zu ändern.

7 Multimedia-Elemente

Seit dem Beginn der Web-Entwicklung im Jahr 1989 hat sich gerade im Hinblick auf Web- Browser sehr viel getan.

Eine Spezifikation für die Übertragung von Audio-, Video-, und Grafikdaten wird heute durch MIME gegeben. MIME steht für Multipurpose Internet Mail Extension und wird als Standard beim Versenden von Multimediadaten über das WWW angewendet. Heute spricht man im Zusammenhang mit dem Web bei MIME von „Content Types“. Normalerweise werden beim Anfordern von Dateien über das Web nicht nur Daten übertragen, sondern auch die Information, um welche Art von Daten es sich handelt. Wird das Datenformat nicht übertragen, so versucht der Browser, das Datenformat anhand der Endung der übertragenen Datei zu erschließen und ordnet die Daten einem speziellen MIME-Typus zu. Bei der Installation eines Browsers werden die verschiedenen MIME- Typen auf die Endungen der Dateien abgebildet.

Folgende Übersicht zeigt einen Auszug der verwendeten Multimedia-Datenformate.

application/postscript – .eps .ps .ai
sound/au – .au .snd
sound/wave – .wav
sound/midi – .midi
image/gif – .gif
image/jpeg – .jpeg
image/tiff – .tiff
text/html – .html
video/mpeg – .mpeg
video/avi – .avi

Wendet man die in der Tabelle aufgelisteten Datenformate an, so kann man relativ sicher sein, dass die verschiedenen Browser diese Formate übersetzen können. Man sollte auf andere Datenformate verzichten, wenn man sicher gehen will, dass Grafiken, Videosequenzen, Klänge usw. vom Browser des Benutzer richtig ausgewertet werden können.

7.1 Multimedia-Links

Eine Referenz auf ein Multimedia-Objekt gestaltet sich wie eine Referenz auf eine ‘normale’ Datei. Folgendes Beispiel zeigt einen Link zu einer Datei im .gif-Format:

Achtung: externe Referenzen sind als solche kenntlich zu machen. Beachten Sie Urheberrechte.

Im Folgenden werden Grafikformate, Videoformate und Audioformate etwas näher beschrieben.

„Eine Grafik sagt oft mehr als 1000 Worte.“ Dazu zählen vor allem Landkarten, Konstruktionszeichnungen, Diagramme und komplexe mathematische Formeln. In solchen Fällen ist es also sinnvoll Grafiken in das Dokument einzubauen.

Zu den am meist verbreiteten Grafikformaten zählt:

• GIF (Graphics Interchange Format) GIF zählt zu den am weitesten verbreiteten Grafikformaten und wurde von CompuServe entwickelt, speziell zum Zweck des Datenaustausches über verschiedene Rechnerplattformen. Der erweiterte Standard GIF89A macht es möglich eine Farbe als transparent zu definieren. Damit ist es möglich, Hintergrundfarben von Grafíken automatisch den Farben des Browser-Fensters anzupassen.
• JPEG (Joint Photographic Experts Group) JPEG enthält ein spezielles Kompressionsverfahren, um die Datenmenge von Bildern zu verringern. Grafiken im JPEG-Format sind dadurch oft um die Hälfte kleiner als Grafiken im GIF-Format. Durch das Kompressionsverfahren können allerdings Bildinformationen verloren gehen. Die Qualität der Bilder kann dadurch stark beeinträchtigt werden („Artefakte“).
• TIFF (Tagged Image File Format) TIFF wurde entwickelt von Aldus und Microsoft und wurde ursprünglich haupstsächlich für Scanner benutzt. Das TIFF-Format ist nicht so stark verbreitet wie die zwei oben aufgeführten Formate. Nachteilig am TIFF-Format ist, dass es nicht direkt vom Browser unterstützt wird und damit nicht für inline images benutzt werden kann.
• SVG (Scalable Vector Graphics) SVG basiert auf der Auszeichnungssprache XML und verwendet zur Darstellung wie der Name schon sagt Vektoren. SVG ist besonders geeignet, um Zeichnungen, Diagramme, etc. darzustellen
• PNG (Portable Network Graphics) PNG wurde vom W3-Konsortium als Alternative zum JPEG- und GIF-Format entwickelt und soll die Vorteile der beiden Formate kombinieren. Dabei soll es die Nachteile der beiden Formate minimieren. PNG stellt eine verlustfreie Kompression, und 16.7 Millionen Farben sicher. Der schichtweise Aufbau einer PNG-Grafik benötigt nur 2% der Bildinformationen, um eine Vorschaugrafik zu erstellen. Bei JPEG-Grafiken sind es 15%.

Schon relativ kurze Videosequenzen haben ein beträchtliches Datenvolumen und benötigen eine hohe Übertragungsbandbreite. Zu den häufigsten Video-Datenformate zählen:

• MPEG (Motion Picture Experts Group) Das MPEG-Format ist das meist verbreitete Format für Videosequenzen im Internet.
• AVI (Advanced Vidio Image) AVI wurde von Microsoft entwickelt und ist unter Windows stark verbreitet. Allerdings wird dieses Datenformat nicht auf allen Plattformen unterstützt.

Zu den häufigsten eingesetzten Audioformaten zählen heute:

• WAV-Dateien findet man vor allem unter Windows. Auf anderen Plattformen wird
  dieses Format weniger unterstützt. Nachteilig an diesen Klangdateien ist, dass sie sehr groß werden können.
• MIDI (Musical Instrument Digital Interface) MIDI-Dateien erreichen lange nicht das Datenvolumen einer WAV-Datei. Allerdings läßt die Soundqualität oft zu wünschen übrig. MIDI-Dateien werden hauptsächlich von Windows unterstützt.
• MPEG 3, MPEG 4 (Motion Pictures Expert Group) MPEG bezeichnet einen Standard, der von der Motion Pictures Expert Group für
  Dateiformate beziehungsweise Verfahren zur Komprimierung von Speicherung von Video- und Multimediadaten in hoher Qualität, festgelegt wurde.

Hier gibt es verschiedene Standards

MPEG 1 – für flüssige Videowiedergaben – größte Kompressionsraten
MPEG 2 – Kompression auf höchster Qualitätsstufe – Broadcaststandard
MPEG 3 – in MPEG 2 implementiert – war für HDTV vorgesehen
MPEG 4 – Weiterentwicklung des MPEG 2 Formates – noch in Entwicklung

7.2 IMG-Umgebung

Neben Textreferenzen lassen sich genauso einfach Grafiken in ein HTML-Dokumente einbinden. Man bezeichnet diese Grafiken als inline images. Das Referenzieren erfolgt durch den IMG-Tag:

<img align="top | middle | bottom | right | left" src="bild.gif" alt="Alternativ-Text">

Der Parameter ALIGN kennzeichnet die Ausrichtung des Bildes. Folgende Werte kann ALIGN annehmen:

• top: Die Oberkante des Textes wird an der Oberkante der Grafik ausgerichtet.
• middle: Die Unterkante des Textes wird an der Mitte der Grafik ausgerichtet.
• bottom: Die Unterkante des Textes wird an der Unterkante der Grafik ausgerichtet.
• left: Die Grafik wird am linken Bildrand ausgerichtet, eventueller Text fließt um die Grafik herum.
• right: Die Grafik wird am rechten Bildrand ausgerichtet, eventueller Text fließt um die Grafik herum.

Eine Grafik wird innerhalb einer Textumgebung wie ein einzelner Buchstabe behandelt. Das IMG-Tag kennt also keinen Fließtext. Inline images eignen sich sehr gut für transparente Grafiken. Transparente Grafiken passen sich dem jeweiligen Browser- Hintergrund an. Bei der Verwendung der Farben sollte man darauf achten, dass die meisten Browser nicht alle 256 Farben auf einmal darstellen können. Die Farben, die der Browser nicht geladen hat, versucht er durch ähnliche zu ersetzen. Daher ist es zu empfehlen, die Anzahl der Farben auf ein Minimum zu reduzieren, damit die Verfälschungseffekte nicht zu stark werden.

Mit dem Attribut ALT kann ein Alternativtext definiert werden, z.B. falls ein nicht- grafikfähiger Browser beim Benutzer eingesetzt wird. Wird das ALT-Attribut mit keinem Wert hinterlegt, so verschweigt der Text-Browser das Bild dann voll und ganz, d.h. es kommt der sonst nicht übliche Hinweis: [IMAGE].

<img align="top" src="frosch.gif" alt="Bild eines Frosches">

7.3 Aktive Grafiken

Neben dem Einsetzen von GIF-Bildern in ein HTML-Dokument ist es auch möglich mit Hilfsprogrammen zusätzlich Links in Bilder (verweissensitive Grafiken) zu setzen. Beim Anklicken mit der Maus innerhalb bestimmter Bildelemente können weitere Links zu Dokumenten aktiviert werden. Solche Grafiken nennt man aktive Grafiken oder auch clickable images. Die Bildbereiche können durch Rechtecke, Kreise und Polygone markiert werden.

• CIRCLE: mit CIRCLE können kreisförmige Bildregionen bestimmt werden. Die Koordinaten enthalten den Mittelpunkt und einen Wert für den Radius.
• RECT: Rechtecke bestimmen hier die Bildregionen, wobei die Koordinaten die linke obere und die rechte untere Ecke definieren.
• POLY: Mit Polygone können die unterschiedlichsten Bildregionen festgelegt werden. Jeder Punkt wird durch ein Koordinatenpaar definiert.

In der HTML-Datei wird das Bild, das als „klickable Image“ verwendet werden soll im IMG- Tag angegeben und gleichzeitig werden die klickbaren Bereiche definiert. Im folgenden Beispiel ist nun der Aufbau eines solchen klickable images dargastellt.

<img src="img00001.gif" usemap="#img00001">
<map name="img00001">
	<area shape="rect" coords="107,40,149,50" href="aaa.htm">
	<area shape="circle" coords="69,80,12" href="brille.htm">
	<areashape="polygon" coords="60,125,91,153,102,129,103,103,89,103,67,110,58,116,64,131,64,131,65,131,65,131,69,134,69,134,90,152,90,152,99,143,99,143,155,107,155,107,11 2,147,112,147,92,151,92,151" href="zickzag.htm">
	<area shape="default" nohref>
</map>

Mit

<form [action="url"] [methode="methode"] [enctype="Typ"]>
...(Definitionen der entsprechenden Eingabefelder oder Schalter)...
</form>

<input type="Typus" name="Name" ......(weitere Attribute)>

<input type="Text" name="Name" [size="Zahl"] [value="Text"] [maxlength="Zahl"]>

<input type="checkbox" name="Name" value="Wert" [checked]> Bezeichner
 
Beispiel:
<INPUT type="checkbox" name="Farbe" value="Blau" checked> Blau

<input type="submit" name="Farbe" value="Senden">

<textarea name="Name" rows="Zahl" cols="Zahl" align="top | middle | bottom | left | right"> optionaler Text (Default-Text im Eingabefenster) </textarea>

<table>..........</table>

<table cellpadding="1" cellspacing="1" style="margin-bottom:20px;">
	<tr>
    	<td width="80"><strong>Farbe</strong></td>
        <td width="100"><strong>Farbenname</strong></td>
        <td width="80"><strong>Hexcode</strong></td>
        <td width="100"><strong>Farbfläche</strong></td>
    </tr>
    <tr>
    	<td>Rot</td>
        <td>red</td>
        <td>#ff0000</td>
        <td bgcolor="#f00"></td>
    </tr>
    <tr>
    	<td>Gelb</td>
        <td>yellow</td>
        <td>#ff0000</td>
        <td bgcolor="#ff0"></td>
    </tr>
    <tr>
    	<td>Grün</td>
        <td>green</td>
        <td>#008000</td>
        <td bgcolor="#008000"></td>
    </tr>
    <tr>
    	<td>Hellgrün</td>
        <td>lime</td>
        <td>#00ff00</td>
        <td bgcolor="#00ff00"></td>
    </tr>
    <tr>
    	<td>Grünblau</td>
        <td>teal</td>
        <td>#008080</td>
        <td bgcolor="#008080"></td>
    </tr>
    <tr>
    	<td>Olivegrün</td>
        <td>olive</td>
        <td>#808000</td>
        <td bgcolor="#808000"></td>
    </tr>
    <tr>
    	<td>Blau</td>
        <td>blue</td>
        <td>#0000ff</td>
        <td bgcolor="#0000ff"></td>
    </tr>
    <tr>
    	<td>Hellblau</td>
        <td>aqua</td>
        <td>#00ffff</td>
        <td bgcolor="#00ffff"></td>
    </tr>
    <tr>
    	<td>Dunkelblau</td>
        <td>navy</td>
        <td>#000080</td>
        <td bgcolor="#000080"></td>
    </tr>
    <tr>
    	<td>Lila</td>
        <td>purple</td>
        <td>#800080</td>
        <td bgcolor="#800080"></td>
    </tr>
    <tr>
    	<td>Helles lila</td>
        <td>fuchsia</td>
        <td>#ff00ff</td>
        <td bgcolor="#ff00ff"></td>
    </tr>
    <tr>
    	<td>Braun</td>
        <td>maroon</td>
        <td>#800000</td>
        <td bgcolor="#800000"></td>
    </tr>
    <tr>
    	<td>Grau</td>
        <td>grey</td>
        <td>#c0c0c0</td>
        <td bgcolor="#c0c0c0"></td>
    </tr>
    <tr>
    	<td>Silber</td>
        <td>silver</td>
        <td>#808080</td>
        <td bgcolor="#808080"></td>
    </tr>
    <tr>
    	<td>Schwarz</td>
        <td>black</td>
        <td>#000000</td>
        <td bgcolor="#000"></td>
    </tr>
    <tr>
    	<td>Weiß</td>
        <td>white</td>
        <td>#ffffff</td>
        <td bgcolor="#fff"></td>
    </tr>
</table>

<head>
	....
	<link rel="stylesheet" type="text/css" href="erstessheet.css">
	....
</head>

<style type="text/css">
@import url (screen.css) screen;
</style>

<link rel="stylesheet" type="text/css" media="print, embossed" href="print.css">

<head>
	...
	<style type="text/css">
	selektor{color:#00ff00; font-family: sans-serif; font-size: 8px;}
	selektor{color:#00ff00; font-size: 8px;}
	</style>
	...
</head>

<html>
	<head>
		<title>Zentrale Formate</title>
		<style type="text/css">
		h1 {color: red;font-size:36pt}
		h2 {color: blue;font-size:32pt}
		h3 {color: green;font-size:28pt}
		</style>
	</head>
<body>
	<h1>Die neue &Uuml;berschrift</h1>
	<h2>Die neue &Uuml;berschrift</h2>
	<h3>Die neue &Uuml;berschrift</h3>
</body>
</html>

<html>
	<head>
		<title>Zentrale Formate</title>
		<style type="text/css">
		body {font-family: arial; font-size:10pt; text-indent:10%}
		</style>
	</head>
<body>
	<h1>Die neue Überschrift</h1>
	<p>Das ist ein einfacher Text mit einer h1-&uuml;berschrift.</p>
 
	<h2>Die neue Überschrift</h2>
	<h3>Die neue Überschrift</h3>
</body>
</html>

<head>
...
	<style type="TEXT/CSS">
	.text{ border:1px; margin:.4em; padding:.4em; background-color:#808080; }
	.autor{ font-style: italic; color:red; } .datum { font-size: 50%; }
	</style>
</head>
<body>
	<div class="text">
		<p> Hier steht der Text</p>
		<p class="autor"> Hier steht der Name des Autors,</p>
		<span class="datum"> Hier steht das Datum </span>
		<p> Hier steht der zweite Text</p>
		<p class="autor"> Hier steht der Name des zweiten Autors, <span class="datum"> Hier steht das Datum </span></p>
	</div>
</body>