Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S.

Größe: px

Ab Seite anzeigen:

Download "Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S."

Dominik Vogt
vor 7 Jahren
Abrufe

1 128 5XHTML&CSS* Wissensbaustein»CSS: ID-Attribut«(S. 180) Wissensbaustein»CSS: Umrandungen«(S. 182) Wissensbaustein»CSS: Füllungen & Abstände«(S. 185) Wissensbaustein»CSS: Pseudo-Klassen & -Elemente«(S. 193) Anzeigenmarkt Diese neuen Gestaltungsmöglichkeiten können nun auf den Web-Anzeigenmarkt angewandt werden: Wissensbaustein»Anzeigenmarkt: CSS-Einsatz«(S. 200) Wichtig für die Akzeptanz einer Website ist eine ergonomische Farbgestaltung, die mit XHTML und CSS umgesetzt werden kann: Wissensbaustein»Web-Farbgestaltung«(S. 203) 5.1 Von HTML zu XHTML ** Die Dokumentenbeschreibungssprache XHTML ist der Nachfolger von HTML. Sie besitzt eine strenge Syntax und wurde im Jahr 2000 als Web-Standard verabschiedet. Jedes XHTML-Dokument kann daraufhin geprüft werden, ob es»wohlgeformt«(well-formed) und»gültig«(valid) ist. XHTML-Befehle und Attribute werden kleingeschrieben. Alle Befehle besitzen eine Endemarkierung. Die Befehle müssen korrekt geschachtelt sein. Vor jedem XHTML-Dokument steht eine Dokumententyp-Deklaration. XHTML XHTML (extensible HyperText Markup Language) ist eine Kombination von HTML und XML (extensible Markup Language). XHTML enthält alle Befehle von HTML 4.01, verwendet aber die Syntax von XML. Ziel von XHTML ist es, HTML abzulösen.

