Das erste Dokument
Dir die folgenden Texte trocken durchzulesen, hilft nicht viel. Es verwirrt in den meisten Fällen nur. Mach am besten gleich mit.

Beginne damit, dass du dir einen Ordner anlegst, der nur (und damit meine ich wirklich ausschließlich) für deine Homepage gedacht ist. Keine anderen Dateien dort abspeichern, das führt binnen kürzester Zeit zu absoluter Unübersichtlichkeit. Und lege ihn an einen Ort, an dem du ihn wiederfindest. Also nicht unbedingt unter Eigene Dateien - Bilder - Persönliches - Kruschkram - Kleinigkeiten - Wuzzelfix - usw.

Einfach ein Klick mit der rechten Maustaste auf Start, dann Explorer anwählen. Dort in einen Ordner gehen, der sinnvoll ist, zum Beispiel Eigene Dateien. Rechte Maustaste klicken, es öffnet sich das Kontextmenü. Neu anwählen, dann Ordner. Den nun erstellten Ordner sinnvoll benennen, der Einfachheit halber schlage ich Homepage vor. Mit der Enter-Taste bestätigen.

Jetzt in den neuen Ordner gehen, hier wieder die Prozedur "rechte Maustaste - Neu" wiederholen, dann aber Textdatei anwählen. Diese benennen: index.html

Warum "index"? Später, wenn man die Homepage ins Internet lädt, wird das die Datei sein, auf die ein Besuch automatisch als erstes kommt, wenn er die Internetadresse eingibt. Gibt es "index" nicht, kann es bei manchen Browsern (Browser = Internet Explorer, Mozilla, Firefox, Opera, etc.) passieren, dass nur ein Verzeichnis wie im Explorer angezeigt wird, nicht aber die Internetseite.

.html sagt dem Browser, dass es sich um ein HTML-Dokument handelt. Somit weiß er, wie er den Code interpretieren muss, um ihn richtig darzustellen. Möglich ist auch .htm, aber man sollte sich durchgängig für eine Schreibweise entscheiden. Sonst ist die Gefahr zu groß, dass man eine Fehlerquelle hat, bei der dann Links nicht funktionieren.

Enter-Taste drücken. Du wirst gefragt, ob du die Endung denn tatsächlich speichern willst, und ja, du willst. Normalerweise soll man ja mit den Endungen nicht rumpfuschen, aber in dem Fall ist das durchaus erwünscht. Soll ja ein HTML- und kein Textdokument werden. Das Icon müsste sich nun ändern.

Wichtig: Gib den Dokumenten a) aussagekräftige Namen. Wenn du mehrere Dateien geöffnet hast, siehst du nur das unten in der Leiste. Ebenso verlierst du sonst zu schnell die Übersicht, wenn deine Seite etwas größer geworden ist. Glaub mir, bei 1200 Dateien KANNST du dich nicht mehr daran erinnern, dass sich hinter seite0261.html das sechste Kapitel deiner achten Geschichte verbirgt. Aber achte auch darauf, dass die Dateinamen nicht zu lang werden. carsten-suchte-das-ende-des-regenbogens-und-fand-seine-einzig-wahre-liebe-buch-zwei-kapitel-sechs.html ist keine gute Idee. ^_~ Bei regenbogen2-6.html sieht das wieder anders aus. Benutze keine Umlaute und kein ß in Dateinamen, ebenso verzichte auf Punkte, Kommata und andere Sonderzeichen. Ausnahmen sind - und _

→ Im Anschluss wieder einmal die rechte Maustaste drücken (sie ist eine gute Freundin beim Webseitenerstellen), dieses Mal auf dem neu erstellten Dokument. Das Kontextmenü (auch ein guter Freund) wird einige Möglichkeiten anbieten, von denen nur Öffnen mit dem Internet Explorer interessant ist. Fakt ist, mit dem IE lässt es sich am einfachsten programmieren. Ich code nur darüber und bin keine große Hilfe, wenn es um andere Browser geht.

