yubb.de-Logo
Tutorials
yubb@yubb
yubbService
Inside yubb

Aufbau einer validen XHTML - Seite



Zum Vergleich den Aufbau einer "alten" HTML - Seite

Code:

<html>
<head>
<title>HTML Seite</title>
</head>
<body>
<b>Das ist eine HTML - Seite!!!</b>
</body>
<html>


Der Aufbau sollte bekannt sein, trozdem hier noch einmal
<html> zeigt an wo der HTML - Code beginnt und </html> zeigt an wo er endet.

Im Head Teil stehen alle "Header - Angaben" z.B. Style - Atribute, Meta - Tags und Seitentitle. Es wird mit <head> begonnen und mit </head> abgeschlossen.
Im Body Teil steht der eigentliche Hauptteil einer HTML - Seite. Die Formatierung
<b>Das ist eine alte HTML - Seite!!!</b>
zeigt an das der Text fett ausgegeben wird.

Gut kommen wir nun zur XHTML - Seite...

Code:

<?xml version="1.0! encoding="UTF-82?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3c.org/1999/xhtml">
<head>
<title>XHTML - Seite</title>
</head>
<body>
<b>Das ist eine XHTML - Seite</b>
</body>
</html>


Code:
<?xml version="1.0! encoding="UTF-82?>


Da es sich bei XHTML um eine XML - Anwendung handelt muss man, wenn das Dokument nicht in den standardgemäßen UTF-8 bzw. UTF-16 verfasst ist, diese XML - Deklaration verwenden. Das ist aber nicht unbedingt notwendig! Man sollte jedoch einen Bezug zu XML herstellen, das geht im Prinzip so:

Code:

<?xml version="1.0" ?>


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Diese Angabe sagt aus, zu welchem Dokumenttyp die Datei gehört! Es gibt auch noch andere Verweise auf die ich aber nicht näher eingehen möchte, wer dazu nähres erfahren möchte kann ja mal hier schauen

Nun vergeben wir einen Namesraum

Code:

<html xmlns="http://www.w3c.org/1999/xhtml">


Auch hier ist wieder klar die Syntaxverwandschaft mit XML - Anwendungen zu erkennen.
Im übrigen ist das Element kein Link es ist jedeglich nur nach dem Schema der Webadressierung aufgebaut.

Bitte beachte auch das wir jede Datei als .xhtml Abspeichern müssen. Außerdem macht XHTML nicht jeden Fehler mit, so wie das häufig bei HTML der Fall war. Deswegen achtet immer darauf das ihr alle Tags abschließt und Tags und Attribute klein schreibt. Der XML Parser ist sehr streng und läßt wenig Fehler zu :))

An eurer Stelle würde ich auch häufig auf das W3C zurück greifen um zu schauen, ob der Code valide aufgebaut ist. Im Anhang findet ihr ein paar nutzliche Links, die euch bei dem erstellen eines Grundgerüst nach neusten Standdarts mit sicherheit weiterhelfen werden:




Weiterführende Links:
Design der Zukunft und Gegenwart
Ein Artikel bei Yubb zum W3C
Usability und Acesbilty, eine gute Seite ist auch behindertengerecht
Der Klassiker, generell das ganze SELFHTML ist immer einen Besuch wert!
Eine Linkzusammenstellung von Dr Web mit guten validen Seitenvorlagen.


Geschrieben von darealplaya am 06.03.2007 (10079x gelesen)
weiterempfehlen weiterempfehlen   Druckversion Druckversion   kommentieren kommentieren

Drei Sachen noch zu ergänzen:

1.) Es gibt keine nicht-geschlossenen Tags mehr. Sollte ein Tag kein Schließen-Tag haben, so wird der schließende Slash mit in den Startag geschrieben:
<br />
<img />
<hr />
<meta />

2.) Befindet sich vor dem Doctype irgendein Text (in diesem Fall die XML-Deklaration), springt der IE in den Quirks-Mode.

3.) Ist die Dateiendung xhtml zwingend? Wäre mir neu, yubb.de ist auch XHTML und ist dennoch (teilweise ;) ) XHTML-valide, auch ohne xhtml-Endung.
Geschrieben von Phil Marx
okay das mit den Slash's ist mit neu... obwohl ich die Tags sowieso immer so abschließe (ja ich code alles von Hand...).

Also ich habe mal gelesen (in meinem schlauen Buch HTML, XHTML und CSS) das der XML - Parser nur dann die Seiten so interpretieren kann.... obwohl es auch viele gibt, die z.B die Dateiendung .php weiter verwenden werden

=> http://de.selfhtml.org/html/xhtml/unterschiede.htm#dateinamen
Geschrieben von darealplaya
"Bei der Darstellung XML-geparster, fehlerfreier XHTML-Dokumente ohne CSS oder andere Stylesheets reagieren die Browser unterschiedlich. Netscape 6 zeigt das Dokument wie ein HTML-Dokument an, also mit den voreingestellten Darstellungen etwa für Überschriften, Textabsätze, Listen, Tabellen usw. Der Internet Explorer stellt solche Dokumente dagegen als reine Element-Baumstruktur dar. Erst wenn Sie die verwendeten Elemente mit Stylesheets formatieren, zeigt der Internet Explorer das Dokument in nicht-schematischer Form an."

Also bleiben wir lieber bei *.html, denn wir wollen in bestimmten Fällen vielleicht gar nicht ales mit CSS lösen...
Geschrieben von Phil Marx
Geschrieben von UndeadKing
"Durch das <?xml version="1.0! encoding="UTF-82?> bekommt man aber kein richtiges CSS-Box-Model."

- Wer spricht den hier von einem Box-Modell???Ich meine in dem Tutorial geht es um den Aufbau einer validen Seiten und nicht wie man ein Box-Modell oder einen div-tag oder was auch immer aufbaut :))

Das mit dem PHP ist ja an sich ein toller, nützlicher Tipp nur passt er nicht richtig in die Rubrik und nicht unter diesem Artikel ;)

Aber herzlich Willkommen auf yubb.de!!! :)))
Geschrieben von darealplaya