1.2 HTML, CSS, PHP, MySQL und JavaScript

In diesem Kapitel möchte ich Ihnen möglichst einfach erklären, wo eigentlich die Hauptunterschiede zwischen den verschiedenen Web-Technologien liegen und was Sie wofür benötigen. Dabei nenne ich nur die für dieses Tutorial relevanten Haupttechniken, die bereits enorm viele Möglichkeiten zur Webentwicklung bieten.

HTML

HTML (HyperText Markup Language) ist das Grundgerüst von nahezu jeder Webseite. Dabei handelt es sich um eine Auszeichnungssprache, mit der einzelne Elemente, wie etwa Überschriften, Listen, Tabellen usw. als solche ausgezeichnet bzw. formatiert werden können.
Wenn Sie also lediglich eine kleine Webseite basteln wollen, würde HTML bereits ausreichen. Oftmals werden Sie im Zusammenhang mit HTML auch die Bezeichnung XHTML lesen. Dabei handelt es sich um eine neuere Version von HTML, die auf XML (Extensible Markup Language - eine erweiterbare Auszeichnungssprache) basiert. Zuerst gab es also HTML bis Version 4.01 und anschließend wurde XHTML definiert, was die vorherige Version ablöst. Zurzeit steckt übrigens HTML5 in der Entwicklung, um das Versionswirrwarr komplett zu machen.
Für Sie ist jedoch lediglich wichtig zu wissen, dass Sie in diesem Tutorial mit XHTML arbeiten werden, da dies dem aktuellen Stand entspricht.

Aber warum ist das so wichtig? Die Unterschiede zwischen HTML4 und XHTML sind nicht gerade gigantisch, aber dennoch wichtig, da Sie dem Browser in einem HTML-Dokument zu aller erst immer sagen, um welche Art von Dokument es sich handelt. Dementsprechend kann der Browser den darauf folgenden Quellcode richtig interpretieren und darstellen. Moderne Browser, wie etwa der Firefox sind so entwickelt worden, dass Sie auch fehlerhaften Quellcode möglichst korrekt interpretieren. Daher verzeiht Ihnen der Browser in der Regel kleinere Fehler, auch wenn Sie diese natürlich vermeiden sollten. Je weniger Fehler Sie in Ihrem Quellcode haben, desto höher ist die Chance, dass Ihre Webseite in allen Browsern gleich oder zumindest sehr ähnlich aussieht. Und dieser Punkt ist vor allem im Bereich des professionellen Webdesigns sehr wichtig.

CSS

Stylesheets bzw. "Cascading Style Sheets" ermöglichen es, HTML-Elemente auf eine einfache Art und Weise zu formatieren. Dabei handelt es sich beispielsweise um eine Datei in der definiert ist, wie HTML-Überschriften auszusehen haben. Der Vorteil daran ist, dass Sie den dafür benötigten Quellcode in eine separate Datei auslagern können, was für saubereren und übersichtlicheren Quellcode sorgt. Ebenfalls sehr hilfreich: Viele Dinge müssen nur einmalig definiert werden. Wo Sie in HTML etwa jeder Überschrift sagen, dass sie eine bestimmte Schriftfarbe haben soll, müssen Sie dies in CSS lediglich einmalig definieren und schon sind alle Überschriften vom gleichen Typ einheitlich formatiert. Neben den bisher genannten Vorteilen bietet CSS noch viel mehr Möglichkeiten der Seitengestaltung, die mit reinem HTML so nicht möglich wären.
Wenn Sie also HTML lernen wollen, so sollten Sie CSS im gleichen Schritt lernen. Das erspart Ihnen einiges an Arbeit und die Grundlagen sind nicht mal besonders schwierig. Aber alles Weitere dazu in Kapitel 4.

PHP

PHP ist im Gegensatz zu HTML keine Auszeichnungs-, sondern eine Skriptsprache. Es geht bei PHP also nicht darum, verschiedene Webseiten-Elemente darzustellen. Wo HTML und CSS für die statischen Inhalte zuständig sind, sind mit PHP dynamische Inhalte umsetzbar. Dynamisch bedeutet dabei, dass Sie mittels PHP gezielter auf Eingaben des Nutzers eingehen und diese sogar verarbeiten können. Ein simples Beispiel wäre etwa das Auslesen der Serverzeit, anhand welcher Sie verschiedene Seiten anzeigen lassen. So können Sie beispielsweise tagsüber eine Sonne auf Ihrer Seite platzieren und nachts einen Mond. Dies ist mit reinem HTML und CSS nicht möglich, da dies lediglich für die Darstellung der Inhalte gedacht ist. PHP wird serverseitig ausgeführt. Das bedeutet, dass der Quellcode nicht auf Ihrem Rechner, sondern auf einem speziell dafür ausgerichteten Webserver ausgeführt wird. Dazu aber später mehr.

MySQL

"MySQL - die populärste Open-Source-Datenbank der Welt." So wirbt der Hersteller für seine kostenlos verfügbare Datenbank. Für alle, die sich unter dem Begriff "Datenbank" nur wenig vorstellen können hilft vielleicht der Gedanke an eine Excel-Datei. Grundsätzlich kann eine Datenbank aus mehrerer solcher Tabellen bestehen. Diese Tabellen beinhalten die Daten, die in vorher definierten Spalten (z.B.: "Name", "PLZ", "Ort" usw.) gespeichert werden.
Wenn Sie beispielsweise eine Webseite bauen wollen, auf der Sie anderen Menschen Ihre Rezepte zur Verfügung stellen wollen, haben Sie mehrere Möglichkeiten: Sie könnten alle Rezepte mit HTML und CSS formatieren und für jedes Rezept eine eigene Unterseite erstellen. Dies könnte bei enorm vielen Rezepten jedoch sehr aufwendig werden. Eine andere Möglichkeit wäre es also, die Rezepte in einer Datenbank zu speichern (Name des Rezepts, Zutaten, Zubereitung, Zubereitungszeit usw.) und diese mittels PHP auszulesen.

Stark vereinfacht sind die Schritte dabei also folgende:
1. Sie stellen mittels PHP eine Anfrage an die MySQL-Datenbank, in der Ihre Rezepte gespeichert sind.
2. Die Datenbank liefert Ihnen die gewünschten Informationen.
3. Sie stellen die Rezepte mittels HTML und CSS dar.

Der Vorteil an dieser Methode ist, dass Sie die Rezeptseite lediglich einmalig gestalten müssen. Welches Rezept dort dargestellt wird kann dynamisch mittels PHP entschieden werden.

JavaScript

JavaScript ist ebenfalls wie PHP eine Skriptsprache, mit der Inhalte dynamisch geladen bzw. verändert werden können. Der für Sie zunächst wichtigste Unterschied ist, dass PHP serverseitig und JavaScript clientseitig funktioniert.
Doch was genau bedeutet das? Wenn Sie eine URL (z.B. www.webdesign-tutorial.net) mit Ihrem Browser aufrufen stellt dieser sehr vereinfacht gesprochen eine Anfrage an einen Webserver. Dieser liefert dem Browser HTML, CSS und JavaScript aber kein PHP. PHP wird lediglich auf diesem Server ausgeführt und alle dynamischen Schritte wurden bereits dort vor der Darstellung der Seite berechnet. Bei JavaScript ist das anders. Mithilfe von JavaScript können Sie Inhalte sogar nachträglich, also nach der Darstellung im Browser, verändern.

Dazu ein einfaches Beispiel:
Sie haben sich eine Webseite mit einem Eingabeformular gebaut. Dort kann der Nutzer seinen Namen und seine Adresse eintragen. Mit PHP müsste der Nutzer auf den Absenden-Button drücken, so dass die Daten zum Server geschickt und dort überprüft werden können. Hat der Nutzer keinen Namen eingegeben, können Sie anschließend eine Fehlermeldung ausgeben.
Mit JavaScript verhält es sich anders. Dieses kann direkt auf die Nutzereingabe reagieren und den Absenden-Button beispielsweise erst dann einblenden, wenn beide Felder zum Beispiel mindestens 3 Zeichen enthalten. Die Daten müssen also nicht zunächst zum Server geschickt werden.

Doch wie Sie vielleicht bereits bemerkt haben ist dies auch ein großer Nachteil von JavaScript, da dieses lokal auf Ihrem PC ausgeführt und somit leicht manipulierbar ist. Wenn ein Nutzer beispielsweise JavaScript deaktiviert, könnte dieser das oben genannte Formular vollkommen leer abschicken. Sie müssen also auf jeden Fall nochmals serverseitig mit PHP prüfen, ob die Felder nicht eventuell doch leer sind. Ich persönlich setze JavaScript daher so wenig wie möglich und ausschließlich zur Verbesserung der Handhabbarkeit einer Seite ein, denn dafür ist es meiner Meinung nach am besten geeignet.

Zusammenfassung

Da die Zusammenhänge zwischen den einzelnen Sprachen sehr zum Gesamtverständnis beitragen, soll ein Beispiel für eine abschließende Zusammenfassung sorgen.

Abbildung 1 zeigt eine Tabelle mit verschiedenen Pizzen, die in HTML geschrieben wurde. Sowohl die Tabelle als auch die Inhalte selbst sind vollständig mit HTML definierbar.

