Clemens Gull

Know-how ist blau.

kBerütcigt sich

CSS 3

WebseitenLayout mit

CSS

> CSS anhand von 23 Beispielen verstehen und praktisch einsetzen > Anspruchsvolle und flexible Weblayouts planen und realisieren > Bilder, Text und Grafik richtig formatieren und positionieren

Der perfekte Einstieg in Cascading Style Sheets

Clemens Gull

Webseiten-Layout mit CSS

Clemens Gull

WebseitenLayout mit Mit 132 Abbildungen

CSS

Bibliografische Information der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich.

© 2010 Franzis Verlag GmbH, 85586 Poing Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt. Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller. Herausgeber: Franz Graser Satz: DTP-Satz A. Kugge, München art & design: www.ideehoch2.de Druck: Bercker, 47623 Kevelaer Printed in Germany ISBN 978-3-7723-7568-2

5

Für meinen Vater!

6

Danke! An meinen Vater. Obwohl er von Informationstechnologie nicht sehr viel Ahnung hat, kann er mir mit seinem tiefen und umfassenden Wissen immer wieder zur Seite stehen. Die Art, komplizierte Zusammenhänge einfach formulieren zu können, verdanke ich ihm. Herrn Franz Graser, meinem Lektor und Betreuer beim Franzis Verlag: Danke für die kompetente Betreuung bei der Umsetzung der Bücher, die Korrekturen und die Möglichkeit, als Autor zu arbeiten.

7

Vorwort Worum geht es in diesem Buch? Dieses Buch will die Grundlagen des Webdesigns mit CSS vermitteln. Es ist jedoch kein klassisches Lehrbuch, von denen es bereits Dutzende gibt. Es will vielmehr ein »Mitmach-Buch« sein. Es zeigt zwar fertige Lösungen auf, bei denen es sich um in der Praxis oft benötigte (Teil)Layouts handelt. Rein theoretisch können sie direkt in Ihre Webprojekte übernommen werden. Aber eigentlich sind es Startpunkte, die Ihnen ein Gefühl für HTML und CSS geben sollen. Sie erklären den theoretischen Hintergrund und zeigen den Einsatz in der Praxis. Aber trotz allem werden sie erst durch kreative Weiterverwendung zum Leben erweckt. Eine Warnung: Wer eine Aufzählung aller CSS-Eigenschaften und der zugrunde liegenden HTML-Technik mit allen möglichen Einstellungen und Varianten erwartet, wird enttäuscht sein. Ich schreibe hier über den praktischen Einsatz von HTML und CSS. Daher verwende ich auch nicht alle Tags oder CSS-Eigenschaften, sondern beschränke mich auf häufig benutzte Tags und Befehle. Im Web treffen wir auf viele verschiedene Betriebssysteme und Browser in unterschiedlichen Versionen. Ideal wäre es, wenn alle diese Kombinationen unser Design identisch darstellen würden. Aber leider ist dies ganz und gar nicht so. Daher müssen wir versuchen, die einzelnen Browser so zu unterstützen (mit der Art unserer Codierung), dass sie eine (fast) gleiche Darstellung der Website erzeugen. Leider würde die Unterstützung der gesamten Palette verfügbarer Browser einen nicht zu vertretenden Aufwand im Design erzeugen. Daher beschränken wir uns auf eine Auswahl derjenigen Browser, die derzeit hauptsächlich verwendet werden. Dazu wurden Erhebungen namhafter Webanalysten1 zu Rate gezogen. Davon ausgehend beschränken wir uns auf die Browser mit mehr als 5 % Marktanteil und halten so den Aufwand für die Codierung in einem vertretbaren Rahmen. In diesem Buch konzentrieren wir uns auf die Versionen 7 und 8 des Internet Explorers, auf die Versionen 3.0 bis 3.6 von Firefox und auf den Safari 4.0. Die Versionen 6 und älter des Internet Explorer lassen wir außen vor. Da Websites zum Teil mit sehr hohem Aufwand an diese Browservarianten angepasst werden 1 Beispielsweise: http://www.webmasterpro.de/portal/webanalyse-aktuell.html

8

Vorwort

mussten, sollten wir nicht allzu traurig darüber sein, dass der IE 6 und älter bei den Anwendern langsam ausstirbt. Sofern es gravierende Abweichungen in der Darstellung zwischen den einzelnen Browsern gibt, werde ich darauf hinweisen und einen Trick2 zur korrekten Darstellung anbieten. Das Kapitel 1 bietet einen ersten Überblick. Wir lernen einige Grundregeln für Webdesign kennen und schließen damit einige häufig auftretenden Fehlerquellen im technischen Bereich des Designs aus. Das Kapitel 2 beschäftigt sich mit den HTML-Elementen. Wir lernen die wichtigsten Tags und ihre Verwendung kennen. Diese werden wir in den folgenden Kapiteln einsetzen und formatieren. Dieses Kapitel können Sie als Nachschlagewerk für die späteren Formatierungen benutzen. Da es sich bei den Beispielen in diesem Kapitel noch nicht um schwierigere Probleme handelt, benötigen wir für die Arbeit nur einen einfachen Texteditor. Eine Entwicklungsumgebung brauchen wir erst später. In Kapitel 3 installieren wir unsere Entwicklungsumgebung. Diese werden wir hier konfigurieren und im folgenden Abschnitt intensiv benutzen. Zusätzlich werden wir für den Firefox-Browser das eine oder andere Add-On installieren, damit wir uns bei der Arbeit leichter tun. Das Kapitel 4 behandelt den großen Komplex des Designs mit Cascading Style Sheets. Hier werden wir eine Fülle von Formatierungsmöglichkeiten kennenlernen und in einzelnen Beispielen umsetzen. Im Anhang finden Sie weiterführende Informationen und auch den gesamten Quelltext aller im Buch vorgestellten Beispiele.

Herunterladen der Beispielcodes zum Buch Wenn Sie die Franzis-Website unter der Adresse http://www.buch.cd besuchen und dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich eingeben, können Sie alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.

Berichtigungen und Feedback Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren mitunter Fehler. Wenn Sie einen Fehler in 2 einen sogenannten Hack

Vorwort

9