Der IE poppt auf und ist blütenrein. Wieder unsere Freundin, die rechte Maustaste, bemühen, und zwar in der großen, leeren Fläche. Im Kontextmenü auswählen Quelltext anzeigen. Man kommt auch über die Menüleiste oben an den Quelltext - Ansicht - Quelltext. Aber einerseits ist es übers Kontextmenü bequemer, andererseits hilft der andere Weg nicht mehr weiter, wenn man mit Frames arbeitet (dazu später mehr). Jetzt sollte sich der Texteditor öffnen und ebenfalls gähnend leer sein. Hier beginnt dann das eigentliche Coden.

→ Im Editor tippst du jetzt ein:


<html>
  <head>
    <title>
    </title>
  </head>

<body>

</body>

</html>

Das, was zwischen den spitzen Klammern steht, nennt man einen Tag (hat nichts mit Tag wie in Tag und Nacht zu tun und wird englisch täg ausgesprochen). Man "öffnet" einen Tag, indem man ihn schreibt, also zum Beispiel <html> und "schließt" ihn wieder, indem man einen Schrägstrich einfügt: </html>

Jeder Tag, der geöffnet wird, muss auch wieder geschlossen werden. Das ist ganz, ganz wichtig, sonst ist der Code fehlerhaft, was in vielen Fällen dazu führt, dass die Webpage nicht richtig dargestellt wird oder im schlimmsten Fall den Browser zum Absturz bringt. Es gibt einige, wenige Ausnahmen, aber die werde ich später vorstellen, wenn sie wichtig werden. Gewöhne dich am besten auch gleich daran, den Quelltext so abgestuft wie im obigen Beispiel zu schreiben. Es erleichtert dir das Coden ungemein. Benutze Leerzeilen und rücke Zeilen ein. Es ist nur für dich und deine Übersicht; man sieht davon nichts im dargestellten Dokument.

<html> sagt dem Browser, dass ein HTML-Dokument geöffnet worden ist, so dass er weiß, wie er es lesen und darstellen muss.

<head> öffnet den Bereich, in dem man Codes einfügt, die nicht im eigentlichen Dokument stehen. Er gibt dem Browser ebenfalls Anweisungen. Für den Moment interessiert uns jedoch nur der im <head> angesiedelte <title>-Tag. Wie du siehst, wird er geöffnet und auch gleich wieder geschlossen. Schreibe etwas zwischen diese beiden Tags. Im Falle der Index-Datei ist es zumeist der Name der Homepage, für diese Übungsdatei kannst du alles schreiben, zum Beispiel ganz unkreativ Meine erste Homepage.

Jetzt das Dokument bitte einmal speichern - im Normalfall unter Datei - Speichern angesiedelt, dann kehre zu dem blütenweißen IE zurück. Dort auf Aktualisieren oder Neu laden klicken. Ganz oben, wo die Verzeichnisadresse steht, erscheint nun stattdessen Meine erste Homepage. Ebenso erscheint unten in der Fußzeile, wo die verschiedenen Fenster gezeigt werden, dieser Name. Aus den gleichen Gründen wie beim Dateinamen bitte auch hier aussagekräftige Titel verwenden.

Dann wird der <head>-Tag auch schon wieder geschlossen, und wir wenden uns dem interessantesten Teil des Dokumentes zu, dem <body>-Tag. Alles, was zwischen <body> und </body> steht, wird vom Browser dargestellt. <head> ist der Kopf, die kleine Zeile ganz oben, <body> ist der Körper, das große Teil unten.

Schreibe etwas zwischen <body> und </body>, speichere und gehe dann zum IE, um zu aktualisieren. Vor dem Speichern und dem Aktualisieren sieht man nichts, also nicht vergessen. ^_~

Ganz zum Schluss wird natürlich auch <html> von ganz oben mit </html> geschlossen, um dem Browser zu sagen, dass das HTML-Dokument an dieser Stelle beendet wird und nichts mehr folgt. Nicht vergessen!