Allgemein / Blog / HTML / CSS

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:

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

Farbe Farbenname Hexcode Farbfläche
Rot red #ff0000
Gelb yellow #ff0000
Grün green #008000
Hellgrün lime #00ff00
Grünblau teal #008080
Olivegrün olive #808000
Blau blue #0000ff
Hellblau aqua #00ffff
Dunkelblau navy #000080
Lila purple #800080
Helles lila fuchsia #ff00ff
Braun maroon #800000
Grau grey #c0c0c0
Silber silver #808080
Schwarz black #000000
Weiß white #ffffff

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:

<a href="http://www.irgendwo.net/dokument.html#beispiele"> hier finden Sie weitere Beispiele </a>

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.irgendwo.net“ 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:

<a href="http://www.irgendwo.net/bilder/bild.gif"> hier finden Sie ein Bild im GIF-Format </a>

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 leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Hinter dem Istgleichzeichen vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen Ankernamen, der die gleiche Bedeutung hat wie der Name in einem Verweisziel innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Benutzen Sie als Sonderzeichen höchstens den Unterstrich “_”. Der Name muss in Anführungszeichen stehen. Hinter dem Namen endet das einleitende <map>-Tag mit >.

Die <map>-Anweisung kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei (also zwischen Die <body> und </body>) stehen. Die Angaben dieser Anweisung erzeugen keine Bildschirmausgabe. Es empfiehlt sich jedoch, die Anweisung an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B am Anfang oder am Ende des Dateikörpers.

Zwischen dem einleitenden <map…> und dem abschließenden </map> definieren Sie die verweissensitiven Flächen. Mit <area … > definieren Sie einzelne verweis-sensitive Flächen.

Durch die Angabe shape=”rect” bestimmen Sie eine viereckige Fläche, mit shape=”circle” einen Kreis, und mit shape=”polygon” können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.

Bei der Angabe coords= geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll.

Ein Viereck (shape=”rect”) definieren Sie mit den Koordinaten für x1,y1,x2,y2 wobei bedeuten:

x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Ein Viereck (shape=”circle”) definieren Sie mit den Koordinaten für x,y,r wobei bedeuten:

x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel

Ein Polygon (shape=”polygon”) definieren Sie mit den Koordinaten x1,y1,x2,y2 … xn,yn” wobei bedeuten:

x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben

Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Mit der Angabe href= bestimmen Sie das Ziel, also die Datei, die aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die gleichen Regeln wie bei Verweisen. Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags (mehr hierzu siehe unter Grafikreferenzen). Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie die Zusatzangabe usemap= (siehe obiges Beispiel) notieren. Hinter dem Istgleichzeichen geben Sie den Namen an, den Sie bei der Definition der verweis-sensitiven Flächen im einleitenden <map>-Tag vergeben haben. Der Name muss in Anführungszeichen stehen und ein # vorangestellt bekommen.

Sie können die verweissensitiven Flächen auch in einer anderen HTML- Datei definieren als in derjenigen, in der Sie die Grafik referenzieren. Dann müssen Sie in der Grafikreferenz bei usemap= den Dateinamen und das Sprungziel innerhalb der Datei angeben, wo die verweis- sensitiven Flächen definiert werden. Das funktioniert genauso wie bei Verweisen.

8 Formulare

Mit den verschiedenen HTML-Editoren ist es möglich, Formulare zu definieren. Formularebestehen aus Eingabefeldern und grafischen Schaltern. So wird beispielsweise der Benutzer aufgefordert, Texte in bestimmte Felder einzugeben oder eine Wahl durch Anklicken verschiedener Buttons zu treffen. Erzeugt werden Formulare, indem man Eingabefelder und Schalter innerhalb von Texten plaziert. Formulare werden schon seit längerem von mehreren Browsern verwirklicht. HTML 3.0 unterstützt folgende Felder:

  • Einzeilige Textfelder
  • Mehrzeilige Textfelder
  • Radio Buttons
  • Check Boxes
  • Range Controls (Knöpfe und Schiebebalken)
  • Menüs
  • Submit Button
  • Reset Button
  • Hidden Fields (versteckte Felder, die vom Browser nicht angezeigt werden)

