Einführung in HTML 6 Hyperlinks Mit Hyperlinks kannst du die Möglichkeit des Internet nutzen, Sprungverweise zu anderen Dokumenten im WWW einzusetzen. Dies ist genauso zu fremden Seiten wie zu den eigenen Unterseiten möglich. Wenn du eine Website planst, dann ist es in jedem Fall sinnvoll, den Aufbau und die Struktur genau zu planen. Für den Besucher der Website ist es wichtig, die "Navigation" zu verstehen. Ein Link ist auch innerhalb von Dokumenten einsetzbar und sinnvoll, um zum Beispiel per Mausklick jeweils nach oben oder unten zu kommen, ohne lange scrollen zu müssen. Der Aufbau von Verweisen ist einheitlich, unabhängig davon, ob sie zu einem anderen Dokument führen oder nur innerhalb eines (längeren) Dokuments verweisen: <a href="[Verweisziel]">Verweistext</a> Dabei steht a für anchor = Anker, href für hyper reference = Hypertext-Referenz. Als Verweisziel wird die Datei genannt, auf die der Link gesetzt wird (in Anführungszeichen), oder der "Anker" innerhalb des Dokuments. Schließlich wird der Text angegeben, der als Link im fertigen HTML-Dokument erscheinen soll. 6.1 Links zu externen Dokumenten Auch wenn der Aufbau eines Hyperlinks gleich ist, unabhängig davon, ob das Verweisziel innerhalb oder außerhalb eines Dokuments liegt, sehen wir uns zunächst Links zu anderen Dokumenten an. Ein Beispiel für unseren Autohändler: <a href="gebraucht.html">Hier geht´s zu den Gebrauchtwagen</a> Im Browser erscheint der Link so: Aufgabe: Öffne die Datei auto.html im Editor und baue den Hyperlink an passender Stelle ein. Natürlich muss auf den Seiten, auf die verwiesen wird, ein Verweis stehen, der es dem Betrachter ermöglicht, zur Hauptseite zurückzukommen – am besten in jedem Dokument an der gleichen Stelle. <a href="auto.html">Zurück zur Startseite – Norberts Gebrauchtwagen</a> Aufgabe: Erstelle das folgende HTMLDokument. Verwende dabei die Grafik bmw.jpg - 15 - Einführung in HTML Der HTML-Code dazu: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="content-type" Content=text/html;charset=iso-8859-1/> <title>Gebrauchtwagen</title> </head> <body> <h2>Norberts Gebrauchtwagen</h2> <p></p> <img src="BMW.jpg" width="280" height="197"><b>Preis: </b>11900 Euro<br> <b>BMW 320 Diesel</b><br> Daten:119.000 km, <br> 100 kW (136 PS), EZ: 04/99, schwarz<br> Besonderheiten: Diesel, Klimaanlage<br> Beschreibung: Klimatronic, ABS, Airbag, el. FH, Servo, ZV, Color, Kopfst&uuml;tzen, I. Hand<br> <a href="auto4.htm">Zur&uuml;ck zur Startseite - Norberts Gebrauchtwagen</a> </body> </html> 6.2 Grafik als Link Es ist auch möglich, eine Grafik einzubinden, die als Link dient. An der Stelle, an der sonst der Text steht, wird der Verweis auf die Grafik gesetzt. Die allgemeine Form ist dann die folgende: <a href="datei.html"><img src="datei.gif"></a> Wenn du nicht willst, dass der Browser einen Rahmen um die Datei zieht, dann mache den Zusatz border=0: <a href="datei.html"><img src="datei.gif" border=0></a> Dabei muss man allerdings beachten, dass der Benutzer die Grafik dann nicht mehr unmittelbar als Link erkennen kann. Aufgabe: Binde die Grafik auto.gif so ein, dass sie als Link zur HTML-Datei gebraucht.htm dient: Mauszeiger als Hand im Browser zeigt, dass das Bild als Link funktioniert: 6.3 E-Mail-Links Unter dem E-Mail-Link versteht man den Hyperlink, mit dem der Benutzer eine Mail an den Betreiber der Seite im Web schicken kann. Die allgemeine Form, mit der ein E-Mail-Link erstellt wird: <a href =“mailto:[E-Mail-Adresse]“> Text </a> Im konkreten Beispiel ist der HTML-Befehl für Norberts Gebrauchtwagenhandel: <a href =“Mailto:[email protected]“> E-Mail an Norbert /a> Das sieht im Internet Explorer dann so aus: (Ausschnitt) Auch hier kann natürlich wieder eine Graphik als Link verwendet werden. Statt des Textes muss an der entsprechenden Stelle dann der Verweis auf die Grafik stehen: - 16 - Einführung in HTML statt: <a href =“mailto:[email protected]“> E-Mail an Norbert /a> diesen HTML-Code: <a href =“mailto:[email protected]“> <img src=“Briefkasten.gif“>/a> Die gif-Datei ist eine sogenannte animierte Gif-Datei, also eine Grafik mit einer Animation. Hier weiß allerdings der Benutzer nicht, dass es sich um einen E-Mail-Verweis handelt, er sieht nur die animierte Grafik, die einen Briefkasten darstellen soll. Deshalb ist es besser, wenn zusätzlich noch ein erklärender Text davorsteht: E-Mail an Norbert: <a href =“Mailto:[email protected]“> <img src=“Briefkasten.gif“>/a> Dann sieht das Ganze so aus: Eine andere Variante wäre, ein kleines Brief-Symbol als Dateiverweis vor den Hyperlink zu stellen, über den der Mailverweis erfolgt. <img src="xgmail.gif"> <a href ="Mailto:[email protected]"> E-Mail an Norbert </a> Das wird im Browser so angezeigt: 6.4 Verweise innerhalb eines Dokuments Wenn innerhalb eines HTML-Dokuments Verweise erfolgen sollen (z. B. zu Unterkapiteln, nach oben und nach unten, dann muss man sogenannte Anker definieren, zu denen der Sprungverweis dann erfolgt. dies geht so: <a name=“xxxx“> <a/> wobei a für anchor(=Anker) und „xxxx“ für den Namen des Ankers steht. Der Hyperlink, den du brauchst, um innerhalb des Dokuments zu dem vorher definierten Anker zu springen, geht so: <a href="#xxxx">Verweistext</a> wobei a für anchor = Anker, href für hyper reference steht. Verweistext steht für das, was im Dokument sichtbar ist, worauf also der Link erfolgt. Am Beispiel der Datei dns.html soll dieses Verfahren ausprobiert werden: Aufgabe: Öffne die Datei dns.html mit dem Internet Explorer. Bis jetzt enthält die Datei nur Text und einige Überschriften. An den Stellen, an denen im laufenden Text jeweils eine Überschrift anfängt, soll der Anker gesetzt werden, damit man von den Überschriften zu Beginn (im Inhaltsverzeichnis) dorthin springen kann. - 17 - Einführung in HTML Erläuterung am Beispiel: An der Stelle oben im HTML-Dokument, an der das Inhaltsverzeichnis steht, wird dann der Hyperlink so definiert: <h3><a href="#Anfang">Der Anfang</a></h3> Der Anker heißt Anfang Im Text steht Der Anfang Der Anker für die Stelle, auf die der Verweis erfolgt, ist dann folgender: <h3><a name="Anfang"> <a/>Der Anfang</h3><p> Aufgabe: Definiere Anker für die vier weiteren Überschriften. Ganz am Ende des Dokuments soll dann noch der Sprung nach oben ermöglicht werden: Dazu muss oben der Anker und unten der Hyperlink stehen. Aufgabe: Erstelle das folgende HTML-Dokument mit Links (Dateiname: Links_01.html). Die verwendeten Grafiken heißen (von oben nach unten gelesen): nw.gif tel.gif Die Grafiken befinden sich im Ordner isdn.gif Link_aufgabe abk.gif jargon.gif Der hexadezimale Farbwert für die Links soll ff0000 sein, für besuchten Link 0000ff und für den aktiven Link: 00ff00 Aufgabe: Ändere das HTML-Dokument so, dass es egal ist, ob man den Text oder die kleinen Grafiken als Link anklickt. Sorge bitte dafür, dass die Grafiken dabei keinen Rahmen bekommen. - 18 -