Funktion und Zweck

Links, englische Bezeichnung für Verbindungen, auch Verweise bzw. Verknüpfungen genannt, machen das Faszinierende an Internetseiten aus: Sie verbinden die Dateien so, dass man mit einem Mausklick auf einer anderen Datei landen kann, egal auf welchem Rechner in der Erde sich diese Datei befindet. Wenn sich die Datei auf einem anderen Rechner befindet, dann spricht man von einem absoluten Link. Wenn der Link innerhalb einer Homepage bzw. auf demselben Rechner zum Navigieren benutzt wird, dann handelt es sich um einen relativen Verweis. Mit einem Klick auf einen Link z.B. auf der Startseite gelangt Ihr Besucher zu den Themenseiten und später mit einem Klick wieder zum Ausgangspunkt zurück.

Mit Hilfe von Hyperlinks kann man auch andere Dateien einbinden. In der Regel besteht jede Bildschirmseite aus mehreren Dateien. Die Bildschirmseite besteht aus einer HTML-Datei, in der sich der Text, die Befehle zur Textformatierung und weitere Befehle befinden, die dem Browser sagen, füge mir z.B. ein Bild oder ein Video ein. 

Mit Hilfe des Anker-Befehl können Sie Dateien in jedem beliebigen Format zum Runterladen (download) bereitstellen. Dazu müssen Sie erst einmal diese Dateien in einem Ordner speichern, dann können Sie aus einer Datei einen Verweis auf diese Datei legen. Wenn der Nutzer draufklickt, dann kann er entweder die Datei öffnen, sofern er das entsprechende Programm auf seinem Rechner hat, oder er kann diese Datei speichern.

Der Befehl zur Bereitstellung von Dateien (Format spielt keine Rolle, es muss keine doc-Datei sein) lautet: 
<a href="../daten/Web-Publishing.doc">Web-Publishing.doc</a>

Beispiel: Ich habe auf meinem Server im Ordner "daten" die Word-Datei "Web-Publishing.doc" zum Runterladen bereitgestellt, wenn Sie jetzt draufklicken, dann können Sie sich diese Datei runterladen. 

Absolute Links/Verweise 

Genau wie beim Telefon hat jede Datei, mittlerweile gibt es Milliarden von Dateien weltweit, einen eigenständigen Adressen-  oder Verzeichnispfad, die so genannte URL (URL ). Zwei Dateien können nicht dieselbe Adresse haben. 

Bei der absoluten Adressierung wird die gesamte URL einer Datei angegeben. 
Beispiel: <a href="http://www.web-publishing.biz"> Einführung in Web Publishing</a>. Der Anwender sieht nur folgendes: Einführung in Web Publishing

Relative Links/Verweise 

Folgende relative Adressierungen sind möglich und können als Wert des Attributs href= angeführt werden:

• 1. Fall:  "datei.htm", sofern beide Dateien (z.B. formular.htm und tabelle.htm) im gleichen Verzeichnis sind, muss man nur den Dateinamen angeben. Sofern Sie alle Aufgaben gemacht haben, sieht es dann wie folgt aus:
  /test/htm/tabelle.htm
  /test/htm/formulare.htm 
  Vollständiger Befehl von der Datei "formulare.htm" zu "tabelle.htm": 
  <a href="tabelle.htm">Hier geht es zur Tabelle</a>
• 2. Fall: "verzeichnis/datei.htm", sofern die Datei in einem anderen Verzeichnis ist, muss erstens das Verzeichnis und zweitens der Dateiname angegeben werden.
  /test/start.htm
  /test/htm/tabelle.htm 
  Vollständiger Befehl von der Datei "start.htm" zu "tabelle.htm: 
  <a href="htm/tabelle.htm">Tabelle</a>
  Wenn Sie auf eine Datei verweisen wollen, die zwei oder mehrere Unterverzeichnisse tiefer liegt, dann müssen Sie alle Verzeichnisse angeben.
  /test/start.htm 
  /test/htm/technik/projekt/werkzeuge.htm
  Vollständiger Befehl von der Datei "start.htm" zu "werkzeuge.htm":
  <a href="htm/technik/projekt/werkzeuge.htm">Werkzeuge</a>
