FreeWeb HTML-Seiten und Links

Folgeseiten > Dateinamen:
Manche Server unterscheiden nicht zwischen großen und kleinen Buchstaben. Außerdem kennen sie meist keine Umlaute. Das führt zu kuriosen Missverständnissen, die gewünschten Seiten werden nicht gefunden.

Verwenden sie daher generell nur Kleinbuchstaben, keinesfalls Umlaute, scharfes ß oder Sonderzeichen.
Sprechende Namen (z.B. reiten.htm, schach.htm...) sind außerdem besser als systematische (z.B. hobby1.htm, hobby2.htm...).

Folgeseiten > Titel:
Jede Webseite hat zusätzlich zum Dateinamen ihren eigenen Titel - das wird von AnfängerInnen oft übersehen.
Vergessen sie nicht, im HTML-Editor den Titel einzutragen, sonst lautet er immer "Neue Seite" oder ähnlich.

Sie finden den Titel im Browser-Fenster ganz links oben.
Außerdem wird der Titel beim Anlegen von Lesezeichen (BookMarks, Favoriten) vorgeschlagen.
Auch für die Suche im Internet spielt der Titel eine wichtige Rolle.

Folgeseiten > Links:
Mindestens 2 Links (Verweise, Hyperlinks) müssen sie bereits bei Erzeugung der ersten Folgeseite anlegen: Von ihrer Homepage zur Folgeseite (z.B. <hobby.htm>) und von dort zurück zur Homepage.

Wenn sie mit der Maus auf einen Link treffen, so verwandelt sich der Zeiger in eine Hand und sie sehen in der Statuszeile (meist links unten) das Ziel des Links.

