HTML 4 HTML4F. Autor: Heiko Schröder. Inhaltliches Lektorat: Andreas Dittfurth. 4. überarbeitete Ausgabe, 2009

Transkript

1 HTML4F Autor: Heiko Schröder Inhaltliches Lektorat: Andreas Dittfurth 4. überarbeitete Ausgabe, 2009 HERDT-Verlag für Bildungsmedien GmbH, Bodenheim Internet: Alle Rechte vorbehalten. Kein Teil des Werkes darf in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren) ohne schriftliche Genehmigung des Herausgebers reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. Dieses Buch wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. HTML 4 Zusatzwissen zur Gestaltung von Webseiten HTML4F Sollte es uns trotz intensiver Recherchen nicht gelungen sein, alle Rechteinhaber der verwendeten Quellen und Abbildungen zu finden, bitten wir um kurze Nachricht an die Redaktion. Die in diesem Buch und in den abgebildeten bzw. zum Download angebotenen Dateien genannten Personen und Organisationen, Adress- und Telekommunikationsangaben, Bankverbindungen etc. sind frei erfunden. Übereinstimmungen oder Ähnlichkeiten mit lebenden oder toten Personen sowie tatsächlich existierenden Organisationen oder Informationen sind unbeabsichtigt und rein zufällig. Die Bildungsmedien des HERDT-Verlags enthalten Links bzw. Verweise auf Internetseiten anderer Anbieter. Auf Inhalt und Gestaltung dieser Angebote hat der HERDT- Verlag keinerlei Einfluss. Hierfür sind alleine die jeweiligen Anbieter verantwortlich.

2 I HTML 4 - Zusatzwissen zur Gestaltung von Webseiten Einführung 1 Was Sie wissen sollten Erweiterte HTML-Tags Grundlegende Begriffsdefinitionen Die verwendete doctype-deklaration Universalattribute Multimedia-Objekte Meta-Tags Optische Gestaltung mit CSS 3 Grundlagen von CSS Entwicklung von CSS Stylesheets einbinden Definitionen vererben Kommentare Übung CSS, Schriftformatierung Übersicht der möglichen Schriftformatierungen Schriftart und -größe Schriftschnitt Angabe der Schrift in Kurzform Text ausrichten Groß- und Kleinschreibung Text hervorheben Textabstände Umrandungen und Abstände Texteinzug Listen formatieren Übung CSS, Farben und Hintergründe Die möglichen CSS-Eigenschaften Syntax zur Farbdefinition Textfarben definieren Hintergründe Übung CSS, Elemente positionieren Eigenschaften für die Elemente Elemente positionieren Größenangaben Unsichtbare Elemente Ebenen anlegen Service im Internet Übung Interaktion und Dynamik mit JavaScript 7 JavaScript Grundlegendes zu JavaScript JavaScript im Browser aktivieren JavaScript-Aktivierung im Browser testen Das Grundgerüst Kommentare Datentypen Bezeichner Variablen Operatoren Programmsteuerung Auswahl Wiederholung Schleifensteuerung Übung Funktionen in JavaScript Interaktionen Funktionen Objektunabhängige Funktionen Objektmodell in JavaScript Einführung in das Objektmodell Objekt navigator Objekt window Objekt document Objekt event Objekt history Objekt location Objekt frames Vordefinierte Objekte in JavaScript Übung Zugriff auf HTML-Elemente Grundlagen zum document-objekt Unterobjekt anchors Unterobjekt links Unterobjekt applets Unterobjekt forms Eingabefelder Kontroll- und Optionsfelder Auswahllisten Schaltflächen Eingaben überprüfen Unterobjekt images Übung HERDT-Verlag

3 Inhalt I 11 Dynamic HTML Bestandteile des dynamischen HTML DOM-Standard ermitteln Container erstellen Ebenen anzeigen und verbergen Ebenen positionieren Ebenen bewegen Umfangreiches Beispiel Übung Anhang A1 Cascading-Style-Sheet-Referenz A2 JavaScript-Objektreferenz A3 DOM-Referenz Stichwortverzeichnis Grundlagen zu AJAX 12 Kurzeinstieg in AJAX Was steckt hinter AJAX? Das XMLHttpRequest-Objekt Was ist noch möglich? HERDT-Verlag 3

