Web workshop | hintenrum |

Workshop gutes XHTML

Hier geht es mir drum zu erklären, wie man an die Erstellung eines (X)HTML Dokumentes heran gehen sollte, um ein guten Code zu erhalten, der XHTML im Sinne seiner Bestimmung verwendet, nämlich als Markup Language.

Ich möchte, um diese Herangehensweise zu erklären, einen kleinen Ausschweif machen. Wer schon mal so eine typische Anfänger HTML Seite gesehen hat weis wovon ich spreche. Aber diese sind nicht nur gestaltungstechnische Katastrophen (oft), sondern auch technisch falsch. Dafür mache ich zwei Mechanismen verantwortlich: Erstens die Art, in der alle mir bekannten Bücher und Kurse HTML vermitteln und zweitens die Art des Menschlichen Lernens. Hier setze ich allerdings Punkt zwei als feste Größe voraus und will vielmehr ersteren Grund ändern, damit der lernende Mensch einen weg geführt wird, auf dem die Art des Lernens nicht diese fatalen Fehler mit sich bringt.

Die Art, in der wir lernen ist diese, dass man sich hinsetzt und anfängt, logischerweise mit dem was man weis, und versucht daraus das Beste zu machen. Man stößt auf Probleme und lernt mehr um sie zu lösen. Es ist utopisch erst soviel lernen zu wollen, dass man mit dem kompletten Überblick über alle Problemfelder seinen ersten Code schreibt.

Aus diesem Lernprinzip resultiert das Problem, dass die schon erwähnten Nachschlagewerke mit sich bringen. Der euphorische Neuling schaut kurz durch was es alles gibt und hat schon die ganze Zeit die Vorstellung im Kopf wie seine Website aussehen soll. Er erinnert sich daran, das <h1></h1> eine Große Schrift erzeugt - es sähe toll aus dieses hier groß darzustellen - und schwups ist eine Überschrift entstanden, die evt. gar nicht die Überschrift höchster Priorität ist, da die eigentliche Überschrift irgendwie anders auszusehen hat.

Daher empfehle ich folgendes einfaches Prinzip:

1.Überleg dir was auf deine Website soll.

2. Vergesse einfach mal wie alles am Ende aussehen soll.

3. Nun überlege genau was die Teile deines Inhaltes sind. Achtung: das ist der entscheidende Teil. Hier kannst du nun mir Nachschlagewerken deiner Wahl schauen, was es alles für Elemente gibt, und welche von denen am Besten zur Art deines Inhaltes passen. (um dies besser zu verstehen schau evt. mal in den Text: Sinn und Unsinn von XHTML)

Menüs mit Links sind genau genommen Listen, denn sie listen mögliche Verweisziele auf, also mache eine Liste draus, egal wie es erstmal aussieht, auch wenn die Links später oben waagerecht neben einander sein sollen.

Wenn du schon merkst, dass bestimmte Inhaltsbereiche zusammengehören kannst du sie in ein <div></div> Container packen. Diese div container sind Eigentschaftslose Blockelemente, die eine ziemlich zentrale rolle spielen, denn sie ordnen und bieten sich auch gleichzeitig für die später Gestaltung an.

4. Wenn du das im Groben sortiert hast machst du HTML Dateien draus. Dazu verwendest am besten den Standart xhtml-1.1, aber auf jeden Fall solltest du auf Attribute die nicht für die primäre Funktion notwendig sind verzichten. Denk nicht an die fertige Website, sondern versuche nun zu analysieren ob der Inhalt verständlich dargestellt ist und ob du die ganze Website benutzen kannst. Wenn du mehrere Navigationsmenüs einsetzt kann es z.B. Notwendig sein hinzuschreiben, dass eines das Hauptmenü, das andere das Untermenü ist. Natürlich steht das so auf keiner Website, denn dort erklären sich die Bezüge dann durch Positionierung, Farben und Größen. (Ich nehme es mal vorweg: mit der CSS Eigenschaft display:none; kannst du die entsprechenden Elemente später aus dem Layout verbannen.) Es bietet sich an einen Validator zu benutzen, der den XHTML Code auf richtige Syntax überprüft.

