Mit dem bisherigen Wissen und den bereits vorgestellten HTML-Befehlen können Sie Ihre erste Website in Form eines HTML-Dokumentes erstellen. Wir geben Ihnen Schritt für Schritt eine Anleitung, damit Sie HTML & CSS besser verstehen und die einzelnen Maßnahmen für Sie nachvollziehbar sind.
Vorbereitung
Rufen Sie bitte Ihre Testumgebung auf (empfohlen XAMPP & der PHASE 5 Editor) und öffnen Sie in Ihrem HTML-Editor ein neues Dokument. Geben Sie diesem HTML-Dokument den Namen index.html und speichern Sie es in Ihrem Projektordner.
Hinweis:
Wenn Sie eine URL in die Adressleiste eingeben, greift der Server auf eine vorgegebene Datei zu – die zu startende Seite. Diese heißt in der Regel index.html, index.php oder dergleichen. Sie kann zwar auch anders lauten, aber die meisten Webhoster halten sich an die standardmäßige Namensgebung der Startseite.
Das Grundgerüst
Bevor Sie mit der individuellen und bedarfsgerechten Programmierung beginnen, ist immer das Grundgerüst zu übernehmen. Zuerst erfolgt die Dokumentendeklaration, dann der HEAD-Bereich mit den notwendigen META- und LINK-Tags und im Anschluß der BODY-Bereich.
Anmerkung:
Wir nutzen hier die weniger strenge Vorgabe des W3C-Konsortium in Form einer HTML und nicht XHTML-Datei. Für welche Variante Sie sich entscheiden obliegt Ihnen. Wir wählen die einfachere Methode um Ihnen das Verständnis für HTML näher zu bringen und Sie nicht bereits in den ersten Zügen zu verwirren.
Kopieren Sie folgenden Text in Ihren Editor:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> </body> </html> |
Angaben im Head-Bereich (Header)
Wichtige Angaben im Header sind, auch in Hinblick auf die Auswertung durch Suachmaschinen
- ein aussagekräftiger Titel (sieht man ganz oben im Browser)
- die Deklaration des Zeichensatzes (Standards sind ISO und UTF-Zeichensätze)
- der META-Tag „keywords“ (legt die Schlüsselbegriffe Ihrer Seite fest)
- der META-Tag „description“ (eine Zusammenfassung des Inhaltes Ihrer Seite)
- der META-Tag „language“ (dient der Identifizierung und Zuordnung des Sprachraumes)
- der META-Tag „robots“ (Hinweis zum crawlen durch Suchmaschinen)
Den Titel und die Inhalte der META-Tags keywords & description können Sie frei bestimmen. Der Rest folgt gewissen Regeln, welche hier nicht weiter besprochen werden können.
Wenn Sie Ihr HTML-Dokument um diese Angaben erweitert haben, dürfte sich der Inhalt wie folgt gestalten:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Mein erstes HTML-Dokument</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="description" content="Infos zur Website-Erstellung"> <meta name="keywords" content="HTML, Dokument"> <meta name="language" content="de"> <meta name="robots" content="index,follow"> </head> <body> </body> </html> |
Bis jetzt wurden lediglich grundlegende Angaben getroffen. Noch ist Ihre Website weiß (blank) und es sind noch keine Inhalte hinterlegt. Diese werden im BODY-Bereich dargestellt und auf der nächsten Seite beschrieben.