4 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten 3 Grundlagen von CSS In diesem Kapitel erfahren Sie was Stylesheets sind und was sie bewirken die erweiterten Funktionen zum Definieren von Stylesheets wie Formatierungen vererbt werden wie Kommentare eingefügt werden Voraussetzungen Grundlegende CSS-Kenntnisse 3.1 Entwicklung von CSS Möglichkeiten mit Stylesheets, gefunden auf Die Beschreibungssprache HTML weist viele typografische Unzulänglichkeiten auf. So können Sie bestimmte Elemente einer Webseite nur mithilfe von Tabellen an bestimmte Stellen des Dokuments platzieren. Der Quellcode wird schnell unübersichtlich und die HTML-Datei immer größer. Eine wirklich exakte Positionierung der Seitenelemente ist damit immer noch nicht gegeben. Ende 1996 wurden die Stylesheets als Gestaltungssprache im Internet standardisiert. Diese Stylesheets, offiziell Cascading Style Sheets (CSS), waren der erste Schritt zur Erweiterung der Fähigkeiten der Beschreibungssprache HTML. Cascading Style Sheets, auf Deutsch bedeutet dies in etwa "aufeinander aufbauende Stilvorlagen", sind Formatvorlagen für das Internet, die Formatierungen für die Texte der Webseiten beinhalten. 16 HERDT-Verlag

5 Grundlagen von CSS 3 Die Cascading Style Sheets sind den Formatvorlagen herkömmlicher Desktop-Publishing-Programme sehr ähnlich. Sie bestimmen beispielsweise die Schriftart und -größe, die Breite von Absätzen oder die Farbe des Textes oder Hintergrunds und weisen diese Formatierungen einem Element, Absatz oder dem gesamten Dokument zu. Nehmen Sie eine Änderung der Formatvorlagen vor, dann wirkt sich dies auf die entsprechenden Elemente aus. Folgende Vorteile bieten Ihnen die Stylesheets gegenüber den herkömmlichen HTML-Formatierungen: Bessere Kontrolle über Layouts, Schriftarten, Farben, Hintergrundfarben und andere typografische Aspekte als je zuvor. Die Möglichkeiten der Layoutgestaltung nähern sich dem professionellen Design. Eine schnelle Möglichkeit zur kompletten Umgestaltung einer unbegrenzten Anzahl von Webseiten, da die Dokumentenformatierungen in eine separate Datei ausgelagert werden können Das gleichbleibende Erscheinungsbild einer Webseite in den verschiedenen Browsern auf verschiedenen Computern wurde verbessert. Zur Formatierung von HTML-Tags sind weniger Angaben notwendig. Dies bedeutet kleinere Dateigrößen und somit einen schnelleren Download der Webseiten. In diesem und den nächsten Kapiteln lernen Sie die Welt der Stylesheets kennen. Sie erlernen dabei die Grundlagen, wie Sie Stylesheets für Schriften, Farben, Hintergründe und genaue Positionierungen erstellen. Für weitergehende Informationen hilft Ihnen das Buch CSS - Cascading Style Sheets (Level 2.1) weiter. Browser-Unterschiede Das W3-Konsortium gibt regelmäßig neue Richtlinien zur Darstellung von Elementen heraus, um ein einheitliches Erscheinungsbild der Elemente zu garantieren. Bis vor ein paar Jahren interpretierten die Browser die standardisierten Angaben der Stylesheets sehr unterschiedlich. Bei der neuen Browsergeneration können Sie davon ausgehen, dass bis zu 99 % der Stylesheet-Definitionen korrekt wiedergegeben werden. Sie als Entwickler einer Webseite sollten sich dennoch nicht auf die Darstellung in einem Browser verlassen, sondern Ihr Endprodukt in verschiedenen Browsern testen und gegebenenfalls Anpassungen auf ein gemeinsames Maß vornehmen. Innerhalb dieses Buches soll, wenn es notwendig ist, auf die unterschiedlichen Interpretationen von Stylesheets aufmerksam gemacht werden. 3.2 Stylesheets einbinden Sie können Stylesheets auf fünf verschiedene Arten für ein Dokument festlegen: Als Definition im Kopf des HTML-Dokuments Als Definition in einer separaten Datei Als importierte Definition Als Definition für ein bestimmtes Element Als Schnellformatierung für einen Textabschnitt Stylesheets im Dokumentenkopf festlegen <style type="text/css"> </style> Dies ist das Grundgerüst zum Definieren von Stylesheets. Das Tag style (Stil) leitet die Definition der Formatierungen ein. Erst die Angabe type="text/css" spezifiziert die nachfolgenden Angaben als CSS (Cascading Style Sheets). Browser, die keine Stylesheets unterstützen, ignorieren die Angaben innerhalb der Style-Angaben. Stylesheet-Angaben, die auf diese Weise im Kopf der HTML-Datei definiert werden, sind nur für diese eine HTML-Datei gültig. Möchten Sie mehreren Dateien dieselben Eigenschaften zuweisen, müssen Sie die Stylesheets in einer externen Datei definieren und in die HTML-Dateien einbinden. HERDT-Verlag 17

