Sie öffnen ein Text-Programm, vorzugsweise den "Editor", den Sie im Windows unter "Programme/Zubehör" finden. Sie schreiben nebenstehenden Text und speichern die Datei unter "hello_world.htm". Speichern Sie die Datei in einem Ordner, den Sie dafür neu eröffnen. In den Beispielen dieses Crash-Kurs wird mit dem Ordner C:\html_kurs gearbeitet! (Natürlich sind Datei- und Ordnernamen und Ordnerort frei wählbar). Achtung: "k"leinschreibung und keine Spezialzeichen und Umlaute!
Nachdem Sie den Text gespeichert haben, verändern Sie den Text, indem Sie "Hello World" durch Ihren Namen ersetzen. Dann speichern Sie die Datei unter einer Buchstabenkette, die Ihrem Namen entspricht, ich beispielsweise unten "todesco.htm". Damit haben Sie 2 Dateien in Ihrem Odner.
Oeffnen Sie Ihren Browser und geben Sie in der Adressleiste (URL) den Dateinamen mit Pfad ein. In hierbeschriebenen Fall also "C:\html_kurs\hello_world.htm" ein. Damit betrachten Sie die vorher geschriebene Datei durch den Browser.
Hinweis: Der Name muss natürlich korrekt und vollständig geschrieben werden. Die Backslash's "\", die unter Windows verwendet werden, können durch normale Slash's "/", wie sie im WWW verwendet werden, ersetzt werden.
Sie können auch die Datei auch per "Drag and Trop", also mit der Maus vom Ordner in den Browser ziehen. Das führt zum gleichen Resultat: Sie sehen Ihre Datei! Dann überschreiben Sie in der Adressleiste "hello_world" durch Ihren Namen (".htm" bleibt) und drücken die Enter-Taste.
Jetzt haben Sie zwei einfache WWW-Seiten geschrieben !! Ich gcrashtuliere Ihnen ganz herzlich..
Analyse: Was habe ich getan?
Nun betrachten Sie wieder den Quelltext im Editor: Sie sehen, dass der ganze Text zwischen den beiden tags <html> und </html> steht.
Die HTML-Seiten sind im Prinzip immer gleich aufgebaut. Die Seiten sind wie folgt gegliedert:
|
<html>
|
Innerhalb der html-tag-Klammer gibt es zwei weitere tag-Klammern: eine ist <head> und </head>, die andere ist <body> und </body>. Innerhalb der <head>-Klammer gibt es eine <title>-Klammer, in welcher "Hello World" steht. (Die Einrückungen sind nicht nötig, sie dienen nur der Uebersichtlichkeit beim Lesen des Quelltextes).
Innerhalb der <body>-Klammer steht unserer Datei einige Male der Text "Hello World" mit verschiedenen <h>-Klammern. Wie Sie bereits gesehen haben, wird im Browser nur der Inhalt der <body>-Klammer angezeigt. Die verschiedenen <h>-Klammern bewirken verschiedene Schriftgrössen. Die <head>-Klammer sieht man nicht, den Inhalt der <title>-Klammer - hier "Beispiel" - sieht man (nur) auf dem Rahmen des Browsers.
Wichtig: Diese Strktur ist in allen normalen HTML-Dateien vorhanden. Man kann sie also immer von einer bestehenden Datei kopieren. Sie können künftig also beispielsweise immer Ihre Hello_World-Datei öffnen, die Datei durch neue Inhalte ändern und unter einem neuen Namen speichern (wie Sie das ja schon einmal gemacht haben).
