Webdesign mit HTMl /(X)HTML

Wie funktioniert eine Webseite?
Ratschläge für DoItYourself-Homepagemacher.

Nach ein paar Ausführungen über Grundlagen und Wissenswertes über HTML/XHTML, finden Sie im zweiten Abschnitt weiter unten, etttliche Tips und Empfehlungen für die Gestaltung von Internetseiten in Eigenregie.

Webseiten werden in der Auszeichungssprache HTML, bzw. XHTML geschrieben (dies stellt sozusagen die "Programmiersprache" dar).

Während die Scriptsprache HTML (Hypertext Markup Language, bzw. dt. Hypertext-Auszeichnungssprache),eine relativ neue Entwicklung ist, besteht das zugrunde liegende Konzept bezüglich Auszeichnungssprachen schon viel länger. HTML ist nur eine Auszeichnungssprache unter vielen. HTML ist allerdings bis heute die weltweit erfolgreichste und bekannteste. Diesen Auszeichnungssprachen ist zugrunde gelegt, dass ihre Bestandteile nicht einfach "frei erfunden" wurden, sondern sie beinhalten so genannte Meta-Sprachen, mit deren Hilfe die Bestandteile und Regeln dieser Auszeichnungssprachen festgelegt werden.

Schon seit 1986 gibt es die als ISO 8879 vereinheitlichte Meta-Sprache SGML (Standard Generalized Markup Language, bzw. standardisierte Auszeichnungssprache). Diese Meta-Sprache erlaubt das Definieren von Auszeichnungssprachen mit Hilfe so genannter DTDs (Document Type Definitions = Dokumenttyp-Definitionen). In den DTDs wird definiert, welche Elemente eine Auszeichnungssprache hat, welche zugehörigen Attribute, sowie Regeln, welche Elemente innerhalb welcher anderen Elemente vorkommen können usw. Nun gilt SGML als sehr ausgereift, ist aber gemeinhin als ausgeklügelt aber verwickelt bekannt. So entschloss man sich dazu, eine reduziertere Variante von SGML zu manifestieren. Unter dem Namen XML (Extensible Markup Language = erweiterbare Auszeichnungssprache) entstand diese abgewandelte Form von HTML. XML erlaubt ebenso wie SGML das Definieren von Auszeichnungssprachen mit Hilfe von DTDs.

HTML entstand Anfang der 90er-Jahre. Es wurde mit Hilfe von SGML definiert. Bis einschließlich HTML 4.x blieb das bis heute so. Im Zuge von XML und seiner wachsenden Bedeutung für immer mehr Web-Dateiformate, wurde es notwendig, auch HTML mit Hilfe von XML zu definieren, anstatt wie bis dato mit SGML. Um Versionskonflikte zu vermeiden, wurde verabredet, diesem neue, XML-basierte HTML einen neuen Namen und eine eigene Versionenkontrolle zu geben. XHTML (Extensible HyperText Markup Language = erweiterbare Hypertext-Auszeichnungssprache) war geboren.

Seit Januar 2000 liegt XHTML 1.0 als Empfehlung des W3-Konsortiums vor. XHTML 1.0 hat damit den selben verbindlichen Stellenwert wie auch z.B. HTML 4.0. Doch XHTML 1.0 ist nicht nur eine Erfindung, das SGML-basierte HTML 4.0 auf eine andere Art nachzubauen, sondern es gibt gute Gründe dafür, zukünftiges Webdesign XHTML konform aufzubauen:

Syntaktisch ist XHTML hundertprozentig kompatibel zu allen wichtigen XML-Standardsprachen wie SVG, WML, SMIL usw.

XHTML kann dadurch als Dateninsel innerhalb anderer Sprachen eingebunden werden, und ebenso ist es möglich, diese anderen Sprachen wieder als Dateninsel innerhalb von XHTML einzubinden.

So ist es zum Beispiel leicht möglich, eine SVG-Grafik in eine XHTML-Datei einzubetten, und zwar auch als Dateninsel. Dadurch entfällt auch, das die SVG-Grafik zuvor noch referenziert werden muss, sondern die Grafik wird Bestandteil der XHTML-Datei.

Durch die gemeinsame syntaktische Grundlage auf der Basis von XML ist es auch möglich, das Auslesen und Verarbeiten über Programmiersprachen zu vereinheitlichen. Genau das geschieht beim DOM (Document Object Model = Dokument-Objektmodell). Das DOM definiert Objekte, Eigenschaften und Methoden für den Zugriff auf Dokumente, die in einer XML-basierten Sprache abgefasst sind. Möglich ist eine solche Anwendung aber nur, weil alle diese Sprachen denselben, XML-bedingten syntaktischen Grundmustern folgen. Da die syntaktischen Grundmuster von HTML denen von XHTML sehr ähnlich sind, ist das DOM in der Praxis auch auf HTML anwendbar. Doch der Wunsch ist verständlich, ein HTML zu haben, das sich exakt an die Syntax von XML hält.

