Downloaden Sie, um offline zu lesen
XHTML
- 1. XHTML + CSS warum es sinnvoll ist. Nach B. Seibert u. M. Hoffmann und: http://www.websitedev.de/xhtml/xhtml1// H. Mittendorfer, Okt. 2012
- 2. Kennzeichnung • (X)HTML nutzenaber nicht kennzeichnen, weil die meisten Server/Browser nicht richtig ausliefern, der Code aber dennoch richtig geparst wird. • Also: „text/html“ statt • „application/xhtml+xml“
- 3. Wohlgeformt • Konzept ausXML • bedeutet „strenge Syntax“ • daher schnellere Ausführung
- 4. XHTML will: sauberen Quellcode • Elemente Schließen • Korrekt verschachteln • Elemente und Attribute klein schreiben • Attributwerte immer in Anführungszeichen
- 5. Alle Elemente schließen • <p> Text im Absatz</p> • <br /> • <img src=“bilder/foto.jpg“ alt=“....“ />
- 6. Korrekte Verschachtelung • Fehlerverzeiendes HTML: • <b><i>kursiv & fett</b></i> • XHTML: • <b><i>kursiv & fett</i></b>
- 7. Case sensitive • Nichtcase sensitive: • <LI>Textelement</li> • Case sensitive: • <li>Textelement</li> • in XML gilt: <LI> ≠<li>
- 8. Attributwerte immer in Anführungszeichen • Fehlerverzeiendes HTML • <table rows=3> • Strenges XHML • <table rows=“3“> • auch dann, wenn es sich offensichtlich um Werte handelt.
- 9. Keine Attributwert Minimierung • HTML • <dl compact> • XHTML • <dl compact=“compact“>
- 10. 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‘
- 11. ‚strict‘ oder ‚transitional‘ ? • Vergessen Sie bei ‚strict‘ im HTML-Dokument nachfolgende Elemente: • font • center • align • background • ... diese wandern in das Stylesheet
- 12. Stylesheets • = Trennungvon Form und Inhalt • XHTML kennt demnach: • dokument.html (Content) • dokument.dtd (spezifiziert den Code) • dokument.css (spezifiziert die Darstellung)
- 13. CSS in dasDokument einbetten • <style type=“text/css“> body { font-size: 12px; font-style: italic; text-align: left; } </style> • praktisch für kleine Dokumente (Stile)
- 14. CSS in dasDokument 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.
- 15. 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“ />
- 16. Spezifikation der Ausgabemedien • all (alle Geräte) • screen (one person, one Medium) • print (Drucker) • projection (Beamer) • handheld (Mobilkommunikation) • aural (Recommandation März 2012)
- 17. ‚media‘ -Anwendung @media print { BODY { font-size: 10pt } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }
- 18. Druckversion • Weglassen vonNavigation und „Schmuck“ für die Druckversion • <h1 id="versteckt" style="display:none"> Ich bin ein Block-Element, werde aber nicht angezeigt</h1>
- 19. Selektoren I ✴ Universalselektor:* {margin: 0; padding: 0;} ✴ Elementselektor: ✴ p{ font-size: 12px; text-align: left; }
- 20. Selektoren II ✴ Klassenselektor ✴ p.kursiv { font-size: 12px; font-style: italic; text-align: left; }
- 21. 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; }
- 22. Vereinfachung ✴ Klassen undID‘s werden auch ohne Elementbezeichner definiert ✴ .kursiv ✴ #zitiert
- 23. Baumstruktur der HTML-Dokumente HTML HEAD BODY P DIV P P TABLE
- 24. 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
- 25. Kaskade • Die Kaskadeerlaubt die, von den Stildefinitionen abweichende Gestaltung der Elemente. • Stile werden „überschrieben“ oder „erweitert“.
- 26. Kaskade-Anwendung • Ursprung: p{ font-size: 100%; } • Überschreiben: p.kleiner { font-size: 80%; } • Erweitern: p.erweitert { font-style: italic }
- 27. Block-Level-Elemente • Sie erzeugeneinen Zeilenumbruch • div • h1 bis h6 •p • ul, ol
- 28. Inline-Elemente • sie erzeugenkeinen Zeilenumbruch, belassen den Textfluss. •a • span • img • strong • em