Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Inhalte • Verweise
⇦ Absatz und Umbrüche / Grundgerüst ⇨
08.10.2014 12:14:08

Verweise

Verweise

Jetzt fehlt eigentlich nur noch der interaktive Teil (Hypertext). So eine Visitenkarte enthält schon einige potenzielle Kandidaten für Links an andere Stellen: Telefon, E-Mail und Webpräsenz (Homepage).

Anmerkung: Tags können mit sogenannten Attributen um weitere Eigenschaften erweitert werden. So existiert der Tag <a> [s,a,w], der ohne Attribute keine Bedeutung hat.

Hypertextlinks (Hyperlinks oder einfach Links) fügen wir mit der Tag/Attribut-Kombination <a href=""> (anchor / href = hypertext reference) in HTML ein. Ein Attribut erweitert ein Tag um bestimmte Eigenschaften.

<a href="http://domain.de">Text</a>
<a … >
Starttag
href="…"
Attribut
http://domain.de
Wert des Attribut
Text
Angezeigter Text
</a>
Endtag

Lassen sie mich das durch ein kleines Beispiel erläutern: Das Tag <a> ist generell für Referenzen zuständig. Mit dem Attribut href="" teilen wir dem Webbrowser mit, das wir irgendwas referenzieren wollen. Das kann eine andere Webseite sein, aber auch ein anderes Programm, das sich dann beispielsweise um das Verschicken einer E-Mail kümmert.

Verweisziele (href="…"):

http://www.google.de
Springt zur Homepage von Google
mailto:maria@mail.de
Verschickt Mails über ein externes Programm
callto:033045081620
Telefoniert über ein externes Programm (veraltet)
tel:033045081620
Telefoniert über ein externes Programm
faxto:033045081621
Faxt über ein externes Programm (veraltet)
fax:033045081620
Faxt über ein externes Programm
sms:015175081620
Simst über ein externes Programm

Anmerkung: Telefonnummern können die Ziffern „0“-„9“, „+“, „*“, „#“ und ein „,“ (Pause) enthalten. Bei SMSs können mehrere Nummern durch Komma getrennt und ein Betreff mit „*?body=“ angegegeben werden.

Sicherlich haben sie das Prinzip durchschaut. Der Wert des Attributs href="" muss ein URI (siehe Anhang: Fachbegriffe) sein. Anhand des Schemas (http, mailto, callto) der URI stellt der Webbrowser fest, ob er den Verweis selbst (http) behandeln (folgen) kann oder ihn an ein externes Programm (mailto, tel, fax) übergeben muss. Ist kein externes Programm für das Schema definiert, erscheint eine Fehlermeldung.

Anmerkung: Das Tag <a> ist nicht nur für einen Verweissprung, sondern je nach Attribut, auch für andere Aufgaben (s. Selfhtml) zuständig. Dazu aber erst später mehr.

Verweise innerhalb der Domain

Allerdings existiert noch eine vereinfachte Darstellung von href-Werten. Wie im lokalen Dateisystem, können sie auch einfach ein Unterverzeichnis oder einen sonstigen Pfad inklusive Dateinamen angeben. Das ist später bei Webpräsenzen wichtig, wenn sie mehrere Seiten haben, die sie untereinander verlinken wollen.

Beachten sie dabei, das sie nicht wie unter DOS und Windows üblich als Pfadtrenner das  \ -Zeichen benutzen, sondern wie in der Unix-Welt üblich das  / -Zeichen.

Verzeichnisbaum (Beispiel)

  •  / 
    • bilder/ 
      • symbole/ 
      • layout/ 
      • bild.png
    • css/ 
      • formate.css
    • js/ 
      • funktionen.js
    • index.html

Absolute Adressierung

<a href=" / ">
Springt ins Hauptverzeichnis
<a href="/bilder/bild.png">
Öffnet die Datei bild.png im Verzeichnis bilder

Relative Adressierung …

… vom Ordner  /  aus

<a href=" . ">
Springt ins Hauptverzeichnis ( .  ist aktuelles Verzeichnis)
<a href="css">
Springt ins Unterverzeichnis css
<a href="bilder/bild.png">
Öffnet die Datei bild.png im Verzeichnis bilder

… vom Ordner css aus

<a href=" .. ">
Springt ins Hauptverzeichnis ( ..  ist übergeordnetes Verzeichnis)
<a href="../bilder">
Springt ins nebengeordnete Verzeichnis bilder
<a href="../bilder/layout">
Springt ins Verzeichnis layout

Anmerkung: Wenn sie nur einen Ordner und keine Datei angeben, wird im lokalen Dateisystem ein Inhaltsverzeichnis, auf einem Webserver meist die Datei index.htm(l) (Apache) oder default.htm (IIS) ausgegeben.

Referenz: Referenzieren in selfhtml

Übung

Übung:

Speichern sie ihre Visitenkarte unter neuem Namen. Fügen sie dann die Verweise in die Datei ein. Achten sie dabei auf die korrekte Syntax!

(Beispiel 05_visitenkarte_href.html)

Anhang: Tastaturkommandos

Probieren sie die Verweise ruhig einmal aus, in dem sie daraufklicken. Sollte ihr Browser eine Fehlermeldung ausgeben, ist das URI-Schema wahrscheinlich nicht richtig verknüpft, weil sie beispielsweise kein Programm zur Internet­telefonie installiert haben.

Zusammenfassung

⇦ Absatz und Umbrüche / Grundgerüst ⇨
Nach oben