Zum Einfügen von Hyperlinks verwendet man den a-Tag mit folgender Syntax:

Einführung HTML

Zum Einfügen von Hyperlinks verwendet man den a-Tag mit folgender Syntax:

<p>

<a href="datei.html" title="Beschreibung">Der zu verlinkende Text</a>

</p>

href = Ziel des Links, z.B.

biographie.html bilder/bild.gif

http://www.xy.de/

http://www.za.com/pfad/datei.html

Link-Titel = Beschreibung des Linkziels, wichtig für -Suchmaschinen

-Ausgabe mit Screenreader

"Zur Homepage der X-Schule"

"Übersicht über meinen Lebenslauf"

"Affenbild - Großansicht"

Ausgabe auf Webseite:

Der zu verlinkende Text

Einführung HTML

<p>Für weitere Informationen habe ich hier einen <a href="lebenslauf.html" title="Lebenslauf von Max Muster">Lebenslauf</a> zusammengestellt.</p>

Ausgabe auf Webseite:

Für weitere Informationen habe ich hier einen Lebenslauf zusammengestellt.

Einführung HTML

<p>Klicken Sie zum Vergrößern auf das Bild:</p>

<p><a href="bildgross.gif" title="Schlafendes Hündchen, Großbild"><img src=„bildklein.gif" alt="Schlafendes Hündchen, Vorschaubild" /></a></p>

Ausgabe auf Webseite:

Klicken Sie zum Vergrößern auf das Bild:

Oft werden zunächst kleinere Vorschaubilder angezeigt und erst, wenn der Benutzer auf den Link drückt, das größere Bild (längere Ladezeit) angezeigt

Einführung HTML

13.04.2015 Sd 37

HyperLinks mit Bildern

<a href=„http://www.ls.schulen-offenbach.de/“

target=„blank“> <img src=„Bild1.jpg“ width=„350“

height=„300“ border=„4“ align=„left“ alt=„Hinweis zum Bild“> </a>

D.h. geht man mit der Maus auf das Bild, so erscheint das

Handsymbol. Beim Klick auf das Bild springt man auf die Seite der Leibnizschule

Einführung HTML

<p>

<a href="mailto:[email protected]" title="Mail an Sd„>E-Mail- Kontakt</a>

</p>

Ausgabe auf Webseite:

E-Mail-Kontakt

Einführung HTML

13.04.2015 Sd 39

HyperLinks (extern, d.h. ins WEB)

<a href=„http://www.google.de“>Hier geht’s nach Google</a>

<a href=„http://www.ls.schulen-offenbach.de/“ target=„blank“>

Leibniz-Schule</a>

Mit dem Attribut target wird ein neues Fenster / Tab geöffnet

<a href=„weitereSeite.html“>hier geht’s zur nächsten Seite</a>

Sprung zu einer nächsten Seite in Deinem HTML-Verzeichnis Es gibt auch noch Sprünge innerhalb des HTML-Dokuments (später mehr dazu)

Einführung HTML

13.04.2015 Sd 40

Musik-HyperLinks

<a href=„music.mp3“>Musik für Dich</a>

Alternativ:

<embed src=„lied.mid“ width=„150“ height=„75“

autostart=„false“ loop=„false“ hidden=„false“ />

Kurzform von Tags ohne Hinweistext:

<tag attribut=„wert“></tag> oder

<tag attribut=„wert“ />