SlideShare ist ein Scribd-Unternehmen logo
1 von 28
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 (spezifiziert den Code)
 • dokument.css (spezifiziert 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“ />
Spezifikation 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 definiert
 ✴ .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
  Stildefinitionen 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 Textfluss.
 •a
 • span
 • img
 • strong
 • em

Weitere ähnliche Inhalte

Ähnlich wie XHTML

Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
Andreas Kalt
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
Christian Baranowski
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
Dirk Ginader
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
Eric Eggert
 

Ähnlich wie XHTML (20)

Baustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-phpBaustein 07 grundlagen-html-css-php
Baustein 07 grundlagen-html-css-php
 
Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)Am Ende ist doch alles HTML (Uni Mainz)
Am Ende ist doch alles HTML (Uni Mainz)
 
Fortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische GrundlagenFortbildung Schulwebsite: Technische Grundlagen
Fortbildung Schulwebsite: Technische Grundlagen
 
Blank Template - less is more #jd13ch
Blank Template - less is more #jd13chBlank Template - less is more #jd13ch
Blank Template - less is more #jd13ch
 
Anforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScriptAnforderungsanalsyse - Prototyping mit JavaScript
Anforderungsanalsyse - Prototyping mit JavaScript
 
Nicolai Schwarz Barrierefreiheit
Nicolai Schwarz BarrierefreiheitNicolai Schwarz Barrierefreiheit
Nicolai Schwarz Barrierefreiheit
 
HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7HTML5 in TYPO3 4.7
HTML5 in TYPO3 4.7
 
Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)Am Ende ist doch alles HTML (Jax 2010)
Am Ende ist doch alles HTML (Jax 2010)
 
Javascript done right
Javascript done rightJavascript done right
Javascript done right
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
HTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum StyleHTML+CSS für Einsteiger - Vom Doctype zum Style
HTML+CSS für Einsteiger - Vom Doctype zum Style
 
Semantic html5
Semantic html5Semantic html5
Semantic html5
 
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
WebTech 2009: Best Practices in JavaScript und CSS (kommentiert)
 
Eigene Themes from Scratch
Eigene Themes from ScratchEigene Themes from Scratch
Eigene Themes from Scratch
 
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehrAktuelle Webtechnologien - HTML5, CSS3 und mehr
Aktuelle Webtechnologien - HTML5, CSS3 und mehr
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML2 - Sprachen Des Semantic Web - XML
2 - Sprachen Des Semantic Web - XML
 
IT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML IIIT-Zertifikat: Advanced Web Basics - Handout HTML II
IT-Zertifikat: Advanced Web Basics - Handout HTML II
 

Mehr von Hans Mittendorfer

Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
Hans Mittendorfer
 

Mehr von Hans Mittendorfer (20)

Ki 2
Ki 2Ki 2
Ki 2
 
WhatsAppverschlüsselung
WhatsAppverschlüsselungWhatsAppverschlüsselung
WhatsAppverschlüsselung
 
Kryptographie
KryptographieKryptographie
Kryptographie
 
Ki
KiKi
Ki
 
Ki
KiKi
Ki
 
Meatdaten
MeatdatenMeatdaten
Meatdaten
 
Semiotik iii
Semiotik iiiSemiotik iii
Semiotik iii
 
Grenzen der Kryptographie
Grenzen der KryptographieGrenzen der Kryptographie
Grenzen der Kryptographie
 
Unternehmeskommunikation
UnternehmeskommunikationUnternehmeskommunikation
Unternehmeskommunikation
 
Sicherheit webkommunikation
Sicherheit webkommunikationSicherheit webkommunikation
Sicherheit webkommunikation
 
Lernblogs ii
Lernblogs iiLernblogs ii
Lernblogs ii
 
Webwissenschaften
WebwissenschaftenWebwissenschaften
Webwissenschaften
 
Semiotik ii
Semiotik iiSemiotik ii
Semiotik ii
 
Weblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitungWeblogs als partizipative lernbegleitung
Weblogs als partizipative lernbegleitung
 
Grosse zukunft des_buches_2
Grosse zukunft des_buches_2Grosse zukunft des_buches_2
Grosse zukunft des_buches_2
 
Semiotik
SemiotikSemiotik
Semiotik
 
Qr code
Qr codeQr code
Qr code
 
Menschliche kommunikation
Menschliche kommunikationMenschliche kommunikation
Menschliche kommunikation
 
Watzlawick 1
Watzlawick 1Watzlawick 1
Watzlawick 1
 
Webkommunikation
WebkommunikationWebkommunikation
Webkommunikation
 

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 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. Wohlgeformt • Konzept aus XML • 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 • Nicht case 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 • = Trennung von Form und Inhalt • XHTML kennt demnach: • dokument.html (Content) • dokument.dtd (spezifiziert den Code) • dokument.css (spezifiziert die Darstellung)
  • 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. 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. 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 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. 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 und ID‘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 Kaskade erlaubt 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 erzeugen einen Zeilenumbruch • div • h1 bis h6 •p • ul, ol
  • 28. Inline-Elemente • sie erzeugen keinen Zeilenumbruch, belassen den Textfluss. •a • span • img • strong • em

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n