XHTML, CSS
Vorbereitungen
PowerHelpDesk
XHTML Workshop: Kapitel 1
Kapitel 1 wird sich mit den verschiedenen Möglichkeiten der Formatierung von HTML und CSS beschäftigen. Ich gehe auf einige veraltete ("deprecated") Tags ein, die nicht mehr eingesetzt werden sollten. Tags oder Attribute die deprecated sind oder nicht eingesetzt werden sollen, werde ich blau markieren, um sie noch deutlicher hervorzuheben.
Um richtig barrierefrei zu sein, sollte man alte Elemente auch auf den ersten Blick erkennen. Deswegen werde ich ein paar der Gegensätze erklären.
Wichtig für unseren Kurs ist das Einrücken von Quellcode. Da ich Eure Lösungen im Web betrachte, solltet Ihr Richtlinien wie den PHP Coding Standard verwenden. Ich werde eine Kurzfassung davon hier darstellen.
Richtlinien fürs Editieren
Wenn Ihr eigene Richtlinien habt oder entwickeln wollt, ist das total in Ordnung.
- (X)HTML-Dateien müssen immer mit dem richtigen Kopf beginnen (siehe DOCTYPEs). Wir nehmen den XHTML 1.1 strict. Diesen werde ich in jedem Beispiel und in jeder Musterlösung verwenden.
- Tags müssen stets in Kleinbuchstaben geschrieben werden.
- Alle Tags müssen geschlossen werden: <h1></h1>
- Wertzuweisungen für Attribute müssen immer mit Anführungsstrichen erfolgen.
- mit Tabs einrücken (2 bis 4 Zeichen pro Tabulator)
- Trennt zwei Blöcke oder logische Strukturen voneinander mit Leerzeilen. Macht Euren Source-Code leicht lesbar!
- Variablen/Bezeichnungen in CSS (oder JavaScript): Nur Abkürzungen verwenden, die wirklich JEDER kennt. KEIN "ueb" für "Überschrift" oder KEIN "str" für "string".
- Modular programmieren: Unterteilt Euren Code in logische Funktionsgruppen. Verschiedene Bereiche sollten im CSS unterteilt und voneinander zu unterscheiden sein.
- Kommentare von Anfang an (siehe Kapitel 2)
- Kommentare: ggf. "Gotcha Keywords" (:BUG:, :TRICKY:, etc.), wenn man z.B. ein möglichen Anzeige-Fehler im Browser vorhersieht: "2004-10-31 :BUG: IE 5.0 wird an dieser Stelle keine Formatierung anzeigen. Läuft problemlos im IE 6.0 und Mozilla 1.7.x"
Dokumentieren hilft nicht nur Euch (in ein paar Monaten), sondern auch jedem, der versucht Eure Strukturen zu verstehen - wenn man das überhaupt will. Auf Modularität gehe ich noch bei CSS genau ein.
CSS (Cascading Stylesheets)
Um zu erfahren, was CSS überhaupt ist, warum es etwas mit HTML zu tun hat, solltet Ihr Euch selfHTML: Formatsprache für HTML-Elemente und selfHTML: Sinn und Zweck von CSS Stylesheets durchlesen.
CSS sollte in den meisten Fällen den HTML-Möglichkeiten vorgezogen werden. Mit HTML ist man in der Lage grundlegende Formatierungen wie z.B. Fettdruck oder Kursivschrift zu realisieren. Schriftarten und -größen können mit <font> realisiert werden, aber auch mit CSS. Da der FONT-Tag als deprecated eingestuft wird, ist hier eine Verwendung von CSS dringend zu empfehlen. An anderen Stellen ist eine Unterscheidung schwieriger.
Zwei Beispiele, wie man Kursivschrift realisieren könnte:
Diese <i>Schrift ist kursiv</i> dargestellt.
Diese <span style="font-style: italic">Schrift ist kursiv</span> dargestellt.Das erste Beispiel ist mit normalen HTML-Möglichkeiten realisiert, während das zweite CSS benutzt.
Die Tags div und span sind Block-Elemente, die bei barrierenfreien WebSeiten eine große Rolle spielen. Ich empfehle Euch alle Informationen zu diesen Tags sorgfältig durchzulesen.
Es würde vielleicht einfacher sein, HTML ohne CSS zu lernen, aber HTML ohne CSS ist meiner Meinung nach als deprecated einzustufen *grins*. Außerdem ist barrierefreies WebDesign ohne CSS nicht vorstellbar.
Überschriften - Ausrichtung mit HTML
Es existieren sechs vorgegebene Überschriften in HTML. Zum Beispiel stellt der Tag "<h2>" eine Überschrift der zweiten Ebene dar. Tippt folgendes ab und speichert es unter "01_ueberschriften.htm".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Überschriften mit und ohne CSS</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> <h1 align="center">Überschrift 1. Ordnung</h1> Text aus dem Lorem Ipsum: Vivamus ut est. Nam laoreet augue at lorem. <h2 align="center">Überschrift 2. Ordnung</h2> Text aus dem Lorem Ipsum: Suspendisse eleifend mi quis nibh. Duis convallis nulla eu eros laoreet porttitor. Quisque lorem tortor, pellentesque eget, consectetuer in, tempor in, odio. <h3 align="right">Überschrift 3. Ordnung</h3> Nulla a ligula. Quisque tempor. Nunc ac sem ullamcorper sem malesuada hendrerit. Sed ultricies erat sit amet tortor. </body> </html>
Überschriften werden mit dem Attribut "align" entweder zentriert, links (Standardausrichtung) oder rechts dargestellt. Das Attribut "align" kann und sollte mit CSS realisiert werden.
Definieren von globalen CSS-Definitionen
Ich unterscheide zwischen globalen CSS-Definitionen und CSS-Definitionen für einzelne Bereiche. Die globalen CSS-Definitionen gelten für das ganze Dokument. Es folgt ein Beispiel, wie man die Tags BODY und H1 umdefinieren kann:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Erste CSS-Definitionen</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body
{
font-family: Arial;
font-size: 0.9em;
}
h1
{
font-size: 1.2em;
text-align: right;
}
</style>
</head>
<body>
<h1>Überschrift der ersten Ebene</h1>
Praesent tincidunt bibendum purus. Duis accumsan. Aenean interdum
odio in tellus. Nulla facilisi. Suspendisse sodales mi sit amet
lectus. Vestibulum eleifend ligula. Etiam interdum.
</body>
</html>
Weitere Möglichkeiten CSS in HTML einzubinden solltet Ihr unter selfHTML: CSS Stylesheets in HTML einbinden nachlesen.
Aufgabe 4
Ein paar Fragen zum letzten und diesem Kapitel:
- Welche Arten von Wertzuweisungen gibt es bei Attributen von Tags (HTML-Elementen)?
- Gibt es einen Unterschied zwischen XHTML und HTML bei alleinstehenden Attributen? Wenn ja, nennt jeweils ein Beispiel.
- Wie werden die Wertzuweisung seit dem HTML-Standard 4.0 von Attributen vorgenommen? (" = Anführungsstriche oder = Hochkommata)
- Wieviele Möglichkeiten gibt es CSS in einer WebSeite einzubinden? Gebt für jede Möglichkeit ein Beispiel an.
Aufgabe 5
Erstellt eine neue Webseite (mit dem Doctype "XHTML 1.1 strict") und zwei verschiedenen Überschriftstypen und Blindtext.
Aufgabe 6
Versucht mit Hilfe des selfHTML herauszufinden, wie Aufzählungslisten und Verweise zu anderen Seiten realisiert werden können. Erstellt eine neue Webseite, die eine
- <h1>Überschrift</h1>
- Aufzählungsliste mit 5 Punkten
- und im Blindtext einen Verweis zu einer anderen Seite (www.heise.de)