Was für Script-Sprachen gilt, gilt ebenso auch für Stylesheet-Sprachen. Die selbst XML-basierte allgemeine Stylesheet-Sprache XSL (Extensible Stylesheet Language = erweiterbare Formatsprache) ist genau für diese Zwecke entworfen worden. Sie stellt die einheitliche Grundlage zur Verfügung, für alle XML-basierten Sprachen.

XHTML wurde aus diesem Grund so angelegt, dass eine Kompatibilität mit Browsern, die lediglich auf HTML-Syntax ausgelegt sind oder nicht über die nötigen XML-Fähigkeiten verfügen, möglich ist. Tatsächlich verarbeiten die verbreiteten Browser XHTML-Dokumente und stellen sie genauso wie HTML-Dokumente am Bildschirm dar.

XHTML ist also XML-gerechtes HTML. Der Nachbau von HTML 4.0 in XHTML 1.0 ist so weit gediegen, dass es in XHTML die gleichen Attribute, Elemente und Verschachtelungsregeln gibt wie in HTML. Systembedingt durch andere Syntax von XML gibt es jedoch einige Unterschiede im Detail, die der Webdesigner kennen muss, wenn er seine Web-Seiten in XHTML statt in HTML schreiben möchte.

Internetseiten selbst gestalten - kein Problem!

Prinzipiell stellt das "Programmieren" von Internetseiten kein großes Problem dar.

Quelltext, bzw HTMl/XHTML ist eine sehr übersichtliche Ausszeichnungssprache, die sich normalerweise schnell erlernen läßt

Damit sich der Quelltext auf den Bildschrim bringen läßt, gibt es HTML-Editoren, WYSIWYG-Programme, oder auch CMS (ContentManagementSysteme) wie Typo3, Drupal, Joomla, ImpressCMS in Hülle und Fülle. Das Schwierige an der ganzen Webseitengestaltung ist allerdings nicht das Erstellen der Seiten, sondern, dass das Produkt auch auf allen Browsern, fehlerfrei dargestellt wird.

Wer sich einmal intensiv mit den verschiedenen Darstellungen innerhalb der verschiedenen Browser (sowie deren jeweiligen Browserversionen!!), sowie deren zusätzlich vielfältigen Browser-Bugs beschäftigt hat, der weiß wovon ich rede. Der Lerneffekt durch nächtelanges Herumprobieren ist allerdings immens...;-)

Aber wer trotzdem Lust hat, eine kleine private, oder die Internetseite seines Vereins, selbst zu gestalten, dem möchte ich an dieser Stelle ein paar Tips und Empfehlungen geben:

Welches Programm taugt was? Kommen wir gleich zu den Besonderheiten der einzelnen Arten:

• WYSIWYG Programme: Insgesamt sehr praktisch diese Programme - besonders für Anfänger - ohne, oder mit nur sehr geringen HTML Kenntnissen kann hier so ziemlich jeder, der mit Word einen Brief schreiben und eine Grafik einfügen kann, auch Webseiten, bis hin zu ganzen Internetpräsenzen erstellen. Alles einfach zusammen geklickt und auf irgendeinen Server hochgeladen - und fertig zum anschauen! Sollte es nun tatsächlich so sein, dass Ihre neue Homepage auf allen Rechner mit den verschiedensten Browsern fehlerfrei dargestellt wird, dann können Sie sich zu einem der sehr seltenen Glückpilze gesellen, dem dies auf Anhieb gelungen ist. Normalerweise, in nahezu 99% der Fällen, schreiben die meisten (billigen oder kostenlosen, z.T. völlig veralteten) Programme nicht mal halbwegs validen Quellttext (von akuellem XHTML ganz zu schweigen) und Ihre Seiten, sehen in jedem Browser anders aus. Nur die wirklich guten (und exorbitant teueren) WYSIWYG-Programme (Dreamweaver und Co) schreiben auch FAST 100% RICHTIGEN semantisch korrekten Code in validierbarem XHTML. Auch sollte überprüft werden, was das WYSIWYG'Progrämmchen in den Headerbereich schreibt. Manche Programme schreiben einen erheblichen Murks in die META-Daten, was nachfolgend den ROBOTS der Suchmaschinen gar nicht gefällt, und im schlimmsten Falle die Seite sogar auf den SPAM-INDEX setzen, fortan wird sie nicht mehr gefunden...
• Fast alle der kostenlosen WYSIWYG-Programme sind momentan noch einige Stufen schlechter, als die Profiprogramme, und mit deftigen Abstrichen im Web-2.0 Design, allerhöchstens für sehr einfaches Weblayout brauchbar. Zählt man, nach einigen Stunden harter Arbeit, zu den Glücklichen, funktioniert die Seite auf dem heimischen Rechner halbwegs korrekt, sofern man sich auf eines der drei mitgelieferten Layouts beschränkt und nachträglich nicht all zu viele Änderungen vorgenommen hat. Ist die erstellte Homepage dann hochgeladen, darf mit Spannung anschließend abgewartet werden, wie die ersten Kommentare von Freunde und Bekannte lauten... Und nicht gleich verzweifeln, wenn es auf Anhieb nicht geklappt hat, und die Kommentare in etwa so lauten, dass die Seite "irgendwie verschoben" aussieht... Ein eigenes Layout, Logos, Schatten oder Hintergrundbilder einzuarbeiten, erfordert schon mehr Kenntnisse. Manche WYSIWYG-Programme bedanken sich für das Ändern, oder Einpflegen von Quelltext damit, dass sie das neu Eingebrachte einfach beim nächsten Aufruf überschreiben um die alte Ordnung wiederherzustellen.
• Das momentan führende Programm ist Dreamweaver CS4. Kostet aber schlappe 570.- Euro.
• Wer sich ein Profiprogramm anschaffen will, sollte zudem unbedingt darauf achten, das es hundertprozentig XHTML unterstützt!
• Aber warum gleich ein so teueres Programm? Es gibt auch wirklich sehr gute HTML Editoren, die man sich exakt nach seinen Bedürfnissen anpassen, und absolut fehlerfreien Quelttext schreiben kann!
• Als Empfehlung sei hier Phase 5 genannt - meiner Meinung nach, einer der besten Quelltext-Editor überhaupt, der nur wenige kleine Schwachstellen aufweist. Er unterstützt noch nicht alle XHTML-TAGS von Natur aus, sodaß man hier und da ein bißchen manuell eingreifen muss, was aber problemlos möglich ist.
• Zu den CMS Programmen sei gesagt, hier ist selbst für die Einsteigerprogramme bereits ein umfangreiches Wissen notwendig. Weiter sollten mindestens einige Bücher der einschlägigen Literatur hinzugezogen werden. Auch ein Eintritt in die gängigsten Online-Foren wäre sehr zu empfehlen. Geübte brauchen dennoch einige Wochen, wenn nicht Monate, um sich in das CMS Ihrer Wahl richtig einzuarbeiten.
  (Mehr Info dazu auch unter meiner Rubrik CM-Systeme.)