In Abbildung 2 wurde zusätzlich zu HTML die grafische Darstellung mit CSS angepasst. Diese Anpassungen wären zwar auch mittels HTML möglich gewesen, was aber nicht dem aktuellen technischen Stand entspricht. Der Grund dafür ist simpel: In HTML müssen Sie die grafische Darstellung für jede dieser Zeilen erneut definieren. Sie schreiben also in jede Zeile, dass Sie gerne eine bestimmte Hintergrundfarbe hätten, die Preise mittig dargestellt werden sollen usw.
In CSS ist das Vorgehen etwas anders. Dort sagen Sie beispielsweise Zeile 1, dass sie die Überschrift ist. Zeile 2 soll Zeilentyp A sein, Zeile 3 soll Zeilentyp B sein und Zeile 4 soll wieder Zeilentyp A entsprechen, um alternierende Hintergrundfarben zu erhalten. Der Unterschied besteht also darin, dass Sie einer Zeile lediglich einen Typ (in CSS als Klasse bezeichnet) zuweisen. Alle weiteren Angaben, also etwa die Hintergrundfarbe oder die mittige Ausrichtung definieren Sie anschließend in der CSS-Klasse selbst. Ein weiterer Vorteil von CSS: Falls Sie mehrere Tabellen auf Ihrer Seite verwenden, können Sie immer auf die gleichen CSS-Eigenschaften zurückgreifen, so dass der Stil der Seite automatisch einheitlich bleibt.

Was mittels PHP und MySQL möglich ist, zeigt Abbildung 3. Die Unterschiede zu Abbildung 2 bestehen lediglich in den verlinkten Preisen und zurecht werden Sie jetzt sagen, dass Verlinkungen doch mit HTML definiert werden. Damit haben Sie auch Recht, aber stellen Sie sich vor Sie hätten eine solche Tabelle mit 50 Pizzen zu jeweils 3 Preisen. Zu jeder Pizza (Größe und Art) wollen Sie nun eine Bestellseite entwerfen auf der der potentielle Kunde nochmals zusammengefasst den Preis und die Beläge dargestellt bekommt. Wenn Sie lediglich HTML und CSS verwenden, müssen Sie nun also 150 Unterseiten (3 Seiten pro Pizza) entwerfen. Als wäre dies nicht Arbeit genug wollen Sie nun eine Rabattaktion durchführen, bei der jede Pizza 50 Cent günstiger erhältlich ist. Folgerichtig müssen Sie alle 150 Seiten anpassen. Dieses Vorgehen kann also nicht der richtige Weg sein.
Besser ist es, die Daten beispielsweise zunächst in einer Datenbank zu erfassen. Dort speichern Sie die Namen der Pizzen, die Basispreise, die Beläge usw.
Mittels PHP können Sie die Inhalte der Datenbank nun dynamisch auslesen. Die in Abbildung 3 dargestellte Tabelle ließe sich sogar automatisch generieren ohne dass Sie die Namen oder die Preise der Pizzen in HTML eintragen müssten. Sie sehen also wo der Vorteil von PHP liegt. Es ist weniger das Sichtbare, sondern viel mehr die Technologie im Hintergrund, die Ihnen als Webdesigner viele Dinge erleichtert und flexibler gestaltet.

Abschließend zeigt Abbildung 4 eine von vielen Möglichkeiten, JavaScript beim Pizza-Bestellprozess-Beispiel zu verwenden. Der Benutzer möchte beispielsweise eine Pizza bestellen und soll vorher gefragt werden, ob er diese Pizza wirklich zur Gesamtbestellung hinzufügen möchte. Mittels PHP müssten Sie eine neue Seite laden, auf der Sie dem Nutzer diese Frage stellen. JavaScript hat jedoch den Vorteil, dass die aktuelle Webseite nicht neugeladen werden muss, da der Quellcode lokal auf dem Rechner des Nutzers ausgeführt wird. Sie könnten also ein Popup darstellen und die Pizza erst bei einem Klick auf OK der Gesamtbestellung hinzufügen. Klickt der Benutzer auf Abbrechen passiert einfach nichts, so dass nicht mal die Seite neu geladen werden muss.

Bedenken Sie also: Es gibt viele Wege um ähnliche bzw. gleiche Ziele zu erreichen. Manche Wege scheinen zwar zunächst schwieriger zu sein, sind dafür aber anschließend deutlich kürzer. Jede der in diesem Kapitel genannten Technologien hat ihre Vorteile, die lediglich in den verschiedenen Situationen korrekt verwendet werden müssen.