Home Tutorials Webentwicklung Webentwicklung Grundkurs Teil 2

Webentwicklung Grundkurs Teil 2

5
Titel Web2 1
Titel Web2 1
  • 3Minuten

Die ersten Webseiten des Internets bestanden noch aus statischem HTML. Seitdem hat sich viel getan. Eine moderne Seite enthält eine Vielzahl von Dateien. Design und Inhalt werden strikt voneinander getrennt, die JavaScripte sind ausgelagert und an zahlreichen Stellen werden PHP-Skripte eingebunden. In diesem Teil des Kurses schauen wir uns an, warum das so ist und wie das funktioniert.

Der Grund allen Übels

Nehmen wir an, wir hätten eine Homepage mit nur drei Seiten. Jede Seite unterteilt sich in drei Bereiche. In der Kopfzeile findet sich das Logo und die Navigation, in der Mitte der eigentliche Inhalt und in der Fußzeile der Copyright-Hinweis und vielleicht weitere Links.

Wenn wir kurz darüber nachdenken, fällt uns gleich ein Problem auf: Kopf- und Fußbereich sind immer gleich. Bei einer statischen Seite müssen wir diese Bereiche kopieren, was noch kein Problem darstellt. Die Probleme beginnen, wenn wir Änderungen vornehmen und wachsen mit der Anzahl der Seiten. Jede neue Seite ein neuer Menüeintrag. Nach dem Jahreswechsel dürfen wir immer die Fußzeile jeder Seite anpassen. Und möchten wir das Design ändern, können wir gleich alles neu machen.

Ein moderner Aufbau

Eine halbwegs moderne Seite besteht heute aus mehreren Dateien, selbst wenn es sich nur um eine Seite handelt. Die Anzahl der Dateien (und hier rechne ich Grafiken nicht mit) beträgt fünf oder mehr Dateien. Unterteilt werden sie in:

  • HTML Bereich
  • PHP Dateien
  • JS Dateien
  • CSS Dateien

Da auch der HTML-Bereich mit PHP durchsetzt ist, haben auch diese Dateien oft die Endung .php. Wir halten es einfach und unterteilen unsere Beispielseite wie folgt:

  • header.php
  • navigation.php
  • footer.php
  • index.php
  • style.css
  • formular.js

Die index.php ist die erste Datei, die beim Aufruf einer URL gestartet wird. Sie kann übrigens auch index.htm oder index.html heißen. Von den anderen Dateien bekommt der Seitenbesucher nichts mit. Hier ein Beispiel.

Zugegeben, die Seite ist hässlich wie die Nacht. Aber dafür zeigt sehr anschaulich den Aufbau. Wenn man den Code kennt.

Die ganze Seite im Überblick

Was ich jetzt zeige, ist ein Mittelweg aus dem, was ich oben erklärt habe. Diesen Zwischenschritt mache ich, damit man das Prinzip besser verstehen kann:

Die Datei heißt zwar index.php, man könnte sie aber auch index.html nennen, da sich darin kein php-Code befindet.

Grob lässt sich der Code in vier Bereiche unterteilen:

<!DOCTYPE html> sagt dem Browser lediglich nur, dass es ein HTML-Dokument ist.

<html lang=”de”> ist ein HTML-Block mit der Information, dass die Seite auf Deutsch ist.

<head> ist der Kopfbereich. Hier geht es um Informationen für den Browser, für Suchmaschinen und wir laden hier die style.css und formular,js. Das heißt, wir haben JavaScript und Style ausgelagert.

<body> ist der eigentliche Inhalt der Seite. Darin befindet sich auch die provisorische Navigation, das „Formular” (ist ja nur ein Button) und der Footer. 

Am Ende werden die Blöcke abgeschlossen. Auf die einzelnen Tags und wie das mit dem Style und dem JavaScript geht, möchte ich in diesem Tutorial noch nicht ausführen. Es geht schließlich nur um den groben Aufbau. Ich liefere jetzt noch den Code der beiden Dateien nach, damit ihr selbst damit experimentieren könnt.

style.css

