Dateien in HTML und CSS verlinken
Dateipfade benötigt man beim erstellen einer Website häufig. Um CSS- und Javascript-Dateien einzubinden, für Linkziele oder um Bilder, Videos und andere Medien einzubinden.
Die Browser sind in der Lage mit verschiedensten Pfadangaben umzugehen: komplette URLs, relative und absolute Pfade.
URLs
URL steht als Abkürzung für Uniform Resource Locator, eine exakte Angabe wo und wie man eine Resource abruft.
Beispiele:
- https://www.sfgbasel.ch/
- https://sfg.dbopp.ch/files/cto_layout/img/bg_default.jpg
Relative Pfade
Gibt man nur einen Dateinamen an, so sucht der Browser diese Datei am selben Ort, an dem die verlinkende Datei liegt.
Gibt man vor dem Dateinamen noch einen oder mehrere Ordnernamen an, so wird im entsprechenden Unterordner gesucht. Auch die Möglichkeit, erst in einen übergeordneten Ordner zu wechseln gibt es.
Beispiele:
<!-- Bild im selben Ordner wie die HTML-Datei -->
<img src="bild1.jpg">
<!-- Bild in einem Unterordner -->
<img src="bilder/bild1.jpg">
<!-- CSS-Datei in einem Unterordner -->
<link rel="stylesheet" type="text/css" href="css/style.css">
Beispieldateien
- Als Zip-Datei zum herunterladen und auf dem eigenen Rechner untersuchen
- Als HTML - zum direkt online betrachten
Weitere Ressourcen
- <base> Tag. Mithilfe des base-Tags kann für alle relativen Pfade in einer HTML-Datei festgelegt werden von wo aus diese aufgelöst werden. Beispiele und Anwendungsfälle des Base-Tags.