HTML Links auf deiner Homepage verstehen
Dir ist es wahrscheinlich auch schon passiert, dass eine Seite oder ein Bild sich auf einer Homepage nicht richtig anzeigen. Damit die Besucher auf deiner Homepage eine möglichst ruckelfreie Erfahrung haben: verstehe wie Links funktionieren, befasse dich damit. So vermeidest du Fehlanzeigen und kannst sie gegebenenfalls ohne viel Aufwand korrigieren.
Das Link, wie es codiert wird
Code eines HTML Links:
Beim Klick des Links wird das Resultat die gleiche Seite sein - das wird jetzt gleich näher erklärt. Der Inhalt "LINK zu einer Seite" ist die sichtbare Bezeichnung des Links. Die Eigenschaft href enthält die Adresse des Links, hier #. Das HTML Start und End Tag "a" macht den Inhalt zum Link.
Ob ein Link tatsächlich funktioniert hängt hauptsächlich von der Adresse des Links ab. Ist die Adresse korrekt zusammengestellt, kann die Verbindung entstehen. Erfahre nun über die zwei Varianten einer Adresse.
Das Link mit einer absoluten Adresse
Anstatt des # Zeichens wird nun die Adresse zu einer anderen Seite angegeben - als Pfad. Und zwar so, dass es sich um die genaue Internetadresse handelt. Die Adresse ist vergleichbar mit einer Anschrift oder GPS Koordinaten.
Der hier gezeigte Pfad, der mit "https..." beginnt, ist eine verschlüsselter Uniform Resource Locator (kurz: Url). Die Ressource produkte.html befindet sich auf dem Domain www.meineseite.com.
Das Link mit einer relativen Adresse
Im Gegensatz zur absoluten Adresse ist die relative Adresse, weniger exakt. Hier wird angenommen, dass du genau weisst, wo du dich befindest, bzw. das Computersystem weiss das. Dann kann auch die Ressource gefunden werden (siehe Abbildung weiter unten). Und zwar relativ zum aktuellen Ort.
Anstatt der gesamten Internetadresse fällt der erste Teil des Pfades weg. Es verbleibt ein Verzeichnis "bilder" in dem sich die Datei bild1.png befindet. Das Verzeichnis ist relativ zum aktuellen Verzeichnis. Am Besten zeige ich dir die Ordnerstruktur:
bilder > bild1.png
Nun geht es noch einen Schritt weiter.
Das Bild befindet sich nun im Ordner parallel zum jetzigen Ort. Also sieht das dann so aus:
Aktuelles Verzeichnis hoch zu -> Anderes Verzeichnis runter zu -> bilder > bild2.png
Die zwei Punkte und der Strich können überdies beliebig wiederholt werden.
Damit kann das Aktuelle Verzeichnis noch ein oder mehrere Level unter dem jetzigen Aktuellem Verzeichnis sein.
Absolute vs relative HTML Links
Auf dem ersten Blick scheint es intuitiver absolute Adressen zu verwenden. Konstruiert du jedoch deine Seiten erst einmal auf deinem PC und stellt du sie später Online, ist die zweite Variante die flexiblere Lösung.
So stimmt nur ein Teil der absoluten Adresse auf dem lokalen Computer mit der Adresse Online überein. Das bedeutet bei der Veröffentlichung einer Seite extra Aufwand. Die absolute Adresse muss jedes Mal umgestellt werden.
So ist es letztendlich in dieser Situation zeitsparender gleich die relative Adresse für Links und Dateien zu verwenden.
Fazit: Der Pfad macht das funktionierende Link aus
HTML Links können in zwei Varianten verwendet werden. Sie nutzen entweder eine absolute oder relative Adresse. Die absolute Adresse enthält einen vollständigen Pfad. Die relative Adresse hingegen, nur einen Teil des Pfades. Welche Adresse weniger Aufwand bedeutet, hängt von deinem Einsatz ab.
Weiterführende Links
Easy Homepage Navigation für Smartphones und PCs erstellen
Autor/in: Iris Mitlacher