Einführung in HTML - Bilder und Hyperlinks

#1 von STMaster , 03.10.2009 09:22

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:

1
<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.

1
<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.

1
<img src="Bild-URL" alt="Bild eines Hundes" title="">"




Hyperlinks:

Hyperlinks verwendet man zum Navigieren auf Webseiten. Ihr Aufbau ist folgender:

1
<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

1
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):

1
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


Ich wünschte, meine Pizza wäre ein EMO. Dann würde sie sich selber schneiden.

 
STMaster
Meister
Beiträge: 401
Registriert am: 26.09.2009

zuletzt bearbeitet 03.10.2009 | Top

   

Einführung in HTML - Kopfdaten
Einführung in HTML - Tabellen

Counter

free counters
Xobor Einfach ein eigenes Forum erstellen | ©Xobor.de