2 5.1 Von HTML zu XHTML ** 129 In HTML kann»unsauber«programmiert werden. Die Browser tolerieren dies (siehe: Wissensbaustein»HTML: Zur Programmierung«(S. 104)). XHTML ist dagegen eine strengere Version von HTML, deren Programme daraufhin geprüft werden können, ob sie wohlgeformt (well-formed) und gültig (valid) sind. Wohlgeformt bedeutet, dass sich die Programme an die syntaktischen Regeln von XHTML halten. Ein Dokument ist gültig, wenn seine Struktur den Vorgaben eines Dokumententyps entspricht. XHTML 1.0 wurde im Januar 2000 eine offizielle W3C- Empfehlung. Die offizielle Beschreibung finden Sie hier: W3C-XHTML ( Warum eine neue Sprache? XHTML ist Web-Standard Die wichtigsten Unterschiede zwischen HTML und XHTML XHTML-Befehle müssen korrekt geschachtelt werden. richtig schachteln HTML: <i> <b>dieser Text ist kursiv und fett </i> </b> XHTML: <i> <b>dieser Text ist kursiv und fett</b> </i> XHTML-Dokumente müsssen wohlgeformt sein. Alle XHTML-Befehle müssen in den HTML-Wurzel-Befehl <html> eingeschachtelt sein. Die Struktur des Basis- Dokuments sieht folgendermaßen aus: wohlgeformt <html xmlns=" > <head>... </head> <body>... </body> </html> Die XHTML-Spezifikation schreibt vor, dass alle XHTML-Elemente im sogenannten Namensraum deklariert sein müssen. Daher

3 130 5XHTML&CSS* muss der <html>-befehl um das oben angegebene Attribut xmlns mit dem entsprechenden Wert ergänzt werden. alles kleingeschrieben immer mit Endemarkierung e XHTML-Befehle einschließlich der Attributnamen müssen in Kleinbuchstaben geschrieben werden. XHTML-Befehle müssen immer mit einer Endemarkierung abgeschlossen werden. HTML: <p>dies ist ein Abschnitt. <p>dies ist noch ein Abschnitt. XHTML: <p>dies ist ein Abschnitt. </p> <p>dies ist noch ein Abschnitt. </p> Besteht ein HTML-Befehl nur aus einer Anfangsmarkierung, dann muss er in XHTML mit /> abgeschlossen werden. e HTML: Dies ist ein Zeilenumbruch.<br> XHTML: Dies ist ein Zeilenumbruch. <br /> Tipp Immer Leerzeichen vor / Damit Browser, die noch kein XHTML können, XHTML- Dokumente verarbeiten können, sollte vor das /-Zeichen immer ein Leerzeichen gesetzt werden: < br / > anstelle von < br/ >. Attributwerte müssen in Anführungszeichen stehen. HTML: <a href = #Videofilme> XHTML: <a href = " #Videofilme " > Weglassen von Attributwerten ist nicht erlaubt.

4 5.1 Von HTML zu XHTML ** 131 Mit dem Attribut checked kann bei einem Einfachauswahlknopf (radio button) in einem Formular die Voreinstellung festgelegt werden. HTML: <input type="radio" name="frau" checked /> XHTML: <input type="radio" name="frau" checked= "checked" /> Das id-attribut ersetzt das name-attribut. HTML: <a name="anker1"> XHTML: <a id="anker1"> id und name benutzen Damit Browser, die noch kein XHTML können, XHTML- Dokumente verarbeiten können, sollte zusätzlich zum id- Attribut auch noch das name-attribut gesetzt werden. Tipp Alle XHTML-Dokumente müssen eine DOCTYPE-Deklaration besitzen sowie in der ersten Zeile eine Angabe enthalten, dass es sich um ein XML-Dokument handelt. Da jedes XHTML-Dokument auch ein XML-Dokument ist und jedes XML-Dokument diese Angabe in der ersten Zeile erfordert, ist dies auch hier erforderlich. Ein XHTML-Dokument muss also folgenden Aufbau besitzen: <?xml version="1.0" encoding="iso "?> <!DOCTYPE Hier steht der Dokumententyp> <html xmlns=" <title> Hier steht der Dokumententitel</title> </head> <body>... </body> </html> Die Deklaration des Dokumententyps gehört nicht zum

5 132 5XHTML&CSS* XHTML-Dokument selbst. Sie ist kein XHTML-Befehl und besitzt daher auch keine Endemarkierung. Zur Zeit gibt es drei Dokumententypen: Strict : Zu benutzen, wenn eine saubere Struktur gewünscht wird und/oder wenn CSS verwendet wird (siehe: Wissensbaustein»CSS«(S. 133)). Die Deklaration sieht folgendermaßen aus : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" " strict.dtd"> Transitional : Zu benutzen, wenn Browser verwendet werden, die kein CSS unterstützen. Die Deklaration sieht folgendermaßen aus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" " transitional.dtd"> Frameset : Zu benutzen, wenn HTML-Frames verwendet werden (siehe: Wissensbaustein»XHTML-Frames«(S. 250)). Die Deklaration sieht folgendermaßen aus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset //EN" " frameset.dtd"> Überprüfung von XHTML-Dokumenten HTML-Editoren Viele HTML-Editoren erlauben bereits eine Umstellung auf XHTML. Dann wird bereits beim Programmieren auf die korrekte Syntax überprüft.

5.2 CSS * 133 W3C bietet einen kostenlosen Validierungs-Service an: W3C- Validator (http://validator.w3.org/). In der 1. Zeile des Dokuments muss für die Validierung stehen: <?xml version="1.

6 5.2 CSS * 133 W3C bietet einen kostenlosen Validierungs-Service an: W3C- Validator ( In der 1. Zeile des Dokuments muss für die Validierung stehen: <?xml version="1.0" encoding="iso "?> Validatoren Immer XHTML verwenden Da die Unterschiede zu HTML nicht groß sind, die Zukunft aber XHTML heißt, sollten Sie immer XHTML für Ihre Web- Dokumente verwenden. Empfehlung Wenn Sie eigene HTML-Programme haben, dann wandeln Sie sie in XHTML-Programme um und prüfen Sie die Syntax mit dem W3C-Validierungsservice (siehe oben). Prüfen Sie, ob Ihr HTML-Editor XHTML unterstützt vielleicht sogar die Umwandlung in ein XHTML-Programm. Der WYSYWIG-HTML-Editor Dreamweaver (siehe: Wissens- Hinweis baustein»dreamweaver: Installation«(S. 393)) besitzt unter Datei/Konvertieren/XHTML eine Funktion, die eine HTML-Seite automatisch in eine XHTML-Seite umwandelt. 5.2 CSS Cascading Style Sheets * Die Zusatzsprache CSS (Cascading Style Sheets) zu HTML/XHTML ermöglicht es, Stil- bzw. Gestaltungsvorlagen für HTML- und XHTML-Dokumente zu formulieren, analog wie Formatvorlagen für Textverarbeitungssysteme. Eine CSS-Stilvorlage besteht aus CSS-Eigenschaften mit Werten, die HTML/XHTML- Befehlswörtern zugeordnet werden. CSS-Stilvorlagen sollten in eigenen Dateien mit der Dateiendung.css abgespeichert werden. Sie müssen dann in HTML/XHTML-Dateien importiert werden. CSS ermöglicht in HTML und XHTML die Trennung von Inhalt und Darstellung.

Ähnliche Dokumente

Internet und Webseiten-Gestaltung

Internet und Webseiten-Gestaltung Wirtschaftsinformatik 3 Vorlesung 28. April 2004 Dipl.-Inf. T. Mättig 2004-04-28 Internet und Webseiten-Gestaltung - T. Mättig 1 Vorbemerkungen Dipl.-Inf. T. Mättig E-Mail: