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">
<img src="tiger.png" alt="Tiger" width="200px">
Ein Link besteht immer aus zwei Teilen:
href
) und<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.
<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
.