Du bist hier: Themen / Rund ums WWW / XHTML
Freitag, 19.04.2019

Basics

XHTML steht für eXtensible Hyperext Markup Language und ist (neben HTML) die Sprache, die benutzt wird, um Webseiten zu erstellen. Ein XHTML-Dokument ist aus sogenannten Tags wie z.B. <p> aufgebaut, die den Inhalt der Seite strukturieren. Dabei stellt <p> ein öffnendes Tag und </p> ein schließendes Tag dar.

Aufgabe 1
Untersuche den Quelltext der Beispielwebseite und formuliere die erkennbaren Regeln, welche bei der Benutzung von Tags beachtet werden müssen.

Aufgabe 2
XHTML-Dokumente sind wie alle XML-Dokumente hierarchisch aufgebaut. In der Informatik ist es üblich Hierarchien als Bäume darzustellen, um sich eine Übersicht über den Aufbau der Hierarchie zu verschaffen. Bei Webseiten ist diese Hierarchie nicht direkt ersichtlich. Belege, dass es sich bei der Beispielwebseite um eine hierarschische Struktur handelt, indem Du den Aufbau der Seite als Baum darstellst.

Aufgabe 3
Überlege Dir eine einfache Struktur, mit der Du Dich vorstellst und stelle diese als Baum dar. Erstelle die dazugehörige Webseite in einem Texteditor und kontrolliere die Darstellung im Webbrowser.

Zur Strukturierung der darzustellenden Information gibt es eine Vielzahl verschiedener Tags. Dazu gehören z.B. einfache Tags wie

  • <body> zum Markieren des Inhaltsbereichs einer Webseite
  • <h1> bis <h6> für Überschriften

oder Tags, die keinen Inhalt besitzen, und demnach direkt wieder geschlossen werden müssen. Darunter fallen bspw.

  • <hr> für eine waagrechte Linie
  • <br>

(Hinweis: Als Abkürzung kann und sollte bei solchen Tags z.B. statt <hr></hr> einfach <hr /> geschrieben werden.)

oder Tags, die zusätzliche Attribute in der Form <tag attribut="wert"> enthalten können bzw. müssen, wie z.B.

  • <img> zum Anzeigen von Bildern
  • <a>, um auf andere Webseiten zu verweisen

Kaum ein Webseitenentwickler wird alle Tags auswendig wissen. Die wichtigsten wie u.a. die oben genannten sollte man auswendig kennen, die anderen kann man dann bei Bedarf nachschlagen. Ein sehr gutes und bekanntes Nachschlagewerk zu (X)HTML ist SELFHTML.

Aufgabe 4
Erstelle mit Hilfe von SELFHTML eine Tabelle, in der die Benutzung und die Bedeutung der wichtigsten Tags erläutert werden. Dazu gehören Tags für

  1. eine minimale Webseite
  2. Überschriften
  3. Absätze
  4. hervorgehobenen Text
  5. Links
  6. Zeilenümbrüche
  7. Bilder
  8. Tabellen
  9. Listen

Aufgabe 5
Erweitere die oben erstellte Webseite um einige der Elemente aus Aufgabe 4. Ergänze Dein Projekt dabei auch um weitere Seiten, die untereinander verlinkt werden.

Korrekter XHTML-Code

Formatierung des Quellcodes

Übersichtlichen und gut formatierten Quelltext zu schreiben erleichtert es einem enorm syntaktisch korrekten Code zu schreiben. Deshalb sollte man bei der Formatierung des Quelltextes ein paar wenige Regeln beachten.

Aufgabe 6
Die beiden Seiten (1, 2) stellen den gleichen Inhalt dar, der allerdings aufgrund verschiedener Fehler nicht so erscheint wie er soll. Untersuche die Quelltexte der Seiten und finde die Fehler.
Leite aus der besser formatierten Seite Regeln ab, die man beim Erstellen einer XHTML-Seite beachten sollte und wende die Regeln auf Deine eigene Seite an.

Validierung

Um sicher zu stellen, dass der XHTML-Code wirklich korrekt ist, sollte man diesen maschinell überprüfen lassen (siehe z.B.:Warum sollte ich meinen Quellcode validieren?). Da der XHTML-Standard vom World Wide Web Consortium (W3C) definiert wird, stellt deren Validierungsservice die Referenz dar. Komfortabler ist allerdings der Service von SELFHTML.

Aufgabe 7a
Um den Code erfolgreich validieren zu können, ist es notwendig die Begriffe "Dokumenttyp-Deklaration" sowie Block-Level-Elemente, Inline-Elemente, PCDATA zu kennen. Kläre die Begriffe mit Hilfe von SELFHTML.

Aufgabe 7b
Stelle Regeln auf, die angeben wann man (meist) Block-Level-Elemente, Inline-Elemente und PCDATA benutzen darf/muss. Eine genaue Auflistung findest Du z.B. bei SelfHTML.

Aufgabe 8
Außer den oben aufgestellten Regeln muss man beachten, dass bei eine HTML-Seite z.B. auch Angaben über den genauen Dokumenttyp enthält. (Siehe dazu auch eine minimale Beispielseite). Ergänze Deine Seite entsprechend und validiere Deine Seite.

Exkurs - Andere XML-Sprachen

Die Extensible Markup Language (engl. für „erweiterbare Auszeichnungssprache“), abgekürzt XML, ist eine Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien. XML wird u. a. für den Austausch von Daten zwischen Computersystemen eingesetzt (Quelle: Wikipedia). XML ist eine Metasprache, also eine Sprache, mit der andere Sprachen beschrieben werden. Prominentester Vertreter der XML-Sprachen ist XHTML, das zum Erstellen von Webseiten benutzt wird. Es gibt aber auch XML-Sprachen für ganz andere Bereiche, um z.B. Bilder, mathematische Gleichungen etc. zu beschreiben.

Alle diese Sprachen besitzen eine ähnliche Struktur, die aus Tags, Attributen und Inhalten von Tags bestehen. Zusätzlich lassen sich auch eigene XML-Sprachen definieren, wenn eine hierarchische Speicherung der Daten sinnvoll ist.

Einige dieser Sprachen sind:

  • SVG - zur Beschreibung von Vektorgrafiken
  • RSS - für Newsfeeds
  • MathML - um mathematische Formeln darzustellen
  • WML - als XHTML-Alternative für Handys
  • MusicXML - zur Notation von Musik
  • DocX (gezipptes XML-Dokument) - als Microsoft Word Format ab Version 2007
  • OpenDocument (gezipptes XML-Dokument) - Format in Open Office
  • KML - für geografische Daten, insbesondere bei Google Earth

XML-Sprachen
Erstelle eine Präsentation zu einer XML-Sprache. Die Präsentation soll mindestens

  • Eine allgemeine Darstellung zur Verwendung/Verbreitung etc.
  • Ein konkretes Beispiel in Quellcode und Darstellung
  • Die Darstellung des Beispiels als Baum
  • Eine Demonstration wie sich eine Änderung der Daten auf die Darstellung/Interpretation auswirkt

enthalten.