Kleines HTML-Tutorial

Oder: Wie verschönere ich Beschreibungsseiten von Caches, Travel Bugs und Geocoins?

Einleitung
Ganz einfach (!): Mit HTML.
„HTML“ steht für HyperText Markup Language.

HTML ist eine so genannte Auszeichnungssprache (Markup Language). Sie hat die Aufgabe, die logischen Bestandteile eines textorientierten Dokuments zu beschreiben. Als Auszeichnungssprache bietet HTML daher die Möglichkeit an, typische Elemente eines textorientierten Dokuments, wie Überschriften, Textabsätze, Listen, Tabellen oder Grafikreferenzen, als solche auszuzeichnen.
[Siehe HTML als Auszeichnungssprache]

Wer „Sprache“ liest, denkt vielleicht an Programmiersprachen, aber mit HTML schreibt man keine Programme. Man muss auch kein Computer-Experte sein, um HTML nutzen zu können; ganz im Gegenteil. Man braucht nur einige wenige Grundprinzipien dieser Sprache zu kennen. Man kann also direkt loslegen. Das Schöne an HTML ist, dass man nur so viel oder wenig wissen muss, wie man braucht. Alles andere der umfangreichen Möglichkeiten kann man nachschlagen in Stefan Münz‘ berühmten Kompendium SelfHTML, das so ziemlich alles zu dieser Sprache enthält. Es kann auch für die Offline-Nutzung auf den eigenen Computer heruntergeladen werden. (Oder man guckt sich einfach fertigen Quellcode von anderen an, kopiert die benötigten Teile und passt sie an für die eigenen Bedürfnisse. Eigentlich dürfte jeder Browser über eine Funktion „View > (page) source“ oder „Ansicht > Quelltext“ verfügen.)
Alternativ gibt es für Geocacher eine sehr kurze englischsprachige Erklärung der HTML-Basics.

Nun zu den angesprochenen Grundprinzipien:

HTML-Elemente werden durch so genannte Tags markiert. Fast alle HTML-Elemente werden durch ein einleitendes und ein abschließendes Tag markiert. Der Inhalt dazwischen ist der „Gültigkeitsbereich“ des entsprechenden Elements. Tags werden in spitzen Klammern notiert.
[Siehe Elemente und Tags in HTML]

Das sieht dann im Quelltext, den ein Webbrowser wie Opera oder Firefox dann übersetzt in ein für den Menschen angenehm zu betrachtendes Layout, z. B. so aus:

<html>
... Hier kommt der Inhalt der HTML-Seite ...
</html>

Der einleitende Schrägstrich ist immer Bestandteil eines abschließenden Tags.

HTML für Geocaching-Seiten verwenden
HTML ist natürlich kein Muss. Die Eingabe von reinem Text reicht durchaus, jedoch kann der Einsatz von HTML sehr praktisch sein (Bilder einbinden, Hyperlinks zu anderen Cacheseiten setzen, Text farblich hervorheben u. A.).
Im Folgenden will ich mich um typische Fragestellungen bei der Gestaltung von Beschreibungen von Caches und Trackables kümmern und die dafür relevanten HTML-Tags kurz vorstellen. Hier soll es wirklich nur um das Allerwichtigste gehen; für weitere Details wie zusätzliche Attribute für die einzelnen Tags folgt den Links zu SelfHTML.
(Hinweis: Da Eure Beschreibung in eine bestehende HTML-Seite eingefügt wird, werde ich hier nicht ausführlicher auf den Aufbau einer HTML-Seite mit <html>, <head> und <body> eingehen, sondern mich nur auf die für Euch interessantesten Elemente, die natürlich auch kombiniert werden können, konzentrieren. Für weitergehende Informationen verweise ich auf die ausgezeichneten Einführungen in SelfHTML. Weitergehende Möglichkeiten wie Style Sheets (CSS) oder JavaScript sollte man gar nicht erst zu verwenden versuchen; solche Elemente werden automatisch aus der Beschreibung entfernt.)
Hilfreich bei der Gestaltung von HTML-Seiten, selbst oder gerade wenn man von HTML wenig/keine Ahnung hat, können (WYSIWYG-)Editoren sein (WYSIWYG = „What you see is what you get“). Im grünen Forum wird der Nvu-Composer (Freeware) empfohlen (habe ich selber nicht getestet).