6 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten Stylesheets aus einer Datei laden <link type="text/css" rel="stylesheet" href="css-datei"> Mit dieser Angabe im Kopf des Dokuments verweisen Sie auf die Stylesheet- Angaben in der angegebenen CSS-Datei. link verweist auf eine externe Datei, type="text/css" spezifiziert die Stylesheets, rel="stylesheet" stellt den Bezug zu den Stylesheets dar. href="css-datei" enthält den Namen der Datei mit den Formatdefinitionen, die eingebunden werden soll. Stylesheets importieren Eine weitere Möglichkeit ist das Importieren von Stylesheets. Dies funktioniert grundsätzlich genauso wie das Laden aus einer Datei, jedoch über die CSS-spezifische Syntax. <style url(css-datei); </style> Die Importangabe zum Laden der Formatierung wird innerhalb der Stylesheet-Definition gesetzt. Die url() lädt die angegebene CSS-Datei zur Formatierung der Webseite. Beispiel <style url(layout.css); </style> Stylesheet für ein Element festlegen Neben dem Einbinden von Stylesheetdateien und dem Definieren des entsprechenden Selektors haben Sie auch die Möglichkeit, die Formatangaben direkt am HTML-Tag festzulegen. Dazu geben Sie die Formatierungen als Wert des Attributs style innerhalb des HTML-Tags an. style="" Die Formatierung wird als Attribut dem entsprechenden Tag hinzugefügt. Zu beachten ist hierbei, dass die Werte in Anführungszeichen gesetzt werden müssen. Beispiel <div style="color:red; font-size:14pt">text</div> Der Text wird in roter Farbe mit einer Größe von 14 pt dargestellt. Diese Art der Formatierung ähnelt der bisherigen HTML-Formatierung. So kann der HTML-Code <p><font size="+2" face=" Verdana,Arial,sans-serif" color="blue">text</font></p> auch mit den nachfolgenden Stylesheets beschrieben werden. <p style="font-size:12pt; font-family:verdana,arial,sans-serif; color:blue">text</p> Der Nachteil dieser Formatierung ist jedoch, dass Sie wie in HTML jedes einzelne Element einer Webseite mit den Eigenschaften formatieren müssen. Geben Sie keine Formatierungen an, werden die HTML-Tags mit den Standardattributen des Browsers dargestellt. 18 HERDT-Verlag

7 Grundlagen von CSS 3 Beispiel: kap03\style_inline.html Bei dem Beispiel benötigen Sie am Beginn des Dokuments keine Stylesheets, der Browser erhält die notwendigen Formatierungsbefehle durch das Attribut style im jeweiligen HTML-Tag. <html> <head> <title>stylesheets am Element</title> </head> <body> <h1 style="font-size:10pt; background-color:red;">stylesheets: Fast alles ist möglich</h1> <p style="font-family:verdana,arial,sans-serif">erfreuen Sie sich an den Möglichkeiten.</p> </body> </html> Ergebnis der Formatierung Teile eines Elements mit <span> formatieren Mit dem Attribut style legen Sie eine Formatdefinition für ein bestimmtes HTML-Tag fest. Was ist jedoch, wenn Sie beispielsweise innerhalb des Elements ein einzelnes Wort besonders formatieren möchten? Dafür gibt es das spezielle HTML-Tag <span>, mit dem Sie einzelne Bereiche markieren können. <span> </span> <span> (umfassen) ist dem Tag <div> sehr ähnlich. Dieses Tag stellt eine besondere Markierung für den Browser dar, die speziell formatiert werden kann. Die Formatierung können Sie auf zwei verschiedene Arten erzwingen: <span style=""> Die Formatierung wird an der Markierung definiert. <span class=""> Der Markierung wird eine Klasse, die bestimmte Formatierungen enthält, zugewiesen. Im Verlauf dieses Kapitels werden die Funktionen von Klassen näher erläutert. Beispiel Zuerst wird einem Bild eine weiße Umrandung hinzugefügt. Im zweiten Beispiel wird ein Teil des Textes besonders hervorgehoben. <p><span style="border:1px solid white"><img src="bild.jpg"></span><br>text</p> <p>ein <span class="fett">ganz wichtiger</span> Text.</p> Beispiel: kap03\span.html Mithilfe des HTML-Tags <span> können Sie einzelne Bereiche eines Elements markieren und damit eine andere Formatierung des Aussehens zuweisen. Diese Formatierung bleibt so lange bestehen, bis das </span>-tag den markierten Bereich wieder schließt. HERDT-Verlag 19

