Grundlagen

Zu Beginn soll für alle, die sich im Umgang mit Browsern und dem Internet nicht sicher fühlen, eine kleine Einführung stehen. Wenn du bereits erfahrener Anwender bist, kannst du das Folgende ja kurz überfliegen (ein paar gute Tipps sind dabei) oder gleich zum ersten Kapitel wechseln.

Quellcode von diesen Seiten weiterbearbeiten

Mit einem kleinen bei Windows mitgeliefertem Programm (Notepad) kannst du, wenn du Lust hast, mithilfe dieser Einführung deine erste kleine HTML-Datei schreiben. Ich habe dir den Quelltext kopierbar auf diese Seiten gestellt.

Du kannst ihn aus den gelben Feldern direkt in den Windows- Notepad- Editor kopieren (Text mit Maus markieren, rechte Maustaste drücken: Kopieren - in Notepad an die gewünschte Stelle klicken - rechte Maustaste: Einfügen). Dann im Menue auf "Datei-Speichern unter" klicken und als name.html-File abspeichern - fertig. Nun kannst du die Datei mit dem Internetexplorer (IE) ansehen (Im IE "Datei-Öffnen-Durchsuchen-Öffnen": Da ist sie.
Notepad findest du in Windows im "Start"-Menue (Start-Programme-Zubehör).

Internet und Browser

Die Daten des Internet schweben nicht im freien Raum, sie sind auf sogenannten Servern gespeichert. Ein solcher Server ist nicht viel mehr als die Festplatte eines normalen Computers, auf der die Daten in Dateien gespeichert sind, die man über das Internet abrufen kann.

Die Programme, die von deinem PC über das Netz auf die Dateien des Servers zugreifen und lesen nennt man Browser.

HTML - eine Textauszeichungssprache

Die Sprache, die diese Browser verstehen, heißt HTML (HyperText Markup Language) und ist eine Textauszeichnungssprache. Sie definiert, wie die Inhalte einer Seite dargestellt werden sollen.

Das heißt, dass das, was man auf dem Bildschirm sieht, nicht alles ist, was in der Datei drinsteht.
Hinzu kommen noch die Befehle (Tags), die nur für den Browser bestimmt sind, ohne dass man sie sieht.

Das ist dasselbe wie bei Textverarbeitungsprogrammen, die neben dem, was sie auf dem Bildschirm darstellen oder ausdrucken eine Vielzahl von Informationen in das Dokument hineinschreiben, um sich selbst darin zurechtzufinden.

Der Vorteil bei HTML ist, dass die Befehle in sog. ASCII-Text oder auch plain (reinem) Text in den Inhalt eingefügt werden. Man kann sie sich also anschauen. Auch werden normalerweise nur die Befehle eingefügt, die auch notwendig sind und nicht wie bei Textverarbeitungsprogrammen tausende von Zusatzinformationen, die man nie braucht. Dadurch bleiben die HTML-Dateien relativ klein.

Wenn du eine HTML-Datei mit deinem Browser aufrufst (verwende hierfür, wenn möglich bitte den InternetExplorer von Microsoft), dann kannst du dir den Gesamttext der Datei (also den Seiteninhalt und die Befehle) ansehen, indem du die rechte Maustaste drückst und dann auf "Quelltext anzeigen" klickst. Dieser wird dann im Notepad-Editor geöffnet.

Dateiverwaltung und größere Projekte

Ist dir das auch schon einmal passiert:
Du weißt genau, dass auf deiner Festplatte oder auf dem Schulserver irgendwo eine Datei liegt, aber du kannst dich nicht an den Ordner erinnern und suchst und suchst und suchst...
Damit dir das beim Webseiten-Basteln nicht auch passiert, solltest du dir von Anfang an eine sinnvolle und nachvollziehbare Dateiverwaltung angewäöhnen.

Ein Beispiel: In HTML-Seiten werden Bilder nicht in die Datei integriert (wie etwa bei MSWord).
Stattdessen wird auf die Bilddatei mit einem Befehl verwiesen (referenziert) und der Browser schaut dann dort nach und ruft das Bild auf.
Das heißt, dass du du genau wissen und angeben musst, wo die Bilddatei liegt, sonst finden du und dein Browser sie nicht mehr.

Deswegen ein Tipp:
Lege dir auf der Spielwiese bzw. deiner Festplatte einen eigenen Ordner mit dem Namen "homepage" an. In diesen Ordner kommen alle HTML-Dateien hinein. Dann machst du einen Unterordner namens "grafik" (klein schreiben!!). Klar, was dort hineinkommt: alle Bilder, die du verwendest, aber auch nur die, auf die von den Seiten verwiesen wird. Andere Grafiken steckst du in einen anderen Ordner.

Noch ein Problem: Die Namen. Gerade wenn du viele Dateien hast, solltest du jedes HTML-Dokument mit einem "sprechenden Namen" versehen: also z.B. "bilder.html" , wenn dort Fotos angezeigt werden, oder "hobbies.html", wenn du darin über deine Hobbies schreibst.
Der Vorteil liegt auf der Hand: Du weißt sofort, was in einer Datei drin steht. Also nicht "seite1.html" etc. schreiben!!
Wenn du im Internet publizierst, dann müssen alle Dateinamen kleingeschrieben werden - gewöhne dir das am besten gleich an!

So, nun reicht es aber: Los geht's!

Weiter zur Einführung (Grundstruktur einer HTML-Datei)