Die erstellten Formulare können zwar mit dem Browser betrachtet werden und auch Text eingetragen werden, die Daten kann der Browser aber nicht selbständig auswerten. Die Daten müssen zur Bearbeitung an den Server geschickt werden. Der Server wiederum übergibt die Daten entweder über CGI (Common Gateway Interface) einem externen Programm oder Script zur Ausführung. Einfacher geht die Anbindung mittels PHP. In beiden Fällen reicht der http-Server Apache.

Im Rahmen von KOSS interessiert uns insbesondere die Interaktion mit Java (Servlets und JSP).

Innerhalb eines HTML-Dokumentes können mehrere Formulare vorkommen, sie dürfen aber nicht ineinander verschachtelt werden. Definiert wird ein Formular mit dem FORM- Tag.

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

Mit ACTION wird die Adresse festgeschrieben, an die das Formular geschickt werden soll. Da zur Zeit Formulare nur mit Hilfe des http-Protokolls verschickt werden können, muss als URL das http-Protokoll angegeben werden. METHOD legt fest auf welche Art und Weise die Daten verschickt werden. Hier gibt es zwei Möglichkeiten, nämlich POST und GET. Mit GET werden die Daten an den URL angehängt und POST verschickt die Daten extra. ENCTYPE enthält die Codierung der Daten nach dem MIME-Standard. Vorläufig gibt es nur ein zulässiges Datenformat x-www-form-encoded.

Im Folgenden wird nur auf die wichtigsten Felder und Schalter kurz eingegangen.

INPUT-Felder stellen die wichtigsten Elemente innerhalb der FORM-Umgebung dar. Es definiert die Art von Eingabe- und Auswahl-Felder mit Hilfe des Attributes TYPE. Die allgemeine Definition lautet:

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

Der Name dient der Identifikation der zu versendenden Daten. Jedes Eingabefeld erhält dadurch seinen eigenen Namen.

Die Syntax für ein einzeiliges Eingabefeld:

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

Mit SIZE legt man den sichtbaren Bereich der darzustellenden Zeichen fest. Mit VALUE kann ein Default-Wert definiert werden und die Zahl bei MAXLENGTH gibt die maximal erlaubte Anzahl der Zeichen an.

Ein weiteres wichtiges INPUT-Feld ist die CHECKBOX. Eine Checkbox repräsentiert zwei Zustände. Entweder ist sie aktiviert oder nicht.

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

Der Radio Button verhält sich wie ein Check Button, nur dass beim Radio Button lediglich ein Wert ausgewählt werden kann (TYPE = “radio”).

Der Submit Button entspricht einer Befehlsschaltfläche und dient zum Absenden der Formulardaten.

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

Mit VALUE kann die Aufschrift der Befehlsschaltfläche festgelegt werden.

Mehrzeilige Eingabefelder erzeugen ein Eingabefenster, in das der Benutzer längere Texte eingeben kann. Die Größe des Fensters wird durch die Anzahl Spalten (COLS) und der Anzahl Zeilen (ROWS) festgelegt. Der einzugebende Text wird nicht durch die Größe der Fenster terminiert. Dem Anwender stehen horizontale und vertikale Scrollbars zur Verfügung. Mehrzeilige Eingabefelder werden mittels dem TEXTAREA-Tag definiert.

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

Mit ALIGN wird der umgebende Text angepasst.

9 Tabellen

Mit Hilfe von Tabellenumgebungen wird das Gestalten des Layouts eines HTML- Dokumentes enorm erleichtert. Erzeugt werden Tabellen innerhalb der Umgebung

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

durch Reihen und Zellen. Innerhalb dieser Zellen können die folgenden Elemente vorkommen:

  • Formulare
  • Bilder
  • Listen
  • unformatierter Text
  • Links
  • und wiederum Tabellen