8 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten <html> <head> <title>span</title> </head> <body> <p>dies ist ein Absatz, der nicht formatiert wurde und demzufolge in der Standardschrift und -größe angezeigt wird. <span style="color:red; font-family:verdana,arial,sans-serif; font-size:14pt;">die Formatierung mit <span> ändert mitten im Absatz das Aussehen des Textes.</span> Das schließende </span> hebt die Formatierung natürlich wieder auf.</p> </body> </html> Da keine Formatierung vorgegeben ist, wird der Absatz in der Standardschriftart und -größe dargestellt. Über das Tag <span> markieren Sie den nachfolgenden Text und weisen ihm über das Attribut style eine besondere Formatierung zu. Das schließende Tag </span> beendet die Formatierung. Der Rest des Absatzes wird wieder in den Standardeinstellungen angezeigt. Mit <span> formatierter Text innerhalb eines Absatzes (kap03\span.html) Definierte Stylesheets überschreiben Sie können zur Formatierung Ihrer Webseite mehrere Arten der Stylesheet-Definition benutzen. Das heißt, es ist möglich, die Informationen einmal aus einer Datei zu laden und innerhalb des Dokuments weitere Definitionen festzulegen. Stellen Sie sich vor, Sie benutzen drei verschiedene Varianten, um Formatierungen zu definieren. In jeder Variante werden verschiedene Formatierungen für das Tag <p> festgelegt. Die importierte Datei teilt z. B. dem Browser mit, dass der Text des Abschnitts in der Farbe Rot darzustellen ist. Die Formatierung im Dokumentenkopf gibt jedoch Gelb vor, und im Dokument selbst haben Sie mit <p style="color:green"> eine grüne Farbe angegeben. Die Frage, die sich hierbei stellt, ist: Wie wird die Formatierung letztendlich aussehen? Die Browser nutzen zum Anzeigen der Formatierungen eine bestimmte Reihenfolge zur Darstellung der Stylesheets. Es wird immer die zuletzt angegebene Definition eines Elements benutzt. Existiert bereits eine Formatierung für ein Element, werden die zusätzlichen Angaben hinzugefügt und bereits vorhandene Formatierungen überschrieben. Beispiel: kap03\layout.css In einer externen Datei befinden sich folgende Formatvorgaben: body { font-family:verdana,arial,sans-serif; font-size:10pt; color:black; } h1 { font-family:verdana,arial,sans-serif; font-size:18pt; color:green; } p { font-family:"courier New, monospace"; color:white; background-color:gray; } 20 HERDT-Verlag

9 Grundlagen von CSS 3 In der externen Datei werden die Formatierungen für alle Elemente des Dokuments <body>, die Überschriften <h1> und die Textabsätze <p> festgelegt. Beispiel: kap03\style_ueberschreiben.html Im Kopf der Webseite weisen Sie diese Formate zu: <html> <head> <title>überschreiben von Stylesheets</title> <link type="text/css" rel="stylesheet" href="layout.css"> <style type="text/css"> p { color:blue; background-color:yellow; } /* <p> überschreiben */ </style> </head> Im Kopf der HTML-Datei werden die Formatierungen aus der Datei layout.css geladen. Zusätzlich wird eine Formatierung für die Absätze angegeben, womit die bisherige Formatdefinition für das Tag <p> überschrieben wird. Innerhalb des Dokumentenkörpers <body> geben Sie weitere Textformatierungen an: <body> <h1><h1>-formatierung in einer externen Datei.</h1> <p>im Dokumentenkopf überschriebene <p>-formatierung, also blaue Schrift auf gelbem Untergrund.</p> <h1 style="font-size:12pt; color:red;">überschriebene <h1>-formatierung direkt am HTML-Tag.</h1> <p style="font-family:verdana,arial,sans-serif">geänderte Schriftart am <p>-tag.</p> </body> </html> Die Überschrift wird mit den Eigenschaften aus der externen CSS-Datei formatiert. Der erste Absatz erhält die Formate aus dem Dokumentenkopf. Innerhalb des Tags <h1> werden die Schriftgröße und die Farbe geändert. Direkt am Absatz wird eine andere Schriftart angegeben. Auswirkung des Überschreibens von Formatierungen (kap03\style_ueberschreiben.html) Rangfolge unterbrechen Über die folgende Festlegung können Sie die Rangfolge der definierten Stylesheets verändern. Die Angabe von!important durchbricht die Reihenfolge und legt fest, welche Formatierung nicht überschrieben werden darf. Dieses Schlüsselwort darf jedoch nicht für eine komplette Definition angegeben werden, sondern muss für jede Formatierung einzeln angewendet werden, z. B. h3 { color: green!important; font-size:14pt!important; }. HERDT-Verlag 21

