HTML-Kurs Grundlagen zum Erstellen von Web-Seiten Weg zur eigenen Homepage HTML Webseiten

Eine Webseite, erstellt mit dem Word-Programm.

Erstellen Sie zunächst einen neuen Ordner mit dem Namen w1 (auf Ihrem Computer, z.B. in Ihren "Eigene Dateien"). Dann starten Sie das Word-Programm. Die neue leere Word-Seite versehen Sie mit einer einfarbigen Hintergrundfarbe. Dazu klicken Sie auf Format und es öffnet sich das Menü

Dort wählen Sie Hintergrund... und Weitere Farben...
Aus dem sich jetzt geöffneten Fenster haben Sie die Auswahl aus beliebigen Farben (beachten Sie auch den zweiten Fensterbereich "Anpassen"). Wählen Sie sich eine davon und klicken Sie auf OK.

Dann wählen Sie eine Schriftart (z.B. Verdana) und Größe sowie zentrierte Ausrichtung und schreiben ein Wort, z.B. Bildmotiv 1 . Dann wechseln Sie zur nächsten Zeile und fügen dort bild01.jpg ein. Dazu klicken Sie auf Einfügen und es öffnet sich das Menü

Dort wählen Sie Grafik und Aus Datei...
und suchen die von Ihnen zuvor gespeicherte Bild-Datei bild01.jpg
und speichern diese.

Nun verfügt Ihre Word-Datei über die Grund-Elemente einer Web-Seite, nämlich Hintergrund, Text und Bild. Dann wählen Sie aus dem Datei-Menü "Speichern unter..."

Wählen Sie den Dateityp HTML Document , geben den Dateinamen page1.htm ein und wählen den Ordner w1 zum Abspeichern. Es erscheint ein Hinweis über Formatierungen.

Auf die Frage zum Speichern wählen Sie Ja.
Es erscheint ein weiterer Hinweis.

Auf die Frage nach dem Zugriff antworten Sie Nein .

Dann schließen Sie das Word-Programm. Öffnen Sie den Ordner w1 und Sie finden dort eine Bild-Datei und Ihre erste Web-Seite. Durch einen Doppelklick öffnen Sie jetzt die page1.htm mit Ihrem Browser.

Die Seite kann nun etwas anders aussehen, als Sie es bei der ursprünglichen Seite im Word-Programm gesehen haben. Diese geänderten Formatierungen zeigen sich in
der Schriftart (Ein Browser kann nicht so viele Schriftarten anzeigen wie das Word-Programm und selbst wenn Sie Ihre Web-Seite mit einer bestimmten Schrift im Internet stehen haben, kann diese bei einem anderen Browser durch eine ähnliche Schrift ersetzt werden),
der Schriftgröße (Ein Browser hat als Standard nur 7 verschiedene Schriftgrößen)
der Bild-Größe.

Dann wählen Sie aus dem Ansicht-Menü "Quelltext anzeigen"

Es öffnet sich ein Text-Editor, der den HTML-Text für diese Seite anzeigt.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>Bildmotiv 1</TITLE>
</HEAD>

<BODY BGCOLOR="#c8a2b5">

Bildmotiv 1
<IMG SRC="Image14.jpg" WIDTH=103 HEIGHT=168></BODY>
</HTML>

Dies sieht nun zunächst verwirrend aus, läßt sich aber recht leicht erläutern. Einfach ausgedrückt ist eine Web-Seite nur eine Text-Datei, die dem Browser Anweisungen gibt. Diese Anweisungen werden durch die Klammern-Objekte <...> erteilt, die man Tags nennt. In der Regel gibt es ein Anfangs-Tag <...> und ein End-Tag </...> und alles was dazwischen steht ist von der Anweisung dieses Tags betroffen.

Die Tatsache, daß es sich um eine Web-Seite handelt ist eine Anweisung, die durch die Tags <html> und </html> erteilt wird (unter Windows ist es bei den Tags unwichtig ob die Buchstaben groß oder klein geschrieben werden). Deshalb muß am Anfang der Textdatei <html> und am Ende der Textdatei </html> stehen.

Die Tags <head> und </head> schließen einen Bereich ein, der im Browser-Fenster nicht zu sehen ist. Hier sieht man, daß die Seite mit dem Word-Programm erzeugt wurde und daß Schriftzeichen der westeuropäischen/amerikanischen Sprachen verwendet werden (nicht etwa kyrillische Schriftzeichen oder ....). Wichtig ist die Anweisung <title> und </title>, denn was durch diese Tags eingeschlossen wird, ist in der Titelzeile des Browsers zu sehen oder wird in der Liste der bereits besuchten Web-Seiten angezeigt. Auch Suchmaschinen verwenden die hier geschriebenen Worte als Such-Informationen.

Die Tags <body> und </body> schließen den Bereich ein, der im Browser-Fenster sichtbar ist. Hier wird das Tag <body> durch die Angabe der verwendeten Hintergrundfarbe erweitert zu
<body bgcolor="#c8a2b5">, was bei Ihnen sicher andere Werte enthält. Schreiben Sie jetzt einmal im Text-Editor anstelle Ihrer Werte "#......" den Wert "#c8a2b5" auf, wählen Sie im Text-Editor aus dem Datei-Menü "Speichern". Dann wählen Sie im Browser "Aktualisieren"

und schon hat sich die Web-Seite geändert. Verändern Sie jetzt die Fenstergröße von Text-Editor (der vielleicht in die Taskleiste gerutscht ist) und dem Browser, so daß beide nebeneinander sitzen

Die Tags und bestimmen Schrift-Eigenschaften, unter FACE wird die Schriftart festgelegt und unter SIZE die Schriftgröße (nur von 1 bis 7 möglich). Ändern Sie nun die Schriftart zu "Chevara" und die Größe auf 6. Wählen Sie im Text-Editor aus dem Datei-Menü "Speichern". Dann wählen Sie im Browser "Aktualisieren" und Sie können die geänderten Anweisungen für den Browser sehen.

Die Tags und schließen einen Absatz in sich ein, wobei hier durch die Vorschrift der zentrierten Darstellung erweitert wird zu
 .Ersetzen Sie den Text Bildmotiv 1 durch den Text Strickmodelle in edler Optik . Das Tag gibt dem Browser die Anweisung eines Zeilenumbruches und benötigt kein Schluß-Tag. Wählen Sie im Text-Editor aus dem Datei-Menü "Speichern". Dann wählen Sie im Browser "Aktualisieren" und Sie können die geänderten Anweisungen für den Browser sehen.

Das Tag <img src> gibt dem Browser die Anweisung ein Bild einzufügen. Es benötigt kein Schluß-Tag, aber es sind die Werte der Höhe und Breite des Bildes in Pixel angegeben. Ändern Sie nun WIDTH=216 und HEIGHT=350 , denn dies sind die Original-Pixelwerte des Bildes. Wählen Sie im Text-Editor aus dem Datei-Menü "Speichern". Dann wählen Sie im Browser "Aktualisieren" und Sie können die geänderten Anweisungen für den Browser sehen.

Nun ändern Sie im Text-Editor die Werte nochmals zu WIDTH=187 und HEIGHT=350 und ändern Sie img src="bild02.jpg"
Aber jetzt wählen Sie im Text-Editor aus dem Datei-Menü "Speichern unter...".

Geben Sie den Dateinamen page2.htm ein und speichern Sie im Ordner w1. Schließen Sie den Editor und den Browser und Sie finden im Ordner w1 Ihre zweite erstellte Web-Seite. Damit diese richtig angezeigt wird kopieren Sie bitte noch das bild02.jpg in den Ordner w1. Danach können Sie durch einen Doppelklick page2.htm öffnen.

Alles ganz einfach, oder?

Sie haben zum Erstellen der zweiten Web-Seite allein den Text-Editor verwendet. Es gibt sogenannte textbasierte HTML-Editor-Programme, die über Menübefehle entsprechende Tags einfügen und die über den Quelltext die Web-Seiten erzeugen.
Die Vorgehensweise zum Erstellen der ersten Web-Seite hat allein das Word-Programm benutzt. Auf eine solche Art arbeiten WYSIWYG-Editoren (Abkürzung für What You See Is What You Get).