Erschrecken sie nicht – jetzt kommt alles auf einmal. Gehen wir also Schrittweise vor:
Eine Webpräsenz besteht normalerweise aus mehr als einer Webseite (HTML-Datei). Oder anders gesagt, mehrere HTML-Dateien, eine oder mehrere CSS-Dateien und eine oder mehrere JS-Dateien zusammen, bilden einen Auftritt im Internet (Webpräsenz).
Unsere Visitenkarte wäre beispielsweise eine gute Kontaktseite - wir bräuchten allerdings auch noch weitere Seiten wie Willkommens- oder Startseite, Impressum usw. Diese Seiten sind dann normalerweise über ein Menü verlinkt, das heißt auf jeder Seite stehen Links (<a href="index.html">Startseite</a>) zu den anderen Seiten.
Da alle unsere Seiten allerdings einem Grundaufbau folgen sollen, erstellen wir zunächst eine Seitenvorlage, von der wir die anderen Seiten dann ableiten. Gleichzeitig bringen wir ein wenig Struktur (Unterverzeichnisse) in unser Webprojekt.
Um unsere Webpräsenz etwas einfacher anpassen zu können, überlegen wir uns noch, wie wir den Kopf und das Menü auch nachträglich noch einfach ändern können, ohne jede Seite dann händisch zu ändern.
Übung:
Überlegen sie wie sie Code (CSS und JavaScript) für viele Seiten verfügbar gemacht haben. Wie ist das dann mit HTML-Code?
Die Lösung wird im folgenden vorgestellt!
Zunächst wählen wir ein Projektverzeichnis und/oder legen dieses an. Dann erstellen wir dort eine Textdatei mit dem Namen Seitenvorlage_zum_Kopieren.html. In diese schreiben wir dann folgendes Grundgerüst:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="de-de"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta content="author" name="Fügen sie hier ihren Namen ein" /> <title>Fügen sie ihren Seitentitel hier ein</title> <link rel="stylesheet" type="text/css" href="css/layout.css" /> <style type="text/css"> /* Interne CSS-Formatvorlagen */ </style> <script type="text/javascript" src="js/funktionen.js"></script> </head> <body> <div id="KopfDiv"> <iframe src="iframes/kopf.html" frameborder="0" scrolling="no" width="100%" height="100%"> <h1 class="Kopf">Fügen sie ihren Seitentitel hier ein</h1> </iframe> </div> <div id="MenuDiv"> <iframe src="iframes/menu.html" frameborder="0" scrolling="no" width="100%" height="100%"> <a class="Menue" href="iframes/menu.html">Sitemap</a> </iframe> </div> <div id="InhaltDiv"> <!-- Hier fügen sie das ein, was sie bisher innerhalb des <body>-Tags stehen hatten --> </div> </body> </html>
Klären wir zunächst die neuen Tags:
Übung:
Schlagen sie alle Tags und Attribute, die sie nicht kennen oder verstehen, in ihrer Referenz nach. Speziell sollten sie das Tag <iframe> [s,a,w] untersuchen und prüfen, ob es mit der XHTML-Strict-Variante verträgt.
Anmerkung: Prüfen sie im Beispiel welche HTML-Version gewählt ist.
Jetzt legen wir die Unterverzeichnisse bilder/ , css/ , iframes/ und js/ an. Die Namen der Verzeichnisse sind soweit selbsterklärend:
Wenn wir zukünftig eine neue Seite in unserer Webpräsenz anlegen wollen, kopieren wir die Seitenvorlage und benennen sie entsprechend um. Sobald die Datei im Explorer markiert ist, geht das am einfachsten mit der Tastenfolge Strg + C (kopieren), Strg + V (einfügen) und dann F2 (umbenennen). Das Umbenennen können sie übrigens mit Esc abbrechen.
Noch einmal der Hinweis: Das Web ist Unix-basiert und deshalb werden Groß- und Kleinschreibung bei Dateien und Verzeichnissen unterschieden. Außerdem ist der Pfadtrenner / .
Wir haben innerhalb unseres Gerüstes mehrere Verweise auf Dateien. Diese Dateien müssen wir nun noch anlegen. Folgen sie dazu dem jeweiligen Link und kopieren sie den Quelltext aus der Datei. Bei den HTML-Dateien müssen sie zuvor noch den Seitenquelltext öffnen (Strg + U).
Wichtige Formatierungen:
Bitte beachten sie den Anhang: CSS-Einheiten und Farben, den Anhang: CSS-Eigenschaften und den Anhang: CSS-Boxmodell an dieser Stelle.
Übung:
Es bleibt noch die Vorlage und die Grafik für den Kopf (Name und Grafik selbst) anzupassen. Öffnen sie die Datei Seitenvorlage_zum_Kopieren.html mit dem Webbrowser, um sie zu überprüfen.
Die Hauptseite einer Webpräsenz heißt so gut wie immer index.html. Dies ist eine Vorgabe des Webservers, der eine Seite an den Browser ausliefert. Das heißt, wenn keine Webseite im Browser angegeben wird, liefert der Webserver die Seite index.html (beim IIS früher auch default.htm) zurück.