10 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten 3.3 Definitionen vererben Verschiedene Klassen festlegen Um alle Absätze einer Webseite zu formatieren, definieren Sie die Eigenschaften für den Selektor p. p { color:blue; font-size:10pt; } Diese Angabe besagt, dass die Inhalte der gesamten Absätze <p> eines Dokuments in der Farbe Blau und der Schriftgröße 10 pt dargestellt werden. Was ist aber, wenn Sie beispielsweise den Text des ersten Absatzes in roter Farbe darstellen möchten und wenn die Schriftgröße des zweiten Absatzes verkleinert werden soll? Mit der Unterteilung von Stylesheets in Klassen ist dies kein Problem. Das Anlegen von speziellen Klassen eines Stylesheets sieht folgendermaßen aus: Selektor.Klasse { Eigenschaft1: Wert1; Eigenschaft2: Wert2;...}.Klasse { Eigenschaft1: Wert1; Eigenschaft2: Wert2;...} Zuerst geben Sie standardmäßig den entsprechenden Selektor an. Nachfolgend weisen Sie einen Klassennamen zu, den Sie selbst bestimmen können. Der Name der Klasse wird dabei durch einen. von dem Selektor getrennt, beispielsweise p.rot, li.gruen oder p.klein. Dahinter folgt in den geschweiften Klammern die Vereinbarung zur Formatierung des Elements. p.rot { color:red; } p.gruen { color:green; } p.klein { font-size:8pt; } Für das HTML-Tag <p> wurden drei verschiedene Klassen zur unterschiedlichen Formatierung definiert. Es ist auch erlaubt, mehrere Selektoren mit dem gleichen Klassennamen zu definieren, beispielsweise p.gelb, li.gelb und h1.gelb. Ohne die Angabe des Selektors könnte eine Definition wie nachfolgend aussehen:.klein { font-size:8pt; } Diese Form der Klassendefinition ohne Angabe eines speziellen Selektors ist ein Sonderfall, denn sie bezieht sich nicht auf ein spezielles Tag. Dies bedeutet, jedem Element einer HTML-Seite kann diese Formatierung zugewiesen werden. Dieser Selektor wird auch als Klassenselektor bezeichnet. Die Namen der Klassen sollten nicht zu lang gewählt werden. Außerdem dürfen sie keine Leerzeichen enthalten. Deutsche Sonderzeichen wie ä, ö, ü bzw. ß sind möglich. Um Inkompatibilitäten vorzubeugen, sollten Sie diese jedoch nicht verwenden. Beachten Sie ebenfalls, dass Sie zwar auch Zahlen im Klassennamen angeben können, jedoch der Name der Klasse nicht mit einer Zahl beginnen darf. Schreiben Sie statt p.3 lieber p.drei oder statt p.2klein lieber p.klein2. Die unterschiedlichen Klassen weisen Sie dem entsprechenden HTML-Tag über das Attribut class zu. class="klassenname" Eine bestimmte Klasse einer Stylesheet-Definition weisen Sie über das Attribut class zu. Dieses wird innerhalb des entsprechenden HTML-Tags eingefügt. Beispiel <p class="rot"> Text </p> <p class="klein" align="center"> Text </p> Das Aussehen des ersten Absatzes wird nach den Festlegungen des Selektors p.rot und des Klassenselektors.rot bestimmt. Der Inhalt des zweiten, zentriert gesetzten Absatzes wird über p.klein bzw..klein formatiert. 22 HERDT-Verlag