diesem Buch entdecken, ob im Text oder im Quellcode, bin ich für eine Mitteilung sehr dankbar. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an [email protected] mit. Aktualisierungen sowie Verbesserungen des Buches werde ich auf meinem Blog (http://www.guru-20.info) veröffentlichen. Ich würde mich über Reaktionen und Anregungen sehr freuen. Darüber hinaus sind Lob und Kritik sehr willkommen. Sie erreichen mich unter folgender Adresse: [email protected].

Herzlichen Dank vorab! Ihr Clemens Gull

11

Inhaltsverzeichnis 1

Do’s & Dont’s im Webdesign.............................................................. 15 1.1 Referenzieren von Dateien .....................................................16 1.2 Auf fremde Quellen referenzieren...........................................16 1.2.1 In der eigenen Website verweisen..........................................17 1. Übung: Referenzieren.........................................................18

2

Die Grundlage: Hypertext Markup Language (HTML) .......................... 21 2.1 Grundregeln...........................................................................21 2.2 HTML-Tags im praktischen Einsatz .........................................22 2.3 Arten von Tags .......................................................................22 2.4 Attribute bei den Tags ............................................................22 2.5 HTML-Entitäten ......................................................................23 2.5.1 Wichtige Entitäten..................................................................24 2.6 HTML-Struktur........................................................................25 2.6.1 Document Type Definition (DTD).............................................26 2.6.2 Der html-Tag ..........................................................................26 2.6.3 Der head-Tag .........................................................................27 2.6.4 Der Zeichensatz .....................................................................28 2.6.5 Der title-Tag ...........................................................................28 2.6.6 Der body-Tag..........................................................................30 2.7 Text mit HTML strukturieren ...................................................30 2.7.1 Der Absatz .............................................................................30 2. Übung: Formatierung mit HTML ..........................................31 2.7.2 Der Zeilenumbruch ................................................................32 2.7.3 Textgliederung durch Überschriften .......................................35 3. Übung: Überschriften .........................................................36 2.7.4 Aufzählungen ........................................................................38 4. Übung: Listen.....................................................................41 2.8 Zitate .....................................................................................43 2.8.1 Lange Zitate ...........................................................................43 2.8.2 Zitatquelle .............................................................................44 2.8.3 Kurze Zitate............................................................................45 2.9 Logische Auszeichnungen......................................................46 2.9.1 Hervorhebung ........................................................................46 2.9.2 Starke Hervorhebung (Fettung) ..............................................47 2.9.3 Kurzen Quelltext anzeigen .....................................................48 2.9.4 Langen Quelltext anzeigen.....................................................48

12

Inhaltsverzeichnis

2.10 2.11 2.11.1 2.11.2 2.12 2.13 2.14 2.14.1 2.14.2 2.14.3 2.14.4 2.14.5 2.14.6 2.14.7 2.14.8 2.14.9 2.14.10 2.15

Bilder einbinden ....................................................................50 Tabellen.................................................................................52 Tabellenzeilen .......................................................................53 Tabellenzellen .......................................................................54 5. Übung: Tabellen.................................................................58 Hyperlinks .............................................................................59 Elemente zum Gruppieren......................................................61 6. Übung: Gruppieren ............................................................62 Besondere Tags .....................................................................66 … ..........................................................67

…

............................................................67 … und <del>… .................................................68 ….......................................................................68 <wbr /> ...................................................................................69

…

…

.................................................69 …...........................................................................71 … ...........................................................................72 <samp>…....................................................................72 … .........................................................................72 Webadressen für dieses Kapitel .............................................73

3

Eclipse............................................................................................... 75 3.1 Installation der Entwicklungsumgebung ................................75 3.1.1 Download der Software..........................................................76 3.1.2 Installation für Windows-Systeme ..........................................76 3.1.3 Installieren von Eclipse ..........................................................77 3.1.4 Installieren der Plug-Ins für Eclipse ........................................79 3.1.5 Anpassen der Perspektive von Eclipse ...................................83 3.2 Der Browser ...........................................................................85 3.2.1 Firebug ..................................................................................85 3.2.2 Web Developer ......................................................................87 3.2.3 GridFox ..................................................................................87 3.3 Webadressen für dieses Kapitel .............................................89

4

Cascading Style Sheets ..................................................................... 91 4.1 CSS-Grundlagen.....................................................................91 4.1.1 CSS-Definitionen in HTML einbinden......................................91 4.1.2 Der Aufbau einer CSS-Regel ...................................................93 4.1.3 Darstellung von Elementen ....................................................94 4.1.4 Positionierung von Elementen................................................96 4.1.5 Werte in CSS ..........................................................................97 4.2 Selektoren .............................................................................99 4.2.1 Universeller Selektor..............................................................99

Inhaltsverzeichnis

4.2.2 4.2.3 4.2.4 4.2.5 4.2.6 4.2.7 4.2.8 4.2.9 4.2.10 4.2.11 4.2.12 4.3 4.3.1 4.3.2 4.4 4.4.1 4.4.2 4.4.3 4.4.4 4.5 4.6 4.6.1 4.6.2 4.7 4.7.1 4.7.2 4.7.3 4.8 4.8.1 4.8.2 4.9 4.9.1

13

Typ-Selektor.........................................................................100 Kontext-Selektor ..................................................................101 Kind-Selektor .......................................................................102 Benachbarte Geschwisterelemente......................................103 Klassen-Selektor..................................................................104 ID-Selektor...........................................................................105 Allgemeiner Attribut-Selektor ...............................................106 Exakter Attribut-Selektor ......................................................107 Teilweiser Attribut-Selektor ..................................................108 Pseudoklassen ....................................................................110 Pseudoelemente..................................................................114 Hierarchie der CSS-Definitionen ...........................................117 Spezifität .............................................................................118 Vererbung ............................................................................118 Text und Schrift formatieren.................................................120 Überschriften .......................................................................120 Eine kreative Überschrift ......................................................120 7. Übung: Textformatierung mit CSS.....................................120 Schriften festlegen...............................................................130 8. Übung: Überschriften mit CSS ..........................................146 Eigene Schriftart verwenden ................................................147 Positionieren von Elementen................................................149 9. Übung: Widgets ...............................................................150 Navigation ...........................................................................167 10. Übung: Vertikale Navigation...........................................167 Navigation mit Registerkarten ..............................................176 11. Übung: Karteikarten .......................................................176 Registerkarten mit abgerundeten Ecken...............................187 12. Übung: Runde Ecken für alle Browser.............................188 Layout..................................................................................189 Zweispaltiges Layout ohne Tabellen.....................................189 13. Übung: Zweispaltiges Layout .........................................189 Eine vertikale Galerie ...........................................................195 14. Übung: Senkrechte Galerie ............................................196 Ein flexibles Layout ..............................................................200 15. Übung: Flexibles Layout .................................................200 Bilder formatieren................................................................202 Bilder im Polaroid-Stil ..........................................................202 16. Übung: Bilder mit Rahmen und Titeln .............................202 Eine kreative Bilddarstellung ...............................................206 17. Übung: Bilder im Fotoalbum-Stil ....................................206 Besondere Formate..............................................................209 Zitate formatieren ................................................................209

14

Inhaltsverzeichnis

4.9.2 4.10 4.10.1

4.10.2 4.10.3 4.11 4.11.1

18. Übung: Zitate .................................................................209 Eine semantisch richtige Visitenkarte ..................................210 19. Übung: Visitenkarte .......................................................211 Formatierungen mit CSS 3....................................................213 Schatteneffekte ...................................................................214 20. Übung: Schatten bei Bildern ..........................................214 21. Übung: Textschattierungen ............................................217 Die Deckkraft von Elementen ...............................................220 22. Übung: Fade-Out............................................................220 Mehrspaltiger Textsatz.........................................................222 23. Übung: Layout im Zeitungsstil........................................222 Webadressen für dieses Kapitel ...........................................224 Tools und Online-Hilfen .......................................................225

Anhang............................................................................................ 227 A.1 Fachbegriffe.........................................................................227 A.2 Websichere Farben ..............................................................230 A.3 Quellcodes ..........................................................................231 Lösung zur 2. Übung ............................................................231 Lösung zur 3. Übung ............................................................234 Lösung zur 4. Übung ............................................................236 Lösung zur 5. Übung ............................................................237 Lösung zur 6. Übung ............................................................240 Lösung zur 7. Übung ............................................................253 Lösung zur 8. Übung ............................................................256 Lösung zur 9. Übung ............................................................258 Lösung zur 10. Übung ..........................................................261 Lösung zur 11. Übung ..........................................................264 Lösung zur 12. Übung ..........................................................266 Lösung zur 13. Übung ..........................................................269 Lösung zur 14. Übung ..........................................................273 Lösung zur 15. Übung ..........................................................277 Lösung zur 16. Übung ..........................................................280 Lösung zur 17. Übung ..........................................................283 Lösung zur 18. Übung ..........................................................286 Lösung zur 19. Übung ..........................................................289 Lösung zur 20. Übung ..........................................................292 Lösung zur 21. Übung ..........................................................294 Lösung zur 22. Übung ..........................................................296 Lösung zur 23. Übung ..........................................................298 Stichwortverzeichnis ....................................................................... 301

15

1

Do’s & Dont’s im Webdesign

Im Webdesign gibt es einiges, was wir zwar tun könnten, aber möglichst vermeiden sollen. Wenn wir uns an diese ungeschriebenen Gesetze halten, ersparen wir uns einige Probleme bei unseren Websites. Beginnen wir mit einigen formalen Vorgaben: Datei- und Verzeichnisnamen sollten: • keine Leerzeichen enthalten • nur aus Buchstaben (a – z und A – Z) und Ziffern bestehen • Unterstriche (_) sind erlaubt • Groß-/Kleinschreibung ist wichtig • Datei- und Verzeichnisnamen sollten »klingende« Namen verwenden. Da wir das Betriebssystem eines Webservers nicht vorab kennen, sollten wir uns auf den kleinsten gemeinsamen Nenner bei den Namen einigen. Denn ein UnixSystem speichert die Zeichen anders als ein Windows-System. So unterscheiden UNIX-Systeme bei der Groß-/Kleinschreibung und Windows-Systeme nicht. Allein dadurch können uns einige Probleme entstehen, wenn wir uns nicht an die Regeln halten. Struktur Dateien sollten immer logisch gruppiert werden: • Bilder in das Verzeichnis \images • Style Sheets in das Verzeichnis \css • JavaScript-Skripte in das Verzeichnis \js • Für jedes Website-Thema sollte ein Verzeichnis erstellt werden: • Beispiel-Fotos, Grafiken, Zeichnungen, Skulpturen • Die Verzeichnisstruktur sollte nicht mehr als drei Ebenen aufweisen. • In jedem Verzeichnis sollte eine Datei namens index.html stehen.

16

Kapitel 1: Do’s & Dont’s im Webdesign

• Verweise auf Dateien erfolgen immer mit einer relativen Pfadangabe (dazu gleich mehr). Eine gute und logische Struktur erleichtert uns die Arbeit an einer Website immens. Wenn wir bei allen unseren Sites die gleichen Verzeichnisse anlegen und verwenden, fällt uns die Arbeit leichter. Webserver sind nichts anderes als Computer, die auf eine Datenanforderung reagieren. Wenn ein Anwender eine Domäne verlangt, so ist das für den Webserver ein Verzeichnis auf seiner Festplatte. Findet der Server eine Datei mit dem Namen index.html, so schickt er diese an den anfordernden Browser. Fehlt diese Datei jedoch, zeigt der Webserver den Inhalt des Verzeichnisses als Liste an. Und gerade das wollen wir den Benutzern unserer Website nicht zeigen. Daher sollten wir in jedem Verzeichnis eine Datei namens index.html anlegen.

1.1

Referenzieren von Dateien

Webseiten bestehen ja im Grunde nur aus reinem Text, aber trotzdem sehen wir Bilder, hören Sound oder es wird ein Video abgespielt. Zusätzlich gibt es noch Hyperlinks, CSS-Dateien oder externe JavaScript-Dateien. Auf all diese Dateien oder Links müssen wir Referenzen einrichten. Über eine solche Referenz binden wir externe Medien in unsere textbasierten Webseiten ein. Referenzen entstehen zwar immer auf die gleiche Art, aber trotzdem müssen wir sie komplett verstanden haben, um sie zu beherrschen. Wir müssen also Wege (auch Pfade genannt) in den verschiedensten Attributen (beispielsweise href "..." beim a-Tag oder URL(...) in CSS) bei HTML und CSS angeben.

1.2

Auf fremde Quellen referenzieren

Die einfachste Methode ist die absolute Adressierung auf eine fremde Quelle. Damit ist gemeint, dass der exakte Ort der Zieldatei bekannt ist und auf diese verwiesen werden kann. Beispiel http://www.google.at http://www.example.org/ http://www.example.org/index.html http://www.example.org/index-html#impressum http://www.example.org/kontakte.pdf http://www.example.org/images/logo.gif

1.2 Auf fremde Quellen referenzieren

17

Diese Art der Referenzierung (Adressierung) nennen wir absolut.

1.2.1

In der eigenen Website verweisen

Innerhalb der eigenen Website können wir natürlich auch mit absoluten Referenzen arbeiten, aber es ist nicht üblich. Besser arbeiten wir mit relativen Referenzen. Bei dieser Art werden einfach der Domänenname und das Protokoll weggelassen. Wir navigieren also mit der Pfadangabe durch die Verzeichnisstruktur der eigenen Website. Relativ wird dies genannt, da der Speicherort der aktuellen Datei als Ausgangspunkt verwendet wird und die Referenz relativ zu diesem Punkt erfolgt. Bei diesem Beispiel gehen wir immer vom Wurzelverzeichnis (root) aus. Damit ist die Datei gemeint, die die Referenz enthält. Nehmen wir an, diese Datei hat den Namen portfolio.html und steht im Hauptverzeichnis unserer Domäne. Beispiel: Verweis auf Startseite Sobald wir von der Datei auf die Startseite index.html verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden: /index.html

Beispiel: Verweis auf Bild in Unterverzeichnis Wollen wir in der Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz so aufbauen: /images/logo.gif

Bei dem folgenden Beispiel gehen wir davon aus, dass wir uns in der Datei info.html im Unterverzeichnis /standard befinden. Beispiel: Verweis auf Datei in höherem Verzeichnis Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir die folgende Schreibweise verwenden. Wir können mit zwei aufeinanderfolgenden Punkten eine Verzeichnisebene höher wechseln. Wir müssen so vorgehen, da wir uns ja in einem Unterverzeichnis des Hauptverzeichnisses befinden. ../index.html

Beispiel: Verweis auf Bild in höherem Verzeichnis Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher (in das Hauptver-

18

Kapitel 1: Do’s & Dont’s im Webdesign

zeichnis) und danach in das Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist. ../images/logo.gif

Bei den folgendenen Beispielen gehen wir davon aus, dass die Datei galerie.html im Verzeichnis /photos/paris gespeichert ist. Beispiel: Verweis auf Startseite in höherem Verzeichnis Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden. Mit einem einfachen Schrägstrich am Anfang wechseln wir immer ins Hauptverzeichnis. /index.html

Beispiel: Verweis auf Bild in entferntem Ordner Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher, ins Verzeichnis /photos. Danach geht es wieder eine Stufe höher ins Hauptverzeichnis und in der Folge ins Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist. ../../images/logo.gif

Beispiel: Verweis auf Indexseite in höherem Verzeichnis Mit dieser Referenz zeigen wir die Startseite des Verzeichnisses /photos an. ../index.html

1. Übung: Referenzieren Folgende Verzeichnisstruktur ist gegeben: |-index.html |-+images | | logo.gif | | back.png |-+css | | main.css |-+photos | | album1.html | |-+album1 | | | bild1.jpg | | | bild2.jpg

1.2 Auf fremde Quellen referenzieren

| | | |

19

| | subalbum1.html |-+subalbum1 | | bild5.jpg | | bild6.jpg

Wir wollen von den verschiedenen HTML-Dateien auf CSS-Dateien oder Bilder referenzieren. Dazu benötigen wir die Pfadangabe für die passende Datei. Ermitteln Sie den relativen Pfad für die Referenz auf • die Datei main.css in der Datei index.html • die Dateien bild1.jpg und bild2.jpg in der Datei album1.html • die Datei logo.gif in der Datei subalbum1.html • die Dateien bild5.jpg und bild6.jpg in der Datei subalbum1.html Die Lösungen für diese Übung lauten: css/main.css album1/bild1.jpg und album1/bild2.jpg ../../images/logo.gif ../subalbum1/bild5.jpg und ../subalbum1/bild6.jpg

21

2

Die Grundlage: Hypertext Markup Language (HTML)

Tags sind Marker in HTML. Sie dienen als Formatierungskommandos einer HTML-Seite. In der Folge werden wir die Grundregeln für Tags kennenlernen. Bei den folgenden Beschreibungen wird nur auf die Besonderheiten eingegangen. Die hier aufgeführten Grundregeln gelten aber immer.

2.1

Grundregeln

Allgemeine Merkmale • Alle HTML-Tags werden von spitzen Klammern < und > umschlossen. • Ein Tag besteht immer aus seinem Namen und kann im öffnenden Tag Attribute enthalten. • Tags werden in HTML immer nach dem LIFO-Prinzip (Last-In, First-Out) gesetzt. Beispiel einer gültigen Tag-Folge:

...

Beispiel einer ungültigen Tag-Folge:

22

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.2

HTML-Tags im praktischen Einsatz

Tags werden immer in Kleinbuchstaben geschrieben.

Der öffnende Tag lautet immer gleich wie der schließende. ...

Der schließende Tag beginnt immer mit einem Schrägstrich. ...

Hat der Tag keinen schließenden Partner, wird im öffnenden Tag der Schrägstrich vor der schließenden spitzen Klammer gesetzt.


Werte für Attribute in einem Tag werden immer in Anführungszeichen gesetzt. ...

2.3

Arten von Tags

Inline-Elemente Diese Tags werden vom Browser so eingesetzt, dass sie den Textfluss nicht unterbrechen, also keinen Umbruch einfügen. Block-Elemente Diese Tags erzeugen im Browser einen eigenen Block. Wir können uns das optisch als ein Rechteck auf der Seite vorstellen. Meistens wird unterhalb des Elements auch noch automatisch eine Leerzeile eingefügt.

2.4

Attribute bei den Tags

Allgemeines Jeder Tag kann über zusätzliche Attribute verfügen. Manche sind zum Steuern der Anzeige da, andere werden für CSS oder JavaScript benötigt. Weitere sind einfach sinnvoll, um Menschen mit Einschränkungen das Benutzen der Website zu erleichtern.

2.5 HTML-Entitäten

23

Kernattribute Diese Attribute können bei fast allen Tags verwendet werden. Falls in der Folge bei einem HTML-Tag nichts anderes vermerkt ist, können die folgenden Attribute verwendet werden. id Gibt dem Element eine eindeutige Kennung3. Mit dieser kann es mittels CSS oder JavaScript angesprochen werden. class Ordnet dem Element eine oder mehrere Klassen aus einem Style Sheet zu. style Wendet einen bestimmten CSS-Stil auf dieses Element an. title Gibt dem HTML-Element einen eigenen Titel. Dieser wird als Hinweis im Browser angezeigt, sobald der Mauszeiger auf das Element zeigt.

2.5

HTML-Entitäten

Betrachten wir vorab einmal, was die Wikipedia über Entitäten zu sagen hat. Der Begriff wird dort folgendermaßen definiert: »Als Entität (synonym Informationsobjekt; englisch Entity) wird in der Datenmodellierung ein eindeutig zu bestimmendes Objekt bezeichnet, dem Informationen zugeordnet werden. Die Objekte können materiell oder immateriell sein.« Was bedeutet das für uns? In HTML können nicht alle Zeichen direkt in die Datei geschrieben werden. Denn manche Zeichen dienen der Steuerung der Datei oder sind für spezielle Funktionen reserviert. Diese Zeichen müssen dann als Escape-Sequenz angegeben werden. Die Angabe dieser Sequenz beginnt immer mit einem Ampersand (Et-Zeichen oder kaufmännisches Und, &) und endet immer mit einem Semikolon (Strichpunkt, ;). Dazwischen kann entweder eine benannte Sequenz oder ein UnicodeCodepoint (dezimal oder hexadezimal) stehen. Üblicherweise wird bei HTML die benannte Version bevorzugt.

3 Id steht hier für Identification.

24

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.5.1

Wichtige Entitäten

Es gibt für jedes Zeichen eine dezimale Escape-Sequenz und auch für viele Zeichen eine benannte Version. Hier werden nur die wichtigsten für den alltäglichen Gebrauch notwendigen Entitäten aufgeführt. Zeichen

Entität

dezimal

Memo

 

 

Nicht umbrechendes Leerzeichen (n non breaking space)

"

"

"

Einfaches doppeltes Anführungszeichen (q quotation mark)

&

&

&

Et-Zeichen; es kann nicht direkt dargestellt werden, da es für die Escape-Sequenz reserviert ist (a ampersand)

'

'

'

Einfaches Anführungszeichen, Apostroph (a apostroph)

<

<

<

Kleiner-Zeichen; es kann nicht direkt dargestellt werden, da es für die Tags reserviert ist (lless than)

>

>

>

Größer-Zeichen; es kann nicht direkt dargestellt werden, da es für die Tags reserviert ist (g greater than)

§

§

§

Paragraphen Zeichen (ssection sign)

©

©

©

Copyright-Symbol (ccopyright sign)

®

®

®

Symbol für eingetragenes Warenzeichen (rregistered trademark)

™

™

®

Warenzeichen (ttrademark)

2

²

²

Hoch zwei

3

³

³

Hoch drei

€

€

€

Euro-Zeichen

•

·

·

Punkt in der Mitte der Zeile

•

•

•

Aufzählungszeichen (b bullet)

‰

‰

‰

Promille-Zeichen

♠

♠

♠

Pik-Zeichen (black spade suit)

♣

♣

♣

Treff-Zeichen (auch Kreuz, black club suit)

♥

♥

♥

Herz-Zeichen (black heart suit)

♦

♦

♦

Karo- oder Promille-Zeichen (black diamond suit)

2.6 HTML-Struktur

Zeichen

Entität

dezimal

Memo

ß

ß

ß

Scharfes s

ä

ä

ä

Kleines Umlaut-a

Ä

Ä

Ä

Großes Umlaut-A

ö

ö

ö

Kleines Umlaut-o

Ö

Ö

Ö

Großes Umlaut-O

ü

ü

ü

Kleines Umlaut-u

Ü

Ü

Ü

Großes Umlaut-U

à

à

à

Kleines a mit Accent grave

æ

æ

æ

Kleine ae-Ligatur

Æ

Æ

Æ

Große AE-Ligatur

œ

œ

œ

Kleine oe-Ligatur

Œ

Œ

Œ

Große OE-Ligatur

25

Alle nationalen Sonderzeichen werden immer mit den entsprechenden Escape-Sequenzen dargestellt!

2.6

HTML-Struktur

Jede HTML-Datei muss mindestens die folgenden Tags umfassen: Beispiel für minimales HTML-Dokument <meta http-equiv "content-type" content "text/html; charset UTF-8"> ... ... ...

26

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.6.1

Document Type Definition (DTD)

Definiert den Dokumententyp laut W3C-Standard. Die Dokumenttyp-Deklaration4 teilt dem Browser mit, nach welchem Standard er das HTML-Dokument anzeigen soll. Das ist wichtig für die browserunabhängige Anzeige von Internetseiten. Es gibt verschiedene DTDs, von denen uns zwei besonders interessieren. Die DTD darf nur als erste Zeile vor dem öffnenden html-Tag vorkommen. Strict In der strict-Variante sind die Verschachtelungsregeln für HTML-Elemente strenger und sauberer formuliert. Alle Inhalte müssen in sogenannten BlockElementen stehen. Verschiedene Tags – besonders zur Formatierung – werden nicht verwendet. Beispiel

Transitional Wird benutzt, wenn einige der in der strict-Variante nicht erlaubten Elemente und Attribute verwendet werden. In der Variante Transitional sind zum Beispiel die Regeln für die Elementverschachtelung etwas milder. Es ist nach dieser Variante erlaubt, zwischen den body-Tags nackten Text außerhalb eines weiteren Elements zu notieren. Dieser Dokumententyp wird auch benötigt, wenn Links mit dem target-Attribut verwendet werden. Beispiel

2.6.2

Der html-Tag

Er kennzeichnet den Beginn und das Ende einer HTML-Datei. Vor dem öffnenden Tag darf nur die DTD stehen. Nach dem schließenden Tag darf kein weiterer Text oder Tag folgen. Jede HTML-Datei kann nur einen html-Block besitzen!

4 kurz DTD

2.6 HTML-Struktur

27

Syntax ...

Attribute id

DTD strict, transitional

Bemerkung

Der Tag kann nur einmal vorkommen. Er muss entweder als erste beziehungsweise letzte Zeile im Dokument gesetzt werden. Falls eine DTD verwendet wird, muss der öffnende -Tag der DTD folgen und der schließende Tag als letzte Zeile gesetzt werden.

2.6.3

Der head-Tag

Im Bereich des head-Blocks stehen Informationen über die HTML-Datei. Damit kann der Browser die Seite richtig darstellen. Zudem verwenden Suchmaschinen spezielle Tags aus diesem Bereich. Jede HTML-Datei kann nur einen Kopfbereich besitzen! Syntax ...

Attribute id

DTD strict, transitional

Bemerkung

Der Tag ist nur ein Behälter für andere Elemente und hat keinen eigenen Inhalt. Er muss direkt nach dem html-Tag verwendet werden und kann nur folgende Elemente enthalten: script – style – meta – link – object – isindex – base

28

2.6.4

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Der Zeichensatz

Legt fest, welche Zeichenkodierung die HTML-Datei verwendet. Diese Angabe ist für den Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Das vermeidet hässliche Zeichen auf einer Website. Beispiel für Zeichensatzkodierung ... <meta http-equiv "content-type" content "text/html; charset UTF-8"> ...

Die Erklärung zu den meta-Tags erfolgt weiter unten. Es gibt verschiedene Zeichensätze (charset). In der Praxis verwenden wir jedoch nur UTF-85, da es uns einige Dinge erleichtert. Der Zeichensatz ist der erste Tag nach dem head-Tag und er wird immer angegeben!

2.6.5

Der title-Tag

Der Inhalt des title-Tags wird beim Benutzer an verschiedenen Stellen angezeigt: • im Browser in der Titelzeile • im Browser in den Reitern (sogenannte Tabs) • vom Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) • im Browser in der Liste der bereits besuchten Seiten (Chronik) Wenn die HTML-Datei zu den Suchtreffern einer Suche gehört, bieten Suchmaschinen den Titel der Datei als anklickbaren Link an. Damit ist klar, dass der Titel aussagekräftig und klar sein muss. Wir denken daran, dass bei vielen Reitern im Browser nur die ersten Zeichen dargestellt werden. Daher ist es wichtig, dass wir bereits in den ersten 10 bis 15 Zeichen die wichtigste Information transportieren.

