Wiki zum Unterricht

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
=======Hyperlinks======

Ein wesentlicher Inhalt von HTML-Seiten sind **Hyperlinks**. Mit dem Klick auf einen Hyperlink gelangt man sofort zu einer anderen HTML-Seite oder zu einer Stelle innerhalb derselben HTML-Seite. 

Für Links benutzt man der Tag ''%%<a></a>%%'' (Anchor). Texte die zwischen ''%%<a>%%'' und ''%%</a>%%'' stehen, werden hervorgehoben und können mit der Maus angeklickt werden, wenn ein Linkziel (Eigenschaft ''%%href%%'') angegeben ist, ansonsten wird er nicht angezeigt.

Wir unterscheiden drei Arten von Links:

  * **Interne Links** \\ Bei internen Links steht im Anchor-Tag der Zielname hinter dem Zeichen # z.B. ''%%<a href=#ziel>%%''. Das Ziel muss dann in einen weiteren Anchor-Tag auf derselben Seite definiert werden. Dazu verwendet man die Eigenschaft ''%%id%%'' und den Zielnamen gibt man ohne das Zeichen # an, also für unseren Link würde das so aussehen: ''%%<a id="ziel"></a>%%''.


  * **Links auf eine andere HTML-Datei** \\ Bei Links auf eine andere HTML-Datei gibt man bei ''%%href%%'' den Dateinamen an. Die Datei muss dabei im selben Ordner liegen, oder man muss den Pfad zur Datei im Dateisystem mit angeben, also z.B. ''%%<a href="index.html">%%''.


  * **Links auf eine Seite im Internet** \\ Bei Links auf eine Seite im Internet gibt man bei ''%%href%%'' die Adresse (URL) der Seite an, also z.B. ''%%<a href="https://herrmix.de">%%''.

Beispiel

Die vielen ''%%<br>%%''-Tags im Beispiel dienen dazu, dass man die Wirkung des internen Links sieht. Die Datei **first.html** muss im selben Ordner liegen.

<code html hyperlinks1.html>
<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hyperlinks </title>
  </head >
  <body>
    <h1> Hyperlinks </h1>
      <!--Interner Link-->
      <a href = "#ende" > Zum Ende dieser Seite ! </a> <br>
      <!--Link auf eine andere HTML-Datei-->
      <a href = "first.html" >Zu meiner ersten HTML - Seite ! </a> <br>
      <!--Link auf eine Seite im Internet-->
      <a href = "https://www.google.de" >Zu Google ! </a> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
      <!--Linkziel-->
      <a id = "ende" ></a> Ende dieser Seite !
  </body>
</html>
</code>

=====Erklärvideo=====

{{youtube>EQ91ufbuxXs}}

\\

=====Aufgaben=====

**Aufgabe 1**

Teste das Beispiel!


**Aufgabe 2**

  * Kopiere alle bisher von dir erstellten HTML-Dateien in einen Ordner **html**. 
  * Erstelle in diesem Ordner eine HTML-Datei mit den folgenden Inhalt:
    * Am Anfang der Seite sind zwei Links zu Sprungzielen auf der Seite. Bei einem der Sprungziele steht die Überschrift "Meine bisherigen Seiten", beim zweiten steht die Überschrift "Meine Lieblingsseiten" im Internet.
    * Unter der ersten Überschrift sollen Links zu einigen Dateien erscheinen, die wir bisher erstellt haben.
    * Unter der zweiten Überschrift sollen Links zu mindestens 5 deiner Lieblingsseiten im Internet erscheinen.
    * Füge zwischen allen Überschriften viele ''%%<br>%%''-Tags ein, so dass die Wirkung der internen Links sichtbar wird. (In meinen Bild habe ich dass nicht gemacht, damit die Seite in ihrer Gesamtübersicht sichtbar ist.)

{{ :html:hyperlinks_au2.png?direct&400 |}}

[[html:loesungen:hyperlinks| >> Lösungen]]

[[html:bilder| >> Bilder und Imagemaps]]

\\

<!-- ~~DISCUSSION | Hier können Fragen zum Inhalt der Seite gestellt werden. ~~ -->