I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren


Hyperlinks - Multimedia

Funktion und Zweck
Absolute Links/Verweise
Relative Links/Verweise
Textmarken
E-Mail-Verweise
Bilder einfügen
Multimedia
Audios abspielen
Video einbinden 
Aufgaben

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. 

Sowohl Textstellen als auch Bilder können als Verweise markiert werden. Dazu fügen Sie vor den Text oder das Bild folgenden Befehl ein: <a href="*"> Der Befehl <a> steht für Anker bzw. Verweis legen, im Attribut href wird die Adresse der Datei angegeben. Hier kann man sowohl die absolute als auch die relative Adressierung eingeben. Den nun folgenden Text können Sie frei wählen.  Mit </a> wird der Befehl beendet. Anstelle von * geben Sie die Adresse ( URL) des Verweises an. 

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 

Absolute und relative Adressierung:
Beispiele unterschiedlicher Adressierung beim Telefon: 
Absolute Adressierung 0049-0-6221-385830. Egal von welchem Telefon oder von welcher Telefonzelle angerufen wird, erreicht man immer denselben Teilnehmer.
Relative Adressierung 385830. Je nachdem, von  welchem Telefon oder von welcher Telefonzelle man anruft, erreicht man einen anderen Teilnehmer.

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 

Bei der relativen Adressierung wird auf eine Datei im selben Verzeichnis bzw. auch auf über- oder untergeordnete Verzeichnisse verwiesen. Eine relative Adressierung kann nur hinter der Länderkennung vorgenommen werden.

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

Textmarken in HTML haben die gleiche Funktion wie Fußnoten in einem Textverarbeitungsprogramm. Man kann von jeder beliebigen Stelle innerhalb ein und derselben Datei springen. So wie dies hier möglich ist vom Anfang der Datei auf jede oben aufgeführte Überschrift zu springen und umgekehrt, wenn Sie auf das Wort "Top" klicken, dann geht es wieder an den Anfang der Datei. Wenn man Textmarken mit Verweisen kombiniert, dann kann man auch auf eine beliebige Stelle innerhalb einer anderen Datei springen. 

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

Sie können auf jede E-Mail-Adresse im Internet einen Link setzen. Eine Internet-gerechte E-Mail-Adresse erkennen Sie an dem Zeichen @ in der Mitte der Adresse. Links davon steht der Benutzername, rechts davon die Domain und die Länderkennung. Beispiel: lauer@johann-lauer.de

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

Bilder werden an einer beliebigen Stelle innerhalb der Datei mit dem Befehl <img src="../bilder/rechts.gif" alt="Pfeil nach rechts" width="10" height="10" border="0"> eingebunden werden, der Anwender sieht dann diesen Pfeil Pfeil nach rechts.

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

Das Einbinden von Multimedia-Objekten (Audio, Video, Animationen, Tabellen, Präsentations-, Vektor- und CAD-Grafik, 3D-Grafik, VRML-Dateien usw.) ist in HTML noch nicht standardisiert, d.h. von Browser zu Browser gibt es verschiedene  Befehle. Der Browser benötigt  ein entsprechendes Plug-In, um solche Dateien verarbeiten zu können (Zusatzprogramm, dass es dem Browser ermöglicht, bestimmte Dateiarten zu lesen und anzuzeigen).

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

Sie können in jede Datei eine Audio-Datei einbinden, diese wird vom Browser ausgeführt, sofern dieses Plug-In installiert ist. In diese Datei wurde als Hintergrundmusik ein Klavierstück von Clementi eingefügt. Sofern Ihr PC eine Soundkarte, Lautsprecher (diese müssen auch eingeschaltet sein) sowie das entsprechende Plug-In hat, können Sie Musik hören, nachdem diese Datei geladen wurde. Leider haben Netscape und Internet Explorer zwei unterschiedliche Befehle, daher sollten Sie, sofern Sie alle erreichen wollen, beide Befehle in Ihre Datei einfügen.

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

Der Befehl <img dynsrc="*.avi" src="*.gif" width="640" height="480" loop="infinite" start="mouseover" > integriert eine Video-Referenz (img bedeutet image bzw. Bild, dynsrc dynamic source bzw. dynamische Quelle). Hinter dem Istgleichzeichen folgt die Angabe der Videodatei. Es muss eine Datei vom Typ AVI sein.

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:

 

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.

Formulare Seite drucken Meta-Befehle
I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren
© Copyright by Johann-Lauer.de
Quelle: www.web-publishing.biz E-Mail: info@web-publishing.biz
Seitenanfang