Eine Einführung in (X)HTML, CSS und Webdesign

1. Einführung

  WWW, Homepage

Die HTML (Hypertext Markup Language)

"HTML - klar, kenne ich! Das ist eine Sprache, mit der man Internetseiten programmiert." Diese oder eine ähnliche Meinung wird von den Meisten vertreten, das macht sie jedoch nicht richtiger.
"Hypertext Markup Language" ist die Sprache zum Schreiben von Internetseiten. Sie beinhaltet zwei wesentliche Elemente: Zum einen Hypertext und zum anderen Markup. Dies erläutert sehr gut, was HTML eigentlich ist.

Hypertext

Ein Hypertext ist ein Text, der außer Formatierungen auch Querverweise innerhalb des Textes und/oder zu anderen Textdokumenten enthält. Solche Querverweise heben sich üblicherweise durch andere Farben oder Textformatierungen ab und können per Maus- oder Tastenklick ausgeführt werden.
So simpel und selbstverständlich das klingt, eröffnet es doch erstaunliche Möglichkeiten. Ich kann in meinen Dokumenten auf Dateien verweisen, die auf einem völlig anderen Rechner am anderen Ende der Welt liegen. Ich kann so weltweite Verknüpfungen aufbauen, die den Grundgedanken des World Wide Web (weltweiten Netz) erst ermöglicht haben.

Markup

HTML ist weder eine Programmiersprache noch eine Seitenbeschreibungssprache, auch wenn öfters davon gesprochen wird! HTML ist eine Textauszeichnungssprache, nicht mehr und auch nicht weniger. Sie zeichnet die logischen Bestandteile eines Dokumentes aus, wie zum Beispiel Überschriften, Textabsätze, Tabellen, Listen oder Grafikreferenzen aus. HTML besitzt keine "Anweisungen" oder "Befehle", sondern besteht aus Elementen, die durch "Marken", auf Englisch "Tags" eingegrenzt werden. Dies ist auch der Grund, weshalb Elemente wie <font> von CSS abgelöst werden, da diese mit Markup nicht viel zu tun haben, sondern die Darstellung des Textes beeinflussen. Es ist eine der großen Stärken von HTML, dass jeder Benutzer für sich selber festlegen kann, in welchem Layout er sich Dokumente ansehen möchte.
HTML wird nicht "programmiert", sondern schlicht "geschrieben".


Um HTML-Dateien anzeigen zu können, braucht man einen sogenannten "Browser". Die bekanntesten sind wohl der Microsoft Internet Explorer und Netscape, es gibt aber noch weitere wie Opera, iCab, Lynx und viele andere. Diese Browser auf den unterschiedlichsten Plattformen haben HTML längst zum weitverbreitetsten Dateiformat der Welt gemacht.

Die XHTML (Extensible Hypertext Markup Language)

XHTML ist eine neue Art von Dokumenttyp, der die Module aus HTML 4 reproduziert, erweitert und unterteilt. Das bedeutet einen kaum merklichen, aber doch bedeutenden Einschnitt: Es wird kein HTML 5.0 mehr geben, die Sprache zur Erstellung von Webseiten wird XHTML sein. Im Grunde genommen ist XHTML eine Weiterentwickling von HTML. Wie diese Entwicklung entstanden ist, möchte ich im Folgenden ganz kurz beschreiben. Sollten Sie sich näher dafür interessieren, können Sie sich auf den von mir vorgeschlagenen Seiten in das Thema vertiefen.

HTML ist eine SGML-Anwendung (Standard Generalized Markup Language). SGML ist die Mutter aller Auszeichnungssprachen im Web. Sie wurde entwickelt, um die logische Struktur von wissenschaftlichen Texten beschreiben zu können. SGML zeichnet sich durch Stabilität und Flexibilität aus, jedoch wurde dieser Sprache seit ihrer Verabschiedung 1986 immer komplexer, so dass es zu Kompatibilitätsproblemen zwischen verschiedenen Plattformen geführt hat. Es musse eine neue Lösung gefunden werden, und die heißt XML (eXtensible Markup Language).
XML ist eine Teilmenge von SGML. Die Sprache wurde erdacht, um die Vorteile von SGML ohne deren Komplexität zu erhalten. So wie HTML eine Anwendung von SGML ist, entstand XHTML als Anwendung von XML. Dadurch ist eine Sprache entstanden, die wie HTML bisher angewendet werden kannn (und auch von allen alten Browser korrekt verstanden wird), aber zukunftssicher ist und auch die vielen Vorteile von XML hat.

HTML und XHTML sind bis auf wenige Unterschiede vollkommen identisch. Die meisten Einführung im Web orientieren sich noch am HTML 4.0 Standard, so auch Dave Raggetts Einführung, die Sie im Laufe dieser Einführung noch lesen werden. Daher ist diese Einführung zunächst noch auf HTML 4 ausgelegt. Erst zum Ende des dritten Kapitels werde ich näher auf XHTML eingehen. Wenn Sie HTML 4 bis dahin begriffen haben, werden Sie die kleinen Unterschiede schnell verstehen und keine Probleme haben, von HTML 4 auf XHTMl umzusteigen. Weiterführende Literatur wird Ihnen den Umstieg auf XHTML - so Sie ihn denn vornehmen möchten - leicht machen.

CSS (Cascading Style Sheets)

Sie haben gelesen, dass durch die Markup-Sprache HTML logische Bestandteile eines Dokumentes ausgezeichnet werden. HTML dient also lediglich dazu, Strukturen festzulegen. Schrift, Farb- Größen- und Positionsdefinitionen sind also nicht Aufgabe von HTML, trotzdem wird HTML seit langem auch zur optischen Gestaltung der Seiten missbraucht. Als Beispiel lässt sich da das <font>-Element nennen, aber auch Tags wie <b> (Fett) oder <i> (Kursiv). Mit XHTML 1.1 wird das vorbei sein. Alle nicht dem Markup dienenden Elemente werden entfernt und von zukünftigen Browsern auch nicht mehr angezeigt werden.

CSS ist eine hervorragende Ergänzung zu HTML, die es erst ermöglicht, auf alle Angaben in HTML zu verzichten, die mit der reinen Textbeschreibung nichts zu tun haben. So wurde es möglich, wieder zum HTML-Gedanken zurückzukehren und dem Betrachter trotzdem ein ansprechendes, schönes Seitenlayout bieten zu können.
CSS ist eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. So kann man z. B. Schriftgrößen festlegen, Abstände zwischen Absätzen und Seitenrändern, Rahmen und Hintergrundfarben definieren, pixelgenaue Positionierung von Elementen vornehmen usw.

Es gibt mittlerweile zwei Sprachversionen von Style Sheets: CSS 1.0 und CSS 2.0. CSS 3.0 ist gerade in Arbeit. Nicht alle Browser unterstützen alle Möglichkeiten, die CSS bietet. Netscape 4 (NN4) interpretiert fast den vollen Umfang von CSS 1.0, aber nur einen Teil von CSS 2.0. Der Microsoft Internet Explorer (IE) versteht CSS 1.0 schon ab Programmversion 3.0, mittlerweile interpretiert er auch einen großen Teil von CSS 2.0. Andere Browser, vielleicht auf anderen Betriebssystemen wie MacOS oder Linux, verhalten sich widerrum anders.
Das bedeutet, dass Sie heute noch nicht auf den vollen Funktionsumfang von Cascading Style Sheets zurückgreifen können, es sei denn, sie verzichten mutwillig auf Besucher, die mit älteren Browsern surfen. Davon sei aber bereits an dieser Stelle abzuraten. Es ist zu empfehlen, beim Erstellen einer Seite diese auf mehreren Browsern zu testen. Es ist nicht schlimm, wenn Besucher Rahmen, Farben oder andere Layoutelemente nicht sehen können, jedoch sollte sie Seite keinesfalls im Funktionsumfang beeinträchtigt werden.

Die Möglichkeiten mit CSS sind für einen Anfänger zu Beginn nicht einfach zu durchschauen, so dass man langsam herangeführt werden sollte. Dies wird in dieser Einführung im Kapitel zu CSS erfolgen. Nach Lektüre dieser Einführung werden Sie jedoch wissen, in welchem Umfang Sie CSS einsetzen können, und haben eine Basis, selber auszuprobieren.

PHP, CGI, Perl, SSI, JAVA, Javascript, ...

Selbstverständlich gibt es noch weitere Sprachen, die bei der Erstellung einer Webseite angewandt werden. Man kann mit serverseitig ausgeführte Skripten, Datenbanken usw. arbeiten. Dies alles ist jedoch nicht Thema dieser Einführung.

  Das W3C


Letzte Änderung: 31. März 2001

valid XHTML 1.0! Valid CSS!