|
<a name="Ankername"></a> |
Das Attribut name markiert innerhalb des Tags <a> eine Position im Dokument. Sie setzen dabei einen sogenannten Anker. Dieser Anker besitzt dabei einen Namen, den Sie unter Ankername definieren. Anker dürfen nur im Rumpfbereich <body> ... </body> eingesetzt werden. |
<... id="Ankername" ... |
Diese Angabe eines Ankers kann eine Identifikation innerhalb eines beliebigen Tags setzen. |
Während Sie das Attribut name nur innerhalb eines <a> - Tags nutzen können, ist der Einsatz des Attributs id in jedem anderen Tag erlaubt. Beim Einsatz der beiden Möglichkeiten sollten Sie beachten, dass das Attribut name auch Entities im Namen erlaubt und auch von älteren Browsern unterstützt wird. Das Attribut id kann dagegen auch über CSS angesprochen werden.
| Beispiel: |
Im Folgenden werden Sie die Verweisziele huflattich und identitaet definieren. Im nächsten Schritt müssen sie noch verlinkt werden. Verweisziel huflattich: <a name="huflattich"><h3>Huflattich - Wildpflanze und Heilkraut</h3></a> Verweisziel identitäet:<h3 id="identitäet">Überschrift</h3> |
Hyperlink setzen
<a href="#Ziel" title="Hier gehts zum Ziel">Verweistext</a> |
|
Der Tag <a> steht für das englische Wort anchor (Anker) und leitet einen Hyperlink (Verweis) ein. Das Attribut href verweist auf einen Anker. Durch die Angabe des Zeichens # vor dem Namen des Ankers wird auf eine Position innerhalb der aktuellen Webseite verwiesen. Über das Attribut title können Sie einen Hinweistext festlegen, der angezeigt wird, wenn der Anwender die Maus über den Link bewegt. Der durch die Tags <a> und </a> eingeschlossenen Text stellt den auf der Webseite sichtbaren Verweis dar. Wenn Sie auf diesen Text klicken wird an die entsprechende Position innerhalb der Webseite gesprungen. |
Hier wird der Verweis zu huflattich gesetzt:<br> <a href="#huflattich" title="Hier gehts zum Huflattich">Zum Huflattich</a><br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> Hier wird der Verweis zu identität gesetzt:<br> <a href="#identitaet" title="Hier gehts zur Identitaet">Identitaet</a> <br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> Hier befindet sich der Anker huflattich: <a name="huflattich"><h3>Huflattich - Wildpflanze und Heilkraut</h3></a> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> viel Text<br> Hier befindet sich der Anker identitaet: <h3 id="identitaet">Hier die Identitaet</h3> |
|
Hier wird der Verweis zu huflattich gesetzt: Zum Huflattich viel Text viel Text viel Text viel Text Hier wird der Verweis zu identität gesetzt: Zur Identitaet viel Text viel Text viel Text viel Text viel Text viel Text Hier befindet sich der Anker huflattich: Huflattich - Wildpflanze und Heilkrautviel Textviel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text viel Text Hier befindet sich der Anker identitaet: Hier die Identitaet |
Wird auf einen Link geklickt, sucht der Browser die gewünschte Position auf der Webseite. Findet er sie, springt er automatisch an die betreffende Stelle und zeigt das Dokument ab der gesetzten Markierung an.
Einfache Hyperlinks
Einfache Hyperlinks verweisen auf Dateien, die sich im selben Verzeichnis wie die aktuelle Webseite befinden.
<a href="html01_06.htm">Verweis auf diese Seite</a> |
| Verweis auf diese Seite |
Relative Hyperlinks
Bei größeren Projekten ist es sinnvoll, die Dateien auf mehrere Verzeichnisse zu verteilen. Dies dient der besseren Übersicht. Damit die Projekte auf andere Rechner mit anderen Verzeichnisstrukturen übertragbar bleiben, sollten Sie aber bei Verweisen zwischen Dateien, die zu Dateien in anderen Verzeichnissen führen, mit relativen Pfadnamen arbeiten. Siehe auch Grafikverweise
| Beispiel: |
<a href="verzeichnis/datei.htm">Verweis zu Datei in Verzeichnis unterhalb</a> <a href="verzeichnis/unterverz/datei.htm">Verweis zu Datei in Verzeichnis weit unterhalb</a> <a href="../datei.htm">Verweis zu Datei ein Verzeichnis höher</a> <a href="../../../datei.htm">Verweis zu Datei drei Verzeichnisse höher</a> <a href="../woanders/datei.htm">Verweis zu Datei in Verzeichnis unterhalb des nächsthöheren</a> |
Verweis an eine bestimmte Position einer anderen Webseite
Genauso, wie Sie innerhalb einer Webseite auf eine bestimmte Position verweisen können, ist dies auch bei Verweisen auf andere Webseiten möglich. Wenn Sie innerhalb einer anderen als einer aktuellen HTML-Datei Anker definiert haben, können Sie auch Verweise setzen, die direkt zu einem Anker innerhalb einer anderen Datei führen.
| Beispiel: |
<a href="html01_05_01.htm#abs4">Größenangaben bei Grafiken</a>Größenangaben bei Grafiken |
Absolute Hyperlinks
Möchten Sie auf eine andere Webseite einer anderen Domain verweisen, müssen Sie absolute Hyperlinks einsetzen. Absolut bedeutet in diesem Zusammenhang, dass Sie die vollständige Internetadresse (URL) angeben müssen.
| Beispiel: |
<a href="http://www.berufskolleg-dinslaken.de/">Meine Schule</a>Meine Schule <a href="http://www.berufskolleg-dinslaken.de/kurse/htmlkurs/htmlk00.htm/">HTML-Kurs</a>HTML-Kurs |
Verweise auf Dateien im eigenen Rechnernetz
Es kann vorkommen, dass Sie für lokale Projekte absolute Pfadnamen brauchen. Das ist beispielsweise der Fall, wenn Sie in einem lokalen Rechnernetzwerk HTML-basierte Information zur Verfügung stellen und durch Verweise vernetzen möchten.
| Beispiel: |
<a href="file://localhost/d:/homepage/rudihp/geraetekunde/gk00.htm">Geraetekunde</a> <a href="file://localhost/p:/team/shared/teaminfo.htm">Team-Informationen</a> <a href="file://localhost/f:/projekt/html/handbuch.doc">Team-Informationen</a> |
Ziele von Hyperlinks
Verlinkte Dokumente müssen nicht notwendigerweise in dem Browser - Fenster geöffnet werden, in dem sie aufgerufen werden. Mögliche Angaben können sein:
target="Fenstername" |
Das angeforderte Dokument wird in dem Browser - Fenster mit dem angegebenen Namen angezeigt. Existiert das Fenster mit dem Namen noch nicht, wird ein neues Browser - Fenster geöffnet und es erhält den angegebenen Namen. Diese Möglichkeit wird häufig in Zusammenhang mit Frames eingesetzt. |
target="_blank" |
Das Dokument wird in einem neuen Fenster geöffnet. |
<a href="html01_06.htm" target="_blank">Verweis auf diese Seite in einem neuen Fenster</a> |
| Verweis auf diese Seite in einem neuen Fenster |
Möchten Sie, dass die Besucher Ihrer Webseite Ihnen über einen Link eine E-Mail schicken können, benutzen Sie das Attribut mailto:. Der Aufruf des E-Mail-Programms erfolgt direkt über den Hyperlink, sofern beim Anwender ein E-Mail-Programm eingerichtet ist.
<a href="mailto:Adresse"...> |
Das Attribut mailto: verweist auf eine E-Mail-Adresse. Bei einem Klick auf den Verweis wird das voreingestellte E-Mail-Programm gestartet und das Feld Empfänger mit der angegebenen E-Mail-Adresse gefüllt. |
<a href="mailto:webmaster@brinkmann-mathe.de">Kontakt zum Autor</a> |
| Kontakt zum Autor |
Optionen bei E-Mail-Verweisen
| Mail an einen Hauptempfänger und einen sichtbaren Kopienempfänger: |
<a href="mailto:webmaster@brinkmann-mathe.de?cc=rcbrinkmann@t-online.de">Mail mit Kopie</a> |
| Mail mit Kopie |
| Mail an einen Hauptempfänger und einen und einen unsichtbaren Kopienempfänger: |
<a href="mailto:webmaster@brinkmann-mathe.de?bbc=rcbrinkmann@t-online.de">Mail mit Geheimkopie</a> |
| Mail mit Geheimkopie |
| Mail mit vordefiniertem Subject (Betreff): |
<a href="mailto:webmaster@brinkmann-mathe.de?subject=Eine Mail%20von%20deinen%20Web-Seiten">Mail mit Betreff</a> |
| Mail mit Betreff |
| Mail mit vordefiniertem Body (Nachrichtentext): |
<a href="mailto:webmaster@brinkmann-mathe.de?body=Hallo%20Rudi,%0D%0A%0D%0Aich%20wollte%20nur%20sagen,%20dass ">Mail mit Body</a> |
| Mail mit Body |
| Mail mit kombinierten Optionen: |
<a href="mailto:webmaster@brinkmann-mathe.de?cc=rcbrinkmann@t-online.de&subject=Hallo%20Rudi,%20hallo%20Charlotte">cc und Subject</a> |
| cc und Subject |
| Mail an zwei Hauptempfänger: |
<a href="mailto:webmaster@brinkmann-mathe.de,%20rcbrinkmann@t-online.de">Mail an zwei</a> |
| Mail an zwei |
| Mail mit vollständigem Adressierungsschema: |
<a href="mailto:Rudolf%20Brinkmann%20<rudolf@mathe-brinkmann.de>">Mail mit Adressierungsschema</a> |
| Mail mit Adressierungsschema |
| Mail mit vordefiniertem Subject (Betreff) und vordefiniertem Body : |
<a href="mailto:webmaster@brinkmann-mathe.de?subject=HTML-Kurs&body=Meine%20Meinung:">Mail mit Betreff und Body</a> |
| Mail mit Betreff und Body |
Die folgende Tabelle listet Zeichen auf, die maskiert werden müssen, weil sie innerhalb von URIs nicht vorkommen dürfen oder eine bestimmte Bedeutung haben. Links steht das Zeichen, rechts die Zeichenkette, mit der Sie das Zeichen maskieren müssen
Ferner müssen Sie alle Zeichen maskieren, die oberhalb des ASCII-Zeichensatzes liegen, also z.B. deutsche Umlaute und scharfes S. Die folgende Tabelle listet die wichtigsten Zeichen auf und ihre Maskierung auf:
| Zeichen | Zeichenkette für Maskerierung | Zeichen | Zeichenkette für Maskerierung |
|---|---|---|---|
| neue Zeile | %0A | Ä | %C4 |
| Wagenrücklauf | %0D | Ö | %D6 |
| Leerzeichen | %20 | Ü | %DC |
| ! | %21 | ß | %DF |
| # | %23 | ä | %E4 |
| % | %25 | ö | %F6 |
| * | %2A | ü | %FC |
| / | %2F | ? | %3F |
Die Standardfarben sind browserabhängig, können jedoch von jedem Benutzer geändert werden. Entweder kann dies über die Konfiguration des Browsers erfolgen oder mithilfe der nachfolgenden HTML-Attribute innerhalb der Webseite. Die Farbangabe kann dabei als Hexadezimale Zahl oder über einen der vordefinierten Farbnamen erfolgen. Die Definition erfolgt direkt im <bodi>-Tag.
link="Farbe" |
Mit dem Attribut link definieren Sie die Farbe für Verweise zu den noch nicht besuchten Seiten. |
vlink="Farbe" |
Über das Attribut vlink definieren Sie die Farbe für Verweise zu bereits besuchten Seiten. |
alink="Farbe" |
Das Attribut alink dient zum definieren der Farbe für Verweise, wenn der Anwender diese anklickt. |
| Beispiel: |
In dem folgenden Beispieldokument werden unbesuchte Links in Grün, besuchte Links gelblich und angeklickte Links in weiß dargestellt.
<body link="#00FF00" vlink="#FFFF66" alink="#FFFFFF"> |
Um einen grafischen Hyperlink zu erzeugen, muss der Hyperlink um eine eingebettete Grafik gelegt werden.
<a href="Verweis"><img src="Linkgrafik"></a> |
| Der Tag <a> leitet den Hyperlink ein. Das Attribut href verweist wie bisher auf die betreffende Webseite oder ein anderes Dokument. Der Tag <img> wird als Beschriftung des Hyperlinks eingesetzt. Dazu wird eine Grafik mit dem Attribut src angegeben. Der Verweis auf die Grafik erfolgt wie bei einem Link. Der schließende Tag </a> beendet die Definition des Hyperlinks. |
| Beispiel: |
In dem folgenden Beispiel wird ein Link auf diese Seite gelegt.
<a href="html01_06.htm"><img src="img/x5.gif" width="30" height="20" border="0" alt="x5"></a>Klicken Sie auf die Grafik um diese Seite neu zu laden.
|
| Beispiel: |
In dem folgenden Beispiel wird ein Grafischer Link zum Versenden von E-Mails benutzt.
<a href="mailto:webmaster@brinkmann-mathe.de"><img src="img/xgmail.gif" width="15" height="10" border="0" alt="xgmail"></a>Klicken Sie auf die Grafik um eine E-Mail zu versenden
|
In einigen Fällen ist es von Vorteil, wenn Sie für bestimmte Ausschnitte einer Grafik verschiedene Links verwenden können. Derartige Grafiken werden Image Maps (Bildkarten) genannt. Der Besucher Ihrer Webseite kann auf ein bestimmtes Deteil des Bildes klicken und wird zu dem hinterlegten Verweis geführt. Diese Form der Verweise ist besonders für die visuelle Navigation geeignet.
Zuerst müssen Sie die Definition der Verweisfläche für die Grafik angeben. Das Grundgerüst der Definition hat den folgenden Aufbau:
Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Information gelangen als durch lange verbale Verweislisten.
<h3>Schnell zur Stadt oder Region Ihrer Wahl!</h3> <map name="Landkarte"> <area shape="rect" coords="11,10,59,29" href="http://www.koblenz.de/" alt="Koblenz"> <area shape="rect" coords="42,36,96,57" href="http://www.wiesbaden.de/" alt="Wiesbaden"> <area shape="rect" coords="42,59,78,80" href="http://www.mainz.de/" alt="Mainz"> <area shape="rect" coords="100,26,152,58" href="http://www.frankfurt.de/" alt="Frankfurt"> <area shape="rect" coords="27,113,93,134" href="http://www.mannheim.de/" alt="Mannheim"> <area shape="rect" coords="100,138,163,159" href="http://www.heidelberg.de/" alt="Heidelberg"> <area shape="rect" coords="207,77,266,101" href="http://www.wuerzburg.de/" alt="Würzburg"> <area shape="rect" coords="282,62,344,85" href="http://www.bamberg.de/" alt="Bamberg"> <area shape="rect" coords="255,132,316,150" href="http://www.nuernberg.de/" alt="Nürnberg"> <area shape="rect" coords="78,182,132,200" href="http://www.karlsruhe.de/" alt="Karlsruhe"> <area shape="rect" coords="142,169,200,193" href="http://www.heilbronn.de/" alt="Heilbronn"> <area shape="rect" coords="140,209,198,230" href="http://www.stuttgart.de/" alt="Stuttgart"> <area shape="rect" coords="187,263,222,281" href="http://www.ulm.de/" alt="Ulm"> <area shape="rect" coords="249,278,304,297" href="http://www.augsburg.de/" alt="Augsburg"> <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"href="http://www.baden-aktuell.de/" alt="Baden"> </map> <p><img src="karte.gif" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte"></p> |
Schnell zur Stadt oder Region Ihrer Wahl!
|
Erläuterung:
Mit <map name="[Name]"> leiten Sie die Definition der verweis-sensitiven Flächen einer Grafik ein. Beim name-Attribut vergeben Sie einen Namen für die verweis-sensitive Grafik. Dieser Name muss nichts mit dem Dateinamen der Grafik zu tun haben. Es handelt sich vielmehr um einen Ankernamen, der die gleiche Bedeutung hat wie der Name in einem Anker innerhalb einer HTML-Datei. Vergeben Sie keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
Das map-Element kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei (also zwischen <body> und </body>) stehen. Es erzeugt selbst keine Bildschirmausgabe. Es empfiehlt sich jedoch, das Element an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B. am Anfang oder am Ende des Dateikörpers.
Zwischen dem einleitenden <map...> und dem abschließenden </map> definieren Sie die verweis-sensitiven Flächen. Mit <area...> definieren Sie einzelne verweis-sensitive Flächen einer bestimmten Grafik, die Sie an einer anderen Stelle einbinden.
Mit shape="rect" bestimmen Sie eine viereckige Fläche, mit shape="circle"einen Kreis, und mit shape="polygon" können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.
Bei coords= geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.
Mit dem Attribut href= bestimmen Sie das Verweisziel, das aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt.
Mit dem alt-Attribut notieren Sie Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d.h. Sie müssen es notieren, um gültiges HTML zu erzeugen.
Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags. Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie das Attribut usemap= notieren. Dieses Attribut erwartet als Wertzuweisung einen URI, der zu der Stelle führt, an der das zugehörige map-Element notiert ist. Normalerweise ist dieses Element in der gleichen Datei notiert. Deshalb besteht die Zuweisung einfach in einem Gatterzeichen # und dem Namen des Ankers, der bei <map name=> definiert wurde.
Um die gewünschten Pixelkoordinaten für verweis-sensitive Flächen einer Grafik zu erhalten, können Sie beispielsweise ein Grafikprogramm benutzen, bei dem Sie mit der Maus in der angezeigten Grafik herumfahren können und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommen.
| Dokumenttyp | Erklärung |
|---|---|
| Textdatei ( *.txt) |
<a href="irgendwas.txt">Textdatei</a>Eine Textdatei wird direkt im Browser als einfacher Text angezeigt. |
| Grafik ( *.gif, *.jpg) |
<a href="irgendwas.gif">Grafik</a>Die Grafik wird in den Browser geladen und angezeigt. |
| Video ( *.mpg, *.avi) |
<a href="irgendwas.avi">Video</a>Haben Sie ein entsprechendes Programm zum abspielen von Videodaten installiert, wird dieses geöffnet und das geladene Video abgespielt. |
| Musik ( *.mp3, *.wav) |
<a href="irgendwas.wav">Klang</a>Diese Dateien werden ebenso wie die Videodaten behandelt. Existiert ein entsprechendes Programm, weden die Musikdaten abgespielt. |
| Programm, Datendatei ( *.zip, *.gz, *.exe) |
<a href="irgendwas.zip">Download</a>Im Internet wird eine Vielzahl von Programmen angeboten, die sie auf Ihren Rechner überspielen können (Download). Häufig werden Dateien auch gepackt (*.zip, *.gz) abgelegt, um die Menge der zu übertragenen Daten zu verringern. |
| Andere Formate ( *.pdf, *.doc, *.xls) |
<a href="irgendwas.doc">Word</a>Befindet sich ein entsprechendes Programm auf Ihrem Rechner, dass diese Dateifotmate anzeigen kann, wird die Datei automatisch in das jeweilige Programm geladen bzw. direkt im Browser geöffnet. |
Die Programme zum Anzeigen der hier dargestellten Beispiele können von Computer zu Computer unterschiedlich sein. Abhängig ist dies von der jeweils installierten Software. Die Funktionsweise ist jedoch in der Regel dieselbe.
Möchten Sie mehrere Bilder über das Internet zur Verfügung stellen, ist die Erstellung einer Übersichtsseite zu empfehlen. Auf dieser befinden sich verkleinerte Versionen der originalen Bilder. Wenn Sie auf solch ein verkleinertes Bild klicken, wird die Originalversion der Grafik im Browswefenster geladen.
Diese Vorgehensweise ist aus zwei Gründen sinnvoll:Die verkleinerten Bilder werden auch Thumbnails (Daumennagel) genannt
Im folgenden ein Beispiel:
<h3>Meine Bildergalerie</h3> <p>Klicken Sie auf ein Bild, um es vergrößert zu sehen.</p> <a href="img/wueste.jpg"><img src="img/th_wueste.jpg" height="140" width="187" border="0"></a> <a href="img/img/blau.jpg"><img src="img/img/th_blau.jpg" height="140" width="187" border="0"></a> <a href="img/img/winter.jpg"><img src="img/img/th_winter.jpg" height="140" width="187" border="0"></a> <a href="img/img/land.jpg"><img src="img/img/th_land.jpg" height="140" width="187" border="0"></a> |
Meine BildergalerieKlicken Sie auf ein Bild, um es vergrößert zu sehen. 
|