Wie kann ich Text formatieren?
– Fettdruck (Merkhilfe: b für „bold“): <b>fett</b>
– Kursivdruck (Merkhilfe: i für „italics“): <i>kursiv</i>
– unterstrichen (Merkhilfe: u für „underline“): <u>unterstrichen</u>
– Schriftfarbe: <font color="red">Rot</font>
(Farbnamen | Farbpalette)
– Schriftgröße:
<font size="3">normal groß</font> (1 winzig, 7 riesig)
<font size="+1">etwas größer als normal</font>
<font size="-1">etwas kleiner als normal</font>

Wie erzeugt man Tabellen?

<table border="1">

<tr>
  <td>Zelle 1</td>
  <td>Zelle 2</td>
</tr>

<tr>
  <td>Zelle 3</td>
  <td>Zelle 4</td>
</tr>

</table>

Die Tabelle sieht dann so aus:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Wie man sieht, spielt es keine Rolle, ob man im HTML-Code Leerzeilen oder Einrückungen verwendet, um ihn für Menschen angenehmer lesbar zu machen. Den Browser interessiert das nicht.
In unserem Beispiel erzeugen wir eine Tabelle mit 2 x 2 Zellen, also jeweils 2 Zeilen mit 2 Spalten. Die ungeraden Zellen (1, 3) liegen in der linken, die geraden Zellen (2, 4) in der rechten Spalte. (Merkhilfen: tr für „table row“, ‚Tabellenzeile‘, und td für „table data“, ‚Tabellendaten‘.)
Mit der Angabe border="1" erzeugen wir einen dünnen Rand um alle Zellen. Wollen wir keinen Rand, zum Beispiel, wenn die Tabelle nur dazu dient, Grafiken und Text nebeneinander zu platzieren, setzen wir border="0" oder lassen die Angabe ganz weg. Mit einem Wert größer als 1 erzeugen wir einen dickeren Rand.
Weitere Spalten kann man erzeugen, indem man weitere Zellen pro Zeile hinzufügt (alle Zeilen sollten dieselbe Anzahl enthalten!); weitere Zeilen, indem man neue tr-Bereiche hinzufügt.
Tabellen mit nur einer Zelle können zum Beispiel auch verwendet werden, um einen Textbereich mit anderem Hintergrund zu erzeugen. Dazu schreibt man in das table-Tag das Attribut bgcolor mit einer Farbangabe, z. B. <table bgcolor="#EEEEEE">. Natürlich kann man auch einzelne Zellen mit verschiedenen Hintergründen versehen: <td bgcolor="#EEEEEE">
Auch Hintergrundsgrafiken sind möglich. Tabellen können am linken oder rechten Rand oder zentriert ausgerichtet werden; für die gesamte Tabelle, aber auch für einzelne Spalten oder Zeilen, können Breiten- und Höhenangaben gemacht werden.

Wie kann ich Bilder einbinden?
<img src="http://home.eplus-online.de/real/gc/de.gif">
(Merkhilfe: img für „image“, src für „source“.)
Beachte: Es gibt kein schließendes img-Tag.
Wie man bei GC Bilder in die eigene Cachebeschreibung einbindet, die man selber zum GC-Server hochgeladen hat, habe ich etwas ausführlicher im Geoclub erklärt.

Wie ändere ich die Hintergrundsfarbe?
Eine FAQ im grünen Forum.

Wie setze ich Hyperlinks?
– Sprungmarken:
Nützlich, wenn man z. B. zu Beginn seiner deutschsprachigen Beschreibung einen Link auf die englischsprachige weiter unten auf der Seite setzen möchte. Das könnte z. B. so aussehen:

<a name="DE"></a>
<img src="http://home.eplus-online.de/real/gc/de.gif">
| English version <a href="#EN">below</a>

...

<a name="EN"></a>
<img src="http://home.eplus-online.de/real/gc/en.gif">
| Deutsche Version <a href="#DE">oben</a>

Für Hyperlinks gibt es das a-Element. (Merkhilfe: a für „anchor“, ‚Anker‘.) Mit dem Attribut name wird einem Anker ein Name zugewiesen, z. B. „DE“. Auf diesen Anker innerhalb einer Seite kann man nun mit <a href="#DE">Deutsch</a> verweisen. (Merkhilfe: href für „hyper reference“, ‚Hyper(text)-Referenz‘). Das Verweisziel beginnt mit einem Gatterzeichen, gefolgt vom Ankernamen. Im Beispiel oben gibt es zwei Anker, so dass man zwischen den beiden Sprachen hin- und herspringen kann.

– Verlinkter Text
<a href="http://www.geocaching.com">GC</a>
GC

– Verlinkte Grafik
<a href="http://www.geocaching.com">
<img src="http://home.eplus-online.de/real/.../gc.jpg">
</a>

[Anklickbare Grafik]

