HTML/Tutorials/Links/Referenzieren in HTML
- 30min
- einfach
- • Dateiorganisation
• Einstieg in HTML
Mit einem a-Element können Sie einen Verweis (engl. (Hyper)Link) zu einem anderen Dokument oder zu einem Anker (anchor) setzen. Das href-Attribut (href = hyper reference = Hyper(text)-Referenz) enthält als Wert eine Referenz auf das gewünschte Verweisziel. Dies ist eine URL, die sich auf die Domain und den Speicherort bezieht.
Auch multimediale Inhalte wie Grafiken, Audio-Dateien, Videos und dergleichen sind nicht direkt in das HTML-Dokument integriert, sondern werden in HTML in Form einer Referenz auf eine entsprechende Datenquelle notiert. Für all diese Zwecke wird das Referenzieren in HTML benötigt.
Ebenso gibt es in CSS, SVG oder JavaScript Stellen, an denen Sie andere Datenquellen referenzieren müssen.
Die Regeln zum Referenzieren sind dabei immer die gleichen. Der Grund ist das zentrale und einheitliche Adressierungsschema im Web, das unabhängig von der Syntax einzelner Betriebssysteme gilt und die genaue Adressierung beliebiger Quellen im Web erlaubt.
Inhaltsverzeichnis
Der erste der obigen Verweise führt zu einem anderen Web-Angebot. Der andere Verweis führt zu einem „lokalen“ Ziel innerhalb des Selfthtml-Wiki.[1]
Anstelle eines Linktextes können auch Bilder verwendet werden und andere Bilder (hier eine Großansicht) referenzieren.
>Unten sehen Sie ein Beispiel für einen Link, der mehrere HTML-Elemente enthält. Hier sind dies ein aside-Element, das eine Überschrift und einen Absatz enthält. Damit die Box als Verweis erkennbar ist, wurde sie mit CSS farbig gestaltet.
Als Inhalt des a-Elements, also zwischen <a> und </a>, notieren Sie den Linktext, der dem Anwender als Verweis angeboten wird (bei den meisten Web-Browsern andersfarbig, meist unterstrichen).
Sie können das a-Element als Elternelement für beliebig viele Kindelemente verwenden, sinnvoll dürfte es allerdings zumeist sein, sich auf reinen Text und Grafiken zu beschränken. a-Elemente dürfen jedoch keine Buttons, weitere a-Elemente oder sonstige interaktive Elemente enthalten.
Mit vollständigen URIs referenzieren
Mit vollständigen URIs müssen Sie dann referenzieren, wenn sich die gewünschte Datenquelle grob gesagt nicht im aktuellen eigenen Web-Angebot befindet.
Ein URI (Uniform Resource Identifier – einheitliche Quellenbezeichnung) ist beispielsweise so etwas wie https://www.example.org/ oder https://example.org/impressum.html. Beide Beispieladressen sind aber gleichzeitig auch so genannte URLs (Uniform Resource Locators – einheitliche Quellenorter). Und dann gibt es – um die Verwirrung komplett zu machen – auch noch so genannte URNs (Uniform Resource Names – einheitliche Quellennamen). Letztere sind dazu gedacht, um nicht wirklich existierende Datenquellen oder Quellen, die zwar existieren, aber durch kein bekanntes Internet-Protokoll im Netz abrufbar sind, dennoch eindeutig zu benennen. Ein URI ist also der Oberbegriff für URL und URN, wobei URI und URL bei typischen Adressen, hinter denen sich konkrete Dateien oder Datenquellen verbergen, und um die es hier geht, faktisch das Gleiche sind. Im HTML-Standard wird aber von URIs geredet.
Ein vollständiger URI besteht aus der Angabe eines Internet-Protokolls, z. B. http, gefolgt von einem Doppelpunkt. Dahinter kann – das ist von Protokoll zu Protokoll verschieden – eine Zusatzangabe zu einem lokalen Netzwerknamen möglich sein. Diese Angabe wird in zwei Schrägstriche // eingeschlossen. Bei den meisten Adressen gibt es keine solche Angabe, weshalb die beiden Schrägstriche dort einfach ohne Inhalt nebeneinanderstehen.
Hinter diesen Angaben folgt die Adresse des Host-Rechners im Netz, auf dem sich die Datenquelle befindet. Das kann ein Domain-Name oder eine numerische IP-Adresse sein. Der Domain-Name ist übrigens in den obigen Beispielen example.org. Das www davor ist eine im Web typische und bei Web-Servern einstellbare Voreinstellung für Sub-Domains.
Hinter der Adressierung des Host-Rechners kann – durch einen Doppelpunkt abgetrennt, eine so genannte Portnummer folgen, wie im letzten der obigen Beispiele bei :8082. Das ist immer dann erforderlich, wenn die Datenquelle nicht über den Standard-Port des angegebenen Protokolls wie etwa http erreichbar ist, sondern über einen anderen Port. In der Praxis benötigen Sie die Portangabe eher selten, aber kennen sollten Sie sie.
Dahinter folgt schließlich die lokale Pfadangabe zur gewünschten Datenquelle. Egal, um welches Betriebssystem es sich dabei handelt – Verzeichnispfade werden stets durch einfache Schrägstriche getrennt. Es ist Aufgabe der Server-Software auf dem Rechner, die Pfadangaben korrekt aufzulösen. Auf diese Weise brauchen Sie sich keine Gedanken zu machen, welches System der angesprochene Rechner benutzt.
Auf dem Rechner können beliebige Dateien und Datenquellen angesprochen werden. Voraussetzung ist, dass sie über das angegebene Protokoll wie z. B. http unter der Adressierung erreichbar sind. Es muss sich nicht unbedingt um Dateien handeln. So kann mit # und einem Namen dahinter etwa ein bestimmter Zielanker innerhalb einer HTML-Datei angesprochen werden.
Zeichen, die nicht in der ASCII-Codetabelle vorkommen oder in URIs Bedeutung haben (z. B. der Schrägstrich, der Doppelpunkt oder das Prozentzeichen) müssen Sie innerhalb von URIs maskieren. Das geschieht durch Angabe eines Prozentzeichens % mit anschließendem Hexadezimalwert für das Zeichen.
Mit protokoll-relativen URIs referenzieren
Sie können Ihre Ressourcen protokoll-relativ mit zwei Slashes (//) referenzieren. „Protokoll-relativ“ bedeutet, dass die Ressource mit demselben Protokoll wie das Dokument selbst aufgerufen wird. Früher warnten einige Browser noch vor HTTPS-Ressourcen in über HTTP eingebundenen Dokumenten – heute warnen sie vor HTTP-Ressourcen in über HTTPS aufgerufenen Dokumenten. Protokoll-relative Referenzen ermöglichten es, eine Seite sowohl über HTTPS als auch über HTTP erreichbar zu machen, ohne dass Browser meckerten. Da man heute aus Gründen der Sicherheit HTTPS erzwingt – falls die Site darüber erreichbar ist – ist dieser Vorteil dahin, geben Sie daher HTTPS als Protokoll an. Außerdem wurden mit HTTPS zusätzliche Verbesserungen bei der Performance entwickelt, sodass eine Seite langsamer laden könnte, wenn Resourcen über HTTP eingebunden werden.
Wenn eine einzubindende Ressource – beispielsweise ein von CDN ausgeliefertes JavaScript – per HTTP und HTTPS erreichbar ist, dann sollten Sie diese mit Protokollangabe per HTTPS verlinken, auch wenn ihre Site noch nur per HTTP abrufbar ist.
<img src="//example.com/images/logo.png" alt="">
#logo {
background: url(//example.com/images/logo.png);
}
- in E-Mails, da Mailclients möglicherweise auf das
file://-Protokoll zurückfallen - für Verweise auf fremde Seiten, da Sie nicht wissen können, ob diese Inhalte unter https zur Verfügung stehen
Mit absoluten Pfadangaben relativ zum Basis-URI referenzieren
Diese Variante der Referenzierung können Sie wählen, wenn die gewünschte Datenquelle auf dem gleichen Host-Rechner liegt und über das aktuelle Protokoll und den Standard-Port erreichbar ist. Das klingt komplizierter als es ist. In dem vollständigen URI https://wiki.selfhtml.org/wiki/HTML/Tutorials/Links/Referenzieren_in_HTML.html ist der Teil wiki/HTML/Tutorials/Links/Referenzieren_in_HTML.html eine absolute Pfadangabe relativ zur Basis-URI https://wiki.selfhtml.org/. Innerhalb des eigenen Web-Angebots und der eigenen Domain oder Sub-Domain können Sie also mit solchen Pfadangaben arbeiten.
Beginnt eine URL-Referenz mit dem Slash /, dann bedeutet das: Gehe vom höchsten erreichbaren Punkt der Verzeichnishierarchie aus. Im Web ist das das Wurzelverzeichnis (engl. root directory) der jeweiligen Domain, lokal ist es der Startpunkt des Filesystems.
Hinter dem Basis-URI kann alles folgen, was schon im Abschnitt Mit vollständigen URIs referenzieren angesprochen wurde.
Mit relativen Pfadangaben relativ zum Basis-URI referenzieren
Diese Variante können Sie wählen, wenn Sie den jeweils aktuellen URI als Bezugs-URI wählen. Dann können Sie von hieraus relativ adressieren. Die HTML-Datei mit dem URI http://example.org/html/allgemein/referenzieren.htm enthält beispielsweise zum Referenzieren einer Grafik folgende Angabe: ../../src/logo.gif. Das bedeutet: gehe zwei Verzeichnisse nach oben, von dort aus ins Unterverzeichnis src und dort findest du die Datei logo.gif. Absolut gesehen hat diese Datei also den URI http://example.org/src/logo.gif.
Diese Form der relativen Adressierung ist innerhalb von Web-Projekten sehr zu empfehlen. Der Grund ist, dass Sie das Web-Projekt auf diese Weise problemlos an eine andere Adresse verschieben können, und trotzdem funktionieren noch alle projektinternen Verweise und Grafikreferenzen. Gerade wenn Sie Ihr Projekt auch mal auf CD-ROM oder anderen Medien veröffentlichen wollen, ist die relative Adressierung ein Muss.
Eine Datei im gleichen Verzeichnis wie dem aktuellen können Sie einfach durch Angabe des Dateinamens referenzieren – im obigen Beispiel etwa die Datei farben.htm. Das aktuelle Verzeichnis referenzieren Sie durch ./ – also einem Punkt, gefolgt von einem Schrägstrich. Die Adressierung von farben.htm und ./farben.htm im obigen Beispiel hat also den gleichen Effekt.
Eine Angabe wie bilder/grafik.gif referenziert eine Datei namens grafik.gif im Verzeichnis bilder, das ein Unterverzeichnis des aktuellen Verzeichnisses ist. Die Notation ./bilder/grafik.gif hat wieder den gleichen Effekt wie bilder/grafik.gif.
Mit ../ referenzieren Sie das Verzeichnis über dem aktuellen Verzeichnis, egal wie es heißt. Mit ../../ referenzieren Sie das Verzeichnis über dem Verzeichnis über dem aktuellen Verzeichnis usw. Von jedem der so adressierten Verzeichnisse können Sie wieder auf deren Unterverzeichnisse zugreifen, wie im letzten der obigen Beispiele gezeigt.
Quellen
- ↑ Der Doppelpunkt ist ein Erlaubtes Zeichen in einer URL. Er weist daraufhin, dass sich die Datei
HTML_a-Element2.htmlim Beispielnamensraum der Mediawiki-Installation befindet.
