Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

763 Aufrufe

Veröffentlicht am

Einführung in XHTML

Veröffentlicht in: Bildung
  • Als Erste(r) kommentieren

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

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

×