11 Grundlagen von CSS 3 Beispiel: kap03\style_klassen.html Sie werden verschiedene Überschriften und Absätze erstellen, denen Sie unterschiedliche Stylesheet-Klassen zuweisen. <html> <head> <title>klassen von Stylesheets</title> <style type="text/css"> body { font-family:verdana,arial,sans-serif; } h1 { font-size:20pt; color:gray; } p.hintergrund { background-color:silver; } p.kursiv { font-style:italic; }.klein { font-size:8pt; } </style> </head> <body> <h1>stylesheets: Verwenden von Klassen</h1> <p>body { font-family:verdana,arial,sans-serif; }<br>der Text des gesamten Dokuments wird standardmäßig in der Schriftart: Verdana dargestellt.</p> <p class="hintergrund">p.hintergrund { background-color:silver; } <br>dieser Text besitzt einen hellgrauen Hintergrund.</p> <p class="kursiv">p.kursiv { font-style:italic; } <br>dieser Text wird in kursive Schrift gesetzt.</p> <p class="klein">.klein { font-size:8pt; } <br>dieser Text besitzt eine kleinere Schriftgröße.</p> <h1 class="klein">.klein { font-size:8pt; } <br>auch der sonst großen Überschrift h1 kann diese Klasse zugeordnet werden.</p> </body> </html> Der Inhalt des Tags <body>, also der Text der gesamten Webseite, wird in der Schriftart Verdana dargestellt. Die Überschrift <h1> wird in der Schriftgröße 20 pt und in grauer Textfarbe dargestellt. Ein Absatz mit der Klasse hintergrund erhält eine hellgraue Hintergrundfarbe. Ein Absatz mit der Klasse kursiv wird auch entsprechend kursiv formatiert. Der Klassenselektor.klein mit der Schriftgröße 8 pt kann jedem HTML-Tag zugewiesen werden. Definition und Auswirkungen der unterschiedlichen Stylesheet-Klassen HERDT-Verlag 23

