Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:hyperlinks [2021/01/08 10:09] – lutz
+++ html:hyperlinks [2024/02/02 12:34] (aktuell) – [Aufgaben] lutz
@@ Zeile 7: / Zeile 7: @@
 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>%%''.
+  * **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**
-  * **Links auf eine Seite im Internet**
+  * **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. ~~ -->