5. Das Einbinden von Hyperlinks und Grafik
Theorie! |
| Hyperlink | ||
|---|---|---|
| Interner Link
Ein interner Link greift auf eine Datei zu, die im gleichen Verzeichnis (Ordner) gespeichert ist. Besteht eine Website aus mehreren Seiten, dann lassen sich diese mit internen Hyperlinks verbinden. Ein interner Link hat folgende Strukur: <A HREF="Dateiname.htm">sichtbare Bezeichnung</A>
Beispiel:
Der Befehl hat folgende Form: |
Externer Link
Ein externer Link greift auf eine andere Website zu, die auch auf einem anderen Internetserver liegen kann. Hier reicht natürlich die Angabe des Dateinamens nicht, sondern es muss die komplette Internetadresse angegeben werden. Ein externer Link hat folgende Struktur: <A HREF="Internetadresse">sichtbare Bezeichnung</A>
Beispiel:
Der Befehl hat folgende Form: |
Erweiterung des Linkbefehls
Ein Klick auf einen Link in der links dargestellten Grundform bewirkt, dass im Browser eine neue Seite anstelle der alten aufgerufen wird. Die alte Seite wird verlassen und kann nur über den Zurück-Button im Browser, durch einen Link, der auf die zuvor besuchte Seite zurückführt oder durch die Neueingabe der Internetadresse wieder aufgerufen werden. Dies ist in vielen Fällen kein idealer Weg, denn hierdurch kann man Besucher verlieren, die in den Weiten des Internets abdriften. Die Lösung des Problems könnte darin bestehen, nach dem Klick auf den Link ein neues Browserfenster öffnen zu lassen, ohne das alte zu schließen. Dies kann einfach durch eine Erweiterung des Linkbefehls erreicht werden:
Die allgemeine Form lautet:
Beispiel:
Der Befehl hat folgende Form: |
| Grafik |
Einbindung eines Bildes oder einer Graphik
Soll ein Foto oder eine Grafik in eine Internetseite eingebaut werden, dann sollte sie vorher als jpg-Datei (besonders für Fotos geeignet) oder als gif-Datei (für Grafiken) gespeichert werden. Auf diese Datei setzt man dann im HTML-Dokument einen "Link", der aber nicht bewirken darf, dass eine neue Seite aufgerufen wird, sondern dass das Foto oder Bild auf der Seite direkt angezeigt wird. Hierzu kann der normale Link (siehe oben) nicht genutzt werden; es wird ein besonderer Befehl benötigt: GIF- oder JPG (JPEG)-Dateien lassen sich mit folgendem "Image"-Befehl auf Internetseiten anzeigen: <IMG src="Dateiname" ALT="Alternativtext"> Der Alternativtext wird dann gezeigt, wenn die Datei aus irgendwelchen Gründen nicht übertragen wird oder auch dann, wenn man mit dem Mauszeiger über die Grafik wandert. Dies ist besonders ideal, wenn zusätzliche Informationen über die Grafik angezeigt werden sollen.
Beispiel:  <IMG src="feuerw.gif" BORDER="0" width="50" HEIGHT="100" ALT="nettes Feuerwerk"> Es fällt auf, dass auch der Image-Befehl um einige Parameter erweitert werden kann (nicht muss!):
Tipp: Versuche nicht eine Grafik oder ein Bild durch Veränderung der Pixelwerte im Image-Befehl zu vergrößern oder auch zu verkleinern. Im ersten Fall verschlechtert sich die Qualität drastisch, im zweiten Fall wird die Grafikdatei hierdurch natürlich nicht kleiner; sie wird nur kleiner angezeigt. Sinnvoller wäre es, die Grafik selbst zu verkleinern. Dann wird sie auch schneller übertragen! |
Anklickbare Grafik
Nicht nur Textteile können als Hyperlink genutzt werden, sondern auch Bilder, Fotos oder Grafiken. An der Stelle des sichtbaren Textes wird im Linkbefehl ein Image-Befehl gesetzt. Dies soll an folgender anklickbaren Grafik verdeutlicht werden: <A HREF="http://www.meybohm.de"><IMG src="hedit2.gif" ALT="Link zur HTML-Editor-Homepage"></A> Der rot dargestellte Befehl ist der Hyperlink. Mit dem blauen Image-Befehl wird die Grafikdatei "hedit2.gif" angezeigt. Sie ist wie ein sichtbarer Text vom Hyperlinkbefehl eingeschlossen. Dieser Befehl sieht im Browser dann folgendermaßen aus:
 |
|---|
Praxis! |
Befehl |
erzeugter Quellcode |
Browserdarstellung |
 |
Bevor dieses Symbol zur Erstellung eines Hyperlinks angeklickt wird, sollte der Text, der "verlinkt" werden soll, markiert werden, z.B. Text: "Zur Homepage".
<a href="">Zur Homepage</a> Anschließend muss zwischen den Anführungsstrichen "" bei einem internen Link der Dateiname und bei einem externen Link die komplette URL (Internetadresse) einschließlich http:// eingefügt werden.
<a href="index.htm">Zur Homepage</a> (interner Link) |
|
| Ein interner Hyperlink kann noch einfacher erstellt werden, indem der Mauszeiger auf eine bestehende HTML-Datei aus der Dateiliste geführt wird. Danach ist die rechte Maustaste zu betätigen. Jetzt öffnet sich folgendes Kontextmenü:
 Ein Klick auf "Link einfügen <A HREF=>" erstellt den Link einschließlich des Dateinamens. |
||
 |
Diese Schaltfläche erzeugt den Image-Befehl, der eine Grafik auf einer Internetseite anzeigt.
<img src="" alt="" border="0"> Zwischen den Anführungszeichen von src="" muss der Name der Grafikdatei eingetragen werden. Der alt=""-Befehl nimmt den Alternativtext auf. Soll die Grafik einen Rahmen erhalten, dann muss bei border="0" die 0 gegen eine andere Zahl ersetzt werden (z.B. "1" für schmalen Rahmen, "2" für einen breiteren ...).
Beispiel: |
 |
| Tipp: Wenn du eine Grafik sehr schnell in dein HTML-Dokument einfügen willst, dann setze den Cursor im Quelltext an die richtige Stelle und klicke einfach auf die Grafikdatei in der Dateiliste (links). Der dann erzeugte Image-Befehl enthält alle notwendigen Angaben einschließlich der width=""- und height=""-Angaben für den Browser. Border und Alt kannst du nachträglich anpassen. <img src="neu.gif" width="50" height="40" border="0" alt=""> |
 |
|
 |
Dieses Symbol fügt den Mailto-Befehl in das HTML-Dokument ein. Soll beispielsweise deine eMailadresse für eine Kontaktaufnahme verwendet werden, dann solltest du diesen Befehl nutzen.
Ein Klick auf den Mailto-Link öffnet dann automatisch den eMail-Client. Die eMail-Adresse ist bereits im "An/To"-Feld eingetragen, und die Mail kann unmittelbar geschrieben werden. Bevor du den Befehl setzt, markiere den vorgesehenen Text, z.B. "Kontakt zum Webmaster". Ein Klick auf das Symbol setzt folgenden Befehl, den du um die eMailadresse erweitern musst:
<a href="mailto:">Kontakt zum Webmaster</a> |
Arbeitsaufgaben |
Beipiel:
Nutze das Symbol 
(Horizontale Leiste), um die Menüleiste von dem übrigen Text abzugrenzen!
Tipp: Solltest du ein Menü erstellt haben, dann kopiere den Code auf die anderen Seiten.
Home