• 3. Fall: "../datei.htm", sofern aus einem Unterverzeichnis auf eine Datei verwiesen wird, die sich in einem höheren Verzeichnis befindet. 
  /test/htm/tabelle.htm 
  /test/start.htm
  Vollständiger Befehl von der Datei "tabelle.htm" zu start.htm :
  <a href="../start.htm">Tabelle</a>
  Sofern Sie mit mehreren Unterverzeichnissen arbeiten, müssen Sie, wenn Sie z.B. zwei Ebenen höher wollen, ../../ eingeben, jeweils ../ (zwei Punkte) für eine Ebene.
  /test/htm/technik/werkzeuge.htm
  /test/text.htm 
  Vollständiger Befehl von der Datei "werkzeuge.htm" zu "start.htm":
  <a href="../../text.htm">Begriffe</a>
• 4. Fall: "../Verzeichnis/datei.htm", sofern von einer Datei aus einem Unterverzeichnis auf eine Datei in einem anderen Unterverzeichnis verwiesen wird.
  /test/htm/formulare.htm
  /test/daten/begriffe.htm 
  Vollständiger Befehl von der Datei "formulare.htm" zu "begriffe.htm":
  <a href="../daten/begriffe.htm">Begriffe</a>
  

Textmarken

Als erstes muss man das Ziel festlegen, dann muss man einen Link auf dieses Ziel setzen. In dieser Datei bin ich wie folgt vorgegangen: Ich habe am Anfang der Datei ein Ziel gesetzt mit dem Befehl <a name="oben"></a>, dann  das Wort "Top" mit dem Anker-Befehl umklammert: <a href="#oben">Top</a>. Wenn Sie jetzt auf das Wort "Top" klicken, dann  springt der Browser nach oben.

Sowohl der Wert (in diesem Fall das Wort "oben") als auch der Hinweis für den Anwender (in diesem Fall das Wort "Top") kann frei gewählt werden. Bei den Überschriften bin ich wie folgt vorgegangen: Zuerst auf die Überschrift im Text eine Textmarke mit dem Befehl <a name="Textmarken">Textmarken</a> gelegt, dann oben bei den Überschriften folgenden Befehl eingegeben: <a href="#Textmarken">Textmarken</a>

Von dieser Datei wurde oben auf die Datei "grundbegriffe.htm" und zwar an die Stelle verwiesen, wo die URL erklärt wird, und zwar mit folgendem Befehl: <a href="grundbegriffe.htm#URL">URL</a> 

E-Mail-Links

Anbieter benutzen E-Mail-Verweise, um Besuchern die Möglichkeit zum Feedback zu bieten. Wenn im Quellcode  "<a href="mailto:lauer@johann-lauer.de">Schreiben Sie mir </a>", dann sieht der Anwender Schreiben Sie mir. 

Sie können aber auch E-Mail-Verweise zu anderen E-Mail-Adressen anbieten. Man sollte im Linktext möglichst noch einmal die E-Mail-Adresse explizit schreiben (E-Mail: Lauer@johann-lauer.de), damit der Anwender auch separat eine E-Mail senden kann, sofern der E-Mail-Verweis nicht ausführbar ist (z.B. in öffentlichen Einrichtungen ist diese Funktion unterdrückt, damit man nicht die E-Mail-Adresse dieser Institution missbraucht).

Wenn der Anwender auf den Link klickt, kann er eine E-Mail an den betreffenden Empfänger absetzen. Der Link ist bei Anwendern nur ausführbar, wenn der WWW-Browser das Erstellen und Absenden von E-Mails unterstützt (Netscape), oder wenn bei solchen Verweisen automatisch ein E-Mail-Programm gestartet wird (Internet Explorer).

Bilder, Graphiken und Buttoms einfügen