Jeder HTML-Editor führt diese Funktion anders aus, Informationen dazu entnehmen sie daher der eingebauten Hilfe oder aus der Homepage der Hersteller.
Normalerweise markieren sie zuerst das Wort oder Bild, welches den Link auslösen soll. Dann suchen sie in Symbolleisten und Menüs nach Befehlen, mit denen sie einen Link dazufügen können, und geben ihn als Text (z.B. http:://www.meinlink.com ) ein.

Relative Adressierung

Absolute Adressierung

Mail

Anker

Javascript

Sehen sie sich einmal den Quellentext (source code) einer Webseite an: Vor und nach dem Wort oder Bild, das den Link enthält, befinden sich die a-tags mit der Adresse:
<a href="http://www.oocities.org/pstrainer">PS-Trainer</a>

Ziel: Das "Verweisziel" (target) eines Links ist fast schon ein Profi-Thema: Damit können sie z.B. bestimmen, ob die neue Seite im gleichen Fenster (_self) oder in einem neuen Fenster (_blank) geladen wird.
Beispiele: Homepage im gleichen Fenster, Homepage in einem neuen Fenster.

Folgeseiten > Links > relative Adressierung:
Links zu ihren eigenen Seiten werden "relativ" angelegt, d.h. ein Browser sucht das Ziel ausgehend von der gerade geöffneten Seite.

Beispiele (Muster rechts): Ausgehend von hobby.htm wird hobbyraum.jpg im gleichen Ordner gesucht, reiten/reiten.htm im Unter-Ordner reiten und ../index.htm im übergeordneten Ordner.
Wenn sie ihre HTM-Dateien auf den WebServer ihres Providers kopieren, dann funktionieren die Links im Internet nur dann, wenn Namen und Anordnung der Dateien und Ordner genau gleich sind.

Beispiel: Dieser Link führt zum Beginn dieses Mini-Lehrgangs: freeweb0.htm. Der Link enthält nur den Dateinamen der Seite und sucht sie daher im gleichen Ordner.

So werden diese Seiten von hobby.htm ausgehend adressiert:

../beruf/beruf.htm

reiten/reiten.htm

schach/schach.htm
hobby.htm

hobbyraum.jpg
../index.htm

Folgeseiten > Links > Absolute Adressierung:
Solche Links führen auf beliebige andere Seiten im Internet.
Sie sind von ihrem eigenen Web unabhängig und funktionieren am eigenen PC genauso gut oder schlecht wie im Internet.
Beispiel: Dieser Link auf die Suchmaschine http://www.metager.de

"Tote Links" funktionieren nicht und geben Fehler-Meldungen. Wiederholen sie den Versuch am nächsten Tag - manche Server sind sehr beschäftigt, haben später wieder Zeit für sie.

Folgeseiten > Links > Mail:
Ein Mail-Link gehört zumindest auf ihre Homepage. Beim Anklicken wird ein Mail an die programmierte Adresse erzeugt - das ist guter Internet-Stil, damit ihre BesucherInnen mit ihnen Kontakt aufnehmen können.

Diese Links sehen so aus: mailto:name@provider.com. und können auch mit einem Symbol verknüpft werden, z.B. mit einem Mail-Symbol.

Folgeseiten > Links > Anker:
In längeren Web-Seiten wollen ihre BesucherInnen gerne rasch zum gewünschten Absatz der gleichen Seite springen. Dazu benötigen sie Anker, das sind Punkte innerhalb einer Seite, zu denen Links führen können.
Das Zeichen <#> bezeichnet einen Anker im HTML-Code.

Beispiel: Dieser Link führt zu einem Anker namens top am Beginn der Seite. : #top.
Wenn sie wieder hierher zurück wollen, klicken sie zuerst Links, dann Anker: Beides sind Links zu Ankern auf dieser Seite.

Folgeseiten > Links > Javascript:
Mit JavaScript können sie viel programmieren. Beliebt sind z.B. Links, die

zurück oder vor

führen.

Besser sind Links mit Angabe des Ziels, z.B. führt

zurück nicht automatisch zu ihrer Homepage , es kommt eben darauf an, von wo ein/e BesucherIn gekommen ist.

Folgeseiten > Bilder:

Bilder machen trockene Seiten lebendig. dazu müssen sie diese zunächst einmal beschaffen bzw. erzeugen, manchmal bearbeiten, Bildformate umwandeln, und die Bilder in ihre Seiten einbinden.

Bild-Quellen

Bild-Bearbeitung

Grafik-Dateiformate

Format JPEG

Format GIF

Verwendung auf Webseiten

Folgeseiten > Bilder > Quellen:
Bilder bekommen sie von Scannern, Digital-Kameras, von Bildschirmfotos (screenshots) oder aus dem Internet.

Internet: Klicken sie mit der rechten Maustaste auf das gewünschte Bild, wählen sie <Bild speichern, save image as...> und speichern sie die Datei auf ihrer Festplatte - leider nicht in der Geldbörse. Wenn ihnen ein geiziger Anbieter die Benutzung der rechten Maustaste verweigert (kommt vor !), dann können sie immer noch ein Bildschirmfoto von der Seite machen, das Bild ausschneiden und weiter verwenden.

Screenshot:
Mit Tasten Strg-Druck kopieren sie den ganzen Bildschirm in die Zwischenablage Setzen sie das Bild in einem Grafik-Programm zur Bearbeitung ein.
Variante: Taste "Alt" statt "Strg" liefert nur das vorderste Fenster.

Folgeseiten > Bilder > Bildbearbeitung:
Oft genug müssen sie Bilder bearbeiten: zuschneiden, retuschieren, Pfeile einfügen usw.
Dafür verwenden sie Software zur Bildbearbeitung.

Solche Programme finden sie in vollkommen ausreichender Qualität bei Anbietern von Freeware und Shareware.

Folgeseiten > Bilder > Grafik-Formate:
Für das Internet kommen praktisch nur 2 standardisierte Formate in Frage: GIF und JPEG.

Die kurze Faustregel dazu:
Für Fotos (Portraits, Landschaften, Gebäude...Bilder mit vielen Farben, Abstufungen, Farbtönen) verwenden sie Format JPEG, für Bürografik (Diagramme, Pfeile, Symbole, Logos...Bilder mit wenigen Farben, keinen Abstufungen) das Format GIF.

Die Kinderfaust-Regel:
Viele Farben -> JPEG. Wenige Farben -> GIF

Verwenden sie andere Formate nur mit Vorsicht: BMP z.B. ist nicht komprimiert und braucht viel zu viel Platz.

Folgeseiten > Bilder > Grafik-Formate:
Um ein Bild im Format JPG zu speichern, müssen sie das Bild im Modus RGB bearbeiten (Darstellung von Farben mit ihrem jeweiligen Anteil an Rot, Grün und Blau). Beim Speichern können sie das Ausmaß der Kompression einstellen: Für detailreiche Bilder (Klassenfoto, Menschenmengen, Blumenwiese...) verwenden sie geringe Kompression, dafür größere Dateigröße, für flächige Bilder (Portraits...) verwenden sie größere Kompression mit geringerer Dateigröße. Testen sie durch Ansicht der fertigen Seite im Browser, ob der gewählte Kompressionsgrad richtig war.

Folgeseiten > Bilder > Grafik-Formate:
Bilder im Format GIF werden mit indizierten Farben bearbeitet (kleine Anzahl ausgewählter Reinfarben, keine Übergänge). Sie haben meist die Auswahl, welche ausgewählten Farben dazu herangezogen werden sollen: wählen sie im Zweifel die Option <web-colors> oder <web-safe colors>.
Dieses Format bietet auch die Möglichkeit, die Farbe "durchsichtig" darzustellen. Sie haben je nach Programm die Möglichkeit, bereits "durchsichtig" zu malen oder eine der vorhandenen Farben in "durchsichtig" umzuwandeln. Große Grafiken benötigen mehr Ladezeit. Sie können das überbrücken, wenn sie beim Speichern die Option <interlaced> wählen.

Folgeseiten > Bilder > Bilder in Webseiten:
Zur Verwendung kopieren sie das fertige Bild in ihren Web-Ordner. Das Einfügen erfolgt unterschiedlich, je nach verwendetem HTML-Editor. Gute Editoren speichern nicht nur das Bild selbst, sondern auch die Größe (die Seite wird dann gleich in der richtigen Größe angelegt und "springt" nicht beim Laden) und einen Alternativ-Text (den sehen BesucherInnen, falls das Bild nicht geladen werden kann, oder wenn die Ladezeit sehr lang ist).

Beim upload dürfen sie auf die verwendeten Bilder nicht vergessen: auch Bilder müssen auf den Server ihres FreeWeb Providers kopiert werden, und zwar an genau die gleiche Stelle relativ zu ihrer Webseite wie im lokalen Webordner.

Aktuelle Daten dieser Seite	Letzte Änderung: