In diesem Abschnitt werden wir die Sprachen und Technologien ansprechen, die typischerweise zum Erstellen von Webseiten eingesetzt werden.
HTML bedeutet HyperText Markup Language. Als Auszeichnungssprache (Markup Language) hat HTML die Aufgabe, die logische Grob- und Feinstruktur einer Webseite zu beschreiben. HTML geht aus der Familie der SGML-basierten Sprachen hervor.
Vom Web-Gründer Tim Berners-Lee entwickelt, wurde HTML im Zuge des Web-Booms zum erfolgreichsten und verbreitetsten Dateiformat der Welt. HTML ist eine Sprache zur Strukturierung von Texten, wobei aber auch die Möglichkeit besteht, Grafiken und multimediale Inhalte in Form einer Referenz einzubinden und in den Text zu integrieren.
Mit HTML können Sie Webseiten in Bereiche wie Kopf, Inhalt, Fuß, Navigation und Artikel unterteilen. Weiter können Sie Überschriften, Textabsätze, Listen und Tabellen erzeugen. Sie können anklickbare Verweise auf beliebige andere Webseiten oder Datenquellen im Internet erzeugen. Nicht-textuelle Inhalte können Sie referenzieren. Sie können Formulare in den Text integrieren. Und last but not least bietet HTML Schnittstellen für Erweiterungssprachen wie CSS oder JavaScript an, mit deren Hilfe Sie HTML-Elemente nach Wunsch gestalten oder Interaktionen mit dem Anwender realisieren können.
Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus. HTML-Dokumente bestehen zunächst aus Kopf- und Inhaltsdaten. Der Inhalt besteht typischerweise aus allgemeinen Elementen für díe Bereiche einer Webseite, also z.B. Kopfbereich, Inhaltsspalte, Navigation. Die Inhaltsspalte besteht etwa aus Überschriften 1. und 2. Ordnung, Textabsätzen, Listen, Tabellen und Grafiken. Einige dieser Elemente haben wiederum Unterelemente. So enthält ein Textabsatz zum Beispiel eine als betont oder fett markierte Textstelle, eine Aufzählungsliste besteht aus einzelnen Listenpunkten, und eine Tabelle gliedert sich in einzelne Tabellenzellen. HTML ist so konzipiert, dass sich die gesamte Elementstruktur einer Webseite als Baumstruktur mit immer feineren Verzweigungen abbilden lässt.
Eine der wichtigsten Eigenschaften von HTML ist die Möglichkeit, Verweise (Hyperlinks) zu definieren. Verweise (Links, Hyperlinks) können zu anderen Stellen der eigenen Website führen, aber auch zu beliebigen anderen Adressen im World Wide Web und sogar zu Internet-Adressen, die nicht Teil des Web sind.
HTML ist ein so genanntes Klartextformat. HTML-Dokumente können Sie mit einem beliebigen Texteditor bearbeiten, der Daten als reine Textdateien abspeichern kann. HTML ist also nicht an irgendein bestimmtes, kommerzielles Softwareprodukt gebunden. Da es ein Klartextformat ist, lässt es sich auch hervorragend mit Hilfe von Programmen oder Scripts generieren. Wenn Sie im Web zum Beispiel einen Suchdienst benutzen und nach einer Suchanfrage die Ergebnisse präsentiert bekommen, dann ist das HTML-Code, der von einem Script generiert wurde. Die Verwendung von HTML ist nicht an Lizenzen gebunden.
XHTML löst HTML aus der im Web-Bereich sonst unbedeutenden SGML-Sprachenwelt heraus und bindet die Sprache stattdessen in die modernere und praxisrelevantere XML-Sprachenwelt ein. XML ist wie SGML eine Art Regelwerk zum Definieren von Markupsprachen. XHTML kann gegenüber HTML von der XML-Infrastruktur profitieren. Dazu gehören etwa die Möglichkeit, Daten von einer XML-Sprache in eine andere zu übersetzen (mit XSLT), oder Inhalte anderer XML-Sprachen direkt einzubetten (beispielsweise SVG für Vektorgrafiken oder MathML für technisch/mathematische Formeln). Die Umsetzung dieser Möglichkeiten in den Browsern ist jedoch bis heute lausig bis gar nicht vorhanden. Wer nicht explizit eine Daten-Anbindung an die XML-Welt benötigt, braucht auch kein XHTML, sondern ist mit HTML besser beraten.
CSS bedeutet Cascading Style Sheets. Es handelt sich um eine beschreibende Ergänzungssprache für HTML. Sie klinkt sich nahtlos in HTML ein und hat zwei Aufgaben: das Formatieren von Inhalten und das Gestalten von Webseitenlayouts.
Wenn Sie ein HTML-Dokument ohne CSS-Angaben im Browser anzeigen, werden grundsätzliche Strukturen visuell unterscheidbar dargestellt. So werden Überschriften in grafischen Browsern größer und fett dargestellt, Tabellen sind sichtbar, und wichtige Auszeichnungen im Text werden z.B. kursiv, fett oder in nicht-proportionaler Schrift dargestellt. Man spricht in diesem Zusammenhang von einem internen Default-Stylesheet, das Browser verwenden, um HTML-Elemente darzustellen. Die HTML-Spezifikation enthält Empfehlungen für solche Default-Darstellungen.
An diesem Punkt setzen die Cascading Stylesheets (CSS) ein. Mit Hilfe von Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 1. Ordnung 24 Pixel groß sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Pixel und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Sie können aber genauso gut auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter groß sein soll und eine gelbe Hintergrundfarbe erhält.
CSS erlaubt es, zentrale Formate zu definieren, beispielsweise für alle Überschriften erster Ordnung, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für hervorgehobenen Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate können in eine externe Style-Datei ausgelagert werden, die Sie dann in beliebig vielen HTML-Dokumenten einbinden können. So ermöglicht CSS seitenübergreifende, einheitliche Layouts und Formatierungen.
CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können. Das Standardisierungsverfahren bei CSS folgt den gleichen Regeln wie das von HTML.
Es dauerte eine Weile, bis die Entwicklergemeinde das volle Potential von CSS zu nutzen lernte. Das betraf vor allem die Möglichkeiten, mit CSS Elemente zu gestalten, die Behälter für ganze Teile einer Webseite sind. Mittels spezieller CSS-Formateigenschaften zum Anordnen von Elementen, zur Hintergrundgestaltung und sichtbaren Rahmen wurden moderne, CSS-basierte mehrspaltige Website-Layouts möglich. Prinzipiell funktionieren solche Layouts in allen heute verwendeten Browsern. Der Teufel steckt jedoch im Detail, weil nicht alle Browser die CSS-Spezifikation identisch umsetzen, was sich gerade beim Seitenlayout unschön bemerkbar machen kann. So entstand eine ganze Fachwelt rund um das Erstellen von CSS-basierten Webseitenlayouts.
1996 führte Netscape, der damalige Marktführer unter den Browsern, eine Scriptsprache namens JavaScript ein. Netscape ließ diese Sprache als ECMA-Industriestandard mit der Nummer 262 definieren.
Mit Hilfe von JavaScript konnten Web-Autoren das Verhalten von Webseiten und Browser bis zu einem gewissen Grad beeinflussen. In HTML können Sie beispielsweise Formulare definieren, mit Eingabefeldern, Auswahllisten, Buttons usw. Der Anwender kann ein Formular ausfüllen und über das Web absenden. Doch HTML erlaubt Ihnen als Formularanbieter nicht, die Eingaben des Anwenders vor dem Absenden des Formulars auf Vollständigkeit und Plausibilität zu prüfen. Mit JavaScript ist das möglich.
Leider wurden die Möglichkeiten von JavaScript in den Anfangsjahren für allerlei Spielereien missbraucht, die dafür sorgten, dass sich JavaScript einen schlechten Ruf einhandelte. Daran änderte auch Microsoft nichts, das den ECMA-262-Sprachstandard unter dem Namen JScript implementierte und durch eigene Ergänzungen ausbaute.
Später gewann JavaScript seine Reputation durch zwei wichtige Entwicklungen zurück:
Wegen zahlreicher Detailunterschiede bei der Implementierung in den einzelnen Browsern halten sich heute viele Entwickler an sogenannte JavaScript-Frameworks. Das sind Code-Bibliotheken, die für alle wichtigen und häufig verlangten Aufgaben fertige Funktionen bereitstellen und den Entwickler von Browser-Unterschieden fernhalten.
Im vorliegenden Handbuch wird JavaScript nur am Rande behandelt, da man den Möglichkeiten dieser Sprache nur noch mit einem eigenen Buch gerecht werden kann.
Hinter der Mehrzahl der heute im Web aufrufbaren Seiten steckt keine statische, auf dem Webserver gespeicherte HTML-Datei mehr. Stattdessen werden die Seiten beim Aufruf dynamisch generiert. Nicht immer ist das an der URL-Adresse sofort erkennbar. Fast alle Blogs etwa werden mit Blog-Software wie Wordpress erzeugt, und die meisten größeren Sites mit Content Management Systemen (CMS) wie Typo3, Drupal oder Joomla. Das sind Webanwendungen, die auf einem Webserver installiert werden. In der Regel bestehen sie aus einem Backend und einem Frontend.
Das Backend ist ein Administrationsbereich mit einer eigenen, öffentlich nicht bekannten Webadresse. Dort eingerichtete Benutzer können sich anmelden und das Backend nutzen. Das Backend ist selbst eine Webanwendung, die vorwiegend aus Formularen besteht. Es ermöglicht das Verwalten und Editieren von Webseiten, aber auch von verwaltungsberechtigten Benutzern.
Das Frontend ist eine Webanwendung, die das dynamische Generieren von Webseiten steuert. In der Regel besteht die Aufgabe darin, definierte HTML-Templates zu verwenden und in darin definierten Bereichen Inhalte einzufügen, die aus einer Datenbank oder aus Datendateien geholt werden. Dazu enthalten die HTML-Templates in der Regel Platzhalterzeichenfolgen, die von der Anwendung erkannt und durch generierte Inhalte ersetzt werden.
Backend- und Frontend-Anwendung müssen programmiert werden. Dazu sind durchaus klassische Programmiersprachen wie C oder Delphi geeignet. Für web-typische Aufgaben besser gerüstet sind jedoch Sprachen wie PHP, Java, Python oder Perl. Die meisten bekannten Blogsysteme und Content Management Systeme sind heute in PHP, Java oder Python programmiert. Dabei sind PHP und Python reine Scriptsprachen. Die Anwendungen werden erst zur Laufzeit kompiliert. Dank immer schnellerer Rechner und sehr effizienter Script-Interpreter sind Scripts heute absolut konkurrenzfähig.
Auch wenn Web-Autoren keine eigenen Webanwendungen erstellen, können Kenntnisse in einer web-typischen server-seitigen Scriptsprache wie PHP von Vorteil sein. Viele Aufgaben, egal ob Formular-Mailer, Umfrage, Bildergalerie oder das Ermitteln von Daten aus einer Datenbank, lassen sich damit lösen, auch wenn sonst keine große Webanwendung zum Einsatz kommt.
Flash bietet die Möglichkeit, Multimedia-Effekte auf Web-Seiten zu bringen, aber auch Anwendungen wie Spiele, Simulationen oder Produkt-Animationen. Im Laufe der Jahre hat es sich zum defacto-Standard für Multimedia im Web entwickelt, und das, obwohl es eine proprietäre Technologie mit einem binären Dateiformat ist, deren Original-Autorensoftware nicht ganz preiswert ist. Zwei wichtige Gründe haben den Erfolg von Flash begünstigt:
Ohne Flash wären erfolgreiche Multimedia-Sites wie etwa YouTube gar nicht denkbar. Insgesamt hängt viel davon ab, wie Flash eingesetzt wird. Als Basis für einfach integrierbare Video- oder Music-Player ist es allgemein akzeptiert und beliebt. Nicht durchgesetzt haben sich dagegen reine flash-basierte Websites, also Websites, bei denen der Webserver nicht HTML-Dokumente mit eingebetteten Flashmovies sendet, sondern gleich nur noch Flashmovies.
Flash wurde ursprünglich von Macromedia entwickelt. Heute wird es von Adobe vertrieben.
XML bedeutet Extensible Markup Language. Es handelt sich um ein Regelwerk für Markupsprachen.
HTML ist eine Auszeichnungssprache zur Strukturierung gewöhnlicher Webseiten. Es gibt jedoch bereits im engeren Zusammenhang mit Webseiten Daten, die sich gar nicht oder nicht sinnvoll mit Hilfe von HTML beschreiben lassen. Vektorgrafiken zum Beispiel, oder in Feedreadern abonnierbare Feeds von News- oder Blog-Artikeln. Dabei ist es jedoch von Vorteil, wenn auch andere beschreibende Sprachen den gleichen syntaktischen Grundregeln wie etwa HTML folgen. Ein Vorteil ist beispielsweise, dass Parser, also Software, die Markup-Sprachen verarbeitet, immer die gleichen Algorithmen zur Auflösung der notierten Auszeichnungen verwenden kann.
Nun wurde HTML bis einschließlich Version 4.01 mit Hilfe von SGML definiert. SGML ist ein allgemeines Regelwerk zur Definition von Markup-Sprachen wie HTML. Allerdings ist SGML sehr komplex und für die meisten Anwendungsfälle überdimensioniert. Deshalb hatte das W3-Konsortium sich bereits in den 90er Jahren entschlossen, ein leichter zu handhabendes und für die praktische Datenverarbeitung zweckmäßigeres Regelwerk zu entwickeln. Das Ergebnis ist XML (Die Abkürzung steht für Extensible Markup Language). XML ist jedoch nichts, was von den Grundregeln von SGML völlig abweicht. Es ist vielmehr selbst ein sogenanntes »SGML-Profil«. Aber ebenso wie SGML selbst keine Anwendungssprache, sondern eben ein Regelwerk zur Definition von Anwendungssprachen.
Mit Hilfe von XML können Sie also eigene, neue Markup-Sprachen entwickeln, die sich an bestimmte, definierte Muster und Regeln halten. XML ist dabei das »Regelwerk«, das Schema. Beim Definieren eigener Markup-Sprachen mit XML können Sie eigene Namen vergeben. So können Sie zum Beispiel Elemente definieren, um Bereiche eines Dokuments als Lexikonartikel auszuzeichnen, als Musiknote oder als Bestandteil einer chemischen Formel. Sie müssen bei der Definition der Elemente jedoch exakt festlegen, welche Eigenschaften das Element hat, zum Beispiel, innerhalb welcher anderen Elemente es vorkommen kann und innerhalb welcher nicht. Wenn Sie dann ein XML-Dokument mit der Definition einer eigenen Sprache erstellt haben, können Sie Dateien in dieser Sprache erstellen und im Dateikopf angeben, auf welche XML-Definitionen Sie sich in dieser Datei beziehen.
Auszeichnungssprachen, die Sie mit XML definieren, sind zunächst noch nichts, was irgendwelche Dinge auf den Bildschirm zaubert. Dazu ist Software erforderlich, die eine Markup-Sprache parst und aus der daraus gewonnenen Datenstruktur irgendetwas macht, beispielsweise eine Bildschirmausgabe.
XML bietet einerseits die Möglichkeit, eigene Datenformate zu erzeugen, die einem standardisierten Schema folgen und daher Kompatibilität garantieren. Andererseits lassen sich mit XML aber auch Datenformate erzeugen, die für eine breitere Verwendung im Software-Markt geeignet sind. Das W3-Konsortium arbeitet gleich an mehreren solcher XML-basierten Auszeichnungssprachen. Für jede dieser Auszeichnungssprachen gibt es eine eigene Arbeitsgruppe, die sich um eine saubere Spezifikation und eine praxisgerechte Weiterentwicklung der jeweiligen Sprache kümmert. Aber auch andere Hersteller und Anbieter versuchen, XML-basierten Sprachen zu einem Standard-Status zu verhelfen. Die folgenden Sprachen sind Beispiele solcher Standardsprachen.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.