Der Befehl img bedeutet image bzw. Bild. Der Wert des Attributs "src" (source bzw. Quelle) enthält in Anführungszeichen die URL  (URL ) der Bilddatei. Hinter src="*" können noch weitere Attribute erscheinen und auch beliebig miteinander kombiniert werden: alt (alternative). Wenn der Anwender mit der Maus auf das Bild geht, dann erscheint der Alternativtext in einem Kasten. Mit width (Breite) bzw. height (Höhe) können Sie eine bestimmte Größe des Bildes in Pixeln erzwingen. Normalerweise wird ein Bild in der Originalgröße angezeigt. So können Sie aber ein quadratisches Bild zum langen Rechteck machen, vergrößern oder verkleinern. Wenn Sie entweder nur die Breite oder nur die Höhe angeben, wird die andere Seite proportional angepasst. 

hspace bedeutet horizontal space bzw. horizontaler Abstand, vspace bedeutet vertical space bzw. vertikaler Abstand. Damit  legen Sie den Abstand des Bildes zu seiner Umgebung in Pixeln fest (hspace waagerecht; vspace senkrecht). border="0" border bedeutet Umrandung. Wenn Sie Bilder als Verweis markieren, erscheint ein farbiger Rahmen um das Bild. Dieser kann oft sehr störend wirken, dann sollten Sie im Bild-Tag die Option border=0 einfügen, damit wird dieser Rahmen unterdrückt.

Bilder auf Internet-Seiten sind immer GIF- oder JPEG-Dateien (Dateiendung .gif oder .jpg/.jpeg). Andere Formate werden von den meisten Browsern nicht verstanden.

Multimedia

Mit <embed src="*" width"*" height="*" align="left"> (embed bedeutet einbetten) fügen Sie eine solche Multimediadatei ein. Für Stern setzen Sie die Adresse der Datei ein. Dafür gilt dasselbe wie für Bild-Quellen.
Bei Multimediadateien, die direkt im Browser-Fenster angezeigt werden, können folgende Attribute eingefügt werden:

• width="*" damit legen Sie die Breite der Anzeigefläche der Datei in Pixeln fest.
• height="*" damit legen Sie die Höhe der Anzeigefläche der Datei in Pixeln fest.
• align="*", mögliche Werte sind middle, left und right. Der nachfolgende Text beginnt:
• auf halber Höhe rechts (middle).
• rechts oben am Rand (left). Datei ist linksbündig ausgerichtet.
• links oben am Rand (right). Datei ist rechtsbündig ausgerichtet.

Audio abspielen

Damit dies mit dem Internet Explorer geht, wurde im Dateikopf (zwischen <head> und </head>) der Befehl <BGSOUND SRC="../multimedia/clementi.mid" LOOP="3"> eingegeben. Für die Angabe des Dateinamens dasselbe, wie für ( Bild-Quellen).
Übliche Formate für Sound-Dateien sind Midi-, MP3- und Wave-Dateien  (Endungen  .mid und .mp3). Das Attribut loop (loop bedeutet Schleife) legt die Anzahl der Wiederholungen fest. loop=infinite bedeutet, dass die Musik immer wieder hintereinander abgespielt wird.

Damit die Datei auch in Netscape abgespielt wird, muss folgender Befehl eingegeben werden:
<EMBED SRC="../multimedia/clementi.mid" AUTOSTART="TRUE" width="80" height="80">
Sie können mit Hilfe dieser Graphik die Datei starten und abbrechen. Diese Grafik wird nicht von allen Versionen des Internet Explorer richtig wiedergegeben.

Videos einbinden

Mit width (Breite) bzw. height (Höhe) können sie eine bestimmte Größe des Bildes in Pixeln erzwingen. Normalerweise wird ein Bild in der Originalgröße angezeigt. Mit loop (loop = Schleife) können Sie die Wiederholungsanzahl der Abspielvorgänge beeinflussen . Mit loop="infinite" bewirken Sie, daß das Video solange abgespielt wird, wie sich der Anwender die HTML-Datei anzeigen lässt. Mit src (src bedeutet source bzw. Quelle) können Sie zusätzlich eine Grafikdatei angeben, die alternativ angezeigt wird. Das Bild wird nur dann angezeigt, wenn das bei dynsrc angegebene Video nicht angezeigt werden kann. start="mouseover" legt fest, dass das Video erst dann abgespielt wird, wenn sich die Maus im Anzeigebereich des Videos befindet.

