Vorwort Inhaltsverzeichnis Andere Seiten Impressum Shop Webdesign

Vorlage

Um uns die Arbeit zu erleichtern erstellen wir ein Grundgerüst (s.a. selfhtml) für die (X)HTML-Dateien, welches wir als Vorlage mehrfach verwenden.

Diese Datei unter vorlage.html im Projektverzeichnis abspeichern.

Die Datei gliedert sich von oben nach unten in Angaben über die verwendete "Markup-Language", in unserem Fall xhtml1.0 Durch diese Angabe weiß der Browser sofort, wie er den nachfolgenden Teil der Datei zu interpretieren hat.
Zwischen <html xmlns="http://www.w3.org/1999/xhtml"> und </html> stehen die (x)html-Angaben. Innerhalb dieser Tags (tags, engl. Marke, Markierung) stehen dann der Kopf (<head> und </head>) sowie der Inhalt (<body> und </body>)
Zwischen die Tags <head>und </head> (head, engl. Kopf) kommen die Angaben im Kopf; Angaben für Suchmaschinen und Browser, (die sogenannten Meta-Tags) links auf Stylesheet-Dateien oder JavaScripte etc.
Der eigentliche im Browser auch dargestellte Inhalt befindet sich zwischen <body> und </body> (body, engl. Körper). Dieser Bereich ist in der Vorlage noch ohne Inhalt.

In unserem Grundgerüst fehlen noch einige Angaben, um es sinnvoll einzusetzten.
Die Platzhalter zwischen <head> und </head> müssen durch sinnvolle Angaben ersetzt werden.
Dann sollte unsere Navigation erstellt und eingefügt werden.
Ebenso legen wir noch Bereiche für den Inhalt und Seitenfuss fest.

<?xml version="1.0"?> <!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"> <head> <title>Die Wollmaus</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content="Alles über das Leben der Wollmaus."/> <meta name="author" content="Dein Name" /> <meta name="keywords" content="Wollmaus, Staub, Hausstaub, Staubsauger"/> <meta name="robots" content="index, follow"/> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> </head> <body> <div class="logo"> <img src="wollmaus.jpg" width="621" height="92" alt="Logo Die Wollmaus" /> </div> <div class="navi"> <a href="index.html">Home</a> <a href="entstehung.html">Entstehung</a> <a href="lebensraum.html">Lebensraum</a> <a href="feinde.html">Feinde</a> <a href="bilder.html">Bilder</a> <a href="impressum.html">Impressum</a> <a href="mailto:name@provider.de">name@provider.de</a> </div> <div class="inhalt"> </div> <div class="fuss"> </div> </body> </html>

Angaben im Kopf <head> und </head>

Der Text zwischen <title> und </title> (title, engl. Titel) wird in der Titelzeile des Browser oben links angezeigt.

In der Meta-Angabe "Description" (engl. Beschreibung) <meta name="description" content=" wird eine kurze Beschreibung für Suchmaschinen eingefügt.
Die Meta-Angabe "keywords" (engl. Stichwörter) <meta name="keywords" content=" enthält Stichwörter zu der Homepage.
Mit dieser Angabe <meta name="robots" content="index, follow"/> wird den Suchmaschinen-Bots (auch Spider genannt) mitgeteilt diese Seite in ihren Katalog aufzunehmen (index) und auf dieser Seite gefundenen Links zu verfolgen (follow).

<link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> : Dieses ist der Link auf unsere noch zu erstellende StyleSheet Datei. Am besten ist, wir legen schon einmal das Verzeichnis (auch Ordner genannt) css in unserem Projekt-Verzeichnis an. Später erstellen wir dort unsere Stylesheet-Datei stylesheet.css.

Angabe im Body <body> und </body>

Wir strukturieren unsere Homepage mit Hilfe des div-Elementes.(div engl. division Bereich)

<div class="NAME"> </div> : Damit werden auf unserer Homepage Bereiche festgelegt, für die wir später in der Stylesheet-Datei noch die Gestaltung festlegen müssen.
<img src="wollmaus.jpg"/> : (img engl. image Bild und src engl. source Quelle zusammen also die Bildquelle) so wird unser Logo in die Homepage eingebunden.
 : Ein Kommentar, hier ein Hinweis auf das Ende eines Bereiches
<a href="index.html">Home</a> : (a engl. anchor Anker href engl. Hypertext Referenz Verweis Zusammen der Verweis Anker) Ein Link auf eine weitere Seite, in diesem Fall auf die index.html, (bzw. Email)

Das Abspeichern als vorlage.html nicht vergessen.

Ruft man die vorlage.html im Browser auf, so sieht die Seite noch ziemlich farb- und formlos aus. Eigentlich sieht man nur eine einfarbige Fläche und das Logo.
Deswegen sollten wir nun unsere Stylesheet-Datei erstellen.

Anfang Nach oben Stylesheets