Anstelle von Text kann auch eine Grafikreferenz verlinkt werden. Die Grafik wird dann anklickbar.

Weitere nützliche Tags
<br> (Merkhilfe: br für „break“, ‚Umbruch‘)
Erzwingt Zeilenumbrüche; mehfach hintereinander verwendet kann man damit Leerzeilen erzeugen.

<hr> (Merkhilfe: hr für „horizontal rule“, ‚Querlinie‘)
Fügt eine Trennlinie ein, in mehrsprachigen Beschreibungen sinnvoll.

– Listen:

Zum Cachen mitnehmen:
<ul>
  <li>Stift,</li>
  <li>GPS-Gerät und Akkus, ...</li>
</ul>

Die Liste sieht dann so aus:

Zum Cachen mitnehmen:

  • Stift,
  • GPS-Gerät und Akkus, …

Mit ul wird eine Aufzählungsliste erzeugt. (Merkhilfe: ul für „unordered list“.) Das Tag li erstellt einen Punkt der Liste. (Merkhilfe: li für „list item“.)
Analog zu den Aufzählungslisten generiert man eine nummerierte Liste mit ol statt ul. (Merkhilfe: ol für „ordered list“.)

– <pre></pre>
Nehmen wir an, Ihr habt eine ordentliche Beschreibung in einfachem Textformat verfasst. Nun wollt Ihr einen Link einfügen, aktiviert deshalb das HTML-Häkchen, und Euer Text ist ein einziger durchlaufender unübersichtlicher Absatz. Hier kommt das Tag pre ins Spiel, mit dem man einen Textabschnitt mit präformatiertem Text nutzen kann. Es erzeugt dicktengleiche Schrift.

– <center></center>
Einen ganzen Bereich (der Text, Grafiken und Tabellen enthalten kann) zentrieren.

+++ +++ +++ +++ +++ +++ +++ +++ +++

Wem diese Zusammenstellung nicht reicht, sollte sich das Stichwort- und/oder Syntaxverzeichnis von SelfHTML anschauen.
HTML kann man sowohl bei GC als auch bei NC und OC benutzen.

Wichtig: Nur weil man mit HTML tolle Sachen machen kann, heißt das nicht, dass man HTML-Elemente im Überfluss einsetzen sollte. Meistens gilt: weniger ist mehr. Seiten sollten in erster Linie gut lesbar und ordentlich strukturiert sein und nicht die Benutzer durch übertriebene Effekthascherei (etwa Lauftext) vergraulen!
Vgl. auch die Ähnlichkeiten zwischen HTML und dem bereits beschriebenen BBCode.
Beispiele für mit HTML gestaltete Beschreibungen von (meinen) Caches und Trackables

„Ist der ‚Internetauftritt‘ eines caches wichtig?“ fragt sich familysearch im grünen Forum. Ich denke ja! Gut gemachte Cachebeschreibungen sind für mich ein deutliches Plus, ebenso wie z. B. ein schönes Logbuch. Hin und wieder lobe (oder kritisiere) ich auch gute (schlechte) Beschreibungen; freue mich auch besonders, wenn in Logs erwähnt wird, dass den Leuten meine Beschreibung gefallen hat.
Wie schon mal geschrieben: Ich habe zwar auch schon tolle Caches mit schlampigen Beschreibungen erlebt. Aber da nicht jeder Geocacher so wie ich alle Caches in Reichweite anzugehen versucht, sondern viele sich die guten Geocaches heraussuchen, gehe ich davon aus, dass eine gute Beschreibung Geocacher eher zum Suchen eines Caches motiviert, während ein Cache mit einer nur schlecht lesbaren Beschreibung womöglich aussortiert wird.

4 Antworten to “Kleines HTML-Tutorial”

  1. cacheboy Says:

    THX für das Tutorial!!!

    Ist alles dabei was man für eine schöne Cachepage braucht!

    lg

  2. West468 Says:

    Für Opera-Fans (zu denen ich mich auch zähle) ist diese Empfehlung von solarthermienator im Geoclub interessant:
    html Cache Beschreibungen mit Opera Widget erstellen

  3. Teddygo Says:

    Danke!

    Ich habe gerade mit Hilfe diesem HTML-Tutorial eine schöne
    Cache-Beschreibung gezaubert!!!

    Vielen Dank!

    Teddy

  4. Gordon Heinz Says:

    Möchte gerne ein Bild in die Cachebeschreibung einfügen dass jedoch EXIF Dateien enthalten soll da diese die Koordinaten erst preisgeben! Wie mache ich das??? Bitte um rasche Hilfe LG Heinz

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s


%d Bloggern gefällt das: