Samstag, 3. Mai 2014

Links in HTML

Um in HTML einen Link setzen zu können, muss zuerst ein Anker gesetzt werden, mit dem Tag <a> und </a>. In den Start-Tag hinter den a setzen wir eine Hypertext Reference mit der Abkürzung href=.

Link zu einer Webseite im Internet
Um jetzt z.B. einen Link auf meinen Blog zu setzen, fügen wir einfach die Adresse ein "http://m-xpro.blogspot.de/" ein. Damit der Link sichtbar wird, müssen wir den Link einen Namen geben, den wir zwischen den Start- und End-Tag schreiben. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p>Links</p>
  7.                 <a href="http://m-xpro.blogspot.de/">M-XPro</a>
  8.         </body>
  9. </html>

Für das Verlinken von Seiten muss immer in der Adresse “http://” angegeben werden.

Link zu einer eigenen Seite
Das Verlinken einer eigenen Seite auf der Homepage geht im Prinzip genauso wie das Verlinken einer Webseite aus dem Internet. Wir geben einfach den Namen der Seite als Hypertext Reference an. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p>Links</p>
  7.                 <a href="test.html">Testlink</a>
  8.         </body>
  9. </html>

Bei diesen Beispiel ist vorausgesetzt, dass die test.html im selben Verzeichnis ist, in der unser Beispielcode abgespeichert ist. Es ist auch möglich einen Link zu erstellen,  deren Datei in einen Unterverzeichnis ist.

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p>Links</p>
  7.                 <a href="unterverzeichnis/test.html">Testlink</a>
  8.         </body>
  9. </html>

Es ist natürlich auch möglich, einen Link in einen vorherigen Verzeichnis zu erstellen.

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p>Links</p>
  7.                 <a href="../test.html">Testlink</a>
  8.         </body>
  9. </html>


Natürlich ist es auch möglich ../ mehrfach zu verwenden, um mehrere Verzeichnisse zurück zu gehen. Hier noch ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <p>Links</p>
  7.                 <a href="../../testverzeichnis/test.html">Testlink</a>
  8.         </body>
  9. </html>


Bei diesen Beispiel gehen wir zwei Verzeichnisse zurück und in das Unterverzeichnis "testverzeichnis". Es ist natürlich auch möglich das komplette Verzeichnis anzugeben. Wenn sich aber unser Projektverzeichnis änder, müssen wir die Verzeichnisse der Links ändern, deren kompletten Pfade angegeben wurden.

Ein Bild als Link
Es ist auch möglich ein Bild für den Link zu verwenden. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <a href="test.html"><img src="bild.jpg" /></a>
  7.         </body>
  8. </html>

Das Tag img steht für Imge (Bild), src= ist ein Attribut das die Adresse/Verzeichnis des Bild erwartet. Wie wir sehen ist <img /> ein Tag ist das gleichzeitig Start- und auch End-Tag ist, wie <br /> auch. Oft möchte man die Bilder für einen Link kleiner haben, dies ist auch kein Problem. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <a href="test.html"><img src="bild.jpg" width="112" height="268"></a>
  7.         </body>
  8. </html>

Mit den Attributen width und height können wir die Bildgröße nach belieben anpassen.

Links innerhalb einer Seite
Es ist natürlich auch möglich innerhalb einer Seite einen Link zu setzen, dies bewerkstelligen wir mit einer ID. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <a href="#pos1">Link 1</a><br />
  7.                 <a href="#pos2">Link 2</a>
  8.                 <p id="pos1"> Position des ersten Links </p>
  9.                 <p id="pos2"> Position des zweiten Links </p>
  10.         </body>
  11. </html>

Der Hypertext Reference übergeben wir dieses mal keine Adresse sondern eine ID die wir am Anfang mit einen # markieren. Eine ID muss immer mit einen Buchstaben beginnen. In den Tag das wir verlinken wollen, schreiben wir id= gefolgt von der gewünschten ID.
In den Beispiel wird man den Sprung auf die ID nicht sehen, da die Seitenzeilen zu gering sind. Wer es aber testen möchte kann einige Zeilenumbrüche mit <br /> einfügen um es zu testen.

Verlinken einer E-Mail-Adresse
Es ist uns auch möglich eine E-Mail-Adresse zu verlinken. Hier ein Beispiel:

  1. <html>
  2.         <head>
  3.                 <title> Meine erste Homepage! </title>
  4.         </head
  5.         <body>
  6.                 <a href="mailto:mailadresse@gmail.de">
  7.                  e-mail an mailadresse@gmail.de senden</a>
  8.         </body>
  9. </html>

Jetzt übergeben wir einfach der Hypertext Reference mailto: gefolgt mit der gewünschte E-Mail-Adresse.
Eingestellt von um
Labels: , ,

Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)