HTML Bilder und Links

Diese Beschreibung betrifft (bisher) nur Listings auf geocaching.com.

Bilder

Um Bilder einzubinden, müssen diese irgendwo im www verfügbar sein. Am schlauesten ist es also, die benötigten Bilder auf geocaching.com hochzuladen. Man macht also erst die textliche Beschreibung des Caches fertig und lädt die benötigen Bilder dann hoch. Dies geht entweder mit der Schaltfläche upload images im Navigationskasten des Cachelistings. Oder man lädt das Bild unabhängig vom Listing in die Geocaching-Datenbank.

Der Nachteil dieser Methode ist, dass dabei die maximale Dateigröße der Bilder begrenzt ist und dass alle Bilder in das JPEG-Format gewandelt werden. Wenn man an die Dateigröße oder das Dateiformat spezielle Ansprüche stellt, so muss man das Bild auf einen anderen (eigenen) Webspace hochladen.

Hochladen

Das geht ganz einfach mit http://www.geocaching.com/my/upload.aspx. Sobald das Bild geladen ist, geht man auf die Schaltfläche Edit image und wenn sich das Edit-Fenster geöffnet hat, klickt man direkt auf das Bild. Dabei wird auf die Adresse (URL) des Bildes geschaltet. Diese kopiert man sich aus der Adressleiste des Browsers und speichert sie irgendwo ab (z.B. in der Zwischenablage).

Wenn man das Bild mit upload images im Listing hochgeladen hat, findet man die Adresse, indem man ebenfalls auf Edit image geht und dort die Adresse des Bildes kopiert. Oder man lässt sich das Cachelisting anzeigen und geht dort auf den Link zum Bild.

Die Adresse sieht etwa so aus:

http://img.geocaching.com/cache/9c141ed5-a29f-41f1-8d1f-d4d4735ece71.jpg

Für Bilder im Listing ist der Weg, das Bild ohne Bezug zum Listing hochzuladen, der elegantere, weil es nicht nochmal im Listing als Link erscheint.

(Ich kenne aber keine Möglichkeit, die Bilder, die ich hochgeladen habe, als Gallery anzeigen zu lassen. --UMS Team 20:46, 18. Nov 2006 (CET))

In das Listing einbinden

Normal

In die Cachebeschreibung werden Bilder mit

<img src="Adresse/URL" alt="Alternativtext">

eingebunden. Für Adresse setzt man jetzt die gespeicherte URL des Bildes ein. Die " aber stehen lassen. Fertig.

Mit Rahmen

Man kann einen Rahmen um das Bild zeichnen mit

<img src="Adresse" border="Dicke">

wobei Dicke als Zahl die Rahmenstärke in Pixeln angibt (border="1" ergibt einen 1px-dünnen Rahmen).

Position bestimmen

Bilder kann man im Listing positionieren. Das geht folgendermaßen:

<img src="Adresse" align="Ausrichtung">

wobei für Ausrichtung "top" = obenbündig mit Text davor oder danach, "middle" = mittig zu Text davor oder danach oder "bottom" = untenbündig mit Text davor oder danach eingesetzt werden kann.

Soll der Text um die Bilder herumfließen, wird

<img src="Adresse" align="Ausrichtung" hspace="zahl" vspace="zahl">

geschrieben, wobei Ausrichtung wie oben beschrieben angegeben wird. hspace=10 gibt einen horizontalen Abstand von 10px links oder rechts vom Bild an, entsprechend gibt vspace=10 gibt einen vertikalen Abstand von 10px oben oder unten vom Bild an. px = Pixel (Bildpunkte).

Bildgröße wählen

Man kann auch eine Bildgröße angeben. Der Browser verkleinert oder vergrößert dann das Bild entsprechend:

<img src="Adresse" alt="Alternativtext" width="Breite" height="Höhe">

Für Breite und Höhe eine Zahl wie z.B. 100 für Pixel angeben, oder einen Prozentwert wie z.B. 60% für Größe in Bezug auf Umgebung.

Die Größe der Bilder sollten aber schon vor dem Hochladen durch eine gute Bildbearbeitung auf das benötigte Format eingestellt werden. Vom Browser verkleinerte oder vergrößerte Bilder sehen schlecht aus. Und der Uploader von Geocaching.com macht sie auch nicht besser.

Hintergrundbilder

Das gewünschte Hintergrundbild wird, wie oben beschrieben, zunächst hochgeladen, oder es liegt schon irgendwo im Web, dann braucht man nur die richtige Adresse.

Die Bildadresse (URL) wird im Online-Formular von Geocaching.com in das Feld Background Image URL eingetragen. Fertig.

Links

Normal

Links auf andere Seite, zum Beispiel die Wikipedia, kann man mittels

 <a href="Linkadresse">Dies ist ein Link auf eine andere Seite</a>

erzeugen. Das Ergebnis sieht dann so aus:

Dies ist ein Link auf eine andere Seite

Neues Fenster

Möchte man erreichen, das der Link in einem neuen Fenster geöffnet wird, so muss das Attribut target="_blank" eingefügt werden:

 <a href="Linkadresse" target="_blank">Dies ist ein Link auf eine andere Seite in einem neuen Browserfenster</a>

Weiterführende Weblinks

• http://de.selfhtml.org - Die Referenz für alles, was mit HTML zu tun hat.
• Wikipedia: html
• Für Firefox-Benutzer gibt es hier die Erweiterung BBCode, die super einfach den richtigen Code direkt im Eingabefeld der online-Formulare erzeugt. Sehr zu empfehlen! Man kann BBCode auch nutzen, um sich Wikitext generieren zu lassen.