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" />