5 8-Bit Unicode Transformation Format

2.6 HTML-Struktur

29

Syntax

Attribute

Kernattribute DTD strict, transitional

Bemerkung

Dieser Tag ist nach der Definition von HTML 4.01 obligatorisch (verpflichtend). Der Inhalt darf nur aus ASCII6-Zeichen (Buchstaben, Zahlen und einfachen Satzzeichen) bestehen. Alle Sonderzeichen dürfen nicht als HTMLEntitäten codiert sein. Er darf nur im head-Bereich vorkommen. Beispiel für title-Tag ... ... ...

Bild 2.1: Darstellung des title-Tags im Browser

6 American Standard Code for Information Interchange ist ein einheitlicher Code, bei dem jedes Zeichen durch

eine eindeutige Kodierungsnummer (0-255) angesprochen wird.

30

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.6.6

Der body-Tag

Im Bereich des body-Blocks stehen die Inhalte der HTML-Datei. Hier kommen alle Informationen hin, die der Benutzer im Browser sehen bzw. hören soll. Syntax ...

Attribute

Kernattribute DTD strict, transitional

Bemerkung

Dieses Element ist in HTML 4.01 als obligatorisch eingeführt worden. Alle Attribute wurden zu Gunsten von CSS als veraltet eingestuft. Es muss direkt nach dem schließenden head-Tag folgen. Der schließende Tag muss direkt vor dem schließenden html-Tag stehen. Jede HTML-Datei kann nur einen body-Bereich besitzen!

2.7

Text mit HTML strukturieren

Hier kommen wir zu den Grundregeln, um Texte in HTML strukturiert darzustellen. Es ist wichtig, diese Tags im Schlaf zu beherrschen. Einerseits geben sie dem Text im Web Struktur und Gewicht. Andererseits werden diese Tags auch von Suchmaschinen zur Gewichtung und zum Indizieren verwendet.

2.7.1

Der Absatz

Absätze können in HTML nicht einfach durch einen Umbruch in der Zeile eingefügt werden, wir brauchen dazu den p-Tag7, um den Browser anzuweisen, dass ein Absatz ausgegeben werden soll. Syntax

...

7 paragraph

2.7 Text mit HTML strukturieren

31

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

Bemerkung

Absätze können keine anderen Blockelemente enthalten. Beispiel für einen Absatz ...

Dies ist ein normaler Absatz!

Dies ist ein zweiter Absatz!

...

Bild 2.2: Darstellung des p-Tags im Browser

2. Übung: Formatierung mit HTML Wir erstellen eine neue HTML-Datei mit dem Namen uebung2.html. Danach nehmen wir einen Blindtext8 und formatieren ihn wie gezeigt in Absätzen. Achten Sie auch auf die entsprechenden Escape-Sequenzen und die Formatierung und Struktur der HTML-Datei.

8 Verwenden Sie hierzu den Text über die Gummibärchen. Sie finden ihn unter www.buch.cd. Alternativ gibt es im

Web zahlreiche Blindtext-Generatoren, zum Beispiel http://www.blindtexte.de.

32

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.3: Lösung der 2. Übung im Browser

2.7.2

Der Zeilenumbruch

Normalerweise kümmert sich der Browser um den passenden Zeilenumbruch. Er beginnt eine neue Zeile, wenn nicht mehr genug Platz in der aktuellen Zeile vorhanden ist. Der Browser ignoriert auch Zeilenschaltungen, die einfach im Texteditor oder der Entwicklungsumgebung eingegeben werden. Manchmal wollen wir aber eine Zeile an einer bestimmten Stelle beenden. Dafür gibt es den manuellen Zeilenumbruch9, kurz br.

9 Abgeleitet von «line-break«

2.7 Text mit HTML strukturieren

33

Syntax


Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Der Break-Tag hat keinen schließenden Tag. Daher werden am Ende vor der schließenden Klammer ein Leerzeichen und ein Schrägstrich eingefügt, um die geforderte Konformität für HTML 4.01 zu erreichen. Mehrere aufeinanderfolgende Break-Tags können von Browsern zu einem Zeilenumbruch zusammengefasst werden. Es ist nicht sinnvoll, mehrere brTags aufeinander folgen zu lassen, da andere Möglichkeiten zur Strukturierung des Textes zur Verfügung stehen. Da die Browser jede in der Entwicklungsumgebung eingegebene Zeilenschaltung ignorieren, müssen wir diese mit einem br-Tag erzeugen. Es ist aber gleichgültig, ob der Break-Tag mitten im Text, am Ende oder am Anfang einer Zeile steht. Beispiel für Zeilenumbruch Der Browser wird hier nach dem Wort hat einen Zeilenumbruch einfügen. ...

Dieser Text steht in einer Zeile und hat
40 Zeichen.

...

Bild 2.4: Darstellung des br-Tags im Browser

Oft wäre es praktisch, wenn wir Wörter und Zahlen zu einem Wort zusammenfügen und somit sicherstellen könnten, dass dazwischen kein Zeilenumbruch erfolgt. Dies brauchen wir immer wieder bei einem Datum oder bei Zahlen mit

34

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

einer Maßeinheit. Bei den HTML-Entitäten haben wir schon den non-breakingspace (das nicht umbrechende Leerzeichen) gesehen. Diese Entität ist genau für diese Zwecke gedacht. Beispiel für nicht-umbrechende Leerzeichen ...

Dieser Text steht in der Zeile und hat 40 Zeichen.
Genauso kann man ein Datum (2. Juni 2008) formatieren. Damit wird es als ein Wort vom Browser erkannt.

...

Bild 2.5: Darstellung des br-Tags mit   im Browser

Wie ist das aber bei langen Wörtern? Der Browser kennt keine automatische Silbentrennung und ein langes Wort wird einfach in die nächste Zeile geschoben, was zu ungewollten Leerräumen führen kann. Dafür gibt es die Entität ­ (soft hyphen, bedingter Trennstrich). Wird diese Entität eingefügt, so erzeugt sie einen Trennstrich, wenn sie am Ende der Zeile steht. Beispiel für bedingte Trennstriche ...

Dieser Text steht in einer Zeile. Um den bedingten Trennstrich auch erfolgreich ausprobieren zu können brauchen wir jetzt ein langes Wort wie wir es ja alle kennen: Donaudampf­schiffahrts­  kapitänsmützenrand.

...

Bild 2.6: Darstellung des br-Tags mit ­ im Browser

2.7 Text mit HTML strukturieren

35

Aber wir müssen aufpassen, denn ­ wird zwar von allen modernen Browsern grundsätzlich unterstützt. Aber es gibt beim Internet Explorer Probleme, denn der sieht jedes Auftreten der Entität als Worttrenner. Er wird also bei jedem Auftreten einen Bindestrich einfügen, ganz gleich, ob das »soft hyphen« am Zeilenende steht oder nicht.

2.7.3

Textgliederung durch Überschriften

In HTML stehen sechs verschiedene Überschriftenebenen zur Verfügung. Die Überschriften-Tags sind an einem h zu erkennen (h = headline), auf das die Nummer der zugeordneten Überschriftenebene folgt:

,

,

und so weiter. Überschriften erleichtern die Strukturierung des Textes. Sie werden wie Überschriften in einem gedruckten Text verwendet, die Überschrift 1 ist also auch wichtiger als die Überschrift der Ebene 2 und so weiter. Natürlich müssen sie auch in der richtigen Reihenfolge vorkommen, es darf also keine Überschrift 2 vor der Ebene 1 auftreten. Gerade für die Suchmaschinenoptimierung ist der Einsatz von Überschriften wichtig. Denn dadurch erkennen Suchmaschninen die wichtigen Begriffe innerhalb eines Textes und können so die Struktur »lesen«. Als Faustregel gilt, dass pro HTML-Datei nur eine Überschrift 1 vorkommen soll. Sobald wir wieder ein wichtiges Thema beginnen, das eine Hauptüberschrift braucht, sollten wir eine neue HTML-Datei erstellen. Suchmaschinen bewerten Dokumente mit vielen Überschrift-1-Ebenen schlechter. Die Browser fügen vor bzw. nach einer Überschrift automatisch Leerraum ein. Syntax

...

...

...

...

...

...

Attribute

Kernattribute Art

Block-Element

36

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

DTD strict, transitional

Bemerkung

Überschriften können keine anderen Blockelemente enthalten. Beispiel für Überschriften ...

Was sind Gummibärchen?

Freilebende Gummibärchen gibt es nicht

Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man.

...

Bild 2.7: Darstellung des Überschriften-Tags im Browser

3. Übung: Überschriften Öffnen Sie die Datei uebung2.html und speichern Sie sie unter dem Namen uebung3.html ab. Gliedern Sie den Text jetzt mit verschiedenen (sinnvollen) Überschriften.

2.7 Text mit HTML strukturieren

Bild 2.8: Lösung der 3. Übung im Browser

37

38

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.7.4

Aufzählungen

In manchen Texten müssen wir einzelne Punkte aufzählen, entweder mit oder ohne Hierarchie. Natürlich können wir das per Hand machen, aber praktischer ist es mit den Tags, die HTML anbietet. Beide Arten von Listen haben eine Gemeinsamkeit: Sie verwenden denselben liTag10, um einzelne Einträge zu kennzeichnen. Syntax

...

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

Bemerkung

Dieser Tag darf nur innerhalb der Tags ul und ol (siehe unten) vorkommen. Unsortierte Liste Die unsortierte Liste11 stellt uns eine Aufzählung ohne jede Hierarchie zur Verfügung. Syntax

...

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

10 Englisch: »list item«, Listenelement 11 Englisch: »unordered list«

2.7 Text mit HTML strukturieren

39

Bemerkung

Das Aufzählungszeichen wird normalerweise vom Browser eingestellt. Dieser Tag darf nur li-Tags enthalten. Beispiel für eine unsortierte Liste ...

• Von nichts kommt nichts
• Üben, üben, üben
• Webdesign ist super!

...

Bild 2.9: Darstellung des ul-Tags im Browser

Sortierte Liste Die sortierte Liste12 funktioniert fast gleich wie die vorherige. Aber statt ein einfaches Aufzählungszeichen wird eine automatische Nummerierung zur Verfügung gestellt. Syntax

...

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

12 ordered list

