Xhtml Coding (nicht nur für Bibliotheken)

1.991 Aufrufe

Veröffentlicht am

Eine Einführung in XHTML, ursprünglich angeboten für Bibliotheken, aber allgemein gültig. Siehe auch www.xhtml-akademie.de

Veröffentlicht in: Technologie
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
1.991
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
24
Aktionen
Geteilt
0
Downloads
12
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Xhtml Coding (nicht nur für Bibliotheken)

  1. 1. XHTML für die Bibliotheksarbeit 2006 Diese Datei ist unter einer Creative Commons Lizenz veröffentlicht. Die Details finden Sie hier: http://creativecommons.org/licenses/by-nc-nd/3.0/de/ Sollten Sie Fragen zu dieser Lizenz oder zur korrekten Verwendung des Dokuments haben, senden Sie bitte eine E-Mail an kontakt@edaktik.de
  2. 2. XHTML für die Bibliotheksarbeit: Vorteile von XHTML <ul><li>Trennung von Struktur/Inhalt und Formatierung = komfortablere Pflege
  3. 3. Schlankerer Code = Kürzere Ladezeiten
  4. 4. Mehr Inhalt = Suchmaschinenoptimierung
  5. 5. Logische Struktur = Barrierefreiheit einfacher realisierbar
  6. 6. Flexibler Code = Optimierung für verschiedene Ausgabegeräte
  7. 7. XML = Zukunft des Dokumentenaustauschs (MathML, SVG, XForms etc.) </li></ul>
  8. 8. XHTML für die Bibliotheksarbeit: Nachteile von XHTML <ul><li>Browserkompatibilität mit älteren Browsern fehlt (Netscape 4, Internet Explorer 5.x, Opera 5, iCab u.a.)
  9. 9. Es gibt immer wieder Schwierigkeiten mit dem Internet Explorer 6.x (falsche Code-Interpretation, xml-Deklaration, Quirksmode usw.)
  10. 10. Manche nützliche Methoden aus HTML entfallen (z.B. document.write(), a target) </li></ul>
  11. 11. XHTML für die Bibliotheksarbeit: Regeln für HTML und XHTML, 1 <ul><li>Jedes Steuerzeichen (tag) steht immer in spitzen Klammern. <...>
  12. 12. Jedes Steuerzeichen muss geschlossen werden. <h1>Überschrift 1. Ordnung </h1> <p>Textabschnitt</p>
  13. 13. Tags können verschachtelt werden. Beim Beenden der Steuerzeichen müssen die Tags exakt gespiegelt werden! <p><em>Überschrift 4. Ordnung, kursiv</em></p> Folgende Regeln zur Verschachtelung gelten für XHTML: </li><ul><li>a-Elemente dürfen keine weiteren a-Elemente enthalten
  14. 14. pre-Elemente dürfen keine Elemente img, object, big, small, sub oder sup enthalten
  15. 15. button-Elemente dürfen keine Elemente input, select, textarea, label, button, form, fieldset, iframe oder isindex enthalten
  16. 16. label-Elemente dürfen keine weiteren label-Elemente enthalten
  17. 17. form-Elemente dürfen keine weiteren form-Elemente enthalten </li></ul></ul>
  18. 18. XHTML für die Bibliotheksarbeit: Regeln für HTML und XHTML, 2 <ul><li>Manche Steuerzeichen können zusätzliche Attribute enthalten. <h3 id=“main“>Überschrift 4. Ordnung, zentriert</h3>
  19. 19. Keine Leerzeichen in den Tags! Ausnahmen: </li><ul><ul><li>vor Attributen (genau 1 Leerzeichen);
  20. 20. vor abschliessendem Slash in „leeren“ Tags (genau 1 Leerzeichen). </li></ul></ul><li>Für Umlaute und andere Sonderzeichen gibt es spezielle Tags. Beispiele: Ä = &Auml; ö = &ouml; é = &eacute; ç = &ccedil; </li></ul>(Fortsetzung)
  21. 21. XHTML für die Bibliotheksarbeit: Regeln für XHTML <ul><li>Tags ohne End-Tag (sog. &quot;leere&quot; Tags) werden mit einem Slash abgeschlossen. Das gilt für folgende Steuerzeichen: <br /> <img /> <input /> <link /> <meta /> <area /> <base /> <col /> <frame /> <isindex /> <param />
  22. 22. Andere Angaben in der Doctype-Definition sowie im <html>-Tag als für HTML-Dateien.
  23. 23. Attribute bekommen immer einen Wert zugewiesen. In HTML war dies möglich: <hr noshade> In XHTML muß das so aussehen: <hr noshade=&quot;noshade&quot; />
  24. 24. Alle Tags müssen kleingeschrieben werden! </li></ul>
  25. 25. XHTML für die Bibliotheksarbeit: Wohlgeformtes XHTML, 1 <ul><li>Strikte Beachtung der HTML- und XHTML-Regeln (s. vorherige Seiten)
  26. 26. In XHTML muss jedes Element semantisch markiert sein: HTML 4.01: <body>Text steht hier direkt im Body-Bereich.</body> XHTML 1.0: <body><p>Text steht in einem „paragraph“-Container.</p></body> <body><span>Hier steht der Text in einem „span“-Container.</span></body> <body><h1>Überschriften...</h1><p>...werden wie bisher markiert.</p></body>
  27. 27. Jedes Tag muss geschlossen werden. HTML 4.01: <img xsrc=&quot;bild.jpg&quot; mce_src=&quot;bild.jpg&quot; alt=&quot;ein foto&quot;> XHTML 1.0: <img xsrc=&quot;bild.jpg&quot; mce_src=&quot;bild.jpg&quot; alt=&quot;ein foto&quot; /> (Weitere Steuerzeichen s. vorherige Seite.)
  28. 28. Tags müssen KLEIN geschrieben werden. HTML 4.01: <h2>Überschrift</H2> XHTML 1.0: <h2>Überschrift</h2> </li></ul>XHTML ist eine Vorstufe zu XML. Damit Webseiten später in XML übertragbar sind, muss das XHTML wohlgeformt sein. Das bedeutet:
  29. 29. XHTML für die Bibliotheksarbeit: Wohlgeformtes XHTML, 2 <ul><li>Keine Kurzschreibweise von Attributen in XHTML. HTML 4.01: <hr noshade> XHTML 1.0: <hr noshade=&quot;noshade&quot; />
  30. 30. Bestimmte Attribute sind nun Pflichtattribute, müssen also immer angegeben werden. Das gilt z.B. für folgendes Tag und sein Attribut (tag / attribut): img / alt: <img alt=“Beschreibung des Bildinhalts“ /> table / summary: <table summary=“Beschreibung des Tabelleninhalts“> style / type: <style type=“text/css“> script / type: <script type=“text/javascript“> a / title: <a href=“source.html“ title=“Beschreibender Text“> </li></ul>(Fortsetzung)
  31. 31. XHTML für die Bibliotheksarbeit: Doctypedefinition XHTML <ul><li>XHTML 1.0 Strict + URI <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
  32. 32. XHTML 1.0 Transitional + URI <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
  33. 33. XHTML 1.0 Frameset + URI <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;> </li></ul>XHTML erfordert andere Dokumententypdefinitionen als HTML:
  34. 34. XHTML für die Bibliotheksarbeit: Grundgerüst einer XHTML-Datei <?xml version=&quot;1.0&quot; ?> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;de&quot; xml:lang=&quot;de&quot;> <head> <title></title> </head> <body> <h1>Dies ist eine Überschrift erster Ordnung</h1> <p>Hier steht Text in einem „paragraph“, also einem Textabsatz.</p> </body> </html>
  35. 35. XHTML für die Bibliotheksarbeit: Integration von Skripten HTML 4.01: <script type=&quot;text/javascript&quot;> <!-- Javascriptcode... //--> </script> XHTML 1.0: <script type=&quot;text/javascript&quot;> <!-- <![CDATA[ Javascriptcode... ]]> //--> </script>
  36. 36. XHTML für die Bibliotheksarbeit: Cascading Style Sheets Vorteile und Nachteile <ul><li>Vorteile:
  37. 37. Formatierung/Layout zentral steuern
  38. 38. Optimierung des HTML-/XHTML-Codes
  39. 39. Mehr Möglichkeiten als mit HTML-Formatierungszeichen
  40. 40. Nachteile:
  41. 41. Nicht von allen Browsern interpretierbar (ältere Agenten)
  42. 42. Interpretationsfehler verschiedener Browser (IE 5.x, IE 6, iCab, NN4, Opera mobile u.a.) </li></ul>
  43. 43. XHTML für die Bibliotheksarbeit: Cascading Style Sheets Integration mit (X)HTML, 1 <ul><li>Im (X)HTML-Dokument </li><ul><li>Im Steuerzeichen: <p style=“color:#ff3366; background-color:#777777; font-weight:bold;“>Textabschnitt...</p>
  44. 44. Im Dateikopf: <style type=&quot;text/css&quot;> <!-- /* p {color:#ff3366;background-color:#777; font-weight:bold;} */ --> </style> </li></ul></ul>
  45. 45. XHTML für die Bibliotheksarbeit: Cascading Style Sheets Integration mit (X)HTML, 2 <ul><li>In separater CSS-Datei </li><ul><li>z.B. stylesheet.css p {color:#ff3366;background-color:#777; font-weight:bold;}
  46. 46. dazu die möglichen Notierungen im Kopf der (X)HTML-Datei: </li><ul><li>HTML-Syntax : <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;stylesheet.css&quot; media=“screen“>
  47. 47. CSS-Syntax: <!-- @import url(mainstyles.css) screen; --> </style> </li></ul></ul></ul>(Fortsetzung)
  48. 48. XHTML für die Bibliotheksarbeit: Metatags <ul><li>Alle Metatags müssen geschlossen werden: HTML: <meta name=“author“ content=“Rapunzel“> XHTML: <meta name=“author“ content =“Rapunzel“ />
  49. 49. Metatag content-type: HTML: <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-1&quot; /> XHTML: <meta http-equiv=&quot;Content-Type&quot; content=&quot;application/xhtml+xml; charset=iso-8859-1&quot; /> </li></ul>

×