1 / 18

Gliederung

Gliederung. Einführung xHTML Überblick Gründe für xHTML Unterschiede zu HTML DTDs und Dokumente Beispiele cHTML Überblick Designprinzipien Unterschiede zu (x)HTML Beispiel Weiterführende Links Quellen. Einführung. HTML als Markupsprache, auf SGML basierend

neorah
Download Presentation

Gliederung

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Gliederung • Einführung • xHTML • Überblick • Gründe für xHTML • Unterschiede zu HTML • DTDs und Dokumente • Beispiele • cHTML • Überblick • Designprinzipien • Unterschiede zu (x)HTML • Beispiel • Weiterführende Links • Quellen Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  2. Einführung • HTML als Markupsprache, auf SGML basierend • SGML sehr verarbeitungskomplex, viele Jargons • <html> • <head> • <title> Titel des Dokuments </title> • </head> • <body> • <H1> Ueberschrift </H1> <br> • <p> • <form name=formular1> • Bitte wählen Sie • <select> • <option selected> xHTML • <option> cHTML • <option> WML • </select> • </body> • </html> Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  3. xHTML | Einführung • W3C Empfehlung seit Januar 2000. • Fast identisch zu HTML 4.01, soll dieses ersetzen. • Strengere, reinere HTML-Version. • Definition nicht mehr über SGML, sondern über XML. •  Reformulierung als XML-DTD. • Umfasst alle HTML 4.01 Elemente, kombiniert mit XML-Syntax. Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  4. xHTML | Gründe dafür • HTML ist sehr „unsauber“, enthält viele Unkorrektheiten und proprietäre Tags. • XML verlangt Wohlgeformtheit  nur syntaktisch korrekte Auszeichnungen zugelassen. • Ökonomischer Grund: viele verschiedene Browser-Technologien für Computer, Handys, PDAs…  • Ressourcen und Leistung für Interpretation von „unsauberem“ HTML nicht vorhanden. • xHTML kompatibel zu allen Geräten, die XML unterstützen. Mglk. für wohlgeformte HTML-Dokumente. Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  5. xHTML | Unterschiede zu HTML .1 • Wohlgeformtheit. • Genau ein Root-Element <html>. • Alle Elemente sind genau einem anderen Element untergeordnet. • Korrekte Schachtelung. • Öffnende Tags mit Schließendem abschließen. • Kleinschreibung. • Attributwerte immer in Anführungszeichen. • Keine abgekürzten Attribute mehr möglich. Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  6. xHTML | Unterschiede zu HTML .2 • Behandlung von Leerzeichen (innerhalb von Attributwerten): • mehrere Leerzeichen am Anfang und Ende (inkl. Zeilenumbrüche) als eines interpretiert. • Zusätzliche Markierung bei eingebetteten StyleSheets verlangt. Grund: „<“ und „&“ von xHTML als Beginn eines Tags oder Entität interpretiert. • <script> <![CDATA[ ... ]]> </script> • name-Attribut (a, applet, frame, i-frame, img, map) durch id-Attribut ersetzt. • lang-Attribut (Sprache d. Elementinhalts): xml-lang:“…“ Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  7. xHTML | DTDs und Dokumente .1 • Dokument-Grobstrukturierung identisch zu HTML Dokumenten. • Muss xHTML-DTD genügen  drei verschiedene DTDs. • STRICT: • Reines, non-proprietäres HTML. • Keine Präsentationsattribute. • Für Browser, die CSS unterstützen. • TRANSITIONAL: • Analog zu HTML 4.01. • Präsentationsfeatures enthalten. • Für Browser ohne CSS-Unterstützung. • FRAMESET: • Unterteilung der Seite in Frames. Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  8. xHTML | DTDs und Dokumente .2 • Drei Bereiche: • <!DOCTYPE … > • Immer erste Zeile. • Gibt an, dass xHTML-Dokument folgt. • Verweist auf eine der drei DTDs. • Kein Teil des xHTML-Dokuments  kein schließendes Tag. • <html> … </html> • <head> … </head> • <body> … </body> Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  9. xHTML | HTML Konvertierung • Leerzeichen vor abgekürztem Tag, <br />. • Abgekürzte Tag-Form bei leeren Elementen, <br /> statt <br></br>. • In Attributwerten überflüssige Leerzeichen/ Zeilenumbrüche vermeiden. • LANG-Attribut in HTML mit zweitem, xml:lang, ergänzen • Sowohl name und id mit gleichem Wert verwenden, um z.Bsp. Zielanker zu definieren Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  10. xHTML | Beispiel • <doctype html PUBLIC „-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN“ • „http://w3org/TR/xhtml1/DTD/transitional.dtd“> • <html> • <head> • <title> Titel des Dokuments </title> • </head> • <body> • <h1> Ueberschrift </h1> <br></br> • <p> • <form name=„formular1“> • Bitte wählen Sie • <select> • <option selected=„selected“> xHTML </option> • <option> cHTML </option> • <option> WML </option> • </select> • </body> • </html> Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  11. cHTML | Überblick • Optimiert für Kleingeräte wie PDAs, Mobiles mit eingeschränkter Hardware-/Speicherkapazität • Untermenge von HTML 2.0, 3.2 und 4.0 •  nicht XML basiert • Seit 1998er W3C Note • Eingeschränkter Befehlssatz • Eine Seite, keine Cards à la WAP • Basis für i-mode Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  12. cHTML | Designprinzipien • Basis HTML  Flexibilität, Portabilität • Anpassung an kleinen Speicher/ schwache CPUs • z.B. keine Frames oder Tabellen • Einfache Darstellung • mono-color Display • flexible Auflösung • single character font • Einfache Bedienung • alle Operationen mit 4 Buttons (Vor,Zurück,Wählen,Stop) • somit keine Imagemaps, Tabellen Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  13. cHTML | Unterschiede zu (x)HTML • Folgende Dinge sind nicht in cHTML verfügbar: • JPEG Bilder • Tabellen • Image maps • Multiple Character Fonts und Styles • Hintergrundfarben und –bilder • Frames • Style Sheets • Input Puffer > 512 Byte • Select Puffer > 4096 Byte • (Scrolling) Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  14. cHTML | Empfehlungen • Meta Tags essentiell • Grafiken • Nur GIF (auch animiert) • Probleme mit height/width • Anchor • accesskey-Attribut benutzen • <a href="tel:01771000">….</a> • Perl, PHP, SSI möglich • Transformation auch über <xsl:output method="html"/> Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  15. cHTML | Beispiel • <html> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> • <meta name="CHTML" content="yes„ > • <meta name="description" content="sample cHTML document„/> • </head> • <body> • <marquee loop=16 direction="right"> \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\ </marquee><br><br> • <div align="center"> • <a href="test1.html"><img src="0.gif" width="100" height="50" border="0" alt=""></a> • </div> • <marquee loop=16 direction="left"> \-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\ </marquee><br> • <hr><br> • <p align="justify">Ein i-mode<sup>TM</sup> Testseite von<br> • <i>http://imode.sten-schmidt.de</i><br>Schreiben Sie an: • </p> • <a href="mailto:imode@web.de" accesskey="1">[1] nbsp;imode@web.de</a><br> • <a href="http://sten-schmidt.de/imode/test1.html" accesskey="9">[9] nbsp;[Start]</a><br> • <a href="http://imenu/" accesskey="0">[0] nbsp; [i-Menu]</a><br/> • </body> • </html> Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  16. Links • Note der W3C für cHTML • http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/ • Tag-Liste cHTML: • http://www.imodeforum.de/chtml.php4 • cHTML Tutorial und Beispiele: • http://sten-schmidt.de/imode/tutorial.shtml • Recommendation der W3C für xHTML, DTDs • http://www.w3.org/TR/xhtml1/ • xHTML - Referenz und Tutorial: • http://www.w3schools.com/xhtml/ • xHTML - Referenz • http://selfhtml.teamone.de/html/referenz/attribute.htm Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

  17. Quellen • „Die Sprachen des Web: HTML & xHTML“, • Robert Tolksdorf, dpunkt.verlag, 2000 • http://www.w3schools.com/xhtml/ • http://sten-schmidt.de/imode/tutorial.shtml • http://www.w3.org/TR/1998/NOTE-compactHTML-19980209/ Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

More Related