12 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten Möchten Sie größeren Textabschnitten, die beispielsweise aus Überschriften, Fließtext und Listen bestehen, dieselben Formateigenschaften zuweisen, so umschließen Sie diese Elemente mit dem Container-Tag <div></div>. Anschließend definieren Sie die gewünschte Formatierung als Klassen für das HTML-Tag div. <style type="text/css"> div.gruen { font-family:verdana,arial,sans-serif; color:green; } </style>... <div class="gruen"> <h1>stylesheets: Verwenden von Klassen</h1> <p> Text </p> <p> Text </p> </div> Die Überschrift <h1> sowie die Absätze <p> werden in der Schriftart Verdana und in grüner Farbe angezeigt. Formatabhängige Klassen Es gibt noch eine weitere Art, Klassen für spezielle Fälle zu definieren. Stellen Sie sich vor, Sie möchten einzelne Wörter innerhalb von Absätzen besonders hervorheben. Bisher können Sie dies über verschiedene physische Textformatierungen wie z. B. <b> realisieren. Wäre es nicht effektiver, wenn dieser Text beispielsweise automatisch in einer auffälligen Farbe (z. B. Rot) dargestellt würde, und zwar ohne dass Sie eine Formatierung von Hand vornehmen müssen? Diese Klassen werden formatabhängige Klassen genannt. Selektor1 Selektor2 { Eigenschaft1: Wert1; Eigenschaft2: Wert2;...} Selektor1.Klasse Selektor2 { Eigenschaft1: Wert1; Eigenschaft2: Wert2;...}.Klasse Selektor { Eigenschaft1: Wert1; Eigenschaft2: Wert2;...} Bei der Angabe zweier Selektoren wird die Formatierung nur dann angewendet, wenn sich Selektor2 innerhalb des ersten Selektors befindet, also das zweite Tag vom ersten Tag umschlossen wird. p b { color:red; } Diese Formatierung wird erst angewendet, wenn ein Absatz <p> definiert ist. Ist innerhalb des Absatzes ein Textabschnitt als fett <b> gekennzeichnet, wird er nach den Stylesheet-Angaben formatiert. Trifft eine Angabe nicht zu, wird die Formatierung auch nicht ausgeführt. td.courier kbd { font-size:12pt; font-family:"courier New"; }.normal i { background-color:#ffff00; } Wenn in einer mit class="courier" definierten Tabellenzelle ein Teil des Inhalts vom Tag <kbd> umschlossen ist, wird dieser Teil des Inhalts in der Schriftart Courier New und einer Größe von 12 pt dargestellt. Im zweiten Fall muss der Inhalt von <i> umschlossen sein und sich in einem mit normal klassifizierten HTML-Tag befinden. Die Formatierung wird von links nach rechts auf Übereinstimmung kontrolliert. Treffen alle Angaben zu, wird das entsprechende Element wie angegeben formatiert. 24 HERDT-Verlag

13 Grundlagen von CSS 3 Beispiel: kap03\ style_format.html Die formatabhängigen Klassen wenden Sie gleich auf ein Beispiel an. <html> <head> <title>klassen von Stylesheets</title> <style type="text/css"> body { font-family:verdana,arial,sans-serif; } h1 { font-size:20pt; color:gray; } p.hintergrund b { background-color:silver; color:red; } p i { font-style:italic; color:red;} </style> </head> <body> <h1>stylesheets:<br>verwenden von formatabhängigen Klassen</h1> <p>body { font-family:verdana,arial,sans-serif; }<br>der Text des gesamten Dokuments wird standardmäßig in der Schriftart: Verdana dargestellt.</p> <p class="hintergrund">p.hintergrund <b>b</b> { background-color:silver; color:red; }<br><b>dieser Text wird rot hervorgehoben und besitzt einen hellgrauen Hintergrund.</b></p> <p>p <i>i</i> { font-style:italic; }<br><i>dieser Text wird in kursive Schrift gesetzt.</i></p> </body> </html> Bei dieser Formatdefinition wird der Hintergrund der Webseite grau gesetzt und die Schriftfarbe Rot für den Inhalt verwendet. Neben der kursiven Formatierung wird auch die rote Schriftfarbe eingesetzt. Dem Absatz wird die Klasse hintergrund zugewiesen. Der jeweils vom Tag <b> umgebene Text trifft auf die Selektorangabe zu und wird deshalb entsprechend eingefärbt. Hier wirkt die Angabe, sodass der von <i> umgebene Inhalt neben der kursiven Ausrichtung auch in roter Farbe dargestellt wird. Formatabhängige Klassen HERDT-Verlag 25

14 3 HTML 4 - Zusatzwissen zur Gestaltung von Webseiten 3.4 Kommentare Beim Erstellen der verschiedenen Formatierungen und deren Unterklassen ist es ratsam, dass Sie die unterschiedlichen Formatdefinitionen kommentieren. Kommentare werden vom Browser ignoriert und nicht angezeigt. /* Kommentar */ Kommentare können Sie an jeder beliebigen Stelle innerhalb der CSS_Definition notieren. Mit /* leiten Sie einen Kommentar ein, und mit */ beenden Sie ihn wieder. So geben Sie auch einzeilige Kommentare hinter einer Formatdefinition an. Beispiel /* Die Schriftfarbe im ersten Absatz ist immer Blau */ p.eins { color: blue; } li { font-family:"courier New" } /* Listen immer in Courier */ 3.5 Übung Theoriefrage zu CSS Übungsdatei: -- Ergebnisdatei: kap03\uebung1.doc Wie lautet das CSS-Grundgerüst, um Stylesheets im Kopf einer Webseite zu definieren? Stylesheets definieren Übungsdatei: -- Ergebnisdateien: kap03\uebung2.html, kap03/layout.css, kap03\uebung3.html, kap03/uebung4.doc Erstellen Sie ein HTML-Dokument mit einer Überschrift <h1> sowie einem Absatz <p>. Folgende Stylesheet-Angaben sind vorgegeben: h1 { font-family:verdana,arial,sans; font-size:18pt; color:red; } p { font-family:"courier New",sans-serif; font-size:10pt; color:blue; } Binden Sie diese Definition als externe Stylesheet-Datei in Ihr Dokument ein. Fügen Sie dem Dokument einen weiteren Absatz hinzu. Dieser soll eine andere Schriftfarbe besitzen als der erste Absatz. Zeigen Sie anhand zweier Möglichkeiten auf, wie Sie dies realisieren könnten. Wie erreichen Sie, dass eine Überschrift dieselbe Schriftgröße, Schriftfarbe und Schriftart besitzen kann wie ein Textabsatz? 26 HERDT-Verlag

15 Grundlagen von CSS 3 HERDT-Verlag 27