HTML - Kurs 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="http://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:

Redaktion

Nach dem Klicken öffnet sich ein Fenster. Dies sieht bei unserem Redaktionspc in etwa so aus:

Eine Email an die Redaktion
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 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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: