Skript #1 - Benutzer-Homepage
Werbung
Fachhochschule Gießen-Friedberg
Fachbereich MNI
Wintersemester 2009/10
Version 0.1
Informatik: Internetbasierte Systeme
Skript #1
B. Igler
Zur Vorlesung vom 22.10.2009
Inhaltsverzeichnis
1 Inhalt und Darstellung
1.1 CSS . . . . . . . . . . . . . . . . . .
1.1.1 Struktur . . . . . . . . . . .
1.1.2 Syntax . . . . . . . . . . . .
1.1.3 Semantik . . . . . . . . . . .
1.1.4 HTML mit CSS verknüpfen
1.1.5 div und span . . . . . . . .
1.1.6 Vorrangregeln . . . . . . . .
1.1.7 Rechtecke . . . . . . . . . .
1.2 XML & CSS . . . . . . . . . . . . .
1.3 Bereinigtes HTML . . . . . . . . . .
1.4 Debugging . . . . . . . . . . . . . .
1.5 Literatur . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
1
2
2
3
3
5
6
7
7
10
12
13
13
1 Inhalt und Darstellung
HTML vermischt Inhalt und Darstellung. Das hat einen Vorteil: Mit HTML kann man sogar mit wenig Vorwissen recht schnell brauchbare, optisch ansprechende Web-Seiten gestalten.
Wie auch beim Entwickeln von Programmen in Java sollte man bei der Web-Seiten-Erstellung aber hohe Kohäsion und lose Kopplung anstreben. Dies erleichert die Arbeitsteilung
(z.B. getrennte Rollen für das Erstellen des Inhalts und das Gestalten des Layouts). Andererseits erhält man damit ein höheres Maß an Wiederverwendbarkeit und Flexibilität.
Gerde im Hinblick auf verschiedene Darstellungsarten verschiedener Browser und sogar
Skript #1
2
verschiedener Versionen des gleichen Browsers, ist es erstrebenswert, die für die Darstellung spezifischen Vorgaben bequem austauschen zu können, ohne den Inhalt anfassen zu
müssen.
Es gibt verschiedenen Möglichkeiten, diese Trennung zu erreichen. Wir betrachten uns
zwei populäre Ansätze:
HTML & CSS Man beläßt in HTML den Inhalt und die Struktur der Web-Seite. Die LayoutInformation (Schriftart, Positionierung der Seiten-Bestandteile, Seiten-Hintergrund, . . . ) werden in einer separaten Datei, einem sog. Stylesheet abgelegt. Wird die Web-Seite aufgerufen, dann lädt der Browser die HTML-Datei
und das zugehörige Stylesheet und interpretiert dann die HTML-Datei gemäß der Layout-Informationen im Stylesheet.
XML
In einer Datei (z.B. XML-Datei) befindet sich nur der Inhalt und zwar in einer Sprache, die dem Anwendungsbereich angemessen ist. In einem oder
mehreren Schritten wird aus dem Inhalt die darzustellende Web-Seite erzeugt. Im einfachsten Fall geschieht dies wie bei „HTML & CSS“, indem zur
XML-Datei noch ein Stylesheet hinzugefügt wird. Es ist aber auch möglich,
mit XML-Techniken aus der ursprünglichen XML-Datei eine HTML-Datei
zu erzeugen und diese dann zusammen mit einem Stylesheet anzeigen zu
lassen.
1.1 CSS
CSS (Cascading1 Stylesheets) ist der Standard, in dem die Stylesheets zu HTML-Dateien
abgefaßt werden. In [W3C08a] findet man die Spezifikation von CSS. Das Lehrbuch [Seb08]
und der Online-Kurs [SEL07] bieten Einführungen zu CSS an.
Es gibt drei „levels“ von CSS: CSS level 1 wird von den aktuellen Web-Browsern unterstützt. Die aktuelle Version CSS level 2 wird noch nicht von allen Web-Browsern komplett
unterstützt. CSS level 3 befindet sich noch in Entwicklung. Wir verwenden in der Vorlesung CSS level 2 revision 1 (CSS 2.1, s. [W3C07a]).
In diesem Abschnitt werden die Grundkonzepte von CSS erläutert und beispielhaft wichtige Anwendungsmöglichkeiten dargestellt. Eine vollständige Auflistung der CSS-Eigenschaften findet man in der zugehörigen Spezifikation [W3C08a]. Eine umfangreiche Darstellung findet man auch im o.g. Online-Kurs [SEL07] und in der Online-Referenz [CSS08].
1.1.1 Struktur
Ein Stylesheet enthält Layout-Angaben, die von mehren HTML-Dateien gleichzeitig verwendet werden können. Ein Stylesheet ist wie folgt aufgebaut:
1
Zur Bedeutung von „cascading“ später noch mehr.
2
Skript #1
3
1
Stylesheet
*
Selector
Style Rule
1..*
Declaration
property
value
Ein Stylesheet besteht aus mehreren Style Rules. Eine Style Rule wiederum besteht aus
einem Selector und einer oder mehrerer Declarations. Ein Selector legt fest, auf welche Tags
sich die Regel (Style Rule) bezieht. Man könnte z.B. festlegen, daß sich die Regel auf alle
Elemente mit einem h1-Tag bezieht. Die Declarations enthalten die tatsächlichen LayoutAngaben, z.B. könnte eine property die Schriftgröße und der zugehörige value 12pt sein.
1.1.2 Syntax
Ein Stylesheet wird in Form einer Text-Datei repräsentiert. Die Syntax von CSS weicht erheblich von der von HTML ab. Eine typische CSS-Datei sieht so aus:
Beispiel 1.1 (CSS)
1
2
3
4
5
h1 {font-size: 24pt; color: red;}
h1 {font-style: italic;}
p.normal {font-size: 8pt;}
a[href] {color: blue;}
a[href="http://www.fh-giessen.de/"] {color: green;}
Listing 1: Eine CSS-Datei
Jede Style Rule besteht aus zwei Teilen: dem Selector gefolgt von einem {...}-Block.
Der {...}-Block enthält die Declarations als eine durch Strichpunkte separierte Liste von
Name-Wert-Paaren. Dabei sind der Name und der Wert durch einen Doppelpunkt voneinander getrennt.
1.1.3 Semantik
Die Semantik ist im Prinzip recht einfach. Der Selector gibt an, auf welche Elemente sich
die Layout-Anweisungen beziehen. Danach folgen die Format-Anweisungen in der Liste
der Declerations.
3
Skript #1
4
Beispiel 1.2 (CSS)
In Zeile 1 in Listing 1 finden wir folgende Information: Alle h1-Elemente sollen mit folgenden Format-Angaben gesetzt werden:
Name
Wert
(property) (value)
font-size 24pt
color
red
Selector Als Selector kann man u.a. angeben:2
Art des Selektors
tag name
tag list
Knotenfolge
Klassenselektor
PseudoklassenSelektor
Id-Selektor
Attribut-Selektor
(Existenz)
Attribut-Selektor
mit Wertangabe
Beispiel
h1
Bedeutung
alle Elemente mit diesem Tag,
hier: alle h1-Elemente
h1, h2
alle Elemente mit einem der Tags aus der tag
list,
hier: alle h1- und h2-Elemente
h1 p
alle Elemente, die man auf dem angegeben
Pfad erreicht,
hier: alle p-Elemente, die im HTML-Baum
unter einem h1-Element hängen (<h1> ...
<p> ... </h1>)
xyz.c
alle Elemente, mit diesem Tag und der nach
dem Punkt angegebenen Klasse,
hier: alle Elemente <xyz class=”c” ...>
a:hover
alle Elemente mit diesem Tag unter der nach
dem Doppelpunkt stehenden Bedingung,
hier: das a-Tag, über dem sich gerade die
Maus befindet
a#xyz
alle Elemente mit diesem Tag und dieser ID,
hier: alle a-Tags mit der ID xyz (<a
id=”xyz” ...>)
a[href]
alle Elemente mit diesem Tag und diesem Attribut,
hier: alle a-Tags mit dem Attribut href (<a
href=”...” ...>)
a[href="xyz"] alle Elemente mit diesem Tag und diesem Attribut, wobei dem Attribut der vorgegebene
Wert zugewiesen sein muß,
hier: alle a-Tags mit dem Attribut href, wobei href der Wert ”xyz” zugewiesen sein
muß (<a href=”xyz” ...>)
Läßt man beim Klassenselektor, beim Pseudoklassen-Selektor oder Id-Selektor das Tag
weg, so bezieht sich der Selektor auf alle Tags, die die angegebene Klasse, die angege2
Vollständige Auflistung in der Spezifikation [W3C08a].
4
Skript #1
5
bene Pseudo-Klasse bzw. die angegebene ID haben. Man kann anstatt eines Tags auch das
Wildcard * verwenden. Das ist z.B. bei der Knotenfolge sinnvoll.
1.1.4 HTML mit CSS verknüpfen
Es gibt mehrere Möglichkeiten, wie man eine HTML-Datei mit einem Stylesheet verknüpfen kann:
a) Beim „inline style“ wird das Stylesheet als Wert (Zeichenkette) des style-Attribut
in ein Tag eingefügt. Das Stylesheet bezieht sich nur auf dieses Element3 (S. Beispiel
1.3.)
b) Unter das head-Element der HTML-Datei wird ein style-Element eingefügt. In dieses Element wird das Stylesheet (Zeichenkette) als Textknoten eingehängt. Das Stylesheet bezieht sich auf die ganze HTML-Datei. (S. Beispiel 1.4.)
c) Auf das Stylesheet, das in einer externen Datei vorliegt, wird über ein link-Element
unter dem head-Element verwiesen. Das Stylesheet bezieht sich auf die ganze HTMLDatei. (S. Beispiel 1.5.)
In der Regel sollte man die Möglichkeit (c) wählen.
Beispiel 1.3 (HTML & CSS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel: beispiel.html</title>
</head>
<body>
...
<h1 style="font-size: 24pt; color: red;font-style: italic;">
...
</h1>
...
</body>
</html>
Listing 2: „inline style“
Beispiel 1.4 (HTML & CSS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel: beispiel.html</title>
<style type="text/css">
3
Bei vererbten Properties auch auf die darunter liegenden Elemente.
5
Skript #1
6
h1 {font-size: 24pt; color: red;}
h1 {font-style: italic;}
p.normal {font-size: 8pt;}
h1 {font-size: 12pt; color: green;}
</style>
</head>
<body>
...
</body>
</html>
Listing 3: „style tag“
Beispiel 1.5 (HTML & CSS)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Beispiel: beispiel.html</title>
<link rel="stylesheet" type="text/css"
href="beispiel.css" />
</head>
<body>
...
</body>
</html>
Listing 4: Stylesheet in separatem Dokument
1.1.5 div und span
Eine typische Web-Seite ist in mehrere Bereiche aufgeteilt, z.B.: Kopf, Navigationsleiste, Seiteninhalt, Fuß. Um diese einzelnen Bereiche zu positionieren verwendet man sog. Blöcke
mit Positionierungsangaben. Die zu einem Block gehörigen Bestandteile eines HTML-Dokuments werden unter einem div-Element zusammengefaßt. Dieser Block kann dann gezielt durch einen Selector mit Layout-Vorgaben verbunden werden, z.B.: Angabe von horizontaler und vertikaler Position, absolute und relative Angaben, Ausrichtung.
Dann gibt es noch den span-Tag. Diesen verwendet man, wenn man Stylesheet-Regeln
nur auf einen Teil eines Textknotens anwenden möchte. Dazu wird der entsprechende
Textbestandteil in ein span-Element gepackt, das gezielt durch einen Selector mit LayoutVorgaben verbunden werden kann.
6
Skript #1
7
1.1.6 Vorrangregeln
Es ist möglich, und manchmal sinnvoll, die drei im Abschnitt 1.1.4 genannten Möglichkeiten miteinander zu mischen. Darüberhinaus ist es möglich, im gleichen Stylesheet mehrere
Reglen für das gleiche Element vorzugeben (s. z.B. Vorgaben für das Element h1 in Beispiel 1.4). Dann gibt es auch noch die Möglichkeit, in den Voreinstellungen des Browsers
ein festes Stylesheet vorzugeben, das auf alle Web-Seiten angewandt wird. Dieses Übereinanderlegen mehrerer Stylesheets bezeichnet man als „cascading“.4
Zum Auflösen von Konflikten zwischen Stylesheets wird folgende Reihenfolge (abnehmende Priorität) beachtet:5
• inline style
• style tag im head
• Stylesheet in separatem Dokument
• in Browser voreingestelltes Stylesheet
Auch für Konflikte zwischen Regeln im gleichen Stylesheet gibt es Vorrangregeln: s. [W3C08a]
oder [SEL07].
1.1.7 Rechtecke
Jedem Element im HTML-Baum wird zur Darstellung ein rechteckiger Bereich zugewiesen:
die „Box“. Größe, Position und Aussehen dieser rechteckigen Bereiche ist durch Standardregeln festgelegt. Durch CSS-Anweisungen kann der Browser angewiesen werden, rechteckige Bereiche auf andere Art und Weise darzustellen. So ist es z.B. möglich, durch CSSAnweisungen eine abweichende Position oder Größe festzulegen.
Jede Box setzt sich tatsächlich aus vier untergeordneten Boxen zusammen (s. Abbildung
1):
• Content In der innersten Box, der content box, befindet sich der Inhalt (content).
• Padding Die content box wird von „Füllmaterial“ padding umschlossen. Der sich daraus ergebende rechteckige Bereich wird als padding box bezeichnet.
• Border Die padding box wiederum ist von der border box umgeben. Der Bereich zwischen der Außengrenze der padding box und der border box kann als sichtbarer Rahmen
verwendet werden.
• Margin Auch die border box wird von Füllmaterial umschlossen. Dieses Füllmaterial wird als margin bezeichnet. Der sich daraus ergebende rechteckige Bereich heißt
margin box. Die margin box gibt die äußere Grenze vor.
Die Seiten (edges) der Boxen sind jeweils mit einer der Bezeichnungen top, right, bottom und
left versehen. So heißt z.B. die rechte Seite der padding box: right padding edge.
4
5
Diese Eigenschaft ist also mitverantwortlich für den Namen Cascading Stylesheet.
Diese Auflistung ist unvollständig. Z.B. kann durch die !important-Regel die Priorität erhöht werden.
7
Skript #1
8
Abbildung 1: Box-Modell [W3C07b]
Für jedes Element können die zu diesem Element gehörigen Boxen durch CSS-Anweisungen
verändert werden:
Beispiel 1.6 (Box-Modell)
Das h1-Element in Listing 5 wird durch CSS-Anweisungen mit einem Rand versehen, der
folgende Dicken aufweist (Zeilen 8 bis 11):
• oben: 10 Punkte
• rechts: 20 Punkte
• unten: 30 Punkte
• links: 40 Punkte
Zwischen dem Inhalt, also der Überschrift Das ist eine Überschrift, und dem Rahmen befindet sich Füllmaterial der Dicke 50 Punkte (Zeile 12). Mit der Angabe in Zeile 7
wird dafür gesorgt, daß der Rahmen überhaupt sichtbar ist. Die zugehörige Ausgabe sehen
wir in Abbildung 2.
1
2
3
4
5
6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS-Boxen</title>
<style type="text/css">
h1 {
8
Skript #1
7
8
9
10
11
12
13
14
15
16
17
18
19
9
border-style: solid;
border-top-width: 10px;
border-right-width: 20px;
border-bottom-width: 30px;
border-left-width: 40px;
padding: 50px;
}
</style>
</head>
<body>
<h1>Das ist eine &Uuml;berschrift</h1>
</body>
</html>
Listing 5: CSS-Angaben zum Rahmen eines h1-Elements
Abbildung 2: Überschrift mit Rahmen
Die Angaben zu den Boxen gibt es in mehreren Varianten. So hätte man die Angaben in
den Zeilen 7 bis 11 in Listing 5 auch kürzer schreiben können:
border-width: 10px 20px 30px 40px;
Entsprechend hätte man die Angabe in Zeile 12 in Listing 5 auch in der Form:
padding: 50px 50px 50px 50px;
oder in der Form
9
Skript #1
10
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
padding-left: 50px;
schreiben können. Entsprechende Properties gibt es auch für margin.
Es gibt noch weitere Properties im Zusammenhang mit dem Box-Modell, z.B. Properties,
mit denen die Farbe (border-color: red) oder die Strichart (border-style: dashed)
vorgegeben werden kann.
Obacht 1.7
In CSS gibt ist bei manchen Elementen vorgesehen, daß sich der Margin zwischen diesen
Elementen überschneidet. Dies betrifft z.B. den top margin und bottom margin bei aufeinanderfolgenden Listenelementen. Dieser Effekt wird als collapsing margins bezeichnet.
Für die Positionierung von Elementen (genauer: die sie umschließende Box) verwendet
man z.B. die position-Property im Zusammenspiel mit einer oder mehrerer der Properties top, right, bottom, left. Für position gibt es vier verschiedene Werte:
• static: Das Element wird gemäß der Standard-Regeln vom Browser positioniert.
(Default-Einstellung)
• relative: Es können Positionierungsangaben angegeben werden. Diese beziehen
sich auf die Position, an der das Element normalerweise stehen würde. Gibt man z.B.
position: relative; top: 10px;
an, so ist der tatsächliche obere Rand des Elements 10 Punkte von der Stelle entfernt,
an der sich normalerweise der obere Rand befinden würde. Analog werden die Angaben für right, bottom, left ausgewertet.
• absolute: Bei absolute bezieht sich die Verschiebung auf den Behälter, in dem
sich diese Box befindet.
• fixed: In diesem Fall beziehen sich die Positionierungsangaben auf das BrowserFenster. Mit fixed versehene Elemente bleiben insbesondere vom Scrollen unberührt.
1.2 XML & CSS
Im Prinzip kann CSS auf XML genauso wie auf HTML angewandt werden. Bevor wir uns
ein Beispiel anschauen, noch ein paar grundsätzliche Worte zu XML:6
Eine XML-Datei sieht auf den ersten Blick aus wie ein HTML-Datei.7 Mit Hilfe von Tags
wird eine baumartige Struktur vorgegeben. Ganz grob gesprochen gibt es zwei wesentliche Unterschiede zwischen HTML und XML: Zum einen ist die Syntax von HTML etwas
6
7
Wir werden XML in späteren Vorlesungen noch genauer behandeln.
Das liegt u.a. daran, daß HTML und XML einen gemeinsamen Vorfahren haben: SGML (Standard Generalized Markup Language), s. z.B. [W3C99c] und [W3C97].
10
Skript #1
11
lascher. Es muß z.B. nicht zu jedem öffnenden Tag ein schließendes Tags vorhanden sein.
Zum anderen sind bei XML die Tags nicht vorgegeben, sondern durch den Benutzer bzw.
Programmierer können diese anwendungsspezifisch vorgegeben werden.8
Beispiel 1.8 (XML & CSS)
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="perslist1.css" ?>
<pl:liste>
<pl:person groesse="45">Anton Müller</pl:person>
<pl:person groesse="37">Bertha Schneider</pl:person>
<pl:person groesse="10">Cäsar Baier</pl:person>
</pl:liste>
Listing 6: XML-Datei liste1.xml, die mit der CSS-Datei perslist1.css verknüpft ist
person {display: block; margin-left: 30px;
margin-top: 15px; font-size: 16pt}
person[groesse="45"] {color: red}
person[groesse="10"] {display: none}
Listing 7: Zur XML-Datei liste1.xml in Listing 6 gehörige CSS-Datei perslist1.css
In Listing 6 sehen wir eine XML-Datei, die mit der CSS-Datei perslist1.css in Listing
7 verbunden ist. Die XML-Datei stellt eine Liste von Personen dar (liste). Jede Person
(person) hat ein Attribut groesse und einen Textknoten.
Öffnet man die XML-Datei mit einem Browser mit Zugriff auf die CSS-Datei, so erhält man
eine gemäß CSS-Datei formatierte Ausgabe:
Durch die Regel zum Attribut-Selektor person[groesse="45"] wird dafür gesorgt, daß
person-Elemente mit dem Attributwert groesse="45" rot gesetzt werden. Durch die
Regel zum Attribut-Selektor person[groesse="10"] wird dafür gesorgt, daß personElemente mit dem Attributwert groesse="10" nicht ausgegeben werden.
8
Wie das genau geht, werden wir uns in einer späteren Vorlesung anschauen.
11
Skript #1
12
1.3 Bereinigtes HTML
HTML hat sich seit dem Ende der 80er Jahre erheblich weiterentwickelt. Die letzte HTMLVersion ist die Version 4.019 aus dem Jahr 1999. Wie schon in HTML 4.010 so ist in HTML
4.01 das Einbinden von Stylesheets die bevorzugte Methode, um das Layout zu bestimmen.
Der Nachfolger von HTML 4.01 ist XHTML 1.0. „X“ steht in diesem Fall für „XML“. Die
wesentliche Neuerung, die mit XHTML 1.011 im Jahre 2000 eingeführt wurde, war die Umstellung von HTML 4.01 auf XML – grob gesprochen also HTML 4.01 mit einer strengeren
Syntax, z.B.:
• Element- und Attributnamen dürfen nur aus Kleinbuchstaben bestehen (z.B.: <a ...>
ist erlaubt, <A ...> ist verboten).
• Jedes öffnende Tag muß geschlossen werden (z.B.: <p>....</p> ist erlaubt, <p>...
ist verboten).
• Attributwerte müssen in Anführungszeichen stehen (z.B.: <td colspan="2"> ist
erlaubt, <td colspan=2> ist verboten).
HTML 4.0, HTML 4.01 und XHTML 1.0 gibt es jeweils in drei Varianten:12
Strict:
Das (X)HTML-Dokument darf keine Layout-Informationen enthalten. Diese
müssen über zugehörige Stylesheets angegeben werden.
Transitional: Diese Variante ist als Übergangslösung gedacht, um sowohl von mit HTML
4.01 eingeführten Neuerungen Gebrauch zu machen als auch zu (damals
schon) älteren Browsern kompatibel zu bleiben, die CSS nicht oder nur ungenügend umsetzen können.
Frameset:
Es dürfen Frames verwendet werden.
Welche der drei Varianten vorliegt, wird durch die verpflichtende DOCTYPE-Angabe zu
Beginn des (X)HTML-Dokuments festgelegt. Hier die Angaben für XHTML 1.0:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Listing 8: DOCTYPE für XHTML 1.0 Strict
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Listing 9: DOCTYPE für XHTML 1.0 Transitional
9
Spezifikation in [W3C99a].
Spezifikation in [W3C98a].
11
Spezifikation in [W3C02].
12
S. [W3C98b], [W3C99b] und [W3C08b]. Das W3C spricht in [W3C08b] von drei Geschmacksrichtungen
(„flavours“).
10
12
Skript #1
13
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Listing 10: DOCTYPE für XHTML 1.0 Frameset
Die aktuelle Version von XHTML ist XHTML 1.1.13 XHTML 1.1 ist im Prinzip die Einschränkung von XHTML 1.0 auf „Strict“.14 Bei der Verwendung von XHTML 1.1 ist also
die Trennung von Inhalt und Darstellung – soweit dies mit einem Nachfolger von HTML
überhaupt möglich ist – verbindlich vorgeschrieben. (Der Nachfolger von XHTML1.1 ist
XHTML 2.0. XHTML 2.0 liegt zur Zeit nur als Entwurf vor.)15
1.4 Debugging
Die Fehlersuche bei der Entwicklung von Stylesheets kann sehr zeitaufwendig und nervenaufreibend sein: von der Frage, wie das gerade angewandte Stylesheet überhaupt ausschaut, über das Finden einfacher Syntax-Fehler bis hin zu Situationen, in denen die Anwendung der Kaskade-Regeln nur schwer zu durchschauen ist. Das liegt vor allem daran,
daß Browser „nur“ die Web-Seite gemäß Stylesheet anzeigen und bei Problemen mit Stylesheets keine Hinweise zu diesen ausgeben, sondern versuchen, die Web-Seite so gut wie
möglich anzuzeigen. Hilfreich ist hier der Einsatz eines Debuggers, z.B. das Add-On Firebug16 für den Firefox-Browser.
1.5 Literatur
Zu CSS gibt es, wie auch zu HTML und XHTML, eine Fülle von Veröffentlichungen. Es
ist zum einen sicherlich lohnenswert und zum anderen bei speziellen Fragen notwendig,
einen Blick in die Spezifikation [W3C08a] von CSS zu werfen. Zum Einstieg in das Thema
bieten sich z.B. das Lehrbuch [Seb08], der Online-Kurs [SEL07] und die Online-Referenz
[CSS08] an.
Literatur
[CSS08] CSS 4 You – The Fines in Stylesheets. 2008.
(21.10.2008).
URL http://www.css4you.de
[Moz08] M OZILLA. Firefox-Add-ons. Firebug. 2008. URL https://addons.mozilla.
org/de/firefox/search?q=firebug&cat=all (04.09.2008).
13
Spezifikation in [W3C07c]. Die usrprüngliche Ausgabe von XHTML 1.1 stammt aus dem Jahr 2001:
[W3C01].
14
Es gibt noch ein paar andere, für uns im Rahmen der Vorlesung unbedeutende Unterschiede. S. z.B.
[W3C07d].
15
Entwurf einer Spezifikation in [W3C06]. S.a. [W3C08c] für die weiteren geplanten Entwicklungsschritte.
16
S. [Moz08].
13
Skript #1
14
[Seb08] S EBESTA , R OBERT W. Programming the world wide web. Pearson Addison Wesley.
2008.
[SEL07] SELFHTML E .V. SELFHTML. 2007. URL http://selfhtml.org/ (22.08.2008).
[W3C97] W3C. Comparison of SGML and XML. 1997. URL http://www.w3.org/TR/
NOTE-sgml-xml-971215 (30.08.2008).
[W3C98a] W3C. HTML 4.0 Specification. 1998. URL http://www.w3.org/TR/1998/
REC-html40-19980424/ (04.09.2008).
[W3C98b] W3C.
HTML 4.0 Specification. The global structure of an HTML document. HTML version information. 1998. URL http://www.w3.org/TR/1998/
REC-html40-19980424/struct/global.html#h-7.2 (04.09.2008).
[W3C99a] W3C. HTML 4.01 Specification. 1999. URL http://www.w3.org/TR/html4/
(22.08.2008).
[W3C99b] W3C. HTML 4.01 Specification. The global structure of an HTML document. HTML
version information. 1999. URL http://www.w3.org/TR/html4/struct/
global.html#h-7.2 (04.09.2008).
[W3C99c] W3C. On SGML and HTML. 1999. URL http://www.w3.org/TR/html4/
intro/sgmltut.html (30.08.2008).
[W3C01] W3C. XHTMLTM 1.1 - Module-based XHTML. 2001. URL http://www.w3.org/
TR/2001/REC-xhtml11-20010531/ (04.09.2008).
[W3C02] W3C. XHTMLTM 1.0. The Extensible HyperText Markup Language (Second Edition).
A Reformulation of HTML 4 in XML 1.0. 2002. URL http://www.w3.org/TR/
xhtml1/ (04.09.2008).
[W3C06] W3C.
XHTMLTM 2.0. 2006.
(04.09.2008).
URL http://www.w3.org/TR/xhtml2/
[W3C07a] W3C. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1). Specification. 2007. URL
http://www.w3.org/TR/CSS21 (21.10.2008).
[W3C07b] W3C. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1). Specification. Box Model.
2007. URL http://www.w3.org/TR/CSS21/box.html (21.10.2008).
[W3C07c] W3C. XHTMLTM 1.1 - Module-based XHTML - Second Edition. 2007. URL http:
//www.w3.org/TR/xhtml11/ (04.09.2008).
[W3C07d] W3C. XHTMLTM 1.1 - Module-based XHTML - Second Edition. Changes from
XHTML 1.0 Strict. 2007. URL http://www.w3.org/TR/xhtml11/changes.
html#a_changes (04.09.2008).
[W3C08a] W3C. Cascading Stylesheets. 2008. URL http://www.w3.org/Style/CSS/
(30.08.2008).
[W3C08b] W3C. W3C XHTML2 Working Group Home Page: XHTML 1.0. 2008. URL http:
//www.w3.org/MarkUp/#xhtml1 (04.09.2008).
[W3C08c] W3C. XHTML2 Working Group Roadmap. 2008. URL http://www.w3.org/
MarkUp/xhtml-roadmap/ (04.09.2008).
14
