XHTML

XHTML + CSS
warum es sinnvoll ist.
Nach B. Seibert u. M. Hoffmann
und: http://www.websitedev.de/xhtml/xhtml1//

H. Mittendorfer, Okt. 2012

Kennzeichnung

• (X)HTML nutzen aber nicht kennzeichnen,
weil die meisten Server/Browser nicht
richtig ausliefern, der Code aber dennoch
richtig geparst wird.
• Also: „text/html“ statt
• „application/xhtml+xml“

Wohlgeformt

• Konzept aus XML
• bedeutet „strenge Syntax“
• daher schnellere Ausführung

XHTML will: sauberen
Quellcode

• Elemente Schließen
• Korrekt verschachteln
• Elemente und Attribute klein schreiben
• Attributwerte immer in Anführungszeichen

Alle Elemente schließen

• <p> Text im Absatz</p>
• <br />
• <img src=“bilder/foto.jpg“ alt=“....“ />

Korrekte
Verschachtelung
• Fehlerverzeiendes HTML:
• <b><i>kursiv & fett</b></i>
• XHTML:
• <b><i>kursiv & fett</i></b>

Case sensitive

• Nicht case sensitive:
• <LI>Textelement</li>
• Case sensitive:
• <li>Textelement</li>
• in XML gilt: <LI> ≠<li>

Attributwerte immer in
Anführungszeichen
• Fehlerverzeiendes HTML
• <table rows=3>
• Strenges XHML
• <table rows=“3“>
• auch dann, wenn es sich offensichtlich um
Werte handelt.

Keine Attributwert
Minimierung
• HTML
• <dl compact>
• XHTML
• <dl compact=“compact“>

Dokument Deklaration

• Welche ‚Sprache‘ wird verwendet ?
• <!DOCTYPE HTML PUBLIC "-//W3C//
DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
• Sonst fällt der Browser in den ‚Quirks-
Modus‘

‚strict‘ oder
‚transitional‘ ?
• Vergessen Sie bei ‚strict‘ im HTML-Dokument
nachfolgende Elemente:
• font
• center
• align
• background
• ... diese wandern in das Stylesheet

Stylesheets
• = Trennung von Form und Inhalt
• XHTML kennt demnach:
• dokument.html (Content)
• dokument.dtd (speziﬁziert den Code)
• dokument.css (speziﬁziert die
Darstellung)

CSS in das Dokument
einbetten
• <style type=“text/css“>
body {
font-size: 12px;
font-style: italic;
text-align: left;
}
</style>
• praktisch für kleine Dokumente (Stile)

CSS in das Dokument
importieren
• <style type=“text/css“>
@import url(„css/stil.css“);
</style>
• Selten verwendet, Probleme mit alten
Browsern.
• Ein bestehendes Stylesheet kann damit
auch erweitert werden.

CSS einbinden
• Persistent: <link rel=“stylesheet“
type=“text/css“ href=„css/stil.css“ />
• Wählbar: <link rel=“stylesheet“ type=“text/
css“ title=“Klassik“ href=„css/stil.css“ />
• Alternative: <link rel=“stylesheet“
type=“text/css“ title=“Alternative“
href=„css/stil.css“ />

Speziﬁkation der
Ausgabemedien
• all (alle Geräte)
• screen (one person, one Medium)
• print (Drucker)
• projection (Beamer)
• handheld (Mobilkommunikation)
• aural (Recommandation März 2012)

‚media‘ -Anwendung
@media print {
BODY { font-size: 10pt
}
@media screen {
BODY { font-size: 12pt }
}
@media screen, print {
BODY { line-height: 1.2 }
}

Druckversion

• Weglassen von Navigation und „Schmuck“
für die Druckversion
• <h1 id="versteckt" style="display:none">
Ich bin ein Block-Element, werde aber nicht
angezeigt</h1>

Selektoren I
✴ Universalselektor: * {margin: 0; padding: 0;}
✴ Elementselektor:
✴ p{
font-size: 12px;
text-align: left;
}

Selektoren II

✴ Klassenselektor
✴ p.kursiv {
font-size: 12px;
font-style: italic;
text-align: left;
}

Selektoren III
✴ ID: Eine ID kennzeichnet eindeutig ein
Element und darf pro Dokument nur
einmal vorkommen.
✴ p#zitiert {
font-size: 12px;
font-style: italic;
text-align: left;
}

Vereinfachung

✴ Klassen und ID‘s werden auch ohne
Elementbezeichner deﬁniert
✴ .kursiv
✴ #zitiert

Baumstruktur der
HTML-Dokumente
HTML
HEAD
BODY
P
DIV
P
P
TABLE

Vererbung
• Untergeordnete Elemente (Childs) „erben“
die selben Eigenschaften wie das ihnen
übergeordnete (Parent)
• <div id=“beispiel“>
<p> ... </p>
<p>... </p>
</div>
• Die Absätze übernehmen die Formen des
Dividers

Kaskade

• Die Kaskade erlaubt die, von den
Stildeﬁnitionen abweichende Gestaltung
der Elemente.
• Stile werden „überschrieben“ oder
„erweitert“.

Kaskade-Anwendung

• Ursprung: p{
font-size: 100%;
}

• Überschreiben: p.kleiner {
font-size: 80%;
}

• Erweitern: p.erweitert {
font-style: italic
}

Block-Level-Elemente

• Sie erzeugen einen Zeilenumbruch
• div
• h1 bis h6
•p
• ul, ol

Inline-Elemente
• sie erzeugen keinen Zeilenumbruch,
belassen den Textﬂuss.
•a
• span
• img
• strong
• em

XHTML

Recommended

Recommended

More Related Content

Similar to XHTML

Similar to XHTML (20)

More from Hans Mittendorfer

More from Hans Mittendorfer (20)

XHTML

Editor's Notes