HTML-Struktur-004

Dokumente oder Medien einbinden

Mit HTML kann man verschiedene Dokumente und Medien einbinden. Den einzubindenden Pfad (= URI = Uniform Resource Identifier = Einheitliche Quellenbezeichnung), der auf das jeweilige Medium verweist, kann unterschiedliche aussehen.

Um zum Beispiel ein Bild einzufügen, wir das HTML-Tag <img> verwendet. Mit dem Attribut "src" (= source = Quelle) kann der Pfad zum Bild angegeben werden. Das Attribut schreibt man in das Starttag des HTML-Elements:

<img src="LinkZumBild">

Mit dem Ist-Gleich-Zeichen (=) wird auf den Pfad verwiesen. Der eigentliche Pfad oder Link zum Bild folgt dahinter in Anführungszeichen.

Wie das Einbinden eines Bildes funktioniert wird im Folgenden erklärt:

MIT VOLLSTÄNDIGEM URI

Wenn ein Bild von einer anderen Webseite eingebunden werden soll, kann der gesamte Hyperlink zu diesem Bild eingefügt werden.

<img src="https://cdn.pixabay.com/photo/2017/11/14/13/06/kitty-2948404_960_720.jpg" />

ABSOLUTE PFADANGABEN RELATIV ZUM BASIS-URI

Möchte man auf ein Bild in einem Ordner verweisen kann man über den Basis-Uri auf die Datei verweisen. Der Basis-Uri ist das Wurzelverzeichnis, das heißt der grundlegendste Ordner. Auf dem Computer wäre dies beispielsweise das Fenster "Computer". Bei einer Webseite auf einem Server ist der Basis-Uri die grundlegende Seite, also beispielsweise https://de.wikipedia.org. Die Unterordner folgen durch einen Schrägstrich getrennt: https://de.wikipedia.org/wiki/Hypertext_Markup_Language.

Um ein Bild entsprechend anzugeben, gibt man den gesamten Pfad zum Bild ein und schreibt als erstes Zeichen einen Schrägstrich:

<img src="/C:/Users/Bielesch/Documents/kitty.jpg" />

RELATIVE PFADANGABEN RELATIV ZUM BASIS-URI

Auf ein Bild kann man auch relativ verweisen. Das heißt, die Pfadangabe beginnt von der HTML-Datei aus bzw. in demselben Ordner. Liegt das Bild in demselben Ordner, muss lediglich der Name des Bildes angegeben werden:

<img src="kitty.jpg" />

Liegt das Bild in einem Unterordner des HTML-Dokuments, muss mit Schrägstrichen zu dem jeweiligen Ordner navigiert werden:

<img src="ordner/kitty.jpg" />

Liegt das Bild in einem Ordner, welcher "über" dem Ordner des HTML-Dokuments liegt, kann die Referenz mit zwei beginnenden Punkten und einem Schrägstrich geschrieben werden:

<img src="../kitty.jpg" />

Hierbei können beliebig viele Überverzeichnisse angewählt werden:

<img src="../../../../../../../kitty.jpg" />