Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke Gliederung Einführung xHTML Überblick Gründe für xHTML Unterschiede zu HTML DTDs und

Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke

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 LinksQuellen


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>


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.


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.


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.


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:“…“

xHTML | Unterschiede zu HTML .2


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.


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>


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


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>


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


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


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)


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"/>


<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:[email protected]" accesskey="1">[1] nbsp;[email protected]</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>

cHTML | Beispiel


Links

Note der W3C für cHTMLhttp://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, DTDshttp://www.w3.org/TR/xhtml1/

xHTML - Referenz und Tutorial:http://www.w3schools.com/xhtml/

xHTML - Referenzhttp://selfhtml.teamone.de/html/referenz/attribute.htm

http://www.w3.org/TR/xhtml1/

http://www.w3schools.com/xhtml/


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/

Documents

Einführung xHTML / cHTML Stefan Pietschmann | Katja Pischke Gliederung Einführung xHTML Überblick Gründe für xHTML Unterschiede zu HTML DTDs und