Suche
So... hier folgt der fünfte Streich - der fünfte Teil der "Einführung in HTML" ist da. Er befasst sich mit dem Einbinden von Grafiken und mit Hyperlinks.
Was für Grafiken kann man nutzen?
Im Internet können gif-, jp(e)g-, und png-Dateien als Grafiken verwendet werden. Dabei ist zu beachten, dass der Internet Explorer 6 Transparent bei PNG-Grafiken nicht unterstützt.
Das img-Tag:
Das img-Tag ist ein "Standalone-Tag" (oder inhaltsleeres Element), was - wie ich ja schon beschrieben habe - bedeutet, dass es keine Anfangs- und End-Tags gibt.
Der Aufbau des img-Tags ist folgender:
<img src="" alt="">
Die Attribute "src" und "alt" müssen vorhanden sein. Das src-Attribut bestimmt, welche Grafik eingebunden wird. Das alt-Attribut beinhaltet eine Kurzbeschreibung des Bildes. Das alt-Attribut kann jedoch leer bleiben.
Weitere Attribute des img-Tag:
Weitere Attribute des img-Tag sind "width" und "height". Sie bestimmen, wie hoch und breit die Grafik sein soll. Man sollte aber kein riesen Bild klein anzeigen lassen oder anders rum - ein Browser ist keine Grafikbearbeitungssoftware.
<img src="Bild-URL" alt"" width="300px" height="100px">
In diesem Beispiel hätte die Grafik eine Breite von 300 Pixeln und eine Höhe von 100 Pixeln. Es sind Pixel- und Prozent-Angaben erlaubt.
Ein weiteres Attribut ist das title-Attribut. Es ist jedoch kein Attribut des img-Tags, sondern ein sogenanntes Universalattribut - also ein Attribut, welches für fast jedes Element verwendet werden kann.
Das title-Attribut im img-Tag erzeugt einen sogenannten Tooltip. Es wir bei einer alt-Angabe gerne leer gelassen, da der Internetexplorer den Inhalt des alt-Attributs als Tooltip verwendet, das title-Attribut jedoch höhere Priorität hat.
<img src="Bild-URL" alt="Bild eines Hundes" title="">"
Hyperlinks:
Hyperlinks verwendet man zum Navigieren auf Webseiten. Ihr Aufbau ist folgender:
<a href="">Text</a>
Das href-Attribut gibt das Ziel an - also auf welcher Seite man landet.
URL:
Es gibt verschiedene Wege, ans Ziel zu kommen. Es gibt sogenannte absoluten Angaben; sie setzen sich zusammen aus:
Protokoll + Seite + Ordner + Datei
http://196927.homepagemodules.de/f28-Tutorials.html
Und es gibt sogenannte relative Angaben:
../ (führt in das übergeordnete Verzeichnis)
ordner/datei.typ (führt zu der Datei datei.typ im untergeordneten Ordner ordner)
../bilder/bild.gif (führt zu der Grafik bil.gif im Ordner bilder im übergeordneten Ordner)
/ (führt in das Wurzelverzeichnis - also meist auf die index.htm)
Verknüpfen von Grafiken und Verweisen - Banner:
Hier mal mein Bannercode (zumindest mal ein Auszug):
2
3
<a href="http://stmaster.npage.de">
<img src="http://file1.npage.de/000156/28/bilder/banner4.png"
title="MyPage" alt="Banner der Seite stmaster.npage.de" /></a>
Erklärung:
Das img-Tag wird von den a-Tags umschlossen. Der Slash am Ende des img-Tags ist notwendig, damit der Banner nicht zu Fehlern auf xml-Seiten führt.
Wenn man mit der Maus darüberfährt bekommt man den Tooltip mit dem Inhalt "MyPage" angezeigt.
Wie schon bei den vorherigen Teilen gilt: bei Fragen bitte fragen 
