Inhaltsverzeichnis

Weitere Tags

4. Bilder

Tiger Bilder kannst Du mit dem <img>-Tag einfügen. Es besitzt die Eigenschaften src ("Source", auf deutsch: "Quelle") und alt (Alternativtext für blinde Menschen bzw. falls das Bild zu langsam geladen wird). Zusätzlich können über die Eigenschaften width und height die Breite und Höhe des Bildes angegeben werden. Üblicherweise gibt man nur eines der beiden Maße an, das andere berechnet der Browser mithilfe des Seitenverhältnisses der Bilddatei.
Vorsicht:
Falls die Bilddatei nicht im selben Ordner liegt wie die html-Seite, musst du den ganzen Pfad der Bilddatei angeben. Liegt sie beispielsweise etwa einen Ordner tiefer im Ordner "images", so schreibst Du

<img src="images/tiger.png">

Beispiel

<img src="tiger.png" alt="Tiger" width="200px">

Ein Link besteht immer aus zwei Teilen:

  • Der Zieladresse (hinterlegt in der Eigenschaft href) und
  • der Linkbeschreibung (Text bzw. Elemente zwischen <a> und </a>.

Zusätzlich kann über das Setzen der Eigenschaft target="_blank" bewirkt werden, dass der Browser die Seite der Zieladresse in einem neuen Reiter öffnet.

Beispiel

<a href="https://de.wikipedia.org/wiki/Terry_Pratchett" target="_blank">Hier geht's zum Wikipedia-Artikel über Sir Terry Pratchett</a>

wird so dargestellt:

Die Anschrift

Ulrich-Meier-Gasse 18
D - 85557 Arnshausen

ist eine absolute Ortsangabe insofern, als man mit ihr von überall auf der Welt zu diesem Ort findet. Die Angabe

Das Haus rechts neben der Kirche

ist eine relative Ortsangabe, da man das Haus nur ausgehend von der Kirche findet.

Ähnlich ist es mit Ortsangaben im Internet. Stell dir vor, du hast im Browser gerade die Seite mit der URL (absolute Adresse!)

https://hackaday.com/blog/index.html

geladen. Wenn sich auf dieser Seite ein Link mit dem Tag

<a href="tiger.html">Hier geht's zum Tiger!</a>

befindet, so hat es die URL https://hackaday.com/blog/tiger.html. Man mit relativen Adressen sogar eine Ordnerebene darunter referenzieren, indem man ".." benutzt:

<a href="../tiger.html">Hier geht's zum Tiger!</a>

verweist auf das Bild mit der URL https://hackaday.com/tiger.html.