Home --> Artikel --> Webseiten selber bauen. Aktuelle Techniken.

Jetzt den Newsletter bestellen.

Webseiten selber bauen. Aktuelle Techniken.

Eine kostenlose Homepage kann heute fast jeder erstellen. Entweder mit einem so genannten WYSIWYG-Editor (What you see is what you get) oder mit einem Online-Baukasten. Schnell erreicht man jedoch die Grenzen dieser Tools und kann nicht das verwirklichen, was einem vorschwebt.

In diesem Beitrag möchte ich ein paar Werkzeuge und Techniken erläutern, mit denen moderne und nutzerfreundliche Webseiten erstellt werden können.

Solides Grundgerüst

Damit man die Struktur einer Webseite versteht und selber nachbauen kann, muss man sich mit der Seitenbeschreibungssprache HTML auseinander setzen. (Ja, HTML ist keine Programmiersprache!) Die letzte Aktualisierung des HTML Standards trägt die Nummer 4.01 und wurde 1999 festgelegt. Inzwischen ist das weiterentwickelte XHTML weit verbreitet. XHTML lehnt an XML an und erweitert die HTML Struktur. Bei XHTML muss jedes Tag geschlossen werden, nachdem es geöffnet wurde.

Damit der Browser versteht, welches HTML oder XHTML er interpretieren soll, gibt man im Kopf des Quelltextes den Dokumententyp an. Itse-wissen.de beispielsweise benutzt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Einheitliches Aussehen

Falls es noch nicht jeder weiß: Eine Webseite sollte immer ein einheitliches Aussehen haben. Bei vielen privaten Webseiten sieht man leider noch sehr häufig, dass jede Unterseite liebevoll gestaltet wurde, jedoch stets mit anderen Farben, anderer Schriftart usw. Der Besucher dieser Seite freut sich über das nette Aussehen, klickt auf einen Link und fragt sich plötzlich ob er überhaupt noch auf der gleichen Webseite ist, oder wo ganz anders. Um die Seite benutzerfreundlich zu gestalten, benutzen wir Cascading Style Sheets kurz CSS. Diese verschachtelbaren Stil-Angaben werden einmalig definiert und gelten dann für die gesamte Webseite.

Ein weiterer wichtiger Aspekt von CSS ist das Positionieren von Elementen auf der Seite. Dabei spielt das so genannte Box-Model eine große Rolle. Webseiten die früher mit Tabellen realisiert wurden, können jetzt einfach mit mehreren positionierten DIV-Bereichen erstellt werden.

Eine sehr gute Übersicht aller CSS-Definitionen findest du auf www.css4you.de.

Dynamischer Inhalt

Die meisten Webseiten bieten Inhalte an, die meist einheitlich strukturiert sind. Früher wurde für jede Unterseite eine HTML-Datei angelegt. Musste man nun ein Element der Seite ändern, dass auf allen Seiten vorkam, hatte man ein Problem. Jede einzelne Seite musste von Hand geändert werden. Die Verwaltung von großen Daten- und Artikelmengen war fast unmöglich.

Abhilfe verschaffen dynamische Programmiersprachen, die auf dem Webserver ausgeführt werden. Beliebt sind zum Beispiel ASP, Pearl, PHP und relativ neu Ruby on Rails. Mit Ihnen werden bestimmte Elemente der Webseiten dynamisch eingefügt. Ein Beispiel: Die Artikelseite, die du gerade liest, liegt nur als Grundgerüst auf dem Webserver. Die Überschrift, der Text und die Links am Ende werden aus einer Datenbank ausgelesen und von PHP in das Gerüst eingesetzt. Damit PHP weis, welchen Artikel er zeigen soll, steht in der URI .../artikel/webseite-selber-bauen

Im Internet gibt es einige sehr gute Artikel zum Einstieg in PHP, am Ende des Artikels findest du die Links dazu.

Aufbewahrung von Daten

Hand in Hand mit den bereits erwähnten dynamischen Programmiersprachen geht die Datenbank. In ihr werden die einzelnen Daten, Artikel und Texte abgelegt und bei bedarf aufgerufen. Der Webserver erhält eine Anfrage, welche von PHP bearbeitet wird. PHP ruft die benötigten Daten aus der Datenbank ab und anschließend wird aus all dem eine statische HTML-Seite erzeugt und an den Browser geschickt. Die Benutzer der Webseite bekommen von all dem nichts mit.

Die gebräuchlichste Datenbank für Webseiten und Internet-Anwendungen ist MySQL. Diese Datenbank beherrscht die SQL-Abfragesprache und kann mit dem Script PHPmyAdmin leicht verwaltet werden.

Zusammenfassung

Um moderne, benutzerfreundliche Webseiten zu erstellen reicht es leider nicht aus ein bisschen HTML zu beherrschen. Vorraussetzung für die Kompatibilität mit allen Browsern und Geräten ist ein semantisch korrekter Quelltext. Einheitliches Aussehen und Positionieren der Elemente erreicht man mit CSS. Daten und Texte für den Inhalt der Seite werden dynamisch mit Hilfe von PHP oder anderen Sprachen aus einer Datenbank geholt. Die Benutzbarkeit der Seite hängt allerdings immer noch von der Erfahrung und Professionalität des Erstellers ab.

Zugegeben, dieser Artikel umreist die Techniken und Hilfsmittel für moderne Webseiten nur sehr grob. Um genauere Informationen zu den einzelnen Themen zu bekommen, findest du am Ende des Artikels wichtige Links.

Wenn Ihr spezielle Artikel zu den Themen wünscht, schreibt mir einfach.

Link Datenbank Grundlagen

Link SQL Grundlagen

Link PHP + MySQL Einführung (engl.)

Link CSS Hilfe