Bilder

Bilder (engl. images) können über das img-Tag eingebunden werden. Dies ist eines der wenigen HTML-Tags, die allein stehen und kein schliessendes Tag erfordern (s.u.). Mit dem src-Attribut gibt man den Namen der Bilddatei an. Dabei ist darauf zu achten, dass diese entweder im gleichen Verzeichnis wie die HTML-Datei steht oder ein korrekter relativer Pfad angegeben wird.

<img src="dateiname.jpg" 
          width="Breite in Pixeln"  height="Höhe in Pixeln"
          alt="alternativer Text">

Bevor man ein Bild auf einer Web-Seite einbindet, sollte man sich Gedanken über die erforderliche Auflösung machen. Leitsatz: nie größer als notwendig!

Dies hat zwei Gründe. Einerseits ist eine Auflösung von mehr als ca. einem Megapixel auf dem Bildschirm kaum sinnvoll. Beispiel: eine Bildgröße von 800x600 Pixel resultiert in einer Auflösung von ca. 0,5 Megapixel. Eine den Erfordernissen angepasste Auflösung optimiert die erforderlichen Ladezeiten über das Netz und eure Besucher müssen weniger lange warten.

Andererseits erschwert eine geringere Auflösung den Missbrauch von Bildern, gerade wenn Personen(gruppen) abgebildet sind. Stellt euch vor, jemand schneidet aus einem hochauflösenden Photo euer Bild heraus und verwendet dieses als Profilphoto guter Qualität für einen Fake-Account, z.B. bei Facebook...

Verweise

Verweise (engl. links) sind ein zentraler Aspekt von HTML und waren eine Haupt­motivation für die Entwicklung dieser Sprache. Mit Hilfe von Verweisen kann man unterschiedliche Dokumente so miteinander verknüpfen, dass man mit einem Mausklick von einem Dokument zu einem anderen wechseln kann.

Ein Verweis besteht aus einem öffnenden und einem schliessenden a-Tag (engl. anchor). Im öffnenden Tag wird hinter dem Attribut href (engl. hyper reference) die Adresse oder der Name des referenzierten Dokumentes angegeben. Möglichkeiten hierfür sind z.B.
- die Angabe einer vollständigen URL, wie z.B.: http://www.thg-waltrop.de
- die Angabe einer lokalen HTML-Datei, wie z.B.: textformatierung.htm
- die Angabe einer lokalen PDF- oder Bilddatei, wie z.B.: ../bilder/teichfrosch.jpg

<a href="Adresse oder Dateiname" target="_blank">
  Hier steht der Text oder das Bild, das angezeigt werden soll.
</a>

Die Einstellungen im Browser sorgen, falls es sich nicht um eine HTML-Datei handelt, dafür, ob die Datei mit der jeweiligen Anwendung angezeigt wird oder zum Download angeboten wird. Möchte man nicht, dass die neue Datei die eigene Seite im Browser ersetzt, kann man über die optionale Angabe target="_blank" im a-Tag die Darstellung in einem neuen Fenster erreichen.

Zwischen den a-Tags kann man den Text oder das Objekt, z.B. ein Bild, angeben, der/das auf dem Bildschirm angezeigt wird. Dabei handelt es sich beim a-Tag um ein sogenanntes Inline-Element, das im Fliesstext eingebettet sein kann und nicht zu einem Zeilenumbruch führt. Verweise sind im Text, sofern man dies nicht umdefiniert, durch blaue Schrift mit Unterstrich gekennzeichnet.

Teichfrosch <Pelophylax esculentus> in Entengrütze

Teichfrösche sind liebenswerte Gesellen, die einem abends ein Schlaflied singen und dann zuverlässig morgens gegen sechs mit einem Morgenkonzert wieder wecken.

	Download des Bildes
	Über obigen Link auf das Bild kann dieses herunter­geladen werden. Andererseits ist auch das Bild selber ein Link auf sich selbst...

Frösche im Garten sind ein besonderes Naturerlebnis, vor allem für Kinder. Man kann sie stundenlang am Gartenteich beobachten und sich darüber freuen, dass sie so viele Mücken und andere Quälgeister fangen.

Detaillierte Informationen zu Teichfröschen und anderen Amphibien findet man im Internet z.B. hier:

• Teichfrosch / Nabu
• Teichfrosch / Wikipedia