Übersicht

weiter

 

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">
<FONT FACE="Verdana" SIZE=5>
<P ALIGN="CENTER">Bildmotiv 1</P>
<P ALIGN="CENTER"><IMG SRC="Image14.jpg" WIDTH=103 HEIGHT=168></P></FONT></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 <font> und </font> 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 <p> und </p> schließen einen Absatz in sich ein, wobei hier <p> durch die Vorschrift der zentrierten Darstellung erweitert wird zu 
<p align="center"> .Ersetzen Sie den Text  Bildmotiv 1  durch den Text  Strickmodelle<br>in<br>edler<br>Optik  . Das Tag <br> 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  W
hat You See Is What You Get).

 

Wenn Sie Ihre Seiten ins Internet stellen wollen, sollten Sie noch beachten, daß Unix-Rechner nur mit Tags, Links und Dateinamen in Kleinbuchstaben zurechtkommen. Darüberhinaus sollten die Dateinamen nur aus maximal acht Buchstaben (und keine Umlaute oder Leerzeichen oder Sonderzeichen) bestehen mit der anschließenden Endung .htm oder .gif oder .jpg oder...:
Es gibt auch ein kleines Programm im Internet, das für Sie Dateinamen und Quelltext auf einheitliche Kleinschreibung hin korrigiert (http://www.transsonic.com/).

Wollen Sie noch ein wenig mehr wissen?
Dann können Sie auf der nächsten Seite weiterlesen.

Doch zuvor sollten Sie nochmal ein Bild auf Ihren Computer kopieren. Dazu klicken Sie mit der rechten Maustaste auf das folgende Bild  bild03

bild03

Wählen Sie  "Bild speichern unter..." und speichern Sie es mit dem Namen bild03.jpg 

Übersicht

weiter

frage@garn-bachmann.de