src-Attribut

Medien-Quelle (en. source)

  Ruft man eine Webseite im Browser auf, wird zuerst der HTML-Code geladen und eingelesen, darauf werden alle Mediendateien nachgeladen und angezeigt.
Dafür muss der Browser natürlich genau wissen, woher er die Dateien laden soll.

Statt "Medien-Quellen" wird im Deutschen eher vom "Pfad" (en. "path") zu einer Datei gesprochen.

Das src-Attribut gibt's in verschiedenen Tags

In dieser Rubrik wird dir das src-Attribut an verschiedenen Stellen über den Weg laufen:
<img>, <audio><source>, <iframe>, <video><source>


Pfade über Stock und Stein

Die Formulierung der Pfade ist etwas schwierig zu verstehen. Der Querschlag (en. "slash") hat hier die besondere Bedeutung, Hierarchien in der Ordnerstruktur anzuzeigen. Am besten erkläre ich dir das mit konkreten Beispielen:

src="grosser_tuemmler.jpg"
Im gleichen Ordner wie die HTML-Seite befindet sich auch das Bild "grosser_tuemmler.jpg".

src="images/wespe.jpg"
Im gleichen Ordner, in dem die HTML-Seite liegt, gibt es den Ordner namens "images". Darin befindet sich das Bild "wespe.jpg".

src="images/tiere/elefanten.jpg"
Im gleichen Ordner, in dem die HTML-Seite liegt, gibt es den Ordner namens "images". Dort drin liegt der Unterordner "tiere". Darin befindet sich das Bild "elefanten.jpg".

src="../images/wespe.jpg"
Die HTML-Seite liegt in einem Ordner unterhalb des "images"-Ordners. Deshalb muss ich in der Hierarchie mit ../ zuerst einmal hinauftauchen. Darauf kann ich in den Ordner "images" eintauchen, denn darin befindet sich das Bild "wespe.jpg".

Übung macht den Meister

Im Übungspaket "links_media_paket" musst du einige Medien-Dateien auf den HTML-Seiten einbetten. Ich würde dir empfehlen, diese Übungen vollständig durchzuarbeiten. Ich mag mich noch gut erinnern, dass ich grosse Mühe hatte, Pfade zu verstehen, als ich vor langer Zeit HTML lernte.
Zwar unterstützen viele Code-Editoren die Einbettung von Medien-Dateien, trotzdem wirst du froh sein, wenn du das Thema grundlegend begriffen hast, wenn du später JavaScript oder PHP o.ä. schreiben möchtest.