40

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bemerkung

Das Aufzählungszeichen wird normalerweise vom Browser eingestellt. Dieser Tag darf nur li-Tags enthalten. Beispiel für eine sortierte Liste ...

1. Von nichts kommt nichts
2. Üben, üben, üben
3. Webdesign ist super!

...

Bild 2.10: Darstellung des ol-Tags im Browser

Verschachtelte Listen Natürlich können wir Listen auch verschachteln. Wir beginnen einfach innerhalb eines li-Elements eine neue Liste. Der Browser kümmert sich dann um die Darstellung der passenden Hierarchie. Beispiel für verschachtelte Listen ...

1. Sprüche
   1. Von nichts kommt nichts
   2. Üben, üben, üben
2. Webdesign ist super, wenn man das beherrscht:
3. Die Grundstruktur
4. Die Entitäten
5. Die Tags
   • Attribute
   • Elementart
   
   
   2.7 Text mit HTML strukturieren
   
   41
   
   
   • DTD

...

Bild 2.11: Darstellung von verschachtelten Listen im Browser

4. Übung: Listen Erstellen Sie eine neue Datei mit dem Namen uebung4.html. In dieser Datei erstellen Sie eine unsortierte Liste mit den Farben der Gummibärchen in einer Packung. Danach erstellen Sie eine zweite sortierte Liste, mit der Sie die Farben nach Ihren Vorlieben ordnen. Vergessen Sie nicht, die HTML-Struktur richtig vorzunehmen und auch passende Titel einzufügen.

42

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.12: Lösung der 4. Übung im Browser

Bild 2.13: Lösung der 4. Übung im Quellcode

2.8 Zitate

2.8

43

Zitate

Es gibt zwei Varianten, um etwas zu zitieren (also eine Aussage von jemand anderem zu verwenden). Bei längeren Texten oder mehreren Absätzen wird der folgende Tag verwendet:

2.8.1

Lange Zitate

Syntax

...

Attribute

Kernattribute cite

"URL"

Gibt die Adresse der Originalquelle an. Art

Block-Element DTD strict, transitional

Bemerkung

Die Formatierung dieses Elements ist nicht vorhersagbar, da es dem Browser überlassen ist, wie es formatiert wird. Aber üblicherweise wird es als eingerückter Text (links und rechts) dargestellt. Beispiel für ein längeres Zitat ...

Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen.

...

44

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.14: Darstellung des blockquote-Tags im Browser

2.8.2

Zitatquelle

Syntax ...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Wird vom Browser üblicherweise kursiv dargestellt. Beispiel für eine eingefügte Zitatquelle ...

Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen. Clemens Gull

...

2.8 Zitate

45

Bild 2.15: Darstellung des cite-Tags im Browser

2.8.3

Kurze Zitate

Für kürzere Zitate wie einen Satz oder eine Wortgruppe gibt es auch noch einen zweiten Tag. Der Bezeichner q ist vom englischen Wort quote abgeleitet, was »Zitieren« oder auch »Zitat« bedeutet. Syntax ...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Die Formatierung dieses Elements ist nicht vorhersagbar, da es dem Browser überlassen ist, wie es formatiert wird. Beispiel für ein kurzes Zitat ...

Der q-Tag ist für kurze Zitate vorgesehen: Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Dadurch kann sich das Aussehen von Browser zu Browser unterscheiden.

...

46

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.16: Darstellung des q-Tags im Browser

2.9

Logische Auszeichnungen

Bis jetzt haben wir die Auszeichnung von Texten nach dem Gesichtspunkt der Struktur kennengelernt, aber HTML bietet auch ein paar Möglichkeiten, Text hervorzuheben oder logisch zu kennzeichnen.

2.9.1

Hervorhebung

Syntax <em>...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Fast alle Browser stellen diesen Tag als kursiv13 dar. Die Abkürzung bedeutet emphasized14. Beispiel für Hervorhebungen ...

Zuerst genießt man. Dieser Genuss umfasst <em>alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie.

...

13 Der englische Ausdruck dafür ist »italic« 14 Zu Deutsch: Hervorgehoben

2.9 Logische Auszeichnungen

Bild 2.17: Darstellung des em-Tags im Browser

2.9.2

Starke Hervorhebung (Fettung)

Syntax <strong>...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Fast alle Browser stellen diesen Text fett15 geschrieben dar. Beispiel für eine Fettung ...

Zuerst genießt man. Dieser Genuss umfasst <strong>alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie.

...

Bild 2.18: Darstellung des strong-Tags im Browser

15 Die englische Bezeichnung für Fettschrift ist »strong«.

47

48

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.9.3

Kurzen Quelltext anzeigen

Syntax ...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Der Tag zeigt einen Befehl oder einen Quelltext16 an. Die meisten Browser formatieren diesen Tag mit einer nichtproportionalen Schrift wie zum Beispiel Courier. Beispiel für einen kurzen Quelltext ...

Am Besten werden kurze Zitate mit dem <em>q-Tag ausgezeichnet.
<strong>Beispiel
ein kurzes Zitat>

...

Bild 2.19: Darstellung des code-Tags im Browser

2.9.4

Langen Quelltext anzeigen

Bei manchen Webseiten brauchen wir eine exakte Wiedergabe17 des Quelltexts. Das heißt, es dürfen weder Zeichen noch Einrückungen verändert werden. Dafür wird der <pre>-Tag verwendet. 16 Auch Sourcecode genannt 17 Der Begriff »pre« leitet sich von »preformatted«, vorformatiert, ab.

2.9 Logische Auszeichnungen

49

Syntax <pre>...

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

Bemerkung

Alle Zeichen innerhalb dieses Tags werden trotzdem vom Browser interpretiert. Die meisten Browser verwenden zur Darstellung eine Schrift mit fester Laufweite, zum Beispiel Courier. Es ist oft sinnvoll, den pre-Tag mit einem code-Tag zu kombinieren. Damit erhalten wir eine logische und eine strukturelle Auszeichnung der Information. Beispiel für einen lägneren Quelltext ...

Die Struktur eines <em>html-Dokuments

<pre> <meta http-equiv "content-type"  content "text/html; charset UTF-8"> ... ... ...

50

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)



Bild 2.20: Darstellung des pre-Tags im Browser

2.10

Bilder einbinden

Auch klar strukturierte und logisch gegliederte HTML-Seiten würden kahl und nackt wirken, wenn wir nicht auch Grafiken, Bilder oder Fotos einbinden könnten. Auch dafür gibt es einen eigenen Tag. Wir können allerdings nicht jedes Grafik-Dateiformat in einer Website verwenden. Es gibt im Web nur drei Datentypen, die von jedem Browser angezeigt werden können, nämlich: • .jpg • .gif • .png Syntax

Attribute

Kernattribute alt "..."

Alternativtext, falls das Bild nicht angezeigt wird

2.10 Bilder einbinden

51

border "##"

Breite des Rahmens in Pixel oder Prozent height "##"

Höhe des Bildes in Pixel oder Prozent width "##"

Breite des Bildes in Pixel oder Prozent longdesc "..."

URL mit der ausführlichen Beschreibung des Bildes src "..."

(relativer) Quellpfad der Datei (verpflichtend) Art

Inline-Element DTD strict, transitional

Bei der strict-Variante muss das Element immer in einem Block-Element vorkommen. Die Attribute alt und title sollten aus Gründen der Barrierefreiheit immer verwendet werden. Die Größenangaben height und width sollten immer verwendet werden, da der Browser schon den entsprechenden Platz reservieren kann. Dadurch wird ein hässliches »Hüpfen« des Layouts verhindert. Es gibt keinen img-Tag ohne src, alt, title, height und width -Attribute! Beispiel für ein eingebettetes Bild ... ...

52

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.21: Darstellung des img-Tags im Browser

2.11

Tabellen

Es gibt nicht nur die »üblichen« Maßnahmen, um Text darzustellen. Wir können dafür auch Tabellen verwenden, um ein mehr oder weniger spaltenorientiertes Layout zu erzeugen. Aber wir fixieren uns nicht auf ein Tabellenlayout, denn wir werden noch andere Möglichkeiten kennenlernen. Auch Suchmaschinen bewerten Tabellenlayout oft nicht so gut, und es kann auch für uns als Designer unübersichtlich werden. Trotzdem können wir Tabellen sehr gut einsetzen. Tabellen bestehen aus einer Abfolge von verschiedenen Tags. Das macht den Einstieg etwas schwieriger. Daher werde ich zuerst nur die wichtigen Tags erklären und in der Folge beschreiben, wie wir eine Tabelle zusammenstellen. Syntax ...

Attribute

Kernattribute border "##"

Breite des Rahmens in Pixel oder Prozent cellpadding "##"

Abstand zwischen Zellenrand und Inhalt in Pixel oder Prozent cellspacing "##"

Abstand zwischen den Zellen in Pixel oder Prozent summary "..."

Zusammenfassung des Inhalts der Tabelle

2.11 Tabellen

53

width "##"

Breite der Tabelle in Pixel oder Prozent. Wird keine Breite angegeben und auch die Breite für die Zellen weggelassen, verwendet der Browser die gesamte Fensterbreite. Werden aber für die Zellen Werte für die Breite angegeben, addiert sie der Browser und verwendet die Summe als Tabellenbreite. Art

Block-Element DTD strict, transitional

Es dürfen nur die Tags caption, col, colgroup, thead, tfoot, tbody in dieser Reihenfolge enthalten sein. Innerhalb von tbody dürfen nur tr-Tags vorkommen. Falls nur ein tbody-Tag verwendet wird, darf dieser entfallen. Dann kann auch der tr-Tag direkt innerhalb von table vorkommen. Jede Tabelle hat die Attribute cellpadding, cellspacing, summary und width!

2.11.1 Tabellenzeilen Innerhalb einer Tabelle gibt es einzelne Zeilen. Sie sind durch den Tag (table row) gekennzeichnet. Syntax ...

Attribute

Kernattribute align "left|right|center|justify"

bestimmt die horizontale Ausrichtung des Inhalts valign "top|middle|bottom|baseline"

bestimmt die vertikale Ausrichtung des Inhalts Art

Block-Element

54

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

DTD strict, transitional

Bemerkung

Darf nur innerhalb der Elemente table, tbody, tfoot und thead vorkommen. Darf nur die Elemente th und td enthalten. Das Attribut align darf nur die Werte left (linksbündig), right (rechtsbündig), center (zentriert) oder justify (Blocksatz) enthalten. Das Attribut valign darf nur die Werte top (oben), middle (zentriert), bottom (unten) oder baseline (Grundlinie) enthalten.

2.11.2 Tabellenzellen Üblicherweise denken wir bei einer Tabelle an eine Folge von Zeilen und Spalten. In HTML ist dies jedoch ein wenig anders. Eine Tabelle besteht prinzipiell aus Zeilen. Innerhalb dieser Zeilen sind dann die Zellen enthalten. Daher ist es wichtig, dass jede Zeile aus gleich vielen Zellen besteht. Daraus ergeben sich dann die logischen Spalten. Syntax ...

Attribute

Kernattribute align "left|right|center|justify"

bestimmt die horizontale Ausrichtung des Inhalts valign "top|middle|bottom|baseline"

bestimmt die vertikale Ausrichtung des Inhalts abbr "..."

Hinweistext über den Inhalt für Screenreader colspan "##"

bestimmt die Anzahl der Spalten, die die Zelle einnimmt rowspan "##"

bestimmt die Anzahl der Zeilen, die die Zelle einnimmt height "##"

Höhe der Zelle in Pixel oder Prozent width "##"

Breite der Zelle in Pixel oder Prozent Wird bei allen Zellen keine Breite angegeben, so werden die Zellen gleichmäßig auf die Breite der Tabelle verteilt.

2.11 Tabellen

55

Wird nur für einige Zellen eine Breite angegeben, werden die restlichen Zellen gleichmäßig verteilt. Werden in einer Spalte verschiedene Breiten für eine Zelle angegeben, verwendet der Browser den größten Wert für alle Zellen. Bei verbundenen Zellen (colspan, rowspan) wird die Angabe der Breite vom Browser ignoriert. Art

Block-Element DTD strict, transitional

Bemerkung

Darf nur innerhalb des Elements tr vorkommen.Wird das Attribut colspan verwendet, ist width für diese Zelle wirkungslos. Wird das Attribut rowspan verwendet, ist height für diese Zelle wirkungslos. Jede Spalte hat zumindest eine Zelle mit width! Jede Zeile hat zumindest eine Zelle mit height! Beispiel für eine einfache Tabelle ...

Österreich	Frankreich	Deutschland
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen

...

56

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Das obige Beispiel zeigt eine Tabelle mit folgenden Eigenschaften: Durch das Attribut border wird ein Rahmen angezeigt, und mit width wird die Breite auf 300 Pixel festgelegt.

Bild 2.22: Beispiel einer einfachen HTML-Tabelle mit Rahmen und Breite

Beispiel für eine Tabelle mit Kopfzeile ...

<strong>Nationen
Österreich	Frankreich	Deutschland
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen

...

2.11 Tabellen

57

Wir sehen, dass die Tabelle aus dem ersten Beispiel um eine Kopfzeile ergänzt wurde:

Bild 2.23: Beispiel einer HTMLTabelle mit Überschrift

Beispiel für eine Tabelle mit Kopfzeile und Summenspalte ...

<strong>Nationen
Österreich	Frankreich	Deutschland	<strong>Summe
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen	148 Millionen

...

58

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Das obige Beispiel zeigt, dass wir eine Tabelle auch um eine Summenspalte ergänzen können.

Bild 2.24: Beispiel einer HTML-Tabelle mit Kopfzeile und Summenspalte

Natürlich können wir mit diesen Tags alleine noch nicht alle Layouts realisieren, die wir uns erträumen. Doch wenn wir bedenken, dass jeder td-Tag jedes andere Inline- und Block-Element enthalten kann, sehen wir, wie mächtig diese Konstruktion ist. Denn der td-Tag kann damit auch ein anderes table-Konstrukt enthalten. 5. Übung: Tabellen Erstellen Sie eine neue Datei mit dem Namen uebung5.html. In dieser Datei stellen Sie eine Tabelle (Breite: 700 Pixel) wie im folgenden Bild dar.

Bild 2.25: Darzustellende Tabelle der 5. Übung

2.12 Hyperlinks

2.12

59

Hyperlinks

Was wäre das ganze Web ohne die nützlichen Querverweise? Natürlich gibt es auch dafür einen Tag, den Anchor. Syntax ...

Attribute

