Wie funktioniert eine Webseite - technischer Aufbau

In diesem Artikel beschreibe ich den grundsätzlichen technischen Aufbau der allermeisten Webseiten. Dabei spielt keine Rolle, ob die Webseite mit einem CMS, einer Shop- oder Forensoftware erstellt wurde, selbstentwickelt ist oder als statische HTML-Seite erstellt wurde.

HTML und CSS

Grundsätzlicher technischer Aufbau einer Webseite

Grundsätzlicher technischer Aufbau einer Webseite

Das, was wir im Browser sehen, ist ein HTML-Dokument. Wenn man sich den Quelltext einer Webseite anschaut, dann sieht man genau dieses. Ein HTML-Dokument ist das Grundlegendste, was eine Webseite benötigt. Es besteht aus Texten und Pfadangaben zu Links und Bildern. Diese Elemente sind von Tags umschlossen und so als das gekennzeichnet, was sie sind. Ein Link ist z.B. vom HTML-Tag a umschlossen, eine Überschrift von h1, h2, u.s.w., ein Bild von img und ein Absatz von p.

Damit dieses HTML-Dokument nett aussieht, kann es mit Hilfe von CSS formatieren. In der Regel geschieht das über eine separate CSS-Datei, welche innerhalb des head-Tags referenziert wird.

Diese Dokumente kann man auch von allem anderen unabhängig separat einfach als Text schreiben, mit der Dateiendung .html bzw. .css abspeichern, auf einen Webserver hochladen und schon hat man eine Webseite. Diese ist dann allerdings statisch, was heißt, das eben genau das was ich in die Dokumente hinein geschrieben hab angezeigt wird. Für jede (Unter-)Seite muss ich eine neue HTML-Datei erstellen.

PHP und MySQL

Heutige Webseiten werden zu einem großen Teil dynamisch generiert. Hierbei agieren Skriptsprachen als Erzeuger des HTML-Quellcodes. Die am meisten verwendeten Skriptsprachen sind PHP und Javascript.

PHP agiert serverseitig. PHP-Funktionen werden immer dann aufgerufen, wenn eine Seite (neu) geladen wird. D.h. indem ich im Browser eine PHP-Seite aufrufe, sende ich einen Befehl an den Server, ein PHP-Skript aufzurufen. Dieses PHP-Skript kann dann Inhalte erstellen, z.B. anhand von Variablen, die beim Aufrufen übergeben wurden und/oder über das Auslesen von Daten aus einer Datenbank. Es generiert dann wieder ein HTML-Dokument und schickt dieses zur Ausgabe and den Browser.

Ein gutes Beispiel für so ein PHP-Skript ist eine Suchfunktion. Hierbei gibt der Benutzer einen Suchbegriff in ein HTML-Formularfeld ein und klickt dann auf einen Button. In Folge wird das gesuchte Wort an das PHP-Skript nennen wir es suche.php auf dem Webserver übergeben. Das Skript sucht nun nach diesem Wort in der Datenbank, holt alle Datensätze, die dieses Wort enthalten dort heraus, verpackt sie in HTML und schickt sie wieder als HTML-Dokument an den Browser. Für den Besucher lädt sich einfach die Seite neu und die Suchergebnisse werden angezeigt.

Übrigens: die meisten scheinbaren HTML-Seiten, die über eine URL aufgerufen werden, welche mit .html endet, sind in Wahrheit PHP-Skripte. Hier wird zum Zwecke der Suchmaschinenoptimierung ein statisches Dokument mit einem menschenlesbaren Dateinamen mit Bezug zum Inhalt der Seite vorgegaukelt. Bei genau dieser Seite z.B. ist das so. Es ist in Wahrheit die index.php, welcher als Variable die Nummer (ID) dieser Seite übergeben wird. Die URL, welche oben angezeigt wird, wird aus einer Tabelle in der MySQL-Datenbank aus dem Datensatz mit dieser Nummer ausgelesen.

Javascript

Eine weitere Möglichkeit, Inhalte auf Webseiten dynamisch zu erzeugen oder auch bestimmte Effekte durch Benutzeraktivitäten zu erzielen, ohne dass ein Kontakt zum Server besteht und die Seite neu geladen werden musst, ist Javascript. Damit können z.B. auch aufgrund von Mausbewegungen Elemente ein- oder ausgeblendet werden. Javaskript ist also eine clientseitige Skriptsprache (im Gegensatz zu PHP -> serverseitig).

Webdesign

Die hier beschriebenen Techniken sind die gängigsten und heutzutage am häufigsten verwendeten. Es gibt auch ein paar Alternativen, welche sich aber nicht so gut bewährt haben.

Weiterhin gibt es auch noch zusätzliche Techniken, wie z.B. Flash und AJAX, auf welche ich hier nicht näher eingehen möchte. Das ginge zu weit und der Artikel wird auch so lang genug smilie ;-)

Ein Webdesigner beschäftigt sich außer mit diesen Techniken in der Regel noch zu einem gewissen Teil mit Grafikbearbeitung und konzeptuellen und inhaltlichen Angelegenheiten, wie Strukturen, Benutzerfreundlichkeit, Suchmaschinenoptimierung, Accessibily, Marketing.

Ein guter Webdesigner beherrscht zusätzlich noch die von mir erwähnten Techniken mindestens gut, was Einiges an Lernaufwand und Erfahrung erfordert. Das Erstellen einer guten, professionellen und individuellen Webseite kostet Zeit. Man muss viel Text schreiben, von dem ein Kunde gar nicht weiß, dass er geschrieben wurde, man muss rechnen, testen, Fehler korrigieren, wieder testen, validieren, ausbessern.

Es gibt natürlich auch die Möglichkeit - und viele Webdesigner bieten diese an und sind dadurch evtl. sehr günstig - ohne HTML-Kenntnisse geschweige Kenntnisse in den anderen genannten Technologien gute Webseiten zu erstellen. Dies geschieht meist über die Installation eines Content Management Systems, einer Shopsoftware, einer Forensoftware (übrigens auch nichts anderes als eine Webseite bestehend aus den beschriebenen Komponenten) und eines bereits fertigen Templates mit Standardfunktionalitäten.

Wollen Sie mit ihrer Webseite Erfolg haben, etwas verkaufen, auf ihre Nutzer oder Kunden abgestimmte Funktionalitäten auf ihrer Webseite anbieten, ein zu ihrem Unternehmen genau passendes Design anbieten, reicht das jedoch oft nicht aus.

Hat dir der Artikel gefallen? Sag's weiter ...

auf Facebook teilen    Twittern    Pluseinsen G+