• Selbstverständlich lohnt es sich auch immer, die Open-Source-Community im Auge zu behalten - die freien Programme entwickeln sich ständig weiter und werden sich in absehbarer Zeit nicht mehr hinter der kommerziellen Konkurrenz verstecken müssen. Es gibt heute schon Firmen, die sich auf TYPO3 und JOOMLA spezialisiert haben.

Wie kann ich meine Homepage testen?

Um das korrekte Funktionieren von Internetseiten auszuprobieren gibt es nur eine Möglichkeit: testen, testen, und nochmals testen ! Möglichst auf allen Browsern, auf allen Betriebssystemen - und nach einem Update, Servicepack "xy", Vistanachfolger, etc... gilt: wieder auf's neue testen - weil niemand dafür bürgt, das zukünftige Browser, die Seite noch so "sehen" wie die bisherigen.

Es empfiehlt sich, auch Freunde und Bekannte zu bitten, die Seiten anzuschauen und Rückmeldungen zu geben.

Noch aufwendiger wird's, wenn die Internetpräsenz nicht nur rudimentäre Funktionen besitzt, sondern auch PHP, JAVA, etc.. enthält. Nicht nur (Sicherheits)Updates möchten korrekt installiert sein, sondern es muss auch beachtet werden, dass unterschiedliche Anbieter auch z.B. unterschiedliche PHP-Versionen anbieten, sodaß unter Umständen, die eigene Entwicklung an diese Vorraussetzungen angepasst werden muss. Doch wer sich mit PHP beschäftigt, weiß das, die meisten PHP-Entwickler haben ohnehin ihren eigenen Entwicklungsserver zuhause und arbeiten beispielsweise mit der PHP-Version des Zielservers.

Mindestvoraussetzungen zum testen:

• Als erstes und einfachstes: indem Du möglichst alle aktuellen Browser, sowie deren direkte Vorversionen lokal auf Deinem Rechner installierst und Dein Produkt immer wieder (auch während der Erstellung) auf allen Browsern austestest. So lassen sich Fehler schon früh erkennen.
• Als zweite gute Möglichkeit Deinen Code zu überprüfen, kann ich HTMl- und CSS Online-Validatoren für den Einstieg empfehlen, sowie diverse Firefoxerweiterungen, z.B. Firebug. Einfach mal nach HTML-Validatoren googlen.
• Googel auch von Zeit zu Zeit mal nach den aktuellen Browserstatistiken und pass gegebenfalls Deine Seite den Eigenarten der momentan aktuellen Browsern an, sofern die Abwärtskombatibilität nicht hundertprozentig gegeben ist.

Sollte sich danach beim Austesten Deiner Webseiten keine Unterschiede in den o.g. Browser, etc. feststellen lassen, (und die Validatoren auch grünes Licht signalisieren), dann hast Du es geschafft (!), Du hast eine Internetpräsenz erstellt, deren Webdesign vermutlich in über 90% der momentan aktuellen Browsern, korrekt dargestellt wird. Und Du vermeidest sicherlich einige Mitteilungen von Freunden und Bekannten, auf deren Bildschirm Deine Seiten so komisch aussehen...;-)