v3.

Transcription

v3.

VWA Rhein-Neckar
Dipl.-Ing. Thomas Kloepfer
Kommunikation I
(Internet)
Kapitel 3
HTML - die Sprache des WWW
SS 2003
Inhaltsverzeichnis
3.
3.1.
3.2.
3.2.1.
3.3.
3.3.1.
3.3.2.
3.3.3.
3.3.4.
3.4.
3.4.1.
3.4.2.
3.5.
3.5.1.
3.5.2.
3.5.3.
3.5.4.
3.5.5.
3.6.
3.6.1.
3.6.2.
3.6.3.
3.7.
3.7.1.
3.7.2.
3.7.3.
3.7.4.
3.7.5.
3.8.
V3.doc
HTML - die Sprache des WWW .............................................................................................. 1
HTML - eine Markup-Sprache ................................................................................................... 1
Erste Schritte in HTML............................................................................................................... 3
Strukturkontainer ..............................................................................................................................3
Lektion 1: Einfache Textdokumente unter HTML ...................................................................... 5
Einfache Textabschnitte (Paragraphen) ...........................................................................................5
Überschriften ....................................................................................................................................5
Zeilenumbrüche und Trennungslinien ..............................................................................................6
Listen ................................................................................................................................................6
Lektion 2: Vernetzte Dokumente - Hypertext............................................................................. 9
Anker als Hypertextverbindungen.....................................................................................................9
Lokale Daten - Globale Daten ........................................................................................................11
Lektion 3: Grafiken, Farben und Textformatierung.................................................................. 12
Bilder ..............................................................................................................................................12
Clienseitige Imagemaps .................................................................................................................14
Universalattribute............................................................................................................................15
Farbe und Fonts .............................................................................................................................16
Weitere Formatierungsbefehle .......................................................................................................16
Lektion 4: Tabellen .................................................................................................................. 18
Tabellen (ab HTML3.2) ...................................................................................................................18
HTML4.0 - übersichtliche Formatierung von Tabellen ....................................................................20
Erweiterungen der Tabellen-Tags ..................................................................................................21
Übersicht Über die wichtigsten Tags ....................................................................................... 23
Strukturcontainer ............................................................................................................................23
Textformatierung.............................................................................................................................23
Hypertext ........................................................................................................................................23
Listen ..............................................................................................................................................24
Tabellen ..........................................................................................................................................24
Zusammenfassung .................................................................................................................. 25
10.06.2003
1
HTML - eine Markup-Sprache
3. HTML - die Sprache des WWW
3.1.
Um das World-Wide-Web als rechnerunabhängiges Informationszentrum nutzen zu können und
gleichzeitig die Belastung des Internet bei der Übertragung von formatierten Textseiten niedrig zu
halten, wurde eine spezielle Seitengestaltungssprache entwickelt, die zum einen leicht in einem SinglePass-Interpreter zu betreiben ist, zum anderen aber auch ein hohes Signal-to-Noise-Verhältnis hat.
Definition: Unter dem Signal-to-Noise-Verhältnis (StN) einer Nachricht versteht man die Relation
zwischen Übertragenen Informationseinheiten und zur Übertragung nötigen Dateieinheiten. Während
komprimierte Textdaten ein sehr gutes StN haben, weisen Dokumente in einer DesktopPublishingsprache ein niedriges StN-Level auf. Signal-to-Noise wird auch ,zweckentfremdet', um den
Informationswert eines Textes in Relation zu seiner Länge auszudrücken.
Schon existierende Dateiformate aus bekannten Textverarbeitungsprogrammen erfüllten die
Forderungen nach Unabhängigkeit und hohem StN-Verhältnis nicht, sodaß ein neuer Weg beschritten
werden mußte, um die gewünschten Effekte zu erzielen. Auch mit Blick auf die
Plattformunabhängigkeit der zu entwickelnden Gestaltungssprache und auf die Vielzahl der
unterschiedlichen Browser mit ihren teilweise stark differierenden Darstellungsmöglichkeiten entschied
man sich, eine Markup-Sprache zur Beschreibung von WWW-Ressourcen zu verwenden.
Definition: Durch das Konzept des Markup kann ein Textdokumen funktional unterteilt werden. Mit
spezielle Markup-Zeichen (in HTML 'Tags' genannt) werden den einzelnen Teilen eines Textes
Funktionen zugeordnet: Überschrift, Abschnitt, Beginn einer Liste, Listeneintrag. Jeder Client kann
diese Informationen interpretieren und die Information nach seinen Möglichkeiten darstellen.
Die Basisfunktionalität wurde in Ur-HTML (später: HTML1.0) festgelegt. Einfache Tags zur
Beschreibung eines Textes, zur Gliederung und zum Erzeugen von Listen wurden eingeführt. Neben
Markups für Betonungen, Zitate oder auch Quellcode wurden einige physikalische Markups wie Tags
für Italic oder Bold eingeführt. Dieses Zugeständnis an die Designer von Webseiten eröffnete entgegen
der eigentlichen Markup-Philosophie ein Hintertürchen für die explizite Formatierung einzelner
Abschnitte.
Erst in HTML2.0 wurde eine ganze Reihe wichtiger Neuerungen eingebracht, darunter eine
Sonderzeichendefinition (HTML-Entities). Außerdem wurden einige Tags als auslaufend
gekennzeichnet: Sie werden zwar oft noch unterstützt, von ihrem Gebrauch wird aber abgeraten, da
neuere Browser sie nicht mehr implementieren.
HTML2.0 brachte als Markup-Sprache fast alles mit, was zum Design einer Hypertextseite notwendig
war. Allerdings fehlten einige nützliche Formatierungshilfen (z.B. für mehrspaltige Tabellen) und
jegliche Möglichkeit, auf die Gestaltung genauer Einfluß zu nehmen. Diese veranlaßte
Browserentwickler (allen voran Netscape, später auch Microsoft), eigene Erweiterungstags zu
implementieren (z.B. Hintergrundfarbe und -bild, blinkender Text, Textfluß um Bilder herum,
Schriftarten und -größen, zentrierter Text). Im Prinzip stellte dies kein Problem dar: Nach der
Philosophie von SGML, der Basis zu HTML werden Tags, die ein Client nicht interpretieren kann,
unterdrückt. Allerdings ergab dies oft unleserliche Formate bei Seiten, die stark auf diese Sondertags
angewiesen waren.
Als ein weiteres Problemfeld erwies sich, daß die Netscape-Definition von Tabellen sich mit dem in der
Entwicklung befindlichen HTML3.0-Standard Überschnitt. Dabei wurden gleiche Tags für
unterschiedliche Aufgaben herangezogen, was ein Zusammenführen der beiden Versionen unmöglich
machte. Das W3-Consortium ging daher im Frühjahr 1996 den einzig richtigen Weg: HTML3.0 wurde
als Standard zurückgezogen, in Zusammenarbeit mit führenden Software-Herstellern wurden
Richtlinien für einen allgemein verbindlichen Standard geschaffen und noch im Sommer 1996 wurde
HTML3.2 der neue Sprachstandard, der mit Beginn des Jahres 1997 in alle bekannten Browser
Eingang gefunden hat.
V3.doc
10.06.2003
1
Ein gravierender Nachteil von HTML war damit allerdings noch nicht behoben: Wenn das Internet ein
Platz werden soll, an dem Handel und Wirtschaft florieren, dann verlangen die Marketingstrategen eine
Beschreibungssprache, die umfangreich in die Darstellung der Information auf allen Browsern
eingreifen kann. Erste Versuche mit speziellen DTP-ähnlichen Tags waren von Anfang an zum
Scheitern verurteilt, das sie dem Geist des WWW - freie Information auf allen Plattformen wiedersprachen.
Die Lösung war schon 1996 einmal in Sicht: Style Sheets. Mit Style Sheets kann man einfach,
kompakt und (bei richtiger Einrichtung) serverweit eine einheitliche Darstellung der
Seiteninformationen erwirken -- und das sogar differenziert je nach verwendetem Client. Dieses
Konzept wurde erweitert um die Möglichkeit, Styles auf verschiedenen Ebenen zu benutzen und die
Idee der Cascading Style Sheets war geboren.
Definiton: Cascading Style Sheets (CSS) ist eine Beschreibungssprache zur Formatierung von HTMLDokumenten. Details wie Farbe, Font und Schriftgröße können für jede Elementgruppe, ja sogar für
jedes einzelne Element festgelegt werden. Die CSS-Information wird dabei gewöhnlich in separaten
Dateien abgelegt, um das Styling und den Stylwechsel zu vereinfachen. Verschiedene Styling-Level
erlauben die Definition von wichtigeren und weniger wichtigen Style-Optionen.
Zusammen mit einer konzeptionellen Neuorientierung von HTML in den Jahren 1997-1999 wurden so
die Grundlagen zu HTML4.0 gelegt. Dieser in drei unterschiedlichen Varianten vorliegende HTMLStandard (Transitional, Strict und Frameset) standartisiert viele der in HTML3.2 noch nicht behandelten
Themen, räumt mit alten Zöpfen rigoros auf und stellt nochmals einen bedeutenden Schritt hin zu einer
universellen WWW-Sprache dar.
Auch weiterhin entwickeln Netscape und Microsoft neue Tags, die nur von den jeweiligen Browsern
interpretiert werden können. Auch weiterhin lassen die beiden Clients auch syntaktisch inkorrektes
HTML zur Interpretation zu und versuchen, die meisten Fehler zu beheben. Es ist jedoch zu hoffen,
daß all diese Besonderheiten im Zuge der Weiterentwicklung von HTML und der Definition seiner
Muttersprache XML vereinheitlicht werden, um durch eine konsistente Seitenbeschreibungssprache
alle Netzressourcen jedermann zugänglich zu machen. HTML4.0 erlaubt in seinen Varianten, eine
eigene Seitenbeschreibungssprache individuell zu wählen und sich einem breiten Publikum zu öffnen.
Diese Chance sollte man sich nicht entgehen lassen. Ein noch einfacherer Kompromiss ist die
Verwendung eines älteren Standards (z.B. HTML3.2), der von einer breiten Browsergeneration
einheitlich interpretiert wird. Denn immer noch gilt:
Die neuesten Errungenschaften sind zwar besser, schneller, schöner -- sie können aber von den
wenigsten Browsern interpretiert werden!
V3.doc
10.06.2003
2
3.2.
Erste Schritte in HTML
Um HTML zu verstehen und korrektes HTML schreiben zu können, muß man den prinzipiellen Aufbau
eines Markupsprachendokuments verstehen. Anhand eines einfachen Hypertextdokuments, mit dem
wir uns in diesem Kapitel befassen wollen, läßt sich dies am besten erklären.
Will man ein reines Textdokument mit HTML (oder einer anderen Markup-Sprache wie z.B. LaTeX, mit
viele Wissenschaftliche Publikationen erstellt werden) formatieren, so markiert man durch besondere
Zeichenkombinationen einzelne Teile des Textes und weist diesen ihre syntaktische Aufgabe zu. Um
daraus noch ein komplettes Web-Dokument zu erstellen, fehlen nur noch einige Meta-Informationen
Über das Dokument, die man in einem eigenen Kopfbereich unterbringt.
Definiton: Tags sind in HTML nach einer einheitlichen Syntax aufgebaut. Stets werden sie in ein Paar
aus Größer- und Kleinerzeichen eingeschlossen. Innerhalb des Tags steht zu erst dessen Name
(Bezeichnung), gefolgt von (meist optionalen) Schlüsselwortparametern (Atributen).
Definition: Container vs. Marker. Man kann Tags in zwei Klassen einteilen: Container und Marker.
Container treten paarweise auf: der erste Container--Tag enthält als Bezeichnung einen Namen, der
zweite den gleichen Namen, allerdings mit vorangestelltem '/'. Der Text zwischen den beiden
Containerteilen wird durch den Containerbefehl formatiert.
Marker werden auch einseitige Tags genannt. Sie entfalten punktuell ihre Wirkung (horizontale Linie,
Zeilenumbruch etc.) und benötigen daher keinen korespondierenden Schlußtag.
Bemerkung: Container müssen korrekt in einander geschachtelt werden. Der zuletzt geöffnete
Container wird als erstes wieder geschlossen. Man vergleiche dies mit dem Ineinanderschachteln von
Paketen!
3.2.1.
Strukturkontainer
Grob werden bei einem HTML-Dokument zwei Teile unterschieden: Der Kopfteil (ein <head> Container) enthält Metainformationen über das Dokument (Dokumenttitel etc.), der Körper (ein <body>
- Container) die eigentlich darzustellende Information. Um bei Versendung des Dokuments die
Dokumentgrenzen zu markieren, werden diese beiden Container in einen gemeinsamen <html> Container verpackt.
Um allgemeinen SGML-Tools und speziellen Browsern einen Hinweis auf die verwendete Sprache zu
geben, sollte man vor dem HTML-Container eine Dokumententypzeile einfügen, die die verwendete
HTML-Version beschreibt. Diese Dokumenttypzeile kann für HTML2.0, HTML3.2 und HTML4.0 z.B.
folgende Gestalt haben:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN"
"http://www.w3.org/TR/REC-html40/frameset.dtd">
V3.doc
10.06.2003
3
Das typische erste HTML-Dokument stellt sich somit so dar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>Das erste HTML-Dokument</title>
</head>
<body>
<p>
Hello World!!
</p>
</body>
</html>
Das hier gezeigte erste Beispiel (wirklich ein Klassiker) verwendet neben den schon erläuterten Tags
noch den <title> - Container, um dem Dokument einen Titel zu geben, sowie den <p> - Container,
der einen normalen Absatz einleitet. Beide werden in den nächsten Abschnitten noch näher erläutert.
Bemerkung: HTML unterscheidet zwar bei den Textteilen, nicht aber bei den Tags zwischen Groß und
Kleinschreibung (Ausnahmen sind z.B. URL-Angaben in Links). Um ein HTML-Dokument aber XMLkonform zu halten, sollten Sie alle Tags in Kleinschrift angegeben. An diese Konvention hält sich im
folgenden auch dieses Skript. Ebenfalls ohne weitere Bedeutung sind Zeilenumbrüche und
Einrückungen.
Auch sie werden in erster Linie dazu benutzt, Texte Übersichtlicher zu machen. Browser ersetzen
meist längere Whitespace-Gruppen (= Leezeichen und Tabulatoren) durch ein einzelnens
Leerzeichen, wenn sie Text darstellen.
Um einen korrekten Transfer der Datei an den Client zu gewährleisten, wird eine HTML-Sourcedatei
(nachdem sie mit einem reinen Texteditor erstellt wurde), unter einem beliebigen Filenamen mit der
Erweiterung .html (unter DOS: .htm) abgespeichert und kann danach schon als lokales File mit
einem WWW-Browser betrachtet werden.
V3.doc
10.06.2003
4
3.3.
Lektion 1: Einfache Textdokumente unter HTML
Ziel dieses Abschnitts ist die Darstellung reiner Textdokumente in HTML. Hierbei ist darauf zu achten,
daß einige spezielle Formatierungsbefehle in HTML4.0 in den CCS-Teil verschoben wurden. CCS ist
allerdings zu umfangreich, um in dieser Einführung näher behandelt zu werden.
3.3.1.
Einfache Textabschnitte (Paragraphen)
Wie schon erwähnt, ist HTML eine Markup-Sprache. Dem Browser wird Über Markupbefehle der
semantische Aufbau eines Textdokuments mitgeteilt. Danach erfolgt die Formatierung und Darstellung
des Dokuments gemäß den vom Browser für die jeweiligen Markups vorgesehenen Stil.
Der wichtigste Markup-Tag ist der <p> -Tag, ein Containertag, der einen Abschnitt (engl. 'Paragraph')
enthält. Einfache Textdokumente bestehen meist nur aus mehreren Abschnitten, die jeweils durch
diesen Container eingerahmt werden. Der <p> -Container enstand aus einem Marker-Tag und kann
auch heute noch so verwendet werden. Auf diese Kurzform sollte man allerdings aus Gründen der
Übersichtlichkeit verzichten.
Übung: Erstellen Sie eine einfache Textseite. Programmieren Sie dazu ein minimales HTML-Gerüst
und stellen Sie in den <body> - Container einige Textabschnitte. Formatieren Sie Überschriften als
eigene Paragraphen. Kontrollieren Sie ihr Resultat anhand ihres Browsers.
3.3.2.
Überschriften
So formatiert entspricht das Ergebnis dem Resultat eines simplen Texteditors. Um erste Konturen im
Text zu generieren, ist die Markierung von Überschriften und Unterüberschriften notwendig. Um
Überschriften zu markieren, dient der <hn> - Conainer (n eine Zahl zwischen 1 und 6). Er schließt eine
Überschrift des jeweiligen Überschriftenlevels ein, wobei <h1> eine sehr wichtige, <h6> eine
niedrigstufige Überschrift anzeigt.
Viele Browser verwenden Fonts unterschiedlicher Größe, um Überschriften darzustellen. Dies sollte
jedoch den HTML-Programmierer nicht dazu veranlassen, eine <hn> - Umgebung nur deshalb zu
öffnen, um die entsprechende Fontgröße zu erzeugen, denn die Darstellung unterschiedlicher
Überschriften ist für HTML-Browser nicht vorgeschrieben. Vielmehr stellt jeder Browser die
unterschiedlichen Ebenen mit den jeweiligen, ihm zur Verfügung stehenden Mittel dar.
Beispiel für einen einfachen Text in HTML:
<h1> Frederic Brown: Earthmen bearing gifts</h1>
<p>
Dhar Ry sat alone in his room, meditating. From outside the door he caught
a thought wave equivalent to a knock, and, glancing at the door, he willed
it to slide open.
</p>
<p>
It opened. 'Enter, my frined', he said. He cold have projected the idea
telepathically; but with only two persons present, speech was more polite.
</p>
<p>
Ejon Khee entered. 'You are up late tonight, my leader,' he said
</p>
V3.doc
10.06.2003
5
Übung: Ändern Sie die Formatierung der Überschriften in ihrem Dokument. Fügen Sie verschiedene
Überschriftslevel ein und beobachten Sie deren Umsetzung im von Ihnen bevorzugten Browser.
3.3.3.
Zeilenumbrüche und Trennungslinien
Will man einen einfachen Paragraphen nach einem bestimmten Wort zu einem Zeilenumbruch
zwingen, ohne einen neuen Absatz einzuleiten, so kann man den Marker <br> ('break' = Umbruch)
verwenden. Hier zeigt sich eine kleine Möglichkeit, auf die ansonsten abgeschirmte Textformatierung
Einfluß zu nehmen. Zeilenumbrüche mit <br> unterscheiden sich von Einzelparagraphen durch den
fehlenden Absatzabstand.
Ein weitere nützlicher Marker ist <hr>, der eine waagerechte Line ('Horizontal Rule') erzeugt. Dieser
Marker darf aufgrund der Sprachdefinition von HTML nur außerhalb von
Textformatierungsumgebungen (z.B. <p> ... </p>) verwendet werden. Studiert man eine strenge
Sprachdefinition, so zeigt sich, daß <hr> nur innerhalb von <body>, <blockquote>, <form> und
<pre> syntaktisch korrekt ist.
Übung: Fügen Sie in Ihr Dokument Zeilenumbrüche und Trennungslinien ein. Sie können z.B. einen
Gedichteinschub in Ihr Dokument integrieren und eine Formatierung des Gedichts durch erzwungenen
Zeilenumbrüche erreichen. Wozu sind in diesem Fall die <p> - Abschnitte gut?
Was passiert mit Ihrem Gedicht, wenn das Browserfenster schmaler als die längsten Gedichtzeilen
ist?
3.3.4.
Listen
Eine der einfachsten Anordnungen innerhalb eines Textes ist eine Liste. Neben vielen Unterformen
verwendet HTML vor allem die drei Hauptformen der ungeordneten, der geordneten und der
Definitionsliste. Die Liste selbst ist dabei ein Container. Der einzelne Listeneintrag ist nun wieder ein
Container. Somit ist die Liste, die erste Struktur, die wir kennenlernen, die Verschachtelt ist: Der Listen
- Container enthält die Listeneintrags - Container. Der Listeneintrags - Container enthält die eigentliche
Information.
Die ungeordnete Liste wird in eine <ul> -Umgebung eingeschlossen. Die einzelnen Listeneinträge
werden durch eine <li> - Umgebung eingeschlossen (li = 'List Item' = Listeneintrag). Somit wird eine
Liste mit folgendem Code
<ul>
<li>
<li>
<li>
<li>
</ul>
V3.doc
Rosen </li>
Tulpen</li>
Nelken</li>
Narzissen</li>
10.06.2003
6
etwa in der Form
Internet Explorer 6
Netscape 7
dargestellt.
Es ergibt sich also eine Liste von Einträgen, die jeweils durch ein einheitliches Symbol (,,Bullet'')
eingeleitet werden. Hierbei sieht man schon leichte Abweichungen der Browser. IE verwendet Kreise
wohingegen Netscape Romben verwendet.
Die geordnete Liste unterscheidet sich von der ungeordneten Liste durch die <ol> - anstatt der <ul> Umgebung. Die Menueeinträge werden in einer geordneten Liste durch numeriert.
<ol>
<li>
<li>
<li>
<li>
</ol>
Einleitung</li>
Übersicht</li>
Hauptteil</li>
Schlußbetrachtung</li>
erzeugt daher eine Ausgabe, die etwa folgende Form hat
V3.doc
10.06.2003
7
Grundsätzlich anders verhält sich die Definitionsliste. Sie ist dafür gedacht, kurze Begriffe und ihre
Definitionen in einer Liste zusammenzustellen. Demzufolge enthält eine <dl> - Liste paarweise
je einen <dt> - Eintrag (für den zu erklärenden Terminus) und einen <dd> - Eintrag (mit der
zugehörigen Definition). Auch hierzu nun ein kurzes Beispiel:
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language - Die Sprache,
in der WWW-Seiten abgefaßst sind.</dd>
<dt>HTTP</dt>
<dd>HyperText Transfer Protocol - Das Protokoll
der Internetanwendung WWW.</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol - Älteres Protokoll zur Manipulation
von Dateien via Internet.</dd>
</dl>
das folgendes Ergebnis produziert:
Bemerkung: In HTML2.0 existieren noch zwei weitere Listenformen. <menu> - und <dir> - Container
enthalten jeweils Listen mit kurzen Einträgen, die sehr kompakt formatiert werden sollen. Diese beiden
Listenformen wurden in HTML3.2 nicht mehr aufgenommen, da sie sich auf den meisten Browsern
nicht von der unsortierten Listen unterschieden.
Bemerkung: Um komplexere Listen zu erstellen, können natürlich auch Listen ineinander
verschachtelt werden. Allgemein leitet ein Listeneintrags Container nur einen lokalen Unterabschnitt
ein, in dem fast alle Formatierungstags verwendet werden können. So kann ein Listeneintrag auch aus
mehreren Abschnitten bestehen, die in <p> - Umgebungen eingeschlossen sind.
Übung: Ergänzen Sie ihr Basisdokument um eine Liste. Spielen Sie mit den verschiedenen
Listenmodellen und verwenden Sie auch geschachtelte Listen. Achten Sie dabei auf die korrekte
Verwendung von Schachtelungen. Schachtelungslevel müssen im Last-In-First-Out - Prinzip (LIFO)
geschlossen werden!
V3.doc
10.06.2003
8
Lektion 2: Vernetzte Dokumente - Hypertext
Übung: Teilen Sie die bisher erarbeiteten Tags in Marker und Container ein. Rechtfertigen Sie für
jeden Tag dessen Einteilung. Könnte man einige Tags auch anders gestalten? Macht die in HTML
vorgenommene Einteilung vor dem Hintergrund des Markup - Gedankens Sinn?
3.4.
Eine der wesentlichen Ideen im Rahmen der WWW-Applikation ist die Möglichkeit, Hypertext erstellen
zu können. Hypertext führt zu einer netzartigen Verbindung von Informationsquellen, die in natürlicher
Weise den Denkmustern des Menschen entspricht. Hierzu ist es notwendig, daß HTML die logische
Verbindung von Quellen syntaktisch unterstützt.
Definition: Hypertext ist eine Textform, die die Verbindung zwischen verschiedenen
Informationsquellen ermöglicht. So kann über eine Hypertextverbindung an einen Begriff eine
Definition, eine Grafik, ein Soundfile oder sogar ein MPEG - Video angeknüpft werden. Aktivierung der
Verbindung (in der Regel grafisch - interaktiv) führt dazu, daß diese neue Informationsquelle anstatt
der ursprünglichen im Browser angezeigt wird.
3.4.1.
Anker als Hypertextverbindungen
Um Hypertext in HTML integrieren zu können, benötigt man den Anker-Tag <a>. Dieser Container-Tag
muß, um seine Wirkung erzielen zu können, mit den Parametern versehen werden, die über Sinn,
Inhalt und Wirkungsweise der Verknüpfung Auskunft geben. In den Container eingeschlossen wird der
Teil des Dokuments, der später als Link zu einer neuen WWW-Ressource dienen soll. Der öffende
Tag enthält zusätzlich zum Tag Namen 'a' die href='url' Parametererweiterung. url ist dabei im
einfachsten Fall ein globaler Uniform Resource Locator.
Um ein Netz aus Dateien zu erzeugen, die nur in ihrer relativen Position zueinander beschrieben sind,
kann die im Anker angegebene URL - Referenz auch ohne Domain Name nur aus der Angabe eines
relativen Pfades von der Quelldatei zur Zieldatei bestehen. Das folgende Beispiel stellt eine
Verbindung zwischen den beiden Ressourcen seite1.html und seite2.html her, wobei seite2.html sich
relativ zu seite1.html im Unterverzeichnis kapitel1 befindet.
HTML-Codeauszug von seite1.html
<h1>Dies ist eine Überschrift</h1>
<p>
Dies ist ein einfacher Text. Seine einzige Aufgabe besteht
darin, siese Seite zu füllen. Entsprechend nutzlos ist
das, was hier steht.
</p>
<p>
Hier geht's nach <a href="kapitel1/seite2.html">Seite 2</a>.
</p>
Soll ein bestimmter Teil des Zieldokuments angesprungen (und somit im Browser zentriert angezeigt)
werden, so kann im Zieldokument ein Namenslabel vergeben werden. Auch dieses Label wird mit Hilfe
eines Anker - Tags eingerichtet. Um diesen Tag anspringen zu können, muß er mit Hilfe des NAME Parameters benannt werden. Das Label, das angesprungen werden soll, wird im Sprunganker mit dem
Gartenzaun-Zeichen '#' an die URL angehängt.
V3.doc
10.06.2003
9
Will man etwa im obigen Beispiel zu einer bestimmten Textstelle auf seite2.html springen, so muß der
Sprunganker auf seite1.html folgendermaßen erweitert werden:
<p>
Hier geht's nach <a href="kapitel1/seite2.html#anlabel">Seite 2</a>.
</p>
während auf seite2.html jetzt ein Ziellabel eingefügt werden muß:
<p>
Dies ist ein weiteres Textstück., Es befindet
sich im Dokument seite2.html. <a name="annlabel">Hierher</a>
geht der Link-Sprung von seite1.html.
</p>
Bemerkung: Ankerreferenzen müssen immer in doppelte Anführungszeichen eingeschlossen werden.
Obwohl manche Browser auch ohne diese Syntax die Links korrekt interpretieren, ist die Unsitte, die
Anführungszeichen wegzulassen, zum einen kein korrektes HTML und zum anderen für die meisten
Browser ein echtes Problem. Ernste Schwierigkeiten treten bei Tools auf, die die Quelle zur
Verarbeitung in einem XML-basierten System verwenden wollen.
Da Ankerlabel sehr oft zum Ausrichten des Dokuments relativ zum Browserfenster dienen, gilt die
Regel, daß der Inhalt eines benannten Ankers nie leer sein darf. Ebenso darf ein Sprunganker nicht
leer sein, um dem Browser eine Fläche für die graphische Sprungaktivierung zu geben. Er muß
vielmehr immer mindestens ein Nicht - Whitespace - Zeichen enthalten. Alternativ dazu kann man in
einen Anker - Container auch eine Grafik einschließen, die dann als Link zu einer neuen Ressource
dienen. Diese Technik wird gern angewendet, um mit Hilfe von Navigationsikons (z.B. Pfeile)
Strukturbeziehungen zwischen Textseiten sichtbar zu machen.
Übung: Erstellen Sie eine zweite Testseite und bringen sie in beiden Seiten mindestens je einen
Anker an, um zwischen den Seiten wechselseitige Verbindungen aufzubauen. Achten Sie dabei auf
eine intuitive und sinnvolle Benennung der Ankerinhalte.
V3.doc
10.06.2003
10
3.4.2.
Lokale Daten - Globale Daten
Verwendet man relative Links, so ist es zwar leicht möglich, eine komplette Seitengruppe innerhalb
des Verzeichnisbaums oder sogar auf einen anderen Server zu verschieben, die Transferierung
einzelner Seiten gestaltet sich jedoch als schwierig. Hier kann der <base> - Tag Abhilfe schaffen. Mit
Hilfe des href - Paramteres dieses Tags ist es möglich, die Basis, auf die sich alle relativen
Ankeradressen beziehen, neu festzulegen. Definiert man so für alle Seiten die Basis mit Hilfe der
absoluten URL der jeweiligen Seite, so kann man einzelne Seiten verschieben und trotzdem ihre Links
innerhalb des ursprünglichen Verbunds halten.
<html>
<head>
<title>Inhaltsverzeichnis der Onlinehilfe zu FORTRAN77</title>
<base href="http://www.net.de/FORTRAN77/inhalt.html">
</head>
<body>
<h1>Kapitelübersicht</h1>
<ol>
<li><a
<li><a
<li><a
<li><a
<li><a
</ol>
href="kapitel1.html">Einleitung</a></li>
href="kapitel2.html">Generelle Syntax</a></li>
href="kapitel3.html">Mathematische Funktionen</a><li>
href="kapitel4.html">Steuerkonstrukte und GOTO</a></li>
href="kapitel5.html">FORTRANs dusty corners</a></li>
</body>
</html>
In der ursprünglichen Struktur stehen in diesem Beispiel die fünf Kapitel im selben Directory, wie das
Inhaltsverzeichnisdokument inhalt.html. Will man nun das Inhaltsverzeichnis kopieren und an eine
andere Stelle setzen, so werden dort die relativen Links nicht bezüglich der neuen Position sondern
bezüglich der im base-Tag angegebenen Basis aufgelöst.
Wie im Beipiel zu sehen, ist der base-Tag ein Marker und Teil des Dokumentkopfes. In HTML1.0 war
es möglich, base auch innerhalb des body - Containers zu verwenden. Diese Syntax ist seit HTML2.0
aber nicht mehr korrekt.
Bemerkung: Mit Einführung der Frames (Netscape) und des neuen Parameters target kommt dem
base - Tag eine erweiterte Bedeutung zu: Mit ihm kann man auch den Zielframe aller Anker innerhalb
eines Dokuments festlegen, was vor allem bei framebasierten Navigationen eine enorme
Vereinfachung darstellt. Auf die Frame-Erweiterung, die Netscape dem HTML-Standard hinzufügen
will, wird in diesem Skript später eingegangen.
Übung: Suchen Sie sich im Internet eine Datenquelle und erstellen Sie ein lokale Seiten, die sich auf
diese Quelle mit Hyperlinks beziehen. Gestalten Sie ihre Implementierung so, daß sie mit relativen
URLs auskommen, um die von Ihnen angesprochene Information zu erreichen.
V3.doc
10.06.2003
11
3.5.
Lektion 3: Grafiken, Farben und Textformatierung
Informationstext wird transparenter, wenn man ihn mit Grafiken unterstützt. Um dabei eine möglichst
freie Gestaltung zu erreichen, sind Textfluß und Plazierung der Bilder im Fließtext unabdingbar. HTML
stellt hierfür ein Fließtextmodell zur Verfügung, das an den Singlepass - Compiler der Browser
angepaßt ist.
Die Darstellungsfläche wird dabei als (endlose) ,,Röhre'' betrachtet, in die, oben beginnend, Objekte
eingefüllt werden. Jedes Objekt beansprucht den zur Darstellung notwendigen Platz für sich alleine.
Umgebungseigenschaften geben an, wie frei bleibender Platz verwendet werden soll. Dieses Modell
wird bei der Verwendung von Style Sheets modifiziert, um deren Formatierungsanforderungen
Rechnung zu tragen.
3.5.1.
Bilder
Die Möglichkeit, Multimediakomponenten in HTML-Dokumente zu integrieren, macht eine der
Faszinationen des WWW aus. Während jedoch (in gewöhnlichem HTML) Filme und Tondateien nur
ergänzende Sekundärressourcen sind, können Bilder direkt in die Dokumente aufgenommen werden.
Die meisten Browser erlauben es, diese Bilder dann als Grafiken innerhalb des Sichtfensters
anzuzeigen (Ausnahme:reine Textbrowser wie lynx).
Eine erste Hürde auf dem Weg, Grafiken in ein Dokument einzubinden, ist die Flut unterschiedlicher
Grafikformate. In den ersten beiden Sprachversionen zu HTML wurde lediglich GIF als Grafikformat
zugelassen. Mit der steigenden Popularität des WWW und dem Wunsch der Anwender, auch große
Grafiken in erträglichen Zeiten Übertragen zu können wurde das Bildreduktionsverfahren JPEG als
empfohlene Erweiterung in HTML3.2 integriert. Die meisten neueren Browser können daher auch
JPEG - Bilder darstellen. Probleme gibt es allerdings mit dem GIF - Standard, da Teile des
Kodierungsalgorithmus Softwarerechtlich geschützt sind. CompuServe hatte zuerst erwogen, ein
neues öffentliches Grafikformat zu entwerfen, um einen Nachfolger für GIF zu etablieren, jedoch
scheint sich das ebenfalls freie Format PNG (Portable Network Graphics) als neuer Standard für
Grafiken im WWW durchzusetzen. Dieses Format ist variabler und in vielen Fällen auch kompakter als
GIF und wurde daher fester Bestandteil der HTML4.0-Definition. Trotzdem ist PNG weder in
Grafiktools noch in Browsern weit verbreitet, ein Umstand, der den weiten Einsatz dieses
fortschrittlichen Grafikformats hemmt.
Liegt die Grafik im GIF -, JPEG - oder PNG -Format vor, so kann man sie mit dem <img> - Marker an
einer beliebigen Stelle innerhalb des body - Containers plazieren. Sie kann innerhalb praktisch aller
Umgebungen stehen und wird je nach aktuellem Umfeld und angegebener Parameter ausgerichtet.
V3.doc
10.06.2003
12
Parameter
Erklärung
src
Der src - Parameter gibt die Referenz auf die Bilddatei an.
Die Syntax ist einfach src="url", wobei die url wie beim Anker relativ oder absolut
angegeben werden kann. Ein Protokoll muß in der URL natürlich nicht angegeben
werden. Client und Server wissen, daß eine Binärdatei übertragen wird.
align
Der align - Parameter wird zu Positionierung der Grafik innerhalb der Textzeile, zu
der sie gehört, verwendet.
Seine drei möglichen Werte top, middle und botton zentrieren Oberkante,
Basislinie bzw. Unterkante der Zeile mit Oberkante, Mitte bzw. Unterkante des
Bildes.
alt
Der alt - Parameter ist für diejenigen Browser gedacht, die keine Inline - Bilder
darstellen können. Der Text, der mit dem alt - Tag verbunden wird (in doppelte
Anführungszeichen eingebettete Zeichenkette), wird auf solchen Browsern anstatt
des Bildes eingeblendet.
Dies ist vor allem wichtig, wenn das Bild wichtiger Bestandteil des Dokumentes und
zum Verständnis notwendig ist oder wenn das Bild als Link dient. Es ist guter HTMLStil, zu jedem Bild einen aussagekräftigen alt - Text anzugeben.
left, right
Grafiken sollen jedoch in der Regel nicht nur eine einzige Zeile Text neben sich
haben, sondern nach Möglichkeit eine einfache Form von Fließtext. Daher ist es
möglich, einen zweiten ALIGN - Parameter innerhalb des IMG - Tags zu
verwenden.
Mit den Werten left bzw. right wird ein Bild an den linken bzw. rechten Rand
des Browserfensters geschoben. Nachfolgender Text wird auf der jeweils anderen
Seite angefügt (ab HTML3.2). Hierzu ist es wichtig, sich nochmals das
Fließtextmodell zu vergegenwärtigen. Soll die Grafik eigenständiger teil des
Fließtextes sein, so darf sie nicht innerhalb eines Paragraphen stehen, sondern
muß unabhängig von diesem in den Fließtext eingefügt werden.
space
Mit vspace='m' und hspace='n' kann man einen unsichtbaren Pixelrand um ein
Bild legen, der frei von Schrift bleibt. Besonders bei eng geschnittenen Bildern, die
man nicht zu nahe am Text halten will, ist dies sehr nützlich. m und n sind dabei
Angaben in Pixeln (reine Zahlenangaben) (HTML3.2).
hight, width
Der hight- und der width - Parameter (Angabe jeweils in Pixeln) übermitteln und
regeln die Größe des Bildes. Zum einen kann ein Browser, wenn er die Größe aller
Grafiken weiß, den Seitenaufbau beenden, ehe die Grafiken Übertragen worden
sind (Zeitersparnis), zum anderen kann man durch Angabe vom Original
abweichender Werte ein Bild umskalieren.
Diese Technik sollte man jedoch nicht nutzen, um ein Bild zu verkleinern, da die
Skalierung relativ grob ist und zudem trotzdem die volle Bildinformation Übertragen
werden muß. In diesem Fall ist es besser, das Bild mit einem
Bildbearbeitungswerkzeug umzuskalieren und dann in das Dokument einzubringen
(ab HTML3.2).
border
border legt die Breite der Umrandung eines Bildes fest.
Normale Grafiken besitzen keine Umrandungen, Grafiken, die als Link fungieren,
eine Umrandung von 2 Pixeln Breite. Stellt man den border - Parameter auf einen
anderen Pixelwert ein, so kann man diese Voreinstellung ändern (ab HTML3.2).
Entscheidet man sich, Textabschnitte als Fließtext neben einer Grafik zu plazieren, so benötigt man
noch einen Befehl, der das Ende dieses Seitentextes erzeugt und den nächsten Abschnitt unter dem
Bild einleitet. Im Prinzip ist der br - Tag dafür geeignet. Ein einfaches <br> erzeugt zwar nur eine
Zeilenumbruch, erweitert man jedoch den Tag um einen Parameter clear mit den Optionen left,
V3.doc
10.06.2003
13
right oder all, so erfolgt der Umbruch bis zum nächsten freien linken oder rechten Rand bzw. bis
zum Ende aller Einrückungen.
Bemerkung: Es ist üblich, in Bildarchiven kleine Versionen der einzelnen Bilder auf einer Seite
zusammenzustellen und diese mit einem kurzen Text, der das Bild beschreibt und die Größe des
Originals (z.B. in kByte) angibt, zu versehen. Die Bilder sind in diesem Fall meist Links auf die
Originalressource, die man laden kann, indem man dem Link folgt. So werden Netzressourcen
geschont, da der Benutzer nur die Vollbilder lädt, für die er sich wirklich interessiert. Eine solche kleine
Version eines Bildes nennt man thumbnail.
Bilder dienen oft auch als Hintergrundgrafiken für Netzseiten. Dieses Feature, das von Netscape in
HTML eingebracht wurde, kann im body - Tag durch Angabe einer Bild - URL zum Parameter
background angewählt werden. Man sollte allerdings mit solchen Hintergrundgrafiken vorsichtig
umgehen.
Zum einen bedeuten Größe Hintergrundgrafiken hohe Übertragungszeiten, die diesen Effekt
selten rechtfertigen. Zum zweiten ist es oft schwierig, bei einem unregelmäßigen Backgroundbild die
auf der Seite dargestellten Informationen noch sinnvoll an den Abnehmer zu übermitteln.
Zudem haben große Bilder den Nachteil, daß sie oft nicht vollständig im Browserfenster dargestellt
werden. Kleinere Grafiken werden zur Parkettierung benutzt, was einen schönen Effekt hervorrufen
kann. Man sollte schließlich versuchen, Grafiken allgemein und speziell Hintergrundgrafiken häufig
innerhalb eines Webdesigns wiederzuverwenden, denn hier kann der Cache des Browsers
einen Großteil der Übertragungszeiten abfedern.
Übung: Programmieren Sie eine Fließtextseite, in der sie einzelne Bilder frei plazieren. Verwenden Sie
verschiedene img - Attribute und beobachten sie die auftretenden Effekte. Formatieren Sie die Seite
wie eine Buchseite und suchen Sie nach einem optimalen Layout. Verbinden sie die Seite durch eine
Icon-basierte Navigationsleiste mit einer Folgeseite.
3.5.2.
Clienseitige Imagemaps
Will man eine Grafik nicht als globalen Anker verwenden, sondern sensitiv auf Teile der Grafik
reagieren, so gibt es dazu drei Möglichkeiten:
Man kann zum einen die Grafik aus Teilgrafiken zusammenstellen und jede dieser Teilgrafiken mit
einem Anker versehen. Diese Methode ist nicht nur wenig elegant, sie versagt auch meist, da sie am
unterschiedlichen Handling von Grafiken in den verschiedenen Browser scheitert. Hier zeigt sich
wieder, daß HTML keine DTP - Sprache sondern eine Markup - Sprache ist und die direkte Darstellung
von Informationen auf eine vordefinierte Weise nicht erzwungen werden kann.
Serverseitige Image Maps arbeiten dadurch, daß bei ihrer Aktivierung der Client an den Server keine
direkte Neuabfrage startet, sondern diesem durch Ansprechen eines serverseitigen Skripts mit den
Koordinaten der Mauspostion relativ zum Bild zur Zeit der Auswahl die Möglichkeit gibt, individuell auf
diese Anwahl zu reagieren. Hierzu sind jedoch spezielle Eingriffe in den Serverablauf notwendig, die
den Rahmen dieses Skriptes sprengen würden.
Schließlich gibt es eine Variante clientseitige Image Maps die praktisch den gleichen Zweck erfüllt,
jedoch nicht so variabel wie ein serverseitiges Skript ist. Mit Hilfe der Tags <map> und <area> können
spezielle Ankerkarten erzeugt werden, die ein variables Grafikhandling ermöglichen.
Zuerst wird mit dem <map> - Container eine benannte Grafikkarte erzeugt.
<map name="mymap1">
...
<\map>
In diese Karte werden Teilgebiete eingetragen, die jeweils mit einem eigenen Anker verbunden
werden. Die Teilgebietformen werden dabei durch das SHAPE--Attribut ausgewählt (möglich sind hier
Rechteck, Kreis und Polygon) und dann in Bildkoordinaten definiert. Beim Rechteck sind dies die je
V3.doc
10.06.2003
14
zwei Koordinaten der linken oberen und rechten unteren Ecke, beim Kreis Mittelpunkt und Radius und
beim Polygon die Liste der Eckpunkte (Vorsicht: Triangulierung).
<map name="mymap1">
<area shape=rect coords="100,100,145,160" href="http://www.yahoo.de">
<area shape=circle coords="70,70,10" href="http://www.lycos.com">
<area shape=polygon coords="110,11,22,20,13,14" href="http://www.ibm.de">
<area shape=default href="http://www.lego.com">
<\map>
Der default - Wert für Gebiete bezieht sich auf die gesamte Grafik. Hierbei ist zu beachten, daß bei
sich überlappenden Gebieten das zuerst definierte den Anker angibt. Wird bei einem Gebiet anstatt
einer Anker - Referenz das Attribut nohref angegeben, so wird das beschriebene Gebiet nicht als
Ankerfläche verwendet.
Grafiken, die diese Karte als Verweiskarte benutzen wollen, müssen mit dem Attribut
usemap=''name'' ausgestattet werden. Dabei ist name der Name der Map, die im gleichen
Dokument definiert sein muß. So können auch mehrere Grafiken die gleiche Karte benutzen. Diese
Technik ähnelt dem Klassenprinzip im CSS.
Clientseitige Maps sind somit auf eine aufwendige Programmierung innerhalb des HTML-Codes
angewiesen. Dafür sind ihre Effekte auch ohne Eingriff in den Server erzeugbar, was zu ihrer
Portabilität beiträgt.
Übung: Programmieren Sie zur Grafik eines Gesichts eine Imagemap, die auf die einzelnen Teile des
Gesichts (Mund, Augen, Nase etc.) reagiert und zu entsprecheden Erklärungsseiten verzweigt. Bei
Auswahl eines nicht - prominenten Teils des Gesichts soll die Karte auf eine Seite zu allgemeinen
Angaben zum Thema Gesicht verzweigen. Eine Auswahl außerhalb des Gesichtsfeldes soll
unbeantwortet bleiben.
3.5.3.
Universalattribute
Universalattribute können an eine Reihe verschiedenster Tags als Erweiterung angehängt werden. Sie
verhalten sich bei allen Objekttypen gleich und sind vor allem zur Feinbearbeitung eines Dokuments
wichtig. Zwei Beispiele für solche Tags sind das id - Attribut und der title - Attribut.
Mit dem id - Attribut kann man einem Objekt innerhalb eines Dokuments eine eigene Identitätsmarke
(ID) vergeben. Auf diese ID kann dann an anderer Stelle verwiesen werden. Beispiele hierfür finden
sich in der fortgeschrittenen Tabellenerstellung.
Das title - Attribut erlaubt die Vergabe von Titeln, die bei Anwahl des jeweiligen Tags im Browser
angezeigt werden. So kann man mit diesem Attribut jede Grafik benennen und auch Map - Teile mit
Titeln versehen.
CSS ist in der Lage, weitere eigene Universalattribute zu definieren und damit fast alle existierenden
Tags beliebig zu erweitern und an den eigenen Stil anzupassen.
Übung: Erweitern Sie die area - Tags aus der letzten Übung um einen kurzen und auf den jeweiligen
Link bezogenen Titel. Sie können z.B. jedes ausgewählte Gebiet benennen. Wie verwendet Ihr
Browser diese Titel? Kann man die Anzeige von Titeln unterdrücken?
V3.doc
10.06.2003
15
3.5.4.
Farbe und Fonts
Mit HTML-Version 3.2 wurden auch Farb- und Fontoptionen in den Sprachkern aufgenommen. Obwohl
auch dies den Prinzipien einer Markup - Sprache widerspricht, hatten sich Tags, die von Netscape
eingeführt wurden, so schnell verbreitet, daß im Sinne einer Vereinheitlichung dessen, was sowieso
unabwendbar war, hier regelnd eingegriffen wurde.
Die einfachste Form, Farbe in eine Web - Seite zu bringen, ist die Angabe einer Hintergrundfarbe. Im
Gegensatz zur Hintergrundgrafik benötigt die Hintergrundfarbe keine weiteren Ressourcen (abgesehen
vom etwa 20 Bytes längeren Sourcecode des Dokumentes). Durch den body -Tag - Parameter
bgcolor=''#rrggbb'' kann der RGB - Wert des Browserseitenhintergrundes eingestellt werden.
Die jeweils zwei Ziffern für die drei Grundfarben Rot, Grün und Blau werden im Hexadezimalsystem
angegeben und ermöglichen damit die Auswahl aus 16 Mio. Farben. Dieser Umfang übersteigt bei
älteren Modellen die Fähigkeiten des Rechners, auf dem der Client dargestellt wird.
Alternativ kann ein Farbcodewort angegeben werden. Dieses wird browserintern einem Farbwert nach
Tabelle zugeordnet. Derzeit sind knapp 100 Farbwerte so definiert( von aliceblue (\#A0CE00)
bis yellowgreen (\#9ACD32) ), von denen die heutigen Browser in der Regel mindestens 8 bis 16
Grundfarben und Schattierungen (red, green, blue, white, black, yellow, cyan, magenta)
verstehen.
Ebenfalls seit HTML3.2 ist es möglich, weitere Farbattribute zu verändern. Durch Angabe von
Farbwerten für den text -, link -, vlink - und alink -Parameter des body - Tags kann die Farbe
des Textes, der unbenutzten der benutzten und der aktivierten Links beeinflußt werden, was wichtig ist,
um auf stark gefärbtem Hintergrund Text darstellen zu können. Als Zusatz zum font - Tag (siehe
Kapitel ErweiterteFormatierung) kann auch ein Teil des Textes in einer anderen Farbe dargestellt
werden (HTML3.2). Diese Technik wurde mit HTML4.0 durch Style Sheets komplett ersetzt.
Übung: Überarbeiten Sie eines Ihrer Beispiele und setzten Sie die Schriftfarben für reinen Text, Links
etc. neu. Definieren Sie eine Hintergrundfarbe (evtl. anstatt eines Hintergrundbildes) und versuchen
sie, die Informationen sinnvoll und optisch ansprechend darzustellen.
3.5.5.
Weitere Formatierungsbefehle
Eine natürliche Eigenschaft von Markup - Sprachen ist ihre Fähigkeit, Textstellen von anderen in ihrer
Semantik zu unterscheiden. Hierzu steht in HTML eine Reihe von Markups zur Verfügung. Aus der
Fülle von Textmarkups in HTML1.0 hat sich ein Kern von Funktionen in den späteren Standards
herauskristallisiert. Hierbei wird in zwei Kategorien unterschieden. Logische Stil - Markups
kennzeichnen einen rein semantischen Gehalt (z.B. Betonung, Zitat, Sourcecode), während
physikalische Stil-Markups Angaben zum gewünschten Zeichenstil machen (z.B. Bold, Monospaced
Typewriter, Unterstrichen). Da reine Textbrowser oft mit sehr limitierten Stilmitteln auskommen
mÜssen, ist die erste Variante des Stil - Markups der zweiten vorzuziehen: Sie läßt dem Browser
größere Freiheiten bei der Wahl der Darstellungsmittel.
Logische Markups (ausnahmslos Container):
<cite>
<code>
<em>
<ksb>
<samp>
<strong>
<var>
<dfn>
V3.doc
ist für Inline - Zitate bestimmt.
schließt ein kurzes Sourcecodefragment ein (in aller Regel in einem monospaced Font).
ist ein Tag, der eine betonte Textstelle einschließt (,,emphasize'').
zeigt Text, der vom Benutzer so eingegeben werden soll, in einem eigenen Modus.
umschließt ein Beispiel (ähnlich zu code).
ist ein Container für noch stärkere Betonung, als EM.
wird in Verbindung mit code zur Darstellung einzelner Variablen verwendet (meist kursiv).
wird bei Definitionen für den zu definierenden Begriff gebraucht (HTML3.2).
10.06.2003
16
Physikalische Markups (ausnahmslos Container):
<b>
<i>
<tt>
<u>
<s>
<big>
<small>
<sub>
<sup>
- Fett (Bold).
- Kursiv (Italic).
- Monospaced (Typwriter).
- Unterstrichen (HTML3.2).
- Durchgestrichen (HTML3.2).
- Größer, als der umgebende Text (HTML3.2).
- Kleiner, als der umgebende Text (HTML3.2).
- Tiefgestellt (HTML3.2).
- Hochgestellt (HTML3.2).
Zudem gibt es drei erweiterte Textumgebungen, die in speziellen Situationen die <p> - Umgebung
ersetzen können:
•
<pre> ist Umgebung für vorformatierten Text. Sie wird für einfache Tabellen und größere
Codestücke benutzt. In ihr finden Zeilenumbruchregeln keine Anwendung und der Text wird immer
in Monospaced Typewriter gesetzt.
•
<blockquote> ist für einen zitierten Absatz gedacht und erzeugt einen beidseitig etwas
eingerückten Abschnitt.
•
<address> ist der Container für Adressen. Er wird oft am Ende eines Dokuments für die Angabe
der Adresse des Urhebers des Dokumentes verwendet. Die Adressumgebung wird in allen
Browser nterschiedlich implementiert (meist etwas kleiner und kursiv).
Auch diese Container entsprechen in ihrer Implementierung dem Gedanken einer Markup - Sprache:
Die semantische Bedeutung der jeweiligen Textabschnitte wird in eine adäquaten Darstellung (z.B.
Computercode in passender, uniproportionaler Schrift) umgesetzt.
V3.doc
10.06.2003
17
3.6.
Lektion 4: Tabellen
Lektion 4: Tabellen
Tabellen sind ein wichtiges zweidimensionales Gestaltungsmittel, um Informationen plastisch und
übersichtlich darzustellen. Ihre Syntax wurde in HTML4.0 erheblich verbessert, um es den Browsern zu
ermöglichen, schon früh mit dem Aufbau langer Tabellen zu beginnen. In dieser Lektion wird zuerst die
Basissyntax von Tabellen im allgemeinen erläutert. Daran schließen sich die 4.0-Erweiterungen an.
Schließlich zeigt ein Überblick über die gebräuchlichsten Tabellenattribute die Vielseitigkeit dieses
Konzepts bei der Präsentation umfangreichen Datenmaterials.
3.6.1.
Tabellen (ab HTML3.2)
Mit HTML 3.0 wurde eine erste Version zur Beschreibung von Tabellen in WWW--Dokumenten
vorgestellt. Allerdings hatte zu diesem Zeitpunkt Netscape schon eine eigene Tabellendefinition
erarbeitet, die mit den 3.0--Tabellen nicht vereinbar war. Um zu einer einheitlichen Lösung zu
gelangen, wurden beide Tabellendefinitionen zurückgezogen und statt dessen für HTML3.2 ein
deutlich flexibleres Tabellenhandling erarbeitet.
Ein Tabelle ist dabei zunächst ein Container wie z.B. auch eine Liste. Im Gegensatz zur Liste müssen
Tabellen jedoch zweidimensional definiert werden. Dies geschieht durch Definition von Tabellenzeilen,
die in Spaltenelemente unterteilt werden können.
Syntax: Innerhalb des Tabellencontainers <table> ... </table> steht zunächst (optional) die
Überschrift innerhalb eines <caption> - Containers. Danach folgen, ähnlich einer Liste, die
Tabellenzeilen in <tr> - Containern (hier werden auch Markervarianten geduldet, diese sind jedoch in
manchen Formatierungsversionen nicht so stabil, wie die Containervariante!). Jede Zeile besteht aus
einzelnen Zellen, deren Inhalt in <th> - Containern (Table Headings) bzw. <td> - Containern (Table
Data) untergebracht wird. Dabei unterscheiden sich Headings und Data in ihrer Darstellung (meist
Fettschrift + Center vs. Normalschrift). Die Zellentags können Über die Parameter rowspan='m' und
colspan='n' so eingestellt werden, daß sie mehrere Zeilen/Spalten umfassen. Dies wirkt sich nach
rechts bzw. unten aus, so daß z.B. in den folgenden Zeilen an den entsprechneden Stellen keine
Zellen angegeben werden können.
Will man eine Tabelle entwerfen, so ist es am besten, dies zuerst in einer Skizze zu tun. Verwendet
man Zellen, die mehrere Zeilen oder Spalten umfassen, so sollte man eine Gittereinteilung anbringen,
die die feinste Gitterbreite verwendet. Danach kann abgelesen werden, wie die einzelnen Zellen zu
dimensionieren sind. Man gibt daraufhin die Tabelle Zeile für Zeile ein. Dabei ist jeweils die linke obere
Ecke ausschlaggebend für die Definition einer Zelle.
Zwei weitere Parameter, die bei Tabellen eine wichtige Rolle spielen, sind align und valign. Diese
legen mit ihren Werten left, center, right bzw. top, middle, bottom die horizontale bzw.
vertikale Ausrichtung des Textes innerhalb der Zelle fest. Die Zellengröße wird nach den jeweils
größten horizontalen bzw. vertikalen Einträgen festgelegt.
Bemerkung: Tabellen können Über weitere Parameter noch verfeinert werden. Rahmen- und
Zellenbreite können angepaßt, die Farben der Einträge verändert werden. Diese Features werden im
Anschluß in einer Kurzübersicht dargestellt.
V3.doc
10.06.2003
18
Lektion 4: Tabellen
Beispiel:
Das folgende Tabellenlayout
Hauptzeile
Erste Zeile
Nebenzeile 1
Nebenzeile 2
Nebenspalte 1
Eintrag 1
Eintrag 1.1
Eintrag 1.2
Hauptspalte
Nebenspalte 2
Eintrag 2
Eintrag 2.1
Eintrag 2.2
sieht in HTML3.2 etwa so aus
<table border='3'>
<tr>
<th rowspan='2' colspan='2'></th>
<th colspan='2'> Hauptspalte</th>
</tr>
<tr>
<th> Nebenspalte 1</th>
<th> Nebenspalte 2</th>
</tr>
<tr>
<th colspan='2'> Erste Zeile</th>
<th> Eintrag 1</th>
<th> Eintrag 2</th>
</tr>
<tr>
<th rowspan='2'> Hauptzeile</th>
<th> Nebenzeile 1</th>
<th> Eintrag 1.1</th>
</tr>
<tr>
<th> Nebenzeile 2</th>
</tr>
</table>
und erzeugt in etwa den in der Abbildung dargestellten
Tabelle in Netcape
Bemerkung: Die Angabe von border ist hier notwendig, da Netscape Tabellen normalerweise ohne
Umrandung anzeigt.
Das zentrale Problem der Darstellung solcher Tabllen kann man ab einfachsten anhand extrem großer
Exemplare erkennen: Tabellen definieren sich in ihrer Breite auf Basis der breitesten Tabellenzeile.
Diese kann erst nach dem vollständigen Scan des gesamten Tabellenmaterials ermittelt werden.
Obwohl es zur Formatierung von Tabellen schon im Standard HTML3.2 Tagerweiterungen
gab, wurde dieses Problem erst in HTML4.0 wirkungsvoll angegangen.
V3.doc
10.06.2003
19
3.6.2.
Lektion 4: Tabellen
HTML4.0 - übersichtliche Formatierung von Tabellen
Unter HTML4.0 ist es möglich, zu Beginn einer Tabellendefinition das Groblayout der Tabelle vor zu
definieren. Die hierzu entwickelten Tags erweisen sich hier als sehr wirksam und extrem nützlich zur
schnellen und unkomplizierten Erstellen eines stabilen Seitenlayouts innerhalb des
Browserdarstellungsfensters.
Um das Spaltenlayout global für eine ganze Tabelle a priori vorzuschreiben, wurden der <colgroup>
- Container und der <col> - Marker eingeführt. Mit diesen beiden Tags ist es möglich, auf vielseitige
Weise die relative und Absolute Breite von Spalten festzulegen. Die einfachste Syntax ist hierbei
diejenige, die eine Standardbreite für alle Spalten einer Tabelle und die Anzahl solcher Spalten
festlegt. Die hierzu verwendete Syntax:
<table border='1'>
<colgroup width='300' spam='4'>
</colgroup>
<tr>
<th>
...
</th>
</tr>
</table>
Hiermit wird eine breite der Tabelle von 300 Pixel festgelegt. Aus der Angabe von vier (einheitlich
breiten) Tabellenspalten erstellt der Browser dann ein einfaches Tabellenlayout.
Vorsicht: Widerspricht die eigentliche Definition der Tabelle diesen Vorgaben, so ist das Ergebnis der
Formatierung unbestimmt!
Eine variable Spaltenbreite kann mit den <col> - Tags erreicht werden:
<table border='1'>
<colgroup>
<col width='100'>
<col width='120'>
<col width='140'>
<col width='40'>
</colgroup>
<tr>
<th>
...
</th>
</tr>
</table>
Der col - Marker setzt hierbei (relativ mit % oder absolut durch Pixelwerte) die Breite einer Spalte der
Tabelle. Die Anzahl der Spalten entspricht der Anzahl der col - Tags.
V3.doc
10.06.2003
20
Lektion 4: Tabellen
Um sich die umständliche Rechnerei bei hinzufügen einer Spalte zu ersparen, kann man auch durch
die * - Syntax die relative Breite der Spalten zueinander angeben:
<table border='1'>
<colgroup>
<col width='*3'>
<col width='*2'>
<col width='*2'>
<col width='*4'>
</colgroup>
<tr>
<th>
...
</th>
</tr>
</table>
Hier wurde z.B. eine Tabelle entworfen, deren Spalten im Verhältnis 3:2:2:4 angelegt werden. Neue
Spalten werden einfach durch hinzufügen von col - Markern erzeugt. Trotzdem bleibt die
Gesamtbreite der Tabelle erhalten, eine Option, die sich weder durch % - Angaben noch durch
Absolutbreiten erzielen läßt.
Mehrere colgroup - Container am Anfang einer Tabelle resultieren in einem durch alle Gruppen
definierten Design. So lassen sich unkompliziert Tabellen mit mehreren Gruppen von Spalten jeweils
gleicher Breite definieren!
3.6.3.
Erweiterungen der Tabellen-Tags
•
border - über den border - Paramter lassen sich bei Tabellen ähnlich wie bei Bildern
Rahmenbreiten festlegen. border ist eine Erweiterung des table - Tags und wird mit einer
Angabe in Pixeln versehen. Standard für Tabellen ist die Einstellung border='0'.
•
cellspacing - bestimmt die Breite der Gitterlinien innerhalb der Tabelle. Auch cellspacing ist
eine Erweiterung des table - Containers und wird mit einem Pixelwert versehen.
•
cellpadding - Die table - Erweiterung cellpadding gibt den Abstand zwischen Zelleninhalt
und Zellenrand (in Pixeln) an.
•
frame - Wird mit border ein Außenrahmen definert, so kann zusätzlich mit dem frame - Attribut
dessen Gestalt vorgebgeben werden. Mögliche Werte sind:
•
•
•
•
•
•
•
•
void: Kein Außenrahmen (aber Gitternetz!).
above: Nur über der Tabelle.
below: Nur unterhalb der Tabelle.
hsides: Ober- und unterhalb der Tabelle
vsides: Rechts und links der Tabelle.
lhs: Nur links der Tabelle.
rhs: Nur rechts der Tabelle.
rules - Auch die inneren Gitterlinien können ganz oder teilweise unterdrückt werden. Hierzu dient
die rules - Erweiterung des table - Tags. Mögliche Werte sind hier:
•
•
•
•
V3.doc
none: Keine inneren Gitterlinien.
rows: Nur zwischen Zeilen.
cols: Nur zwischen Spalten.
all: Zeichne alle Gitterlinien (default).
10.06.2003
21
Lektion 4: Tabellen
•
width, height - Durch Angabe von width und height in beliebigen Tabellentags (table, tr,
th, td) kann die Breite und Höhe von Zellen festgelegt werden. Hierbei ergeben sich aus
logischen Gesichtspunkten heraus Auswirkungen auch auf andere Tabellenteile. Wird z.B. die
Breite eines td - Elements auf einen absoluten Pixelwert gesetzt, so ergibt dies eine Definition für
die Breite der gesamten Spalte. Mögliche Angaben sind relative (Prozent-)Werte sowie absolute
Werte in Pixel. Relative Werte beziehen sich jeweils auf die Größe der nächst höheren Umgebung!
•
align, valign - Mit der align - Erweiterung und ihren Ausprägungen left, right, center
kann die horizontale Ausrichtung des Zelleninhaltes erzwungen werden. valign mit den Werten
top, middle, bottom erzwingt die vertikale Ausrichtung.
•
align='char' - Zudem kann die horizontale Ausrichtung mit align='char' und char='.'
auch an einem einzelnen Zeichen orientiert werden. Dies ist z.B. für Spalten mit
Dezimalzahleninhalt sinnvoll und sollte hier im col - Tag vorgenommen werden.
•
bgcolor, bordercolor - Farbattribute lassen sich im table - Tag global für die gesamte
Tabelle setzen. Hierzu dienen bgcolor (Hintergrund) und bordercolor (Linien) mit den
entsprechenden Farbdefinitionen (Zahlenwert od. Farbname). Der Hintergrund kann auch lokal (tr
oder td bzw. th) eingefärbt werden. Zudem ist die Angabe einer (lokalen oder globalen)
Hintergrundgrafik (mit background, Syntax siehe body - Tag) möglich!
•
clear - Die align - Erweiterung des table - Tags bewirkt, ähnlich wie bei Bildern, die
Ausrichtung einer Tabelle auf der Seite. In Verbindung mit einer Breitenangabe kann so Textfluß
neben einer Tabelle erzielt werden. Auch die vom img - Tag bekannten Erweiterungen vspace,
hspace und br -Tags mit clear - Erweiterungen erfüllen auch bei Tabellen ihren Zweck.
Tabellen werden in der modernen Seitenkonzeption vor allem zum Formatieren von Seiten ohne die
Verwendung von Frames verwendet. Dies sorgt vor allem für eine deutlich leichter zu handhabende
Struktur, da die Framesets doch oft durch rekursiven Aufruf extrem zerbrechlich auf
Programmierschwächen reagieren.
Mehrspaltensatz, Einrückungen und vertikale Positionierung lassen sich mit übersichtlich verwalteten
globalen Tabellen sehr leicht in die Tat umsetzen. Hier ist allerdings auf die Probleme hinzuweisen, die
ältere Browser mit einer solchen Technik haben (was aber für Framesets ebenso zutrifft!).
V3.doc
10.06.2003
22
Übersicht Über die wichtigsten Tags
3.7.
3.7.1.
Strukturcontainer
•
 Markierungstag für einen Kommentar. Diese Tags werden
vom Interpreter ignoriert.
•
<body> ... </body> In diesem Container steht das eigentliche Dokument.
•
<head> ... </head> In diesem Container werden die Metainformationen Über das jeweilige
Dokument gespeichert.
•
<html> ... </html> Dokumentcontainer, der den gesamten Inhalt umspannt. Im
vorangestellt wird nur die <DOCTYPE ...> - Markierung, die den Dokumentensprachtyp angibt.
3.7.2.
Textformatierung
•
<br> Erzeugt einen Zeilenumbruch z.B. innerhalb eines Textabschnitts.
•
<hn> .. </hn> [n = 1 .. 6] Überschriftencontainer für sechs Überschriftenlevel.
•
<hr> Fügt eine horizontale Linie ein.
•
<p> ... </p> Container für einen einzelnen Textabschnitt.
•
<pre> ... </pre> Container für einen vorformatierten Textabschnitt.
•
<address> ... </address> Container für eine Adresse als Textabschnitt.
•
<blockquote> ... </blockquote> Container für ein Zitat als Textabschnitt.
•
<em> ... </em> Hervorgehobener Text (log. Stil).
•
<code> ... </code> Kurzes Sourcecodestück (log. Stil).
•
<cite> .. </cite> Kurzes Zitat (inline, log. Stil).
•
<b> .. </b> Fettdruck (phys. Stil).
•
<tt> .. </tt> Typewriter (phys. Stil).
•
<it> .. </it> Kursiv (phys. Stil).
3.7.3.
Hypertext
<img src='url'> Einbinden eines Bildes.
<a href='url'> Verweistext </a> Ankercontainer für einen Hyperlink.
V3.doc
10.06.2003
23
3.7.4.
Listen
•
<dd> .. </dd> Container einer Definition in einer <dl> - Liste.
•
<dl> .. </dl> Container der Definitionsliste.
•
<dt> .. </dt> Container für den zu definierenden Terminus einer <dl> - Liste.
•
<li> .. </li> Dieser Container enthält einen Listeneintrag für eine unsortierte
oder sortierte Liste.
•
<ol> .. </ol> Container für eine sortierte (nummerierte) Liste.
•
<ul> .. </ul> Container, der eine unsortierte Liste enthält
3.7.5.
Tabellen
•
<caption> .. </caption> Überschrift einer Tabelle.
•
<table> .. </table> Hauptcontainer einer Tabelle.
•
<tr> .. </tr> Container einer Tabellenzeile (Row).
•
<th> .. </th> Container einer Überschriftenzelle (Heading).
•
<td> .. </td> Container einer Datenzeile (Data).
•
<colgroup> .. </colgroup> Definition einer Gruppe von Spalten.
•
<cols> Definition einer Einzelspalte innerhalb einer Spaltengruppe.
V3.doc
10.06.2003
24
3.8.
Zusammenfassung
Zusammenfassung
•
HTML ist eine Markupsprache.
•
Die aktuelle Sprachversion ist HTML 4.0; alle Browser verstehen HTML 3.2.
•
Die Browserentwicklung nimmt die Spracherneuerung meist vorweg.
•
HTML besitzt eine Fülle von Tags, die die Struktur einen Textes definieren helfen. Auch Textstil
u.ä. können mittlerweile, abweichend vom Markup-Gedanken, definiert werden.
•
Listen und Tabellen sind wichtige Strukturmittel in HTML.
•
Bilder und Anker machen aus einem einfachen Textdokument eine Hypertext-Ressource.
•
Relative und absolute Links ermöglichen die Erstellung portabler WWW-Webs und die
Verbindungen zu zwischen verschiedenen Rechnern im WWW
•
Können die Clients Multimedia-Komponenten nicht darstellen, so kann man auf
Sekundäranwendungen ausweichen.
•
Tabellen dienen zur Formatierung zweidimensionaler Datenschemata. Sie
•
werden oft auch zur globalen Seitengestaltung eingesetzt.
V3.doc
10.06.2003
25

v3.

Transcription

Similar documents

Fendt 700 Vario

BAUFACH 2/16

Pupp Journal Podzim 2008

pavone sales 5.5

Datenschleuder Nr. 87 - Chaosradio

SAE Magazin - SAE Alumni Association Europe

BIOGAS-Gewinnung durch Verwertung organischer

Ausgabe 42 - Juni 2014

vhs-magazin - vhs Rheingau