Das Layout der Tabelle übernimmt der Browser. Netscape, Mosaic und Arena unterstützen schon heute diese Eigenschaft.

Mit dem CAPTION-Tag kann man der Tabelle eine Überschrift zuweisen. Verwendet man zusätzlich zum CAPTION-Tag noch das Attribut ALIGN, so kann die Positionierung des Titels bestimmt werden. Da wird dann eine Tabellenüberschrift mit dem ALIGN-Wert = TOP zu einer Tabellenunterschrift, wenn statt TOP der Wert BOTTOM eingesetzt wird. Die Grundelemente einer Tabelle sind Reihen und Zellen. Die Zellen werden noch mal eine Stufe weiter untergliedert in Zellen mit dem Inhalt Überschrift und in Zellen mit dem Inhalt Daten.

– Neue Reihe.
– Erzeugung von Datenzellen. – Überschriften für die einzelnen Spalten und Reihen. Die Schriftart dieser Überschrift-Zellen ist eine andere wie die restlichen Zellen.

Um die untenstehende Tabelle zu realisieren, sind folgende Kommandos erforderlich:

Farbe Farbenname Hexcode Farbfläche
Rot red #ff0000
Gelb yellow #ff0000
Grün green #008000
Hellgrün lime #00ff00
Grünblau teal #008080
Olivegrün olive #808000
Blau blue #0000ff
Hellblau aqua #00ffff
Dunkelblau navy #000080
Lila purple #800080
Helles lila fuchsia #ff00ff
Braun maroon #800000
Grau grey #c0c0c0
Silber silver #808080
Schwarz black #000000
Weiß white #ffffff
<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>

Soll die Tabelle mit einem Rahmen eingefasst werden, so ist das Attribut BORDER zum TABLE-Tag hinzuzufügen. Mit NOWRAP wird ein Zeilenumbruch innerhalb der Tabellenzellen unterbunden. ALIGN positioniert die Tabelle innerhalb des Browser- Fensters. Folgende Werte kann das ALIGN-Attribut annehmen:

BLEEDLEFT – richtet die Tabelle am linken Fensterrand aus.
LEFT – richtet die Tabelle am linken Textrand aus.
CENTER – positioniert die Tabelle zentriert.
RIGHT – richtet die Tabelle rechtsbündig aus.
BLEEDRIGHT – richtet die Tabelle am rechten Fensterrand aus.
JUSTIFY – richtet die Tabelle an beiden Texträndern aus.

Die Breite der Tabelle läßt sich mit dem Attribut WIDTH einstellen. Die Spaltenbreite und die horizontale Textanordnung wird mit dem COLSPEC Attribut bestimmt.

Innerhalb der Zellen können selbstverständlich weitere HTML-Elemente wie z. B. Links, Bilder, Listen und sogar Formulare verwendet werden. Auch die Bildung verschachtelter Tabellen – eine Tabelle innerhalb einer Zelle – ist möglich.

10 CSS Cascading Style Sheets

Cascading Style Sheets bieten vielfältige Möglichkeiten die Gestaltungsvariationen von HTML zu ergänzen oder zu ersetzen. CSS wurde vom W3C entwickelt und soll Gestaltung und Inhalt von Webseiten trennen. Die Aufgabe von HTML soll wieder die Strukturierung von Daten und Inhalten sein. Die optische Gestaltung soll durch die Cascading Style Sheets erfolgen.

Ein Stylesheet stellt eine Formatvorlage dar, die für jedes beliebige HTML Dokument verwendet werden kann. Der Vorteil liegt ganz klar darin, dass Zuweisungen nur einmal gemacht werden müssen und Änderungen im Stylesheet sich sofort und unmittelbar auf alle betroffenen Bereiche auswirken.

Besondere Bedeutung hat die Vererbung in den Cascading Style Sheets. Die Kaskadierung ermöglicht, dass die untergeordneten Elemente vom übergeordneten Element erben. So werden Zuweisungen, die für gemacht werden auch für die im <body> enthaltenen Elemente gelten.

