Man muss zwischen einzelnen Dokumenten navigieren können. Es kann nicht aller Inhalt in einem HTML-Dokument gespeichert sein. Wie Sie diese sogenannten Links erzeugen erfahren Sie im fünften Teil des HTML Kurses.
Wenn Sie im Internet "Surfen", dann können Sie sich
innerhalb einer Seite, von einem Artikel zum anderen durchklicken
(wie Sie es gerade getan haben).
Das gesamte Prinzip ist sehr einfach, indem man durch Links navigiert.
Diese Links sind Texte oder Grafiken. Klickt man auf einen solchen
Link, dann wird darauf eine andere Seite geöffnet, wie z.B.
in unserem Menü. Klicken Sie auf den Menüpunkt "HTML",
dann kommen Sie auf die Index-Seite.
Ein Link ist schnell gemacht. Legen Sie zwei neue Seiten an. Die
eine bekommt den Dateinamen "seite_1.html", die andere
heißt "seite_2.html", beide Seiten sollten im gleichen
Verzeichnis gespeichert sein.
Geben Sie in die jeweilige Seite folgenden Code ein.
seite_1.html:
<html>
<head>
<title>Seite 1</title>
</head>
<body>
<a href="seite_2.html">Zur
Seite 2</a>
</body>
</html>
seite_2.html
<html>
<head>
<title>Seite 2</title>
</head>
<body>
<a href="seite_1.html">Zur
Seite 1</a>
</body>
</html>
Speichern Sie diese Beispiele
ab, und öffnen Sie dann eine der Seiten mit ihrem Browser.
Wenn Sie jetzt auf den Link, den Sie erstellt haben, klicken, dann
wird die jeweilige Seite aufgerufen. Starten Sie Seite 1, dann wird
die Seite 2 aufgerufen, und andersherum. Sie können zwischen
den einzelnen Seiten navigieren. Wie Sie im Code gesehen haben,
ist der Code teil <a href=""></a>
für die Links "verantwortlich". Das Attribut "href"
des <a> Tags gibt die Adresse der Datei an, zu welcher
gelinkt werden soll. Möchten Sie auf devmag.net einen Link
setzten, dann sähe der Code so aus:
<a href="https://www.devmag.net">devmag.net</a>
Sie würden nach dem Klicken dieses Linkes auf die Startseite
von devmag.net kommen. Bestimmt haben Sie schon oft gesehen, das
sich Links auch in einem neuen Fenster öffnen können.
Hierzu können Sie das "target" Attribut setzten.
Der Name erklärt es eigentlich schon, sie können mit ihm
das Ziel eines Linkes definieren. Dieses Attribut ist auch wichtig
bei der Arbeit mit Frames, da man mit ihm das Frame festlegen kann,
in welchem der Link geöffnet werden kann. Werte für das
target – Attribut sind:
target = "_blank"
Der Link wird in einem neuen Fenster geöffnet.
target = "_parent"
Das Zieldokument ersetzt das aktuelle Frameset-Dokument.
target = "_self"
Das Zieldokument ersetzt das aktuelle Dokument in seinem Fenster
oder Frame.
target = "_top"
Das Zieldokument nimmt das gesamte Fenster ein, und ersetzt das
gesamte Browserfenster (auch bei Frameseiten).
Links zu Ankern
Es gibt eine weitere Möglichkeit zu navigieren, nämlich
anhand von Ankern.
Anker sind Positionen innerhalb einer Seite. Man setzt beispielsweise
eine Position am oberen Ende der Seite, und kann über einen
Link zu dieser Position springen. Ein solcher Link kann sich beispielsweise
am Ende der Seite befinden, und an den Anfang der Seite weisen.
Ein Anker wird wie folgt definiert:
<a name="name"></a>
Mit dem in dem name="" – Attríbut definierten Namen
kann man auf den Anker linken. EIn Link zu einem Anker wird ganz
einfach gesetzt:
<a href="#name">Zum Anker</a>
Bei dem href – Attribut müssen Sie den Namen des Ankers nach
einem # eintragen, und schon weißt der Link zu dem Anker.
So kann man auf langen HTML Seiten schnell ebenfalls navigieren.
Links zu Emails
Sie haben bestimmt schon einmal auf einen Link geklickt, worauf
sich das Fenster ihres Mail-Programms öffnete, und sie eine
Email an die eingetragene Adresse schreiben konnten. Ein solcher
Link sieht in etwa so aus:
Nach dem Klicken öffnet sich ein Fenster. Dies sieht bei unserem
Redaktionspc in etwa so aus:
Eine Email an die Redaktion
Der Code für einen solchen Link sieht so aus:
<a href="mailto: emailadresse">Email schreiben…</a>
Ein Navigationsmenü mit Listen
Als letztes wollen wir ein kleines Navigationsmenü gestalten.
Hierzu lernen Sie ebenfalls einen neuen Tag kennen, den Listentag.
Aus Textverarbeitungsprogrammen ist ihnen wahrscheinlich bekannt,
das Sie Auflistungen erzeugen können. Genau das kann man auch
mit HTML. Eine Navigation die mit Listen arbeitet könnte so
aussehen.
Eine Navigation
Eine Liste wird mit dem HTML-Tag <ul> erzeugt. Ein Element
einer Liste wird mit dem Element <li> erzeugt. Ein Beispiel:
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
</ul>
Das Ergebnis sieht in etwa so aus:
- Erstes Element
- Zweites Element
Dies kann man natürlich auch noch mit Links ausstatten, und
schon hat man ein kleines Menü.
<ul>
<li><a href="link1.htm">Erster Link</a></li>
<li><a href="link2.htm">Zweiter Link</a></li>
</ul>
Das Ergebnis ist ein kleines Menü mit zwei Links in einer Auflistung.
Eine kleine Variation, wie oben im Beispiel erreichen sie mit diesem
Code:
<ul>
<li><a href="link_1.htm">Link 1</a></li>
<li><a href="link_2.htm">Link 2</a></li><br><br>
<li><a href="link_3.htm">Link 3</a></li>
<li><a href="link_4.htm">Link 4</a></li>
<li><a href="link_5.htm">Link 5</a></li>
<li><a href="link_6.htm">Link 6</a></li>
</ul>
Das war der HTML Grundkurs. Mit dem Basiswissen sollten Sie einen
ausführlichen Einstieg in die Metasprache HTML erhalten haben.
Weiterhin viel Spass wünscht das komplette Team.