Ohne ins Detail gehen zu wollen, sieht man hier eine wichtige Sache: Der Style ist in verschiedene Blöcke unterteilt, den wir im HTML beliebig aufrufen können. Kurz: Wir definieren das Zeug nur EINMAL und können es beliebig oft verwenden. Letztlich geht es bei dem ganzen Zirkus nur darum.

formular.js

Ich weiß, es ist nicht gerade spektakulär. Aber es geht letztlich nur um das Prinzip.

Aufteilung der HTML-Datei

Wir teilen nun alles wie oben beschrieben auf. Header, Navigation, Footer. Was bleibt, ist eine kleine index.php mit dem Inhalt.

header.php

Wer aufmerksam hingeschaut hat, stellt fest, dass das JavaScript fehlt.

footer.php

Und da ist das Skript auch schon. In diesem Beispiel musste es verschoben werden, damit es funktioniert. Das liegt an dieser Codezeile:

Hier wird nach der ID „hello” gesucht. In der ersten index.php war sie da, in der gleichen Datei, in der das Skript geladen wird. Da wir es ausgelagert haben wird die ID nicht mehr gefunden und in der Konsole (F12 in den meisten Browsern) erscheint eine Fehlermeldung. Schieben wir das Skript in den Footer, ist das Element bereits da, wenn das Skript gestartet wird. Das ist ein gutes Beispiel für Fälle, in denen JavaScript im Footer statt im Header sein muss, auch wenn man es in diesem Fall auch hätte anders lösen können. In späteren Tutorials werden wir das Thema vertiefen.

navigation.php

Hier kommt zurecht die Frage, warum man die Navigation auslagert, statt sie in den Header zu stopfen. Schließlich hat man da nicht gerade viel Code. Das stimmt. Wenn eine Seite immer umfangreicher wird, ist es ratsam, die Navigation extra zu behandeln. Ein klassischer Header, mit vielen Meta-Tags und ggf. Anweisungen für spezielle Browser kann schon ziemlich lang werden. Das Gleiche gilt für Navigationen. Um auch später den Überblick zu behalten, lohnt sich die Trennung schon jetzt.

index.php

Tadaaaa! Der ganze Firlefanz wird mit drei Zeilen eingeladen und dazwischen befindet sich der Inhalt. Also der Teil, auf den wir uns eigentlich konzentrieren wollen. Nun ist es egal, ob wir eine oder 1000 Seiten haben. Eine Änderung im Header, in der Navigation oder im Footer wirkt sich auf alle Seiten aus, auf denen die drei PHP-Dateien eingeladen werden.

Ausblick

Im nächsten Teil haben wir noch einen trockenen Part. Wir schauen uns an, wie man alles besser strukturieren kann. Das ist zwar in etwa so langweilig, wie einer Oma beim Schlafen zuzusehen, aber wichtig, wenn größere Projekte angegangen werden. Anschließend geht es mit etwas JavaScript weiter. Schließlich wollen wir auch ein paar coole Sachen machen.

An die Profis

Mir ist klar, dass in diesem Tutorial viele Themen, wenn überhaupt, nur gestreift wurden. Aber es geht erst einmal um das Prinzip. Der Code wird in späteren Teilen genauer erklärt und he, Zwerge haben auch klein angefangen. 😉 

Überblick Webdev-Serie

Webentwicklung Grundkurs Teil 1 – Einstieg
Webentwicklung Grundkurs Teil 2 – Aufbau von Webseiten
Webentwicklung Grundkurs Teil 3 – Datei- und Ordnerstrukturen
Webentwicklung Grundkurs Teil 4 – Einstieg in JavaScript
Webentwicklung Grundkurs Teil 5 – Datenverarbeitung und Formulare mit JavaScript

Überblick Interviews

Interview mit Magnus Reiß – Webgamers
Interview mit Wolfgang Scheidle – Tischtennis Manager
Interview mit Warg – Drifting Souls II

Autor

Abonnieren
Benachrichtige mich bei

5 Comments
Älteste
Neueste Meistgewählt
Inline Feedbacks
Alle Kommentare anzeigen
wpDiscuz
5
0
Ich würde mich über Ihre Meinung freuen, bitte kommentiere.x
Die mobile Version verlassen