Kernattribute accesskey "..."

Bestimmt ein Zeichen als HotKey href "..."

Gibt das Verweisziel an (relativ oder absolut) name "..."

Legt einen Ankernamen fest target " blank| top| parent| self"

Bestimmt das Ziel des Verweises Art

Inline-Element DTD strict, transitional

Bemerkung

Der Tag darf nur Inline-Elemente enthalten. Das Attribut target darf nur folgende Werte enthalten: blank (neues Fenster), top (oberster Frame), parent (Elternframe) oder self (eigener Frame, eigenes Fenster). Existiert ein a-Element mit dem Attribut name in der HTML-Datei, kann dieser Name mit einem vorangestellten #-Zeichen als href-Wert verwendet werden. Beispiel für Hyperlinks ...

Links

• Google Österreich
• 
  
  60
  
  Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)
  
  Guru 2.0
• HTL Salzburg
• Schule

Interne Verweise

• Home
• Photos
• Referenzen
• Lebenslauf
• Scribbles
• aktuelle Zeichnungen

Nach oben ...

2.13 Elemente zum Gruppieren

61

Bild 2.26: Beispiele für verschiedene a-Tags

2.13

Elemente zum Gruppieren

Es gibt noch zwei Tags, die wir in der Folge für das Layout und die Formatierung von Webseiten brauchen. Syntax

Attribute

Kernattribute Art

Block-Element DTD strict, transitional

Bemerkung

Das div-Element (division, Untergliederung) wird üblicherweise fürs Layout von Webseiten eingesetzt, da wir es mit CSS einfach formatieren können und

62

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

somit auch das Tabellenlayout vermeiden. Am besten stellen wir es uns wie ein Fenster in der Webseite vor. Beispiel für den div-Tag ... ...

Zusätzlich gibt es ein Inline-Element, das zur Formatierung eingesetzt werden kann: Syntax <span>...

Attribute

Kernattribute Art

Inline-Element DTD strict, transitional

Bemerkung

Dieses Element wird nur zur Formatierung eingesetzt, um innerhalb eines Textes bestimmte Formate anwenden zu können. Daher darf es auch nur andere Inline-Elemente enthalten. Beispiel für den span-Tag ...

Hier steht ein einfacher Text. Damit kann man etwas <span>formatieren. ...

6. Übung: Gruppieren Erstellen Sie ein neues Verzeichnis mit dem Namen uebung06. Darin erstellen Sie einen Unterordner images und eine Datei index.html. In das Verzeichnis für die Bilder speichern Sie die Dateien computer.png, home.png, info.png und user.png. Weiters benötigen wir im Hauptverzeichnis die Dateien index.html,

2.13 Elemente zum Gruppieren

63

info.html, links.html und user.html. Die Struktur sollte wie in der folgenden Abbildung aussehen:

Bild 2.27: Dateistruktur für die 6. Übung

Der Haupttitel der Site ist Meine Informationen. Die Seite Info erhält den Zusatztitel Infos, die Seite Links den Zusatz Hyperlinks und die Seite User den Zusatz Meine Person. Nun erstellen wir für alle Seiten ein Layout, wie in der folgenden Abbildung gezeigt:

Bild 2.28: Seitenlayout für die 6. Übung

64

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

In der Datei index.html zeigen wir die Informationen wie oben dargestellt an. Die Rahmen der Zellen sind nur für diese Anleitung notwendig. Auf der Website selbst sollen sie nicht dargestellt werden. Wenn wir auf ein Bild oder einen Text in der Symbolleiste klicken, wollen wir zur entsprechenden Seite kommen. Der Knopf der aktiven Seite ist mit keinem Hyperlink versehen. Die Tabelle ist so aufgebaut, dass sich der mittlere Bereich mit einer festen Breite von 700 Pixel innerhalb des Browserfensters zentriert. Auch die Symbolleiste zentriert sich oberhalb des Inhalts. Ein Knopf ist exakt 80 Pixel breit.

Bild 2.29: Layout der Seite Person in der 6. Übung

In der Datei user.html geben wir Informationen wie Name, Alter, Wohnort und Ausbildung an. Das Layout sehen wir in der vorigen Abbildung. Den title-Tag befüllen wir natürlich. Auch dies sehen wir in der Abbildung.

2.13 Elemente zum Gruppieren

65

Bild 2.30: Darstellung der Seite Infos in der 6. Übung

Für die Datei info.html können wir den Text aus der 3. Übung verwenden und ihn wie in der obigen Abbildung darstellen:

66

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.31: Darstellung der Links in der 6. Übung

In der Datei links.html stellen wir drei Hyperlinks aus Wikipedia dar und zitieren immer den 1. Absatz wie oben dargstellt. Wir achten natürlich bei allen Seiten auf einen sauber formatierten Quellcode sowie auf den Einsatz der richtigen Tags und Entitäten und beachten die Standard-HTML-Struktur.

2.14

Besondere Tags

Es gibt auch noch ein paar Tags, die wir verwenden sollten, um Barrierefreiheit herzustellen. Diesmal hatten wir uns nicht lange mit der Beschreibung der Tags auf, wir werden uns gleich ansehen, wie sie in der Praxis eingesetzt werden.

2.14 Besondere Tags

67

Aber warum sollten wir diese Tags überhaupt einsetzen? Dafür gibt es mehrere Gründe: 1. valides HTML 2. bessere Usability 3. barrierefreier Zugang 4. mehr Layoutmöglichkeiten

2.14.1 … Dieser Tag kann mit »Abkürzung« übersetzt werden. Dadurch haben wir die Möglichkeit, Texte (Abkürzungen) leichter zu erklären. Fährt der Benutzer mit der Maus über den Text zwischen den acronym-Tags, wird ein kleiner Hilfetext (ToolTip) eingeblendet. Beispiel Es werden immer wieder nur die Standard HTML-Tags verwendet.

Bild 2.32: Darstellung des acronym-Tags im Browser

2.14.2

…

Dieser Tag ist ein wenig eigenartig, aber nicht minder nützlich. Damit können wir wie mit cite oder acronym Semantik in HTML einführen. Mit dem address-Tag können wir die Adresse einer Person oder einer Firma auszeichnen. Dieser Tag setzt den Inhalt automatisch kursiv. Beispiel

Max Musterman
Musterweg 13a
A 5020 Salzburg

68

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

Bild 2.33: Darstellung des address-Tags im Browser

2.14.3 … und <del>… Diese Tags werden üblicherweise gemeinsam benutzt, obwohl das nicht zwingend vorgeschrieben ist. Sie sind besonders interessant, wenn wir Überarbeitungen eines Textes zeigen wollen. Denn der Text zwischen den ins-Tags18 wird mit einer Unterstreichung hervorgehoben. Das Gegenteil passiert mit dem Text zwischen den del-Tags19: Er wird durchgestrichen. Beispiel

Wir verwenden <del>ab + zu immer die Tags
ins (insertion) + del (delete)
um unsere Texte besser darzustellen.

Bild 2.34: Darstellung der insund del-Tags im Browser

2.14.4 … Der abbr-Tag20 wird ähnlich wie der acronym-Tag verwendet. Der Unterschied zwischen den beiden ist eigentlich gering. Ein Akronym ist eine Abkürzung, die als eigenes Wort gesprochen wird (zum Beispiel TFT). Eine Abkürzung ist dagegen eine Buchstabenkombination, die lang ausgesprochen wird (zum Beispiel DI für Diplomingenieur). Der Unterschied für normale Browser ist nicht merkbar, aber bei Screenreadern, bei Rechtschreibprüfungen oder für Suchmaschinen ist er wichtig.

18 Abgeleitet vom Begriff »insertion«, einfügen 19 Abgeleitet vom Begriff »delete«, löschen 20 Abgeleitet vom Begriff »abbrevation«, Abkürzung

2.14 Besondere Tags

69

Beispiel

Sehr geehrter Herr DI Guru 2.0!

Bild 2.35: Darstellung des abbr-Tags im Browser

2.14.5 <wbr /> Auf den wbr-Tag21 sind sicher die wenigsten bisher gestoßen. Er wird dort gesetzt, wo ein Zeilenumbruch sinnvoll wäre, aber nur, wenn das Zeilenende erreicht wird. Dies ist ideal, wenn der Browser die Zeilenumbrüche setzt und wir im Layout horizontale Scrollbalken vermeiden wollen. Da sind wir aber auch gleich beim Problem: Der Tag und seine Ersatz-Entitäten ​ bzw. ­ werden nicht von allen Browsern unterstützt. Die schlaueste Lösung ist daher, auf ​ auszuweichen, da diese Entität von allen wichtigen Browsern unterstützt wird und der IE 6, bei dem dies nicht der Fall ist, über kurz oder lang verschwinden wird. Beispiel

Hier steht ein sehr langer Text, der sich mit den Zeilenumbrüchen anpassen soll.<wbr /> Unglücklicherweise ist das aber nicht CrossBrowserkompatibel. <wbr />Daher muss man dafür auch irgendwelche Kunstgriffe verwenden.

2.14.6

…

…

Die Definitionsliste ist auch eine oft unterschätzte Tag-Kombination. Sie ermöglicht es, mit dem dl-Tag22 eine Liste zu beginnen. Der dt-Tag23 legt den Begriff

21 Abgeleitet vom Begriff »word break«, weicher Zeilenumbruch 22 Abgeleitet vom Begriff »definition list«, Definitionsliste 23 Abgeleitet vom Begriff »definition [list] term«, Definitionsausdruck

70

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

fest und der dd-Tag24 definiert den Term genauer. Durch Verschachtelung lassen sich damit auch baumartige Strukturen abbilden. Aber viel interessanter ist der Einsatz für Bilder mit Beschriftungen. Mit ein paar CSS-Definitionen dazu lassen sich so optisch ansprechende Bild-Beschriftungs-Kombinationen erzeugen, wie wir später sehen werden. Ein Beispiel möchte ich jedoch jetzt schon zeigen: Beispiel für eine Definitionsliste

Abbildung 1.1