Mit dem Attribut controls bewirken Sie, dass dem Anwender Kontrollfunktionen zur Verfügung stehen. Der Anwender kann das Video dann z.B. anhalten und fortsetzen, schnell vorwärts und rückwärts laufen lassen oder abbrechen.

Hier finden Sie mehrere Video-Clips:

• PC-Freuden - Größe 1,5 MB
• Video über Frankfurt - Größe 2,8 MB
• Vorführung Polizei - Größe 1,3 MB

Aufgaben

1. Legen Sie in der Datei "start.htm" einen absoluten Link auf Web-Publishing, hier finden Sie die Adresse: http://www.web-publishing.biz
2. 1. Fall: Fügen Sie in der Datei "formulare.htm" einen relativen Link auf die Datei "tabelle.htm" und umgekehrt.
3. 2. Fall: Fügen Sie in der Datei "start.htm" relative Links auf folgende Dateien "formulare.htm", "begriffe.htm" und "tabelle.htm".
4. 3. Fall: Fügen Sie in den Dateien "formulare.htm", "begriffe.htm" und "tabelle.htm" relative Links auf die Datei "start.htm".
5. 4. Fall: Fügen Sie in der Datei "formulare.htm" einen relativen Link auf die Datei "begriffe.htm". Sobald Sie alle Links gesetzt haben, können Sie per Mausklick in allen vier bisher erstellten Dateien navigieren.
6. Bitte laden Sie die Word-Datei "Web-Publishing.doc" auf Ihren PC runter in den Ordner "daten" und öffnen Sie diese Datei anschließend mit Word. 
7. Kopieren Sie in den Ordner "daten" Dateien Ihrer Wahl (Word, Excell, CAD). Legen Sie in der Datei "start.htm" Links auf diese Dateien, so dass diese Datei zum runterladen bereitstehen.
8. Setzten Sie in der Datei "begriffe.htm" mehrere Textmarken, so wie dies von mir in jeder Datei gemacht wurde. Der Text sollte mindestens zwei oder drei Bildschirmseiten lang sein, sonst können Sie die Wirkung nicht nachvollziehen, weil man nur springen kann, wenn die Datei mehr als eine Bildschirmseite hat. 
9. Setzen Sie von der Datei "start.htm" einen Link auf eine Textmarke aus der Datei "begriffe.htm".
10. Fügen Sie in Ihre Dateien E-Mail-Links ein, verwenden Sie dabei unterschiedliche E-Mail-Adressen.
11. Erstellen Sie im Ordner/Verzeichnis "test" ein Unterverzeichnis "bilder" und eins "multimedia". 
12. Kopieren Sie aus dem Internet ( Internet-Quellen) mehrere Bilder, Graphiken oder Buttons in das Verzeichnis "bilder". Bilder können wie folgt runtergeladen (downloaden) werden: Mit der Maus auf das Bild gehen, dann rechte Maustaste drücken und "Bild speichern unter" (Internet Explorer) oder "Graphik speichern unter" (Netscape) klicken, danach wählen Sie den Ordner "bilder" auf Ihrem Arbeitsplatz und drücken "Speichern". Achten Sie darauf, dass es sich um JPG- oder GIF-Dateien handelt, sofern Sie eigene Bilder verwenden. Unter dieser Adresse finden Sie ein gut sortiertes, umfangreiches und kostenloses Bildarchiv von Kneller (http://home.t-online.de/home/kneller/).
13. Fügen Sie in alle bisher erstellten Dateien jeweils ein Bild aus Ihrem eigenen Ordner "bilder" ein. 
14. Binden Sie mein Logo in einer Ihrer Dateien ein, die URL lautet: http://www.johann-lauer.de/bilder/buecher.gif
15. Kopieren Sie aus dem Internet Audio- und Videodateien auch in den Ordner "multimedia" ( Internet-Quellen).
16. Binden Sie in eine Datei Ihrer Wahl jeweils eine Audio und eine Videodatei ein.