• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
XHTML
 

XHTML

on

  • 248 views

Einführung in XHTML

Einführung in XHTML

Statistics

Views

Total Views
248
Views on SlideShare
174
Embed Views
74

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 74

http://collabor.idv.edu 74

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 XHTML Presentation Transcript

  • XHTML + CSS warum es sinnvoll ist. Nach B. Seibert u. M. Hoffmannund: 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 derHTML-DokumenteHTML 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