Meine Internetseite – Tipps und Anleitungen

Welches Programm benutzen

Auf jeden Fall braucht man einen Editor, d.h. ein Programm zum Schreiben und Verändern eines HTML-Dokuments

Word als Editor

Man entwirft die Seite als Word-Dokument und wählt gleich am Anfang "Web-Seitenlayout" (unten links). Hat man seinen Entwurf  fertig, speichert man als HTML-Dokument ab:
Datei > Speichern unter > Dateityp Webseite gefiltert > Dateiname index
Es gibt auch "Webseite in einer Datei" und "Webseite", am besten wählt man aber Webseite gefiltert

Die von Word abgespeicherte Datei heißt dann index.htm. Außerdem legt Word einen Ordner mit dem Namen index-Dateien an, wo Zusatzinformationen – hierzu gehören auch Bild-Dateien – abgespeichert werden.

NVU als Editor

Das ist der Editor, mit dem wir im Unterricht gearbeitet haben, und der im Schulnetz in Form des Ordners U:\7b\NVUportable steht. Diesen Ordner – und nicht die Verknüpfung, mit der wir das Programm gestartet haben – musst du dir auf deinen USB-Stick kopieren. Der NVU bietet die verschiedenen Ansichten, ist aber leider auf Englisch

KompoZer als Editor

Der KompoZer ist eine verbesserte Version des NVU – und es gibt eine deutsche Version, die allerdings aus dem Internet unter dem folgenden Link heruntergeladen werden muss: Deutsche Version des KompoZer downloaden Man muss die angebotene Zip-Datei speichern und dann entpacken. In dem entpackten Ordner kompozer-0.8b1.de.win32\KompoZer-0.8b1 (oder so ähnlich) befindet sich dann das Programm Kompozer.exe

Wie bekomme ich ...

... die verschiedenen Objekte, die meine Internetseite enthalten soll ?

Die Überschriften

Ist doch einfach: Fettschrift und Schriftgröße hochsetzen genügt !? – allerdings nur für geringe Ansprüche. Für eine echte Überschrift muss man geeignetes Format aussuchen. In Word mit dem Fenstern links neben der Schriftart. In den anderen Programmen an ähnlicher Stelle.

Die Bilder

Bilder geeigneter Größe (ca. 300 x 200 pixel) z.B. jpg-Bilder aus einer Google-Suche in deinem Ordner bilder unter den Namen hobby01.jpg und hobby02.jpg abspeichern. Das Einfügen der Bilder in das Dokument funktioniert allerdings unterschiedlich mit NVU oder KompoZer und mit Word.

Smileys

Im Internet sind natürlich jede Menge Smileys verfügbar. Diese sind meist nichts anderes als kleine Bilddateien, meistens mit der Endung .gif, seltener mit .jpg. Diese kannst du in deinem Ordner bilder abspeichern, z.B. als smiley01.gif, smiley02.gif.

Listen mit Aufzählungszeichen

Diese lassen sich problemlos mit allen Editoren erzeugen, egal ob NVU, Kompozer oder Word

Hyperlinks

Im Editorprogramm auf das Link-Symbol gehen, die Zieladresse eingeben, z.B. http://rgusp.de, und den Text unter dem der Link dann angezeigt werden soll. Der Link auf die Seite von "Xaver Meier" musste als Zieladresse ../MeierX/index.html angegeben werden. => Erklärung hierzu

 

 

 Hier noch der Link auf die Seite 7b/LinkU/index.html

Da klappt was nicht

-   der NVU ist nicht auf meinem USB-Stick: das liegt wahrscheinlich daran, dass du nicht den Programmordner NVUportable von aus dem Ordner 7b kopiert hast, sondern die Programmverknüpfung, die aber auf ein Zieladresse im Schulnetz geht, zu Hause also sozusagen ins Leere geht. Empfehlung: KompoZer downloaden

-   ein Bildobjekt wird nicht angezeigt: die Bilder sind mit einer Quelle verknüpft, die in Form einer Adressangabe erreicht wird. Wenn in der Adressangabe ein Fehler ist, und hier genügt schon ein kleiner Tippfehler, kann die Quelle nicht gefunden werden.

-   Ein Link geht "ins Leere", d.h. beim Anklicken tut sich nichts, oder es kommt eine Fehlermeldung, dann hat das ähnliche Ursachen wie bei nicht angezeigten Bildern: in der Formulierung der Zieladresse ist ein Fehler. Beispiel: Lieschen Müller aus der 7b muss, damit der Link auf ihre Seite funktioniert, den Ordner wo sich ihre Dateien befinden MuellerL nennen. ,Lieschen Müller, Müller, Lieschen, Müller L, Müller L, MüllerL, muellerL, usw... sind alles Ordnernamen, die dazu führen, dass das Adressziel nicht gefunden wird. Genauso muss der Hyperlink exakt auf das Ziel verweisen. Auch geringfügige Abweichungen lassen den Link ins Leere gehen.

Zusatzinformationen zum Thema HTML

Blau sind immer die HTML-Befehle, die Tags dargestellt

<h1>Webseite von Ulrich Link</h1>

h1 Befehl für eine Hauptüberschrift

<p>Mein Name ist Ulrich, meine beiden Lieblingshobbys sind: </p>

p Tag für einen Absatz

<img style="width: 90px; height: 121px;" src="bilder/hobby01.jpg">

img Befehl zum Einfügen eines Bilds; src gibt an, wo das Bild zu finden ist

<a href="http://www.rgusp.de">Hier geht's zum Schülerportal des Ringeisen-Gymnaysiums</a>

a der wichtigste Tag, der Sprungbefehl. href bedeutet, dass das Sprungziel eine Hyperlinkadresse ist, hier die Adresse des Schülerportals. Der angezeigte Text steht innerhalb der Befehlsstruktur

<a href="../MeierX/index.html">Besuchen Sie doch auch die Seite von Xaver Meier</a>

Die Sprungadresse ist hier eine sogenannte relative Adressangabe, siehe bei Hyperlinks, Erklärung hierzu