10.1 Externe Formatierung

Um das CSS für mehrere HTML Dokumente zu verwenden ist es sinnvoll die Formatierungen in eine externe Datei auszulagern. Dies wird auch als externe Formatierung bezeichnet. Als Dateiendung wird .css verwendet.

Der Aufbau der Datei ist analog zur Deklaration im STYLE-Element als reiner Text ohne STYLE-Tags. Um eine CSS-Datei in ein HTML-Dokument einzubinden, wird im HTML-Dokument das LINK-Element verwendet.

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

Die Stylesheets können auch für verschiedene Ausgabemedien definiert werden. Allerdings ist bisher nur der Internet Explorer in der Lage einem Ausgabemedium ein Stylesheet zuzuweisen. Im LINK-Start-Tag wird das Attribut MEDIA notiert und schon kann das Stylesheet für diesen Media-Typ verwendet werden.

Die folgende Tabelle zeigt eine Übersicht der erlaubten Attribute.

  • screen – Bildschirmausgabe
  • all – Alle Ausgabemedien
  • aural – Sprachausgabe
  • braille – Monitor für Blindenschrift
  • embossed – Drucker für Blindenschrift
  • handheld – Tragbare Kleincomputer (PDA, Handheld, etc.)
  • print – Druckerausgabe
  • projection – Beamer und ähnliche
  • tty – Fernschreiber und ähnliche
  • tv – Fernsehgeräte und ähnliche

CSS-Syntax zum Einbinden:

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

HTML-Syntax zum Einbinden:

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

10.2 Zentrale Formatierung

Die zentrale Formatierung ermöglicht es HTML-Elemente en gros zu formatieren – anders als die direkte Formatierung wie sie unter Punkt 3.1 (5) bereits angesprochen wurde.

Die zentrale Formatierung benötigt einen Selektor, der dem Namen des Elements entspricht. (z.B. h2 für h2) Der Selektor ist immer ein HTML-Element / HTML-Tag. Die Eigenschaften, die dem Selektor zugeweisen werden sollen werden in geschweiften Klammern angegeben.

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

Hier noch ein konkretes Beispiel für die zentrale Formatierung:

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

Nach der <style>-Definition gelten die einmal festgelegten Formateigenschaften für alle davon betroffenen Tags, in unserem Beispiel also die Tags <h1>, <h2> uns <h3>.

Auch dem Body-Tag können Formate/Styles zugewiesen werden. Die für dieses Tag festgelegten Formate gelten dann für das gesamte Dokument als Standardeinstellung:

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

10.3 Einheiten

Ein weiterer Vorteil von CSS ist, dass CSS Einheiten erkennt. Während in HTML Prozent- und Pixelgrößen beziehungsweise eine relative Schriftgröße verwendet wird, können in CSS alle gängigen Größenangaben verwendet werden.

Einheit Typ Beschreibung
Cm absolut Zentimeterangabe (1/100m)
Em relativ Relative Angabe in Bezug auf den höchsten Buchstaben im Elternelement
Ex relativ Relative Angabe in Bezug auf den Buchstaben X im Elternelement
In absolut Zollangabe (engl. Inch) = 2,54 cm
Mm absolut Millimeterangabe (1/1000m)
Pc absolut Pica (1Pica = 12 Punkt)
Pt absolut Punkt (1 Punkt = 1/72 in)
Px absolut Pixelangabe
% relativ Prozentangabe

10.4 Textformatierungen

Die Textformatierungen funktionieren im Prinzip genau wie unter HTML beschrieben. Der Hauptunterschied ist, wie bereits erwähnt, dass die Formatierungen zentral (in einem separaten File) erfolgen. Der Selektor, der in der Regel dem Namen des Elements entspricht, steht am Anfang und die Eigenschaften, die dem Selektor zugeweisen werden sollen, folgen in geschweiften Klammern.

Als Selektor kann aber auch der sogenannte Universalselektor verwendet werden. Der Universalselektor ist das *, mit dem Universalselektor gekennzeichnete Zuwesiungen, beziehen sich auf alle Elemente des Dokuments. Entspricht der Selektor wie bereits angesprochen dem Namen des Elements, so handelt es sich um einen Typselektor.

Folgende Tabelle soll einen Überblick über die gängigsten Textformatierungsbefehle geben:

Beschreibung Anweisung Beispiel
Farbe color #808080
Schriftfamilie /Art font-family Arial
Schrifthöhe font-size 11px
Gewichtung font-weight Bold
Stil font-style Italic
Zeichenabstand letter-Spacing 0.5em
Textausrichtung text-align Left

Die Notation lautet Anweisung:Wert; Eigenschaft (Doppelpunkt Wert Strichpunkt)

Abstände von Elementen werden mit margin angegeben:
margin-top – oben
margin-left – links
margin-right – rechts
margin-bottom – unten

Rahmenarten werden mit border-style angegeben
border-style:none
border-style:dotted
border-style:dashed
border-style:solid
etc.

Rahmendicken werden mit border-…-width benannt
border-top-width: thin / medium / thick / numerischer Wert
border-left-width: …
border-right-width: …
border-bottom-width: …

Rahmenfarben werden mit bordercolor angegeben
border-color: HTML Farbangabe

Abstände bei Rahmen werden mit padding-… benannt
padding-top: – numerischer Wert
padding-left: – …
padding-right: – …
padding–bottom: – …

Die Selektoren gliedern sich wie folgt:

body – bezieht sich auf die gesamte Seite
a – Links
ul, ol, li – Listen und Listenelemente
h1 – h6 – Überschriften
img – Bilder
b, i, u, pre – Textformatierungen
p – Absätze
table, td – Tabellen, Tabelleninhalte

Besondere Bedeutung haben DIV und SPAN, sie sind relativ eigenschaftslos. DIV erzwingt eine neue Zeile im Textfluss und ermöglicht Elemente zu gruppieren und als Einheit zu formatieren. SPAN kann innerhalb eines Textes verwendet werden, d.h. mit SPAN können kleinere Teilbereiche definiert werden und mit CSS gestaltet werden ohne dass spezielle dafür definierte HTML-Elemente existieren.

Das folgende Beispiel verdeutlicht die Verwendung von DIV und SPAN.

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

Im STYLE Bereich werden Elemente definiert, die Klassen mit CLASS=”TEXT”, CLASS=”AUTOR”, CLASS=”DATUM” verwenden können. Im <body> werden die einzelnen Texte mit DIV gruppiert. Das Stylesheet weist Rahmen, Abstand und Hintergrundfarbe zu. Die Autoren und das Datum befinden sich in einem Bereich. Dadurch beziehen sich die Eigenschaften von Autor auch auf das Datum, beides wird also rot und kursiv geschrieben. Zusätzlich wird das Datum 50% kleiner ausgegeben, da Datum im SPAN steht.

10.5 Default CSS

Das W3C hat einen Vorschlag für ein Default Style Sheet gemacht, das von allen gängigen Browsern unterstützt wird.

Diese Vorlage findet man unter: http://www.w3.org/TR/CSS21/sample.html

Die Autoren

Autoren:
Barbara Brosch, Klaus Eckert, J. Anton Illik, Roland Müller, Dirk von Roth, Katja Gassert, Katja Hasenfratz

Zur Verfügung gestellt von Ambit Informatik Ltd.

Flattr uns...
Wenn du ein Flattr Konto hast und dir dieser Artikel gefallen hat, kannst du uns mit einer kleinen Spende unterstützen. Kein Flattr Account? Hier gibt es mehr Infos zu Flattr.

flattr this!

2 Kommentare zu “HTML / CSS Grundkurs und Einführung”

  1. punkt 4.4 würde ich mir nochmal genau angucken : )

    • Danke Armin, du hast recht das war eher ein Beispiel für: “So nicht!”.
      Da haben die Autoren wohl nicht richtig aufgepasst – habe es gerade gefixt – Danke

Hinterlasse eine Antwort

Email-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.