Anmelden | Registrieren | FAQ
Anonymous
* Startseite
* Tutorials
* Foren
* Über
____________________ Suche
Startseite » Tutorials » HTML » Lektion 8: Links
Lektion 8: Links
In dieser Lektion werden Sie lernen, wie man Links zwischen
Internetseiten setzen kann.
Was brauche ich um einen Link zu erstellen?
Um Links zu erstellen, benutzen Sie, was Sie schon die ganze Zeit beim
HTML coden benutzen: ein Element. Ein einfaches Element mit einem
Attribut und Sie werden zu jeder Seite, die Sie wünschen, einen Link
setzen können. Hier ist ein Beispiel, wie z.B. ein Link zur Seite
HTML.net aussehen könnte:
Beispiel 1:
Hier ist ein Link zu HTML.net
sieht im Browser wie folgt aus:
Hier ist ein Link zu HTML.net
Das Element a steht für “anchor” (englisch für Anker). Das Attribut
href ist die Abkürzung für “Hypertext REFerence” und gibt an, wohin der
Link führen soll. Meist ist dies eine Internetadresse oder ein
Dateiname.
Im obigen Beispiel hat das Attribut den Wert “http://www.html.net”,
welches die voll ausgeschriebene Adresse von HTML.net ist. Diese werden
auch URL (Uniform Resource Locator) genannt. Bitte beachten Sie, dass
“http://” immer in den URLs angegeben werden muss. Der Satz “Hier ist
ein Link zu HTML.net” ist der Text, der vom Browser als Link
dargestellt wird. Nicht vergessen, das Element mit einem zu
schließen.
Was ist mit Links zwischen meinen eigenen Seiten?
Wenn Sie zwischen den Seiten der gleichen Webseite einen Link setzen
möchten, müssen Sie nicht die ganze Adresse (URL) ausschreiben. Wenn
Sie z.B. zwei Seiten erstellt haben (nehmen wir an, die eine heißt
page1.htm, die andere page2.htm) und diese sind im selben Ordner
gespeichert, dann ist im Link nur die Angabe des Dateinamens nötig.
Unter diesen Umständen sähe ein Link von page1.htm zu page2.htm so aus:
Beispiel 2:
Zur Seite 2
Wenn page2.htm in einen Unterordner mit dem Namen “ordner” liegen
würde, könnte ein Link so aussehen:
Beispiel 3:
Zur Seite 2
Umgekehrt würde ein Link von page2.htm (im Unterordner) zu page1.htm so
aussehen:
Beispiel 4:
Ein Link zur Seite 1
Das ”../” zeigt auf den Ordner eine Ebene über der Position der Datei
in der der Link eingefügt wurde. Mit dem gleichen System können Sie
auch zwei oder noch mehr Ebenen überspringen. Für zwei Ebenen würde
dies so aussehen: ”../../”.
Haben Sie das System verstanden? Als Alternative können Sie auch immer
die komplette Adresse (URL) des Linkziels verwenden.
Was ist mit internen Links innerhalb einer Seite?
Sie können auch interne Links kreieren – z.B. ein Inhaltsverzeichnis am
Anfang der Seite mit Links auf jedes nachfolgende Kapitel. Alles was
Sie dafür verwenden müssen, ist das sehr nützliche Attribut id
(“identification”) und die Raute (#).
Nutzen Sie das id-Attribut, um das Element zu markieren, welches Sie
verlinken möchten, z.B.:
Überschrift 1
Nun können Sie einen Link zu diesem Element erstellen, indem Sie die
Raute im Linkattribut verwenden. Das Rautezeichen ‘sagt’ dem Browser
gewissermaßen, dass er auf der gleichen Seite bleiben soll. Nach der
Raute muss die id des Tags folgen, auf den verlinkt werden soll, z.B.:
Link zur Überschrift 1
Klarer wird es sicherlich im folgenden Beispiel:
Beispiel 5:
Link zur Überschrift 1
Link zur Überschrift 2
Überschrift 1
Text text text text
Überschrift 2
Text text text text
sieht im Browser wie folgt aus:
Link zur Überschrift 1
Link zur Überschrift 2
Überschrift 1
Text text text text
Überschrift 2
Text text text text
(Bemerkung: Der Wert eines id-Attributes muss mit einem Buchstaben
beginnen)
Kann ich noch etwas anderes verlinken?
Sie können auch einen Link zu einer e-mail-Adresse erstellen. Das wird
nahezu genauso gemacht, wie ein Link zu einem Webdokument:
Beispiel 6:
e-mail an niemand at HTML.net senden
sieht im Browser wie folgt aus:
e-mail an niemand at HTML.net senden
Der einzige Unterschied zwischen einem Link zu einer e-mail-Adresse und
einem Link zu einer Webdatei ist der, dass man anstatt der Adresse des
Dokumentes “mailto:” gefolgt von der e-mail-Adresse schreibt. Wenn der
Link angeklickt wird, öffnet sich das Standard-e-mail-Programm mit
einer neuen leeren e-mail, die an die angegebene e-mail-Adresse
adressiert ist. Bitte beachten Sie, dass dies nur funktionieren kann,
wenn ein e-mail-Programm auf Ihrem Rechner installiert ist. Probieren
Sie es aus!
Gibt es noch irgendwelche Attribute von denen ich wissen sollte?
Um einen Link zu erstellen, müssen Sie immer das href-Attribut
verwenden. Zusätzlich dazu können Sie dem Link mit dem Attribut title
noch einen Titel geben:
Beispiel 7:
HTML.net
sieht im Browser wie folgt aus:
HTML.net
Das title-Attribut wird dazu benutzt, eine kurze Beschreibung des Links
zu geben. Wenn Sie den Mauszeiger – ohne zu klicken – auf dem Link
platzieren, erscheint der Text “HTML.net besuchen und HTML lernen”.
__________________________________________________________________
__________________________________________________________________
<< Lektion 7: Attribute
Lektion 9: Bilder >>
Tutorials
* HTML Tutorial
+ Einführung
+ Fangen wir an!
+ Was ist HTML?
+ Elemente und Tags
+ Ihre erste Webseite
+ Was Sie bisher gelernt haben!
+ Einige weitere Elemente
+ Attribute
+ Links
+ Bilder
+ Tabellen
+ Mehr über Tabellen
+ Layout (CSS)
+ Seiten ins Netz laden
+ Web-Standards und Validierung
+ Abschließende Hinweise
* CSS Tutorial
* PHP Tutorial
Sprache
[Deutsch___________] >>
Layout
[Default_______] >>
Übersetzung
Sven Albert-Pedersen
__________________________________________________________________
Wer ist online?:
Insgesamt sind 342 Besucher online: 3 registrierte, 0 unsichtbare und
339 Gäste
Der Besucherrekord liegt bei 819 Besuchern, die am Mo Okt 15, 2012 9:42
am gleichzeitig online waren.
Mitglieder: Google [Bot], Google Adsense [Bot], Guruman2
Statistik:
Beiträge insgesamt 9987 - Themen insgesamt: 4189
Mitglieder insgesamt: 10321 - Unser neuestes Mitglied: stumpht
Zeigt eine vollständige Liste aller Mitglieder an
Sprache:
العربية | Deutsch | English | Español | Français | עברית | Italiano |
Polski | Portgués (Brasil) | Русский | 中文 |