allgemeine Grundlagen für eine Webseite

Wie bereits im Vorwort erwähnt, findest Du hier nun die ersten allgemeinen Grundlagen zur HTML-Programmierung.

Auf dieser Seite - welche Dateien werden für den Einstieg benötigt:

index.html oder index.php
Den Dateityp wählst Du je nach gewählten Server/Webspace aus - meine Empfehlung ist hier Webspace mit PHP Unterstützung und die Verwendung der index.php um nicht erst später umzusteigen und den erreichten Pagerank der Seiten wieder einzubüßen.
Folgenden Quelltext sollte diese Datei bereits erhalten:
Quelltext Erläuterung
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Diese Zeile verweist auf die öffentliche Dateibibliothek und sollte generell Angegeben werden.
<html> HTML wird eröffnet.
<head> Eröffnung des Informationsbereiches zu dieser Seite, hier folgen dann Angaben zum Seitentitel, Formatierungen und weitere Angaben.
<title>Meine erste Homepage</title> Der Seitentitel - ist frei wählbar und sollte Bezug auf den Inhalt haben, wird verwendet von eigentlich allen Suchmaschinen. Dieser Seitentitel wird ganz oben in der meist blauen Leiste angezeigt.
<link rel="stylesheet" type="text/css" href="privates/formatierung.css"> Verweis zur verwendeten Formatierungsdatei ("formatierung.css") welche sich mit dieser Angabe im Ordner "privates" befindet.
<link rel="icon" type="image/x-icon" href="favicon.ico"> Da mittlerweile alle neueren Browser nach diesem Icon suchen (wird in der Browserleiste vor http://... angezeigt), würde ich Dir empfehlen ein solches zu erstellen und zu verwenden - Möglichkeiten dazu findest Du am einfachsten im Internet.
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> Angabe zum verwendeten Befehlssatz - kannst Du erst mit dem Webspace endgültig angeben - zu meist ist es "iso-8859-1", aber auch andere wie "utf-8" sind möglich.
<meta http-equiv="Content-Style-Type" content="text/css"> Angabe zur Textformatierung - nicht verwechseln mit der Formatierungsdatei - text/css bedeutet, dass der Text mit CSS formatiert wird (also mit den Angaben der "formatierung.css").
<meta name="robots" content="index, follow"> Angaben für Suchmaschinen - index bedeutet auslesen der Seite, follow bedeutet den Links auf der Seite folgen, alternativ ist möglich noindex (nicht auslesen) und nofollow (nicht folgen).
<meta name="keywords" content="hier circa 10 Suchbegriffe angeben"> Hier solltest Du unter content="" circa 10 passende Suchbegriffe zu der jeweiligen Seite definieren - weniger erhöht die Relevanz der Begriffe, mehr verringert diese.
<meta name="description" content="Suchmaschinentext"> Hier solltest Du unter content="" einen kurzen treffenden Text zu der jeweiligen Seite angeben - maximal 200 Zeichen (inklusive Lehrzeichen). Dieser Text wird beim Finden durch Suchmaschinen als Beschreibungstext von dieser eingeblendet.
<meta name="date" content="JAHR-MONAT-TAG"> Angabe zum Erstellungsdatum (oder der letzten Änderung) - minimale, aber ausreichende Angabe mit Jahr, Monat und Tag zwingend mit Bindestrich (wie im content angegeben). Schummeln lohnt nicht, Suchmaschinen können heut zu Tage auch das Datum auf dem Server auslesen und vergleichen mindestens die Dateigröße der neuen mit der alten Datei.
<meta http-equiv="Content-Language" content="de"> Hier legst Du die Sprachauswahl zu Deiner Seite fest - de entspricht DEUTSCH, en entspricht englisch.
<meta name="author" content="DEIN NAME"> Hier legst Du den Namen des Autors dieser Seite fest - im Allgemeinen sollte also DEIN NAME unter content stehen.
<meta name="audience" content="alle"> Hier gibst Du die Besuchergruppe an, für die Du diese Seite erstellt hast - alle bedeutet auch für alle - alternativ ist möglich: Erwachsene, Kids, Kinder, Jugendliche, Rentner, ....
  Natürlich kann man noch weitere Head-Angaben machen - in wie fern diese etwas bringen vermag leider keiner zu beantworten - bis hier hin sind dies jeden falls die gebräuchlichsten Angaben.
</head> Jetzt wird der Informationsbereich geschlossen.
<body> Eröffnung des anzeigenden Bereiches.
  Hier folgt jetzt der Quelltext, welchen Du mit den weiteren Seiten meiner Webseitentipps erstellst
</body> Schließen des anzeigenden Bereiches.
</html> HTML wird geschlossen!

formatierung.css
Diese Datei muss sich laut oberen Quelltextangaben zwingend im Ordner "privates" befinden und enthält die Formatierung zu Texten, Tabellen, Bildern und so weiter.
Folgende Angabe sollte diese Datei bereits haben:
Angabe Erläuterung
/* Stylesheet for www.meine_erste_homepage.de */ Im Bereich von "/*" bis "*/" kann man in dieser Datei Notizen anlegen wie hier zum Beispiel, dass es sich um die Stylesheet für die Domain "www.meine_erste_homepage.de" handelt. Ist besonders sinnvoll wenn man mehrere verschiedene Homepages erstellt.
/* allgemeine Angaben (Hintergrund und Schriftformatierung) */ Hier nun die nächste Notiz - allgemeine Angaben. Diese betreffen meist erst einmal den Body.
body { background-color:#ffffff; color:#000000; } Die erste allgemeine Angabe: background-color:#ffffff; entspricht einem weißem Hintergrund der Webseite und color:#000000; entspricht einem schwarzen Text.
h1 {} Hier gibst Du später die Formatierung für die größte Überschrift an.
h2 {} Hier gibst Du später die Formatierung für die nächst kleinere Überschrift an.
h3 {} Hier gibst Du später die Formatierung für eine noch kleinere Überschrift an.
p {} Hier gibst Du später die Formatierung für einen einfachen Absatz an.
a:link {} Hier gibst Du später die Formatierung für einen Link an.
a:hover {} Hier gibst Du später die Formatierung für den Link an, wenn er mit der Maus überfahren wird.
a:visited {} Hier gibst Du später die Formatierung für den Link an, wenn er bereits besucht wurde.
a:aktiv {} Hier gibst Du später die Formatierung für den Link an, wenn er mit der Maus angeklickt wird/wurde.

Alle Angaben in dieser Datei werden nach und nach mit meinen Webseitentipps durch gegangen und Auswirkungen an einfachen Beispielen erläutert.

robots.txt
Diese Datei muss sich zwingend im gleichen Verzeichnis/Ordner wie die index.html oder index.php befinden und dient dazu, den Suchmaschinen mit zu teilen, was sie dürfen und was nicht.
Folgende Angabe sollte diese Datei bereits haben:
Angabe Erläuterung
# robots.txt zu http://www.meine_erste_homepage.de/ Nach dem Zeichen "#" gemachte Angaben sind Notizen für den Programmierer selbst und sind sinnvoll, wenn man mehrere Webseiten erstellt.
User-agent: * Wenn Du für alle Suchmaschinen nur diese eine Möglichkeit des Zulassens/Sperrens möchtest, dann setzt Du "User-agent: *". Möchtest Du unterschiedliche Angaben, dann musst Du auch diese Suchmaschinen kennen und dann das "*" mit dieser ersetzen. Bedenke dabei, dass diese Datei nicht mehr als 1kb Dateigröße haben sollte.
Disallow: /privates/ Mit dieser Angabe wird der Ordner "privates" für das Durchsuchen von Suchmaschinen gesperrt - Vorsicht, Spamrobots halten sich meist nicht an diese Regelung.
Disallow: /favicon.ico Mit dieser Angabe wird das Favicon für Deine Webseite zum Auslesen für Suchmaschinen gesperrt.
Allow: /index.php Mit dieser Angabe erlaubst Du Suchmaschinen, die Datei "index.php" aus zu lesen.
Allow: /index.html Mit dieser Angabe erlaubst Du Suchmaschinen, die Datei "index.html" aus zu lesen.

Diese Datei wird im Abschluss meiner Webseitentipps noch einmal aufgegriffen und bearbeitet. An dieser Stelle nur noch so viel zu diesen Dateiangaben: Allow ist verhältnismäßig neu und wird noch nicht von allen Suchmaschinen unterstützt, so dass man sich sehr wohl den Inhalt überlegen muss um nicht Dateien zu sperren, welche ausgelesen werden dürfen und ausgelesen werden sollen.

.htaccess
Diese Datei dient dem Verweisen auf Fehlerseiten und kann beliebig abgeändert in verschiedenen Ordner abgelegt werden.
Hinweis: diese Datei wird bei kostenlosen Webspace meist nicht unterstützt!
Folgende Angabe kann diese Datei enthalten:
Angabe Erläuterung
# Datei fuer Verzeichnis http://www.meine_erste_homepage.de/ Nach dem Zeichen "#" gemachte Angaben sind Notizen für den Programmierer selbst und sind sinnvoll, wenn man mehrere Webseiten erstellt.
ErrorDocument 404 http://www.meine_erste_homepage.de/404.php Diese Zeile verweist darauf, dass bei nicht Auffinden der aufgerufenen Datei die, sagen wir mal einfach, Ersatzdatei 404.php aufgerufen wird, also eine Fehlerseite. Diese Datei kannst Du passenden zu Deinen anderen Seiten gestalten.

Diese Datei wird im Abschluss meiner Webseitentipps noch einmal aufgegriffen um weitere Gedanken mit Hilfe dieser Datei ab zu arbeiten.

Das erstellen der Dateien erfolgt, in dem Du
für die Dateien "index.html", "index.php" und "robots.txt" so wie der Datei "formatierung.css" die "Dateinamenerweiterung bei bekannten Dateitypen ausblenden" abschaltest, in dem Du in der Ordnerstruktur den Haken vor diesem Eintrag entfernst. Nun klickst Du mit der rechten Maustaste auf einen freien Platz Deines Desktops und wählst in dem nun aufgehenden Dialogfeld "Neu" aus und fährst hier bis zum Eintrag "Textdokument", welches Du jetzt mit der linken Maustaste anklickst. Diese Datei benennst Du dann der entsprechend fehlenden Datei, denke daran, ".txt" muss entfernt sein! Sollte ".txt" bei dieser Datei erstellen am Anfang nicht angezeigt werden, dann ist die Dateinamenerweiterung nicht abgeschaltet!
Die Datei ".htaccess" lässt sich so allerdings nicht erstellen - hier bleibt nur ein kopieren einer bereits vorhandenen Datei oder der download dieser Datei.
Hier kannst Du diese Datei als ZIP-Archiv downloaden - Dateigröße: 207byte
Nach dem Du alle Dateien erstellt hast kannst Du die Dateinamenerweiterung wieder in den Ursprung zurück setzen.

Du möchtest diese Dateien nicht selbst erstellen, dann kannst Du diese hier in zwei verschiedenen Versionen downloaden.
Variante 1: - als RAR-Archiv: meine_erste_homepage.rar - Dateigröße: 1,75KB
Variante 2: - als ZIP-Archiv: meine_erste_homepage.zip - Dateigröße: 2,66KB