/* Bild links ausrichten > Extra Style im head erstellen */ dl.imageleft { width: 210px; text-align: center; float: left; vertical-align: top; } .imageleft dt img { width: 200px; } .imageleft dd { font-weight: bold; font-size:1em; color: #000000; vertical-align: top; } /* Bild rechts ausrichten */ dl.imageright { width: 210px; text-align: center; float: right; vertical-align: top; } .imageright dt img { width: 200px; }

24 Abgeleitet vom Begriff »definition [list] definition«, Definition

2.14 Besondere Tags

71

.imageright dt { font-weight: bold; font-size:1em; color: #000000; vertical-align: top; }

Bild 2.36: Darstellung des dl-Tags (wie oben formatiert) im Browser

2.14.7 … Der dfn-Tag25 führt Fachausdrücke oder Spezialwörter beim Anwender ein. Die Hervorhebung ist auch wieder ein kursiv gesetzter Text. Aber mit CSS ist das leicht zu ändern. Der Text im title-Attribut des Tags wird bei MouseOver wieder als kleines Fenster angezeigt. Beispiel Es werden immer wieder nur die Standard HTML-Tags verwendet.

Bild 2.37: Darstellung des dfn-Tags im Browser

25 Abgeleitet vom Begriff »definition«, Definition

72

Kapitel 2: Die Grundlage: Hypertext Markup Language (HTML)

2.14.8 … Der var-Tag26 wird eigentlich nur bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist kursiv und kennzeichnet eine Variable des Codes. Beispiel Die Variable uName wird zum Ablegen des Benutzernamens verwendet und ist vom Typ string.

Bild 2.38: Darstellung des var-Tags im Browser

2.14.9 <samp>… Der samp-Tag27 wird auch bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite geschrieben und zeigt eine beispielhafte (sample = Stichprobe, Beispiel) Ausgabe eines Programms. Beispiel Falls die Datei nicht gefunden wurde, zeigt die Applikation die Meldung <samp>File not found am Bildschirm an.

Bild 2.39: Darstellung des samp-Tags im Browser

2.14.10 … Der kbd-Tag28 wird für Benutzereingaben verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite gehalten und zeigt dem Benutzer an, welche Tasten er drücken soll.

26 Abgeleitet vom Begriff »variable«, Variable 27 Abgeleitet vom Begriff »sample«, Beispiel 28 Abgeleitet vom Begriff »keyboard«, Tastatur

2.15 Webadressen für dieses Kapitel

Beispiel Um die angezeigte Webseite neu zu laden und den Cache zum umgehen, verwenden Sie die Tasten [STRG]+[R].

Bild 2.40: Darstellung des kbd-Tags im Browser

2.15

Webadressen für dieses Kapitel

• SelfHTML (Online-Referenz): http://de.selfhtml.org/ • HTML-Lexikon: http://www.w3schools.com/html • World Wide Web-Konsortium: http://www.w3c.org • Grafische Auswahl von HTML-Entitäten mit Referenz: http://www.digitalmediaminute.com/reference/entity • Textuelle Referenz für HTML-Entitäten: http://unicode.e-workers.de/entities.php • Analyse von Trends und Technologien im Web: http://www.webmasterpro.de/portal/webanalyse.html

73

75

3 3.1

Eclipse Installation der Entwicklungsumgebung

Bis jetzt kamen wir mit einem simplen Texteditor aus. Nun brauchen wir eine funktionierende Entwicklungsumgebung, um mit HTML und CSS arbeiten zu können. Es gibt unzählige Applikationen am Markt, die alle ihre Vor- und Nachteile in der Entwicklung von Software oder auch Websites haben. Über die letzten Jahre hat sich Eclipse als sehr gute Lösung herausgestellt. Es ist eine kostenlos verfügbare integrierte Entwicklungsumgebung (IDE), die auf Basis der Sprache Java programmiert ist. Da sie durch die verschiedensten Erweiterungen (auch Plug-Ins genannt) angepasst werden kann, ist sie für fast jede Programmieraufgabe geeignet. Durch das Verwenden der plattformübergreifenden Sprache Java ist sie auf jedem Betriebssystem lauffähig, und dadurch ändert sich das Aussehen der IDE auch nicht von System zu System. Zudem sind die Tastenkombinationen für die einzelnen Befehle immer gleich. Da sich Eclipse durch verschiedene Module anpassen lässt, erhalten wir in kürzester Zeit eine komplette Entwicklungsumgebung für HTML und CSS. In späterer Folge können wir sie auch für Sprachen wie JavaScript und PHP benutzen. Wir müssen also nicht zwischen verschiedenen Editoren wechseln. Einen Nachteil müssen wir aber auch kennen. Da es sich um eine textorientierte Entwicklungsumgebung handelt, lassen sich Websites nicht grafisch erstellen, sondern müssen mit HTML und CSS umgehen können. Dafür integriert die IDE die im System installierten Browser als Vorschaufenster für die erstellten Websites.

76

3.1.1

Kapitel 3: Eclipse

Download der Software

Da die meisten Windows-Rechner kein Java installiert haben, müssen wir hier zuerst das aktuelle Java Runtime Environment (JRE) mit der Version 6.14 auf der Website von Sun29 herunterladen. Das JRE ist eine Software, die uns gestattet, in Java geschriebene Programme auf unserem Rechner auszuführen. Benutzer von Mac OS X sind bei Java im Vorteil. Da dieses Betriebssystem Java bereits integriert hat, muss nur das Software-Update aufgerufen werden, um die aktuellste Version zu erhalten. Das nächste Paket, das wir benötigen, ist Eclipse. Dieses finden wir auf der Website der Eclipse Foundation30. Ganz am Ende der Website findet sich die Version Eclipse Classic 3.5.0, auch Galileo genannt. Rechts daneben finden wir einen Hyperlink für Windows-Systeme und direkt darunter den Link für das AppleBetriebssystem. Um die Oberfläche auf Deutsch zu erhalten, benötigen wir das Babel-Sprachpaket31 für die Galileo-Version.

3.1.2

Installation für Windows-Systeme

Hier beginnen wir mit der Installation von Java. Dazu rufen wir das Paket zur Installation des JRE mit einem Doppelklick auf. Windows 7 und Vista zeigen vor der eigentlichen Installation noch eine Warnung an, dass die Installationssoftware Änderungen am Betriebssystem vornehmen wird. Diese bestätigen wir mit dem Knopf Ja. Danach wird die Willkommensseite für die Installation von Java angezeigt. Da wir hier den Zielordner für alle drei Windows-Varianten XP, Vista und 7 gleich lassen können, klicken wir auf den Knopf Installieren. Nun dauert es einige Minuten, bis die komplette Installation durchgeführt wird. Am Ende zeigt das Setup-Programm noch den Erfolg der Installation an. Dieses Fenster können wir mit dem Knopf Schließen bestätigen.

29 http://www.java.com/de/download/manual.jsp 30 http://www.eclipse.org/downloads 31 http://download.eclipse.org/technology/babel/babel_language_packs/galileo.php

3.1 Installation der Entwicklungsumgebung

77

Bild 3.1: Java-Setup bei Windows-Systemen

3.1.3

Installieren von Eclipse

Nun können wir mit der Installation von Eclipse fortfahren. Nach dem Entpacken der Installationsdatei erhalten wir ein Verzeichnis Eclipse. Dieses verschieben wir in den Anwendungsordner bei Mac OS X oder in den ProgrammeOrdner bei den Windows-Systemen. Damit ist die Grundinstallation für die IDE abgeschlossen. Natürlich ist es sinnvoll, dass wir uns unter Windows eine Verknüpfung am Desktop, in der Schnellstartleiste oder bei Apple im Dock ablegen. Als nächster Schritt folgt die Anpassung der Sprache. Eclipse liegt in der Grundinstallation in englischer Sprache vor. Um eine deutschsprachige Version zu erhalten, entpacken wir jetzt das Babel-Sprachpaket. Dieses enthält eine fast vollständige Übersetzung von Eclipse. Nach dem Entpacken erhalten wir ein Verzeichnis eclipse/ mit zwei Unterordnern. Diese beiden Ordner müssen jetzt verschoben werden. Dazu öffnen wir den Ordner, in dem Eclipse installiert ist. Er findet sich unter Windows im Programme-Verzeichnis. Dort existiert ein Unterverzeichnis dropins/, in das wir den Inhalt – die beiden Verzeichnisse features/ und plugins/ – des Sprachpaketes verschieben.

78

Kapitel 3: Eclipse

Nun können wir mit einem Doppelklick auf das Programmsymbol von Eclipse die Entwicklungsumgebung starten.

Bild 3.2: Startfenster von Eclipse

Kurz danach sehen wir das Fenster für den Arbeitsbereich32 vor uns. Hier werden wir nach dem Pfad zum Arbeitsbereich gefragt. Dies ist das Verzeichnis, in dem alle Dateien gespeichert werden. Idealerweise legen wir ihn bei AppleSystemen auf das Verzeichnis Websites33 aus der Seitenleiste oder auf ein eigenes Verzeichnis /eclipse auf dem Desktop bzw. auf einem USB-Stick.

Bild 3.3: Workspace-Launcher von Eclipse

Dazu klicken wir auf den Knopf Browse, wählen danach aus der Seitenleiste Websites aus und bestätigen dies mit dem Knopf Open. Wenn wir die Option DIESEN WERT ALS STANDARDWERT VERWENDEN UND NICHT ERNEUT ANFRAGEN akti32 Auch Workspace genannt. 33 Gemeint ist der Pfad /Users/benutzername/Sites

3.1 Installation der Entwicklungsumgebung

79

vieren, werden wir beim nächsten Start nicht mehr nach dem Workspace gefragt. Nun klicken wir noch auf Ok und Eclipse startet endgültig.

3.1.4

Installieren der Plug-Ins für Eclipse

Da Eclipse in der Grundinstallation eine Entwicklungsumgebung für die Programmiersprache Java ist, müssen wir sie jetzt so anpassen, dass wir eine IDE für die Webentwicklung erhalten. Aptana Studio installieren Als erstes installieren wir das Plug-In »Aptana Studio« in der Version 1.5. Auch diese Software ist kostenlos verfügbar, sollte aber über eine Internetverbindung direkt installiert werden. Dazu öffnen wir das Menü HILFE und klicken auf den Befehl INSTALL NEW SOFTWARE…. In dem nächsten Fenster müssen wir im Datenfeld WORK WITH: die URL http://update.aptana.com/install/studio eintragen. Mit dem Knopf Add… fügen wir die Internetadresse zur Liste der verfügbaren Software hinzu.

Bild 3.4: Eintragen der Internetadresse von Aptana

80

Kapitel 3: Eclipse

Nun müssen wir für die eingetragene Adresse noch einen Namen im Feld NAME: eingeben. Damit wir das Plug-In später wieder identifizieren können, verwenden wir Aptana Studio Plug-In und bestätigen dies mit dem Knopf Ok.

Bild 3.5: Festlegen des Namens für das neue Plug-In

Nun verbindet sich Eclipse mit dem Internet und sucht unter der angegebenen URL nach verfügbarer Software. Sobald die Daten verfügbar sind, zeigt das Installationsprogramm das Aptana-Plug-In an. In der Liste aktivieren wir das Kontrollkästchen vor dem Eintrag APTANA STUDIO und klicken auf den Knopf Next.

Bild 3.6: Aktivieren der zu installierenden Software

3.1 Installation der Entwicklungsumgebung

81

Jetzt wird ein Fenster mit zusammenfassenden Informationen zur Installation angezeigt, das wir mit dem Knopf Next bestätigen. Nun zeigt uns Eclipse die Lizenzvereinbarung für das Plug-In. Dieses bestätigen wir, indem wir die Option I ACCEPT THE TERMS OF THE LICENSE AGREEMENTS aktivieren und auf den Knopf Finish klicken.

Bild 3.7: Lizenzvereinbarung für Aptana Studio anerkennen

Nun wird die Installation durchgeführt. Das sehen wir an dem Fenster, das den Verlauf anzeigt. Wir lassen es im Vordergrund, damit wir erkennen können, wann die Installation abgeschlossen ist. Sobald dies geschehen ist, meldet uns ein Hinweisfenster, dass Eclipse neu gestartet werden muss. Dieses bestätigen wir mit dem Knopf Yes.

Bild 3.8: Eclipse neu starten

82

Kapitel 3: Eclipse

Nachdem Eclipse wieder gestartet ist, werden wir auf Windows-Rechnern wegen der Zugriffe der Software auf das Gesamtsystem gewarnt. Einerseits greift die Windows-Firewall ein, um den Internetzugriff zu regeln. Wir erlauben ihn natürlich, indem wir auf Zugriff zulassen bzw. Nicht mehr blocken klicken. Bei Windows 7 und Vista meldet sich zusätzlich noch die Benutzerkontensteuerung, die sichergehen will, dass die Änderungen am System auch autorisiert sind. Auch dieses Fenster bestätigen wir mit Ja. Erweiterung von Aptana Studio Sobald die Entwicklungsumgebung wieder gestartet ist, erhalten wir den Hinweis, dass wir zusätzliche Komponenten installieren können. Dazu müssen wir die Kontrollkästchen vor APTANA PHP im Bereich WEB APPLICATION PLATFORMS und im Bereich AJAX LIBRARIES die Pakete für JQUERY SUPPORT, PROTOTYPE und SCRIPTACULOUS aktivieren. Mit dem Knopf Install beginnen wir die Installation dieser Zusatzpakete.

Bild 3.9: Weitere Plug-Ins für Aptana Studio auswählen

3.1 Installation der Entwicklungsumgebung

83

Auch bei diesen Erweiterungen prüft Eclipse die Verfügbarkeit der Software und zeigt uns ein weiteres Fenster an. Hier aktivieren wir die Optionen AJAX FRAMEWORKS und PHP PLUGIN BUILDS und fahren mit einem Klick auf den Knopf Next fort. Nun werden die Daten der Pakete aus dem Internet abgerufen und in einem Fenster detailliert angezeigt. Diese Fenster bestätigen wir mit dem Knopf Next. Nun werden wir wie bei der Installation des Aptana Studios zum Bestätigen der Lizenzvereinbarung aufgefordert. Dieses Fenster bestätigen wir mit Finish und warten das Ende der kompletten Installation ab. Auch nach diesem Durchgang werden wir zu einem Neustart von Eclipse aufgefordert, welchen wir mit einem Klick auf den Knopf Yes auslösen.

3.1.5

Anpassen der Perspektive von Eclipse

Da Eclipse für verschiedenste Aufgaben geeignet ist, kann es auch sein Aussehen an diese Erfordernisse anpassen. Dies nutzen wir jetzt aus, um eine ideale Arbeitsumgebung zu erhalten. Dazu klicken wir in Eclipse auf das Menü FENSTER und dort auf den Befehl PERSPEKTIVE ÄNDERN. In dem Untermenü klicken wir auf den Befehl ANDERE….

Bild 3.10: Ändern der Perspektive von Eclipse

Jetzt können wir aus der Liste den Eintrag APTANA auswählen und mit Ok bestätigen.

84

Kapitel 3: Eclipse

Bild 3.11: Auswählen der Perspektive für Aptana Studio

Nun haben wir die komplette Installation der Entwicklungsumgebung abgeschlossen und sehen die IDE in genau der Einstellung vor uns, wie wir sie in der Folge benötigen.

Bild 3.12: Eclipse mit aktiviertem Aptana Studio

3.2 Der Browser

3.2

85

Der Browser

Auch beim Browser haben wir uns mit dem Firefox für eine kostenlos verfügbare Version entschieden. Zudem hat der Firefox mit der Version 3.6 und höher weitere Vorteile. Die Anwendung verhält sich auf allen getesteten Betriebssystemen gleich, stellt die Websites auch gleich dar und zusätzlich unterstützt sie den aktuellen CSS-3-Standard. Die aktuelle Version lässt sich bei der Mozilla Foundation34 herunterladen. Zusätzlich werden wir Firefox mit einigen nützlichen Add-Ons ausstatten. Dies werden wir in der Folge benötigen, um die Anpassungen und Entwicklungen schneller und effektiver durchführen zu können. Die Installation der drei Add-Ons geht relativ schnell vonstatten. Wir benötigen nur eine aktive Internetverbindung. Dann öffnen wir das Menü EXTRAS und klicken dort auf den Befehl ADD-ONS.

Bild 3.13: Das Menü Extras von Firefox

3.2.1

Firebug

Als erstes suchen wir das Add-On Firebug. Dazu geben wir im Suchfenster firebug ein und drücken [Enter]. Firefox sucht jetzt das passende Paket und zeigt es uns an. Zum Beginn der Installation klicken wir auf den Knopf Zu Firefox hinzufügen …

34 http://www.mozilla-europe.org/de/firefox

86

Kapitel 3: Eclipse

Bild 3.14: Firebug zum Installieren auswählen

Im folgenden Fenster müssen wir fünf Sekunden warten, bis wir den Knopf Jetzt installieren anklicken können.

Bild 3.15: Firebug installieren

3.2 Der Browser

3.2.2

87

Web Developer

Bei diesem Add-On gehen wir genauso wie beim vorherigen vor. Wir geben im Suchfeld den Begriff Web Developer ein und drücken [Enter]. Sobald Firefox das Paket gefunden hat, klicken wir wieder auf Zu Firefox hinzufügen … und danach wieder auf Jetzt installieren. Das Leerzeichen zwischen Web und Developer ist wichtig, damit das richtige Add-On gefunden wird.

Bild 3.16: Web Developer zum Installieren auswählen

3.2.3

GridFox

Auch dieses Add-On wird auf dieselbe Weise installiert. Wir geben im Suchfeld den Begriff GridFox ein und drücken [Enter]. Sobald Firefox das Paket gefunden hat, klicken wir wieder auf Zu Firefox hinzufügen … und danach wieder auf Jetzt installieren. Zum Abschluss der Installation klicken wir auf den Knopf Firefox neu starten, den wir rechts oben im Add-Ons-Fenster finden. Sobald der Browser wieder gestartet ist, zeigt er uns ein Fenster mit den installierten Add-Ons. Dieses Fenster dient einerseits zu unserer Information, andererseits können damit veraltete

88

Kapitel 3: Eclipse

Add-Ons aktualisiert werden. Wir können dieses Fenster schließen und damit die Installation beenden.

Bild 3.17: GridFox zur Installation auswählen

Bild 3.18: Liste der Add-Ons im Firefox

3.3 Webadressen für dieses Kapitel

89

Damit haben wir unser komplettes System für die Entwicklung für HTML, CSS und JavaScript installiert.

3.3

Webadressen für dieses Kapitel

• Entwicklungsumgebung Eclipse: http://www.eclipse.org/downloads • Deutsches Sprachpaket für Eclipse: http://download.eclipse.org/technology/babel/babel_language_packs/galileo.php • Mozilla Firefox: http://www.mozilla-europe.org/de/firefox • Ein Raster über eine Webseite legen – GridFox: https://addons.mozilla.org/de/firefox/addon/4904 • HTML, CSS und Programmierung einer Seite überprüfen – Firebug: https://addons.mozilla.org/de/firefox/addon/1843 • Java-Ablaufumgebung (Java Runtime Environment, JRE): http://www.java.com/de/download/manual.jsp • Applikationen für den USB-Stick: http://portableapps.com/

91

4

Cascading Style Sheets

Bis jetzt haben wir nur mit HTML gearbeitet. Dadurch hatten wir sehr eingeschränkte Möglichkeiten, unsere Webseiten zu formatieren und zu gestalten. Mit CSS (Cascading Style Sheets) bekommen wir die Möglichkeit, Formate für die HTML-Dateien zentral zu definieren. Wir können fast alle HTML-Elemente einer Webseite wie Überschriften, Absätze und Bilder mit Farben und Rahmen und anderen Formaten versehen sowie ihre Positionierung verändern. Obwohl CSS technisch sehr eng mit HTML verknüpft sind, beschreiten wir hiermit einen ersten Schritt in Richtung der Trennung von Inhalt (HTML) und Layout (CSS): Der Inhalt ist in einer HTML-Datei hinterlegt, die Layout-Informationen liefert CSS.

4.1

CSS-Grundlagen

Mit CSS können wir steuern, wie die HTML-Elemente im Browser erscheinen. Dazu müssen wir aber CSS in die HTML-Dokumente einbinden. Es gibt grundsätzlich drei Möglichkeiten, mit CSS-Stilen in HTML zu arbeiten: Eingebettete Definitionen, eingebettete und externe Style Sheets.

4.1.1

CSS-Definitionen in HTML einbinden

Eingebettete Definitionen Diese Stildefinition wird direkt beim entsprechenden Tag durch das styleAttribut definiert. Das folgende Beispiel zeigt, wie einem Paragraphen-Tag eine Stilart zugeordnet wird: Beispiel ...

Hier steht ein beliebiger Text.

...

Diese Art der Definition sollte eigentlich als letzte eingesetzt werden. Denn sie ist nur für den ausgewählten Tag gültig und bei umfangreichen Websites ist es sehr schwer, die Stile unter Kontrolle zu halten. Zudem ist sie fehleranfällig, da man

92

Kapitel 4: Cascading Style Sheets

das ganze HTML-Dokument nach den entsprechenden Stilinformationen durchsuchen muss, wenn zum Beispiel Korrekturen nötig sind. Eingebettete Style Sheets Es ist möglich, Stile mit dem style-Tag in den head-Bereich einer HTML-Seite einzubinden. Beispiel ... ... <style> p { text-align: right; color: #990000; } ... ...

Damit werden die Stildefinitionen im head-Bereich gebündelt. Das ist ein Fortschritt, aber auch nicht optimal. Der definierte Stil bezieht sich zwar nicht mehr nur auf einen einzelnen Tag, gilt aber trotzdem nur für die eine HTML-Datei, in der er steht. Benötigen wir die Stile auf verschiedenen Seiten (das ist der Fall, wenn unsere Website aus mehreren Seiten besteht), müssen sie jedes Mal in den jeweiligen head-Bereich aufgenommen werden. Dies ist bei größeren Websites natürlich mühsam, fehleranfällig und schwer zu pflegen. Externe Style Sheets Externe Stildefinitionen können über den head-Bereich einer HTML-Seite eingebunden werden. Dies geschieht über den link-Tag. Syntax

Attribute

Kernattribute href "..."

URL zur verknüpften Datei media "..."

legt das zu verwendende Ausgabemedium fest

4.1 CSS-Grundlagen

93

rel "..."

legt die »Verwandtschaft« (relationship) fest type "..."

legt den MIME-Type fest DTD strict, transitional

Bemerkung

Der link-Tag darf nur innerhalb eines head-Tags vorkommen. Er ist ein »leeres« Element, darf also keinen eigenen Inhalt haben. Beispiel für externe Style Sheets ... ... ... ...

Es werden immer externe Style Sheets eingesetzt! Dies erleichtert die Verwaltung von CSS-Stilen enorm.

4.1.2

Der Aufbau einer CSS-Regel

Ein CSS-Stil besteht aus einer oder mehreren Regeln, die das Format und das Aussehen eines bestimmten Seitenelements festlegen. Dadurch ist die Trennung zwischen Inhalt (HTML) und Layout (CSS) gewährleistet. Eine Regel besteht aus zwei Teilen: dem Selektor und dem Deklarationsblock. Was Selektoren sind und wie sie funktionieren, zeigen wir im gleichnamigen Abschnitt. Innerhalb des Deklarationsblockes stehen die einzelnen Deklarationen, die immer mit einem Semikolon (Strichpunkt, ;) abgeschlossen werden.

94

Kapitel 4: Cascading Style Sheets

Jede Deklaration besteht aus einem Wertepaar: An der ersten Stelle steht die CSSEigenschaft mit einem Doppelpunkt, dann folgt der dazugehörige Wert und zum Schluss kommt ein Strichpunkt. Beispiel für eine CSS-Regel h1 { font-weight: bold; color:#990000; text-align: center; }

4.1.3

Darstellung von Elementen

Elemente werden in HTML generell als Rechteck (Box) dargestellt. Es ist wichtig, dies zu verinnerlichen und mit den verschiedenen Arten von Elementen und Boxen vertraut zu sein. Alle HTML-Elemente sind grundsätzlich rechteckig! Elementart Es gibt zwei Arten von Elementen: • Ersetzte Diese Elemente haben keinen eigenen Inhalt (z. B. das Bildelement img). Sie besitzen dafür ein Attribut, das bei der Darstellung verwendet wird. Bei img wird beispielsweise die Datei, die im Attribut src (vom englischen Begriff »source«, was »Quelle« bedeutet) angegeben wird, geladen und eingesetzt. • Nicht ersetzte Diese Elemente besitzen einen eigenen Inhalt, der dargestellt wird. Dies trifft auf den Großteil von HTML-Elementen (z. B. p, a, span, usw.) zu. Die Inline-Box Auch Inline-Elemente (HTML-Elemente, die keinen Zeilenumbruch auslösen) haben eine Art Box, mit der sie dargestellt werden. Um sie zu bestimmen, ist die Berechnung der Zeilenhöhe wichtig. Diese wird aus der Höhe des Inhaltsbereichs (normalerweise die Schriftgröße) und des Durchschusses (Differenz zwischen der Schriftgröße und der Zeilenhöhe) ermittelt. Der Durchschuss wird halbiert und je eine Hälfte ober- und unterhalb des Textes eingefügt.

4.1 CSS-Grundlagen

95

Die Zeilenbox Die Höhe der Zeilenbox ermittelt sich aus dem Abstand des höchsten und des niedrigsten Punkts aller Inline-Boxen, die sich in einer Zeile befinden. Das Box-Modell Auch in CSS gibt es – wie in HTML – zwei Arten von Elementen: Block- und Inline-Elemente. Diese sind prinzipiell gleich wie in HTML. Blockelemente erzeugen einen Umbruch und werden in Form eines Rechtecks dargestellt. Inline-Elemente kommen hingegen direkt im Text vor und erzeugen keinen Umbruch. Besonders zur Darstellung und Formatierung von Blockelementen müssen wir das Box-Modell beherrschen.

Bild 4.1: Das Box-Modell

Um die Größe eines Blockelements berechnen zu können, ist das Box-Modell das wichtigste. Die Breite/Höhe eines Elements ergibt sich aus der Summe der einzelnen Breiten/Höhen der Eigenschaften. Alle Werte für den Hintergrund (Farbe, Bilder, ...) werden über die gesamte Breite/Höhe dargestellt. Wird der Rahmen beispielsweise mit Unterbrechungen dargestellt, scheint dort der Hintergrund durch. Negative Werte können nur bei den margin-Eigenschaften festgelegt werden.

96

Kapitel 4: Cascading Style Sheets

Floating Eine spezielle Eigenschaft für Blockelemente ist float. Mit dieser Eigenschaft können Blockelemente links bzw. rechts voneinander positioniert werden. Dafür gibt es einige Regeln: • Die Kanten der Elemente dürfen sich nicht überlappen. • Die Innenkanten des inneren float-Elements dürfen die Außenkanten des umgebenden Elements nicht überragen. • Ein float-Element wird immer so weit oben wie möglich angeordnet. • Ein float-Element steht immer so weit rechts beziehungsweise links wie möglich.

4.1.4

Positionierung von Elementen

Um die Positionierung durchführen zu können, benötigen wir die Begriffe Canvas (wörtlich übersetzt: die Leinwand, also die gesamte Größe der HTMLDatei in der Darstellung) und Viewport (der sichtbare Teil des HTML-Dokuments im Browserfenster). Arten der Positionierung • static Die Box wird wie üblich angelegt. • relative Das Element wird um die festgelegte Entfernung von seinem ursprünglichen Ort verschoben. Der ursprüngliche Raum wird jedoch beibehalten und der Bezugspunkt ist das linke obere Eck des Elternelements. • absolute Das Element wird an den angegebenen Werten positioniert und der ursprüngliche Raum wird wieder freigegeben. Als Bezugspunkt wird das linke obere Eck des Canvas festgelegt. • fixed Das Element wird wie mit absolute positioniert. Der Unterschied ist, dass der Bezugspunkt der Viewport ist.

4.1 CSS-Grundlagen

4.1.5

97

Werte in CSS

Schlüsselwörter Dies sind benannte Werte. Sie können je nach Eigenschaft verschiedene Bedeutungen haben. Das Schlüsselwort normal hat bei font-weight einen anderen Sinn als bei letter-spacing. Farbwerte Farbwerte können in verschiedenen Varianten angegeben werden: entweder mit Schlüsselwörtern als Code oder als berechnete Variante. • #RRGGBB Diese Schreibweise besteht aus drei hexadezimalen Werten für Rot-GrünBlau. • #RGB Dies ist die Kurzversion der obigen Schreibweise. Hier wird jede angegebene Ziffer verdoppelt, aus #369 wird also #336699. • rgb(rrr.rr%, ggg.gg%, bbb.bb%) Hier können die einzelnen Farbkanäle mit einer Prozentschreibweise angegeben werden. Um ein reines Rot zu erhalten, geben wir rgb(100%, 0%, 0%) an. • rgb(rrr, ggg, bbb) Hier wird anstelle der Prozentwerte eine Ganzzahl im Bereich zwischen 0 und 255 angegeben. Ein reines Rot wird mit rgb(255, 0, 0) erzeugt. Zahlen Zahlen können als positive (und wo es erlaubt ist auch als negative) Werte angegeben werden. Dezimalzahlen werden prinzipiell mit einem Dezimalpunkt geschrieben. Je nach Eigenschaft kann der Wertebereich eingeschränkt sein. Maßeinheiten Es gibt verschiedene Einheiten für die Größenangaben, diese müssen immer direkt hinter der Zahl (ohne Leerzeichen) angegeben werden. Zwischen Zahl und Maßangabe gibt es nie ein Leerzeichen! Prozentwerte Hier gilt das Gleiche wie für die Zahlen. Zusätzlich muss direkt hinter der Zahl ein Prozentzeichen (%) angegeben werden.

98

Kapitel 4: Cascading Style Sheets

Absolute Längenwerte Durch absolute Maßzahlen können wir das Layout und die Größen – in bestimmten Grenzen – relativ exakt festlegen. • Zoll/Inch – in Die Einheit Zoll (Inch) kommt aus dem angloamerikanischen Sprachraum und entspricht etwa 2,54 cm. Die Darstellung auf dem Bildschirm erfolgt nur ungefähr, da die meisten Betriebssysteme die Einheit nicht korrekt auf den Bildschirm umrechnen können. • Zentimeter – cm Ein Zentimeter entspricht 0,394 Zoll. Jedoch erfolgt auch hier die Umrechnung auf den Bildschirm nur ungefähr. • Millimeter – mm Es gilt das Gleiche wie bei den vorigen Maßeinheiten. • Punkte – pt Punkte sind eine Standardeinheit im Schriftsatz, hier sind die europäischen Didot-Punkte gemeint. Aktuell löst ein Bildschirm mit 72 dpi35 auf. Daraus lässt sich der Schluss ziehen, dass ein Zoll aus 72 Punkten besteht und umgekehrt ein Punkt 1/72 Zoll groß ist. • Pica – pc Dies ist ebenfalls eine Größe in Punkten, sie kommt jedoch aus dem angloamerikanischen Sprachraum. Ein Pica-Punkt entspricht 12 Didot-Punkten und dadurch entsprechen 6 Pica-Punkte einem Zoll. Relative Längenwerte Diese Längenwerte erlauben uns die Angabe von Größen in Abhängigkeit von verschiedensten Basiswerten. Dies ist besonders interessant, wenn wir dem Benutzer Veränderungen erlauben wollen. Denn bei einer Angabe der Schriftgröße von 12 Punkt kann der Anwender nichts mehr verändern. Legen wir aber 200 % für die Überschrift 1 als Schriftgröße fest, so wird diese – in Abhängigkeit von der beim Anwender eingestellten Schriftgröße – berechnet. Momentan interpretieren alle Browser eine Schriftgröße von 100 % als 16 Punkt. Wir verwenden bevorzugt relative Längenwerte!

35 Dots per inch, Punkte pro Zoll

4.2 Selektoren

99

• em-Höhe – em Diese Wertigkeit kommt ebenfalls aus der Typographie. Dort wird die Höhe des Buchstabens M bezeichnet. In CSS ist jedoch die Höhe der Zeichenbox des benutzten Zeichensatzes gemeint. 1em entspricht also der normal eingestellten Schriftgröße beim Anwender. Mit der Angabe von 1.5em wird daher die Schriftgröße um das 1 ½-fache größer dargestellt. • x-Höhe – ex Dies ist ebenfalls eine Maßeinheit der Typographie und bezeichnet die Höhe des Buchstabens x. Da jedoch die meisten Schriften keine genaue Angabe zum Buchstaben x enthalten, setzen die meisten Browser den Wert 1ex auf 0,5em. • Pixel – px In CSS wird ein Zoll mit 96 Pixel definiert. Die meisten Browser ignorieren dies jedoch und sprechen die realen Pixel auf einem Bildschirm direkt an. Daher ist es de facto ein absoluter Längenwert.

4.2

Selektoren

Mit Selektoren werden die Formatangaben auf die HTML-Datei angewendet. Mit den verschiedensten Arten der Selektoren können sehr feine Abstufungen in der Anwendung definiert werden.

4.2.1

Universeller Selektor

Muster * { }

Beschreibung

Passt auf den Namen eines beliebigen Elements CSS-Version

2.1 und höher Browser

Alle gängigen Bemerkung

Weist eine Regel keinen expliziten Selektor auf, wird der universelle Selektor benutzt.

100

Kapitel 4: Cascading Style Sheets

Beispiel für universellen Selektor /* Der Selektor gilt für alle Elemente */ * {color: red;}

Bild 4.2: Beispiel für den Universal-Selektor

4.2.2

Typ-Selektor

Muster element { }

Beschreibung

Der Selektor passt auf einen bestimmten HTML-Tag. Es werden jedoch alle Elemente im DOM gefunden. CSS-Version

1 und höher Browser

Alle gängigen Bemerkung

Dieser Selektor wird auch als Element-Selektor bezeichnet. Beispiel für Typ-Selektor /* Schriftgroesse für den h1-Tag anpassen */ h1 {font-size: 3em;} /* Schriftgroesse für den h2-Tag anpassen */ h2 {font-size: 2em;} /* Schriftgroesse für den p-Tag anpassen */ p {font-size: 1.2em;}

4.2 Selektoren

101

Bild 4.3: Beispiel für den Typ-Selektor

4.2.3

Kontext-Selektor

Muster element1 element2 { }

Beschreibung

Damit kann ein abhängiges Element ausgewählt werden. Dies sind Elemente, die im DOM unterhalb eines Elements angeordnet sind. CSS-Version

1 und höher Browser

Alle gängigen Bemerkung

Dieser Selektor wird auch als Nachfahren-Selektor bezeichnet. Beispiel für Kontext-Selektor

Hier steht normaler, schwarzer Text.

/* p-Tag innerhalb eines div-Tags formatieren */ div p {color: #009900;}

102

Kapitel 4: Cascading Style Sheets

Bild 4.4: Beispiel für den Kontext-Selektor

4.2.4

Kind-Selektor

Muster element1 > element2 { }

Beschreibung

Dieser Selektor wählt ebenfalls die Nachfahren eines Elements aus. Er ist aber restriktiver, da er nur direkte Kindelemente verwendet. CSS-Version

2.1 und höher Browser

Alle gängigen außer dem Internet Explorer 6 Beispiel für Kind-Selektor /* direkten p-Tag innerhalb eines div-Tags formatieren */ div > p {color: #009900;}

Bild 4.5: Beispiel für den Kind-Selektor

4.2 Selektoren

4.2.5

103

Benachbarte Geschwisterelemente

Muster element1 + element2

Beschreibung

Damit können Elemente, die sich auf derselben Ebene des DOMs befinden, ausgewählt werden. CSS-Version

2.1 und höher Browser

Alle gängigen außer dem Internet Explorer 6 Beispiel für benachbarte Geschwisterelemente

Hier wird noch viel Text geschrieben.

Hier steht eine rote Überschrift

/* p-Tag formatieren */ p {color: #990000;} /* p-Tag in der selben Hierarchie definieren */ p + p {color: #000099;} /* h2-Tag definieren */ h2 {color: #990000;}

Bild 4.6: Beispiel für Geschwister-Elemente

104

Kapitel 4: Cascading Style Sheets

4.2.6

Klassen-Selektor

Muster element.klasse .klasse

Beschreibung

In HTML können Tags mit dem Kernattribut class "..." versehen werden. Dadurch ist eine spezielle Zuordnung der Formatierung über diesen Selektor möglich. CSS-Version

1 und höher Browser

Alle gängigen Bemerkung

Der Klassenname wird durch einen Punkt vom Elementnamen getrennt. Vor oder nach dem Punkt darf kein Leerzeichen stehen. Wird kein Elementname angegeben, kann die Klasse auf alle Elemente angewendet werden, sonst nur auf die spezifizierten Elemente. Beispiel für Klassen-Selektor

Hier steht fetter, roter Text.

/* elementlose Klasse */ .wichtig { color: red; font-weight: bold; } /* Klasse für div-Tags */ div.wichtig { border: 1px solid #999; background-color: yellow; }

4.2 Selektoren

105

Bild 4.7: Beispiel für den KlassenSelektor

4.2.7

ID-Selektor

Muster element1#id #id

Beschreibung

In HTML können Tags mit dem Kernattribut id "..." versehen werden. Dadurch sind sie eindeutig gekennzeichnet. Denn jeder id-Wert darf pro HTML-Datei nur einmal vorkommen. CSS-Version

1 und höher Browser

Alle gängigen Bemerkung

Der id-Wert wird mit einem Hash (#) vom Elementnamen getrennt. Vor oder nach dem Hash darf kein Leerzeichen stehen. Wird kein Elementname angegeben, kann die ID auf ein beliebiges Element angewendet werden, sonst nur auf das spezifizierte Element. Beispiel für ID-Selektor

Hier steht fetter, roter Text.

106

Kapitel 4: Cascading Style Sheets

/* elementlose ID */ #wichtigerText { color: red; font-weight: bold; } /* ID für ein Element */ div#wichtigesFenster { border: 1px solid #999; background-color: yellow; color: red; font-weight: bold; }

Bild 4.8: Beispiel für den ID-Selektor

4.2.8

Allgemeiner Attribut-Selektor

Muster element[attr]

Beschreibung

Wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes ist gleichgültig. CSS-Version

2.1 und höher Browser

Alle gängigen außer dem Internet Explorer 6 Beispiel für allgemeiner Attribut-Selektor /* Auswahl eines a-Tag mit target-Attribut */ a[target] { border-bottom: 5px dotted #993366; }

4.2 Selektoren

107

Bild 4.9: Beispiel für den allgemeinen Attribut-Selektor

4.2.9

Exakter Attribut-Selektor

Muster element[attr "wert"]

Beschreibung

Wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt. CSS-Version

2.1 und höher Browser

Alle gängigen außer dem Internet Explorer 6 Beispiel für exakten Attribut-Selektor /* Auswahl eines a-Tag mit target-Attribut blank */ a[target " blank"] {border-bottom: 5px dotted #006633;}

108

Kapitel 4: Cascading Style Sheets

Bild 4.10: Beispiel für den exakten Attribut-Selektor

4.2.10 Teilweiser Attribut-Selektor Werteliste-Variante Muster element[class~ "wert"]

Beschreibung

Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributs wird hier exakt berücksichtigt, aber aus einer mit Leerzeichen getrennten Liste des Attributs class ausgewählt. CSS-Version

2.1 und höher Browser

Alle gängigen außer dem Internet Explorer 6 Beispiel für teilweisen Attribut-Selektor

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut wichtig */ p[class~ "wichtig"] {border-bottom: 5px dashed #993366;}

4.2 Selektoren

109

Bild 4.11: Beispiel für den teilweisen Attribut-Selektor

Wertanfangs-Variante Muster element[class^ "wert"]

Beschreibung

Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt, aber nur, wenn er am Beginn steht. CSS-Version

3 und höher Browser

Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher Beispiel für die Wertanfangs-Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut zweiter... */ p[class^ "zweiter"] {border-bottom: 2px dashed #993366;}

Bild 4.12: Beispiel für den teilweisen Attribut-Selektor

Wertende-Variante Muster element[class$ "wert"]

Beschreibung

Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt, aber nur, wenn er am Ende steht.

110

Kapitel 4: Cascading Style Sheets

CSS-Version

3 und höher Browser

Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher Beispiel für die Wertende-Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut zweiter... */ p[class$ "Absatz"] {border-bottom: 2px dashed #993366;}

Im Wert enthaltene Variante Muster element[class* "wert"]

Beschreibung

Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier berücksichtigt, wenn er irgendwo steht. CSS-Version

3 und höher Browser

Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher Beispiel für eine im Wert enthaltene Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut ...Absatz... */ p[class* "Absatz"] {border-bottom: 2px dashed #993366;}

4.2.11 Pseudoklassen Darunter werden keine Klassen verstanden, wie es sie in objektorientierten Programmiersprachen gibt, sondern Zustände im HTML-Dokument. Sie sind also nur vorhanden, wenn der Benutzer eine bestimmte Aktion durchführt.

4.2 Selektoren

111

Pseudoklasse :active Muster element:active

Beschreibung

Sobald der Benutzer das Element aktiviert, beispielsweise der Zeitpunkt zwischen dem Drücken der Maustaste und dem Loslassen. CSS-Version

1 und höher Browser

Alle gängigen Bemerkung

Mit diesen Selektoren kann das Aussehen des Elements bei Zuständen oder bestimmten Positionen verändert werden. Es können aber keine fremden Elemente angepasst werden. Beispiel für :active

Hier geht es zum  Guru.

/* Farbe eines aktiven Links auf grün setzen */ a:active {color: #00FF00;}

Pseudoklasse :focus Muster element:focus

Beschreibung

Wird aktiv, sobald ein Element den Fokus erhält, beispielsweise wenn in einem Formularfeld der Cursor blinkt. CSS-Version

2.1 und höher Browser

Alle gängigen außer Internet Explorer 6 und 7

112

Kapitel 4: Cascading Style Sheets

Beispiel für :focus ...

ohne Focus: 
mit Focus:

/* Eingabfeld anpassen */ input { color: #CCCCCC; background-color: #333333; border: 1px solid red; } input:focus { color: black; background-color: white; }

Bild 4.13: Beispiel für die Pseudoklasse :focus

Pseudoklasse :hover Muster element:hover

Beschreibung

Wird aktiv, wenn der Mauszeiger über das Element fährt und inaktiv, wenn der Mauszeiger das Element wieder verlässt. CSS-Version

2.1 und höher

4.2 Selektoren

113

Browser

Alle gängigen; im Internet Explorer 6 funktioniert diese Klasse allerdings nur für den a-Tag. Beispiel für :hover /* Format für eine Zelle festlegen */ td { background-color: white; border: 1px dotted #E0E0E0; } /* anpassen für Hover-Effekt */ td:hover { background-color: #E0E0E0; border: 1px solid black; }

Bild 4.14: Beispiel für die Pseudoklasse :hover

Pseudoklasse :link Muster element:link

Beschreibung

Gilt für alle Hyperlinks, die noch nicht besucht wurden. CSS-Version

1 und höher Browser

Alle gängigen Beispiel für :link /* unbesuchte Links formatieren */ a:link { color: green; text-decoration: underline; }

114

Kapitel 4: Cascading Style Sheets

Pseudoklasse :visited Muster element:visited

Beschreibung

Gilt für alle Hyperlinks, die bereits besucht (vom Benutzer angeklickt) wurden. CSS-Version

1 und höher Browser

Alle gängigen Beispiel für :visited /* besuchte Links formatieren */ a:visited { color: #999999; text-decoration: none; font-style: italic; }

4.2.12 Pseudoelemente Diese Elemente sind nicht im HTML-Dokument selbst vorhanden. Sie stehen aber in logischen Abhängigkeiten von HTML-Tags zur Verfügung. Damit haben wir besondere Möglichkeiten der Formatierung. Pseudoelement :after Muster element:after

Beschreibung

Fügt den mit der Eigenschaft content festgelegten Wert nach dem Inhalt des Elements ein. CSS-Version

2.1 und höher

4.2 Selektoren

115

Browser

Alle gängigen, beim Internet Explorer erst ab Version 8 Beispiel für :after

Dies ist ein Zitat von Guru 2.0

/* Zitat anpassen */ blockquote:after { content: " [Zitat]"; }

Bild 4.15: Beispiel für das Pseudoelement :after

Pseudoelement :before Muster element:before

Beschreibung

Fügt den mit der Eigenschaft content festgelegten Wert vor dem eigentlichen Inhalt des Elements ein. CSS-Version

2.1 und höher Browser

Alle gängigen, Internet Explorer ab Version 8 Beispiel für :before

Dies ist ein Zitat von Guru 2.0

/* Zitat anpassen */ blockquote:before { content: "Der Guru 2.0 sagt: "; }

Bild 4.16: Beispiel für das Pseudoelement :before

116

Kapitel 4: Cascading Style Sheets

Pseudoelement :first-child Muster element:first-child

Beschreibung

Dieses Element wird zur Formatierung ausgewählt, wenn es das erste Kind eines anderen Elements ist. CSS-Version

2.1 und höher Browser

Alle gängigen Browser, Internet Explorer ab Version 7 Beispiel für :first-child /* erstes Kind-Element anpassen */ p:first-child { font-weight: bold; font-style: italic; }

Bild 4.17: Beispiel für das Pseudoelement :first-child

4.3 Hierarchie der CSS-Definitionen

117

Pseudoelement :first-line Muster element:first-line

Beschreibung

Die angegebene Formatierung wird auf die erste Zeile eines Elements angewendet. CSS-Version

1 und höher Browser

Alle gängigen Browser, Internet Explorer ab Version 7 Beispiel für :first-line /* nur die erste Zeile formatieren */ p:first-line {font-style: italic;}

Bild 4.18: Beispiel für das Pseudoelement :first-line

4.3

Hierarchie der CSS-Definitionen

Ein HTML-Dokument kann durchaus mehrere externe Style Sheets, ein eingebettetes Style Sheet und auch noch eingebettete Definitionen enthalten. Deshalb kann es bei CSS prinzipiell zu Konflikten bei der Definition kommen. Dann ist es wichtig zu wissen, welche Einstellungen gültig sind. Dazu gibt es die Begriffe Spezifität und Vererbung.

118

Kapitel 4: Cascading Style Sheets

4.3.1

Spezifität

Die Berechnung der Spezifität erfolgt anhand der Werte der folgenden Tabelle, wobei die Werte addiert werden. Ein Selektor, der fünf Identifier für Elemente enthält, hat somit den Wert 0-0-0-5 und ein Selektor mit einem Klassen-Identifier hat den Wert 0-0-1-0. Da die Spezifität von links nach rechts bewertet wird, kommt dem zweiten Beispiel mehr Gewicht zu. Art des Selektors

Spezifität

Universalselektor Kombinatoren

0

0

0

0

Identifier (Elemente, Pseudoklassen)

0

0

0

1

Identifier (Klassen, Pseudoklassen, Attribute)

0

0

1

0

Identifier (ID)

0

1

0

0

eingebettete Definitionen

1

0

0

0

4.3.2

Vererbung

Alle Elemente eines HTML-Dokuments bilden eine Baumstruktur, die Document-Object-Model36 genannt wird. Der body-Tag bildet hierbei die Wurzel des Baums. Alle weiteren Elemente werden in ihren Abhängigkeiten abgebildet. Beispiel für Vererbung ...

Eine Überschrift