5. Wenn du das alles fertig hast, bist du stolzer Besitzer einer soliden website.

6. Und nun kommt der Style. Es wäre ein Irrtum zu versuchen erst einmal (X)HTML zu lernen und wenn man das kann mit CSS weiterzumachen. Denn wenn man eine Website ohne CSS macht, muss man die ganzen veralteten HTML Attribute lernen, was sozusagen Verschwendung der Ressourcen ist. CSS ist von den Worten her den alten HTML Attributen ähnlich (ist halt alles Englisch) und außerdem super einfach zu integrieren. Wer sich in kleinen Schritten vortasten will kann ja das CSS direkt in das style=““ Attribut schreiben, allerdings macht es mehr sinn eine externe CSS Datei einzubinden. Im allgemeinen solltest du darauf achten nicht zu viele class=““ und id=““ Attribute zu verwenden, sondern eher über die Baumstruktur auf die Elemente zugreifen.

Ein weiterer Vorteil des gemeinsamen Erlernens von CSS und XHTML ist, dass du gleich in beidem denkst und somit dein XHTML Code auch CSS freundlich wird.

Hast du alles schön umgesetzt, hast du nun eine hübsche Website, die man mit und ohne Stylesheet verwenden kann (mal testweise im Browser deaktivieren), und das alles mit einem schönen schlanken Quelltext. Inhalt und Layout sind auch getrennt, was dir den Ausbau und die Pflege enorm erleichtern wird. Und wenn du CSS lieb gewonnen hast, oder es erforderlich ist, kannst du nun noch mehr Stylesheets anlegen, z.B. für eine Druckversion in der du die Navigationselemente weglässt.

Was vielen Anfangs auch nicht ganz klar ist: XHTML ist die absolute Grundlage einer Website (CSS dann logischerweise auch, denn hier gehören die Beiden fest zusammen). Sicher gibt es noch eine ganze Menge an Sprachen und Technologien, die man auch für Websites verwendet, doch dienen diese nur dazu, XHTML zu generieren oder sonst wie dazwischen zu agieren, was am ende vom Browser interpretiert wird ist immer XHTML. Eine Ausnahme gibt es natürlich auch, nämlich Flash von Macromedia. So ein Flash-Objekt ist wie ein interaktiver Film zu betrachten, der als einziges Objekt auf einer HTML Seite eingebunden ist. Da es aber auch nur von einem Flashplayer-PlugIn ausgegeben werden kann, ist dessen Einsatz wohl zu überdenken, bzw. sollte man eine Alternative zur Verfügung stellen. Meines Erachtens nach ist es geschickter, Flash nur an einzelnen Stellen in eine Websites zu integrieren, sozusagen wie Bilder.

Und weil wir schon bei weiteren Technologien sind: Es gibt zwei Grundverschiedene Arten: server side und client side Techniken. Wie der Name schon sagt wird das eine auf dem Rechner des Benutzers, das andere auf dem Server ausgeführt. Um noch schnell zwei Beispiele zu geben, JavaScript wird vom Browser ausgeführt, PHP vom Server. Dadurch kannst du dann weitere Funktionen hinzufügen, die statisches XHTML nicht ermöglicht, z.B. so genannte dynamische Websites, die z.B. auf den Benutzer reagieren können (das sind keine Wackeleffekte von Bildern, sondern eher Login-Systeme usw.). Oft kommen noch Datenbanken aller Art hinzu, um den Inhalt zur Verfügung zu stellen, aber an XHTML als Ausgabeform kommt man nicht vorbei.

Ein paar Referenzen sind in den links zu finden, viel Spaß.