XHTML + CSS             warum es sinnvoll ist.        Nach B. Seibert u. M. Hoffmannund: http://www.websitedev.de/xhtml/xh...
Kennzeichnung• (X)HTML nutzen aber nicht kennzeichnen,  weil die meisten Server/Browser nicht  richtig ausliefern, der Cod...
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• Attri...
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> ≠...
Attributwerte immer in    Anführungszeichen• Fehlerverzeiendes HTML • <table rows=3>• Strenges XHML • <table rows=“3“> • a...
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.w...
‚strict‘ oder        ‚transitional‘ ?• Vergessen Sie bei ‚strict‘ im HTML-Dokument  nachfolgende Elemente:  • font  • cent...
Stylesheets• = Trennung von Form und Inhalt• XHTML kennt demnach: • dokument.html (Content) • dokument.dtd (spezifiziert de...
CSS in das Dokument      einbetten• <style type=“text/css“>    body {      font-size: 12px;      font-style: italic;      ...
CSS in das Dokument    importieren• <style type=“text/css“>     @import url(„css/stil.css“);  </style>• Selten verwendet, ...
CSS einbinden• Persistent: <link rel=“stylesheet“  type=“text/css“ href=„css/stil.css“ />• Wählbar: <link rel=“stylesheet“...
Spezifikation der     Ausgabemedien• all (alle Geräte)• screen (one person, one Medium)• print (Drucker)• projection (Beame...
‚media‘ -Anwendung  @media print {      BODY { font-size: 10pt  }@media screen {    BODY { font-size: 12pt }}@media screen...
Druckversion• Weglassen von Navigation und „Schmuck“  für die Druckversion• <h1 id="versteckt" style="display:none">  Ich ...
Selektoren I✴ Universalselektor: * {margin: 0; padding: 0;}✴ Elementselektor:  ✴ p{         font-size: 12px;         text-...
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 ...
Vereinfachung✴ Klassen und ID‘s werden auch ohne  Elementbezeichner definiert ✴ .kursiv ✴ #zitiert
Baumstruktur derHTML-DokumenteHTML  HEAD  BODY    P    DIV      P    P    TABLE
Vererbung• Untergeordnete Elemente (Childs) „erben“  die selben Eigenschaften wie das ihnen  übergeordnete (Parent)   • <d...
Kaskade• Die Kaskade erlaubt die, von den  Stildefinitionen abweichende Gestaltung  der Elemente.• Stile werden „überschrie...
Kaskade-Anwendung• Ursprung:        p{                   font-size: 100%;                   }• Überschreiben:   p.kleiner ...
Block-Level-Elemente• Sie erzeugen einen Zeilenumbruch • div • h1 bis h6 •p • ul, ol
Inline-Elemente• sie erzeugen keinen Zeilenumbruch,  belassen den Textfluss. •a • span • img • strong • em
Nächste SlideShare
Wird geladen in …5
×

XHTML

624 Aufrufe

Veröffentlicht am

Einführung in XHTML

Veröffentlicht in: Bildung
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
624
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
149
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • XHTML

    1. 1. XHTML + CSS warum es sinnvoll ist. Nach B. Seibert u. M. Hoffmannund: http://www.websitedev.de/xhtml/xhtml1// H. Mittendorfer, Okt. 2012
    2. 2. 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“
    3. 3. Wohlgeformt• Konzept aus XML• bedeutet „strenge Syntax“• daher schnellere Ausführung
    4. 4. XHTML will: sauberen Quellcode• Elemente Schließen• Korrekt verschachteln• Elemente und Attribute klein schreiben• Attributwerte immer in Anführungszeichen
    5. 5. Alle Elemente schließen • <p> Text im Absatz</p> • <br /> • <img src=“bilder/foto.jpg“ alt=“....“ />
    6. 6. Korrekte Verschachtelung• Fehlerverzeiendes HTML: • <b><i>kursiv & fett</b></i>• XHTML: • <b><i>kursiv & fett</i></b>
    7. 7. Case sensitive• Nicht case sensitive: • <LI>Textelement</li>• Case sensitive: • <li>Textelement</li> • in XML gilt: <LI> ≠<li>
    8. 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. 9. Keine Attributwert Minimierung• HTML • <dl compact>• XHTML • <dl compact=“compact“>
    10. 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. 11. ‚strict‘ oder ‚transitional‘ ?• Vergessen Sie bei ‚strict‘ im HTML-Dokument nachfolgende Elemente: • font • center • align • background • ... diese wandern in das Stylesheet
    12. 12. Stylesheets• = Trennung von Form und Inhalt• XHTML kennt demnach: • dokument.html (Content) • dokument.dtd (spezifiziert den Code) • dokument.css (spezifiziert die Darstellung)
    13. 13. 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)
    14. 14. 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.
    15. 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. 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. 17. ‚media‘ -Anwendung @media print { BODY { font-size: 10pt }@media screen { BODY { font-size: 12pt }}@media screen, print { BODY { line-height: 1.2 }}
    18. 18. 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>
    19. 19. Selektoren I✴ Universalselektor: * {margin: 0; padding: 0;}✴ Elementselektor: ✴ p{ font-size: 12px; text-align: left; }
    20. 20. Selektoren II✴ Klassenselektor ✴ p.kursiv { font-size: 12px; font-style: italic; text-align: left; }
    21. 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. 22. Vereinfachung✴ Klassen und ID‘s werden auch ohne Elementbezeichner definiert ✴ .kursiv ✴ #zitiert
    23. 23. Baumstruktur derHTML-DokumenteHTML HEAD BODY P DIV P P TABLE
    24. 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. 25. Kaskade• Die Kaskade erlaubt die, von den Stildefinitionen abweichende Gestaltung der Elemente.• Stile werden „überschrieben“ oder „erweitert“.
    26. 26. Kaskade-Anwendung• Ursprung: p{ font-size: 100%; }• Überschreiben: p.kleiner { font-size: 80%; }• Erweitern: p.erweitert { font-style: italic }
    27. 27. Block-Level-Elemente• Sie erzeugen einen Zeilenumbruch • div • h1 bis h6 •p • ul, ol
    28. 28. Inline-Elemente• sie erzeugen keinen Zeilenumbruch, belassen den Textfluss. •a • span • img • strong • em

    ×