HTML Image

Im Moment muss ich mich gerade mit Dingen beschäftigen von denen ich echt kaum Ahnung habe. Da wäre es nett von euch wenn ihr das mal näher erklären könnt. Was ist zum Beispiel bei HTML die Image Funktion, also wie geht das richtig? Bei mir wird da nie ein Bild, sondern immer nur der Link zum Bild angezeigt!

Ich müsste das wissen aber ich kann das einfach nicht! Es wäre sehr lieb wenn ihr mir das in wenigen einfachen Worten erklären könnt. Ich muss darüber nicht perfekt Bescheid wissen, mir würde es schon genügen wenn ich so ungefähr weiss worum es da geht.

In HTML werden werden Bilder durch den Tag <img> aufgerufen. Wenn dein Bild zum Beispiel "Blume1.jpg" heißt und sich im Ordner "Images" befindet, muss der vollständige Tag heißen <img src="Images/Blume1.jpg">

Wenn du einen Link zum anklicken erhälst, dann nutzt du den <a>-Tag, den man nur für Hyperlinks benötigt. Sollte das Bild als Hyperlink dienen sollen, dann sieht der gesamte Tag so aus:

Code: Alles auswählen

<a href="http://blumenbeispiel.de"><img src="Images/Blume1.jpg"></a>

Für Bilder benutzt man den img-Tag. Laut den W3C-Spezifikationen "Strict" und "Transitional" gehören dazu die folgenden Attribute: src, alt, width, height, title und border. Dabei sind src und alt zwingend vorgeschrieben.

Die Attribute dienen folgenden Zwecken:

src
Hier ist der Pfad zum Bild angegeben. Man unterscheidet zwischen relativen und absoluten Pfadangaben. Eine absolute Pfadangabe enthält den gesamten Pfad, also zum Beispiel "C:\Pfad\zum\Bild.jpg" oder aber auch eine Webadresse. Eine relative Pfadangabe enthält nur den Weg von der HTML-Seite selbst bist zum Bild. Liegt das Bild im gleichen Ordner, dann sähe das so aus: "bild.bmp". Normalerweise legt man Bilder in Unterordner; befindet es sich im Ordner "images", der sich wiederum im gleichen Ordner wie die HTML-Seite befindet, dann heißt die Pfadangabe "images/bild.bmp". Musst du in einen darüberliegenden Ordner wechseln, dann benutzt du "..", also etwa so: "../images/bild.bmp".

alt
Hier wird der Alternativtext angezeigt, falls das Bild nicht geladen werden kann. Dabei sollte dieser Text das Bild beschreiben und nicht etwa "Fehler beim Laden des BIldes" lauten.

width und height
Hier gibst du die Größe des Bildes in Pixeln an.

border
Hier kann eine Rahmenbreite angegeben werden. Allerdings sind die Rahmen nicht sehr schön, weshalb man das Attribut meist weglässt oder border="0" setzt.

title
Hier kommt der Bildtitel hin. Bei neueren Browsern wird er als Tooltip angezeigt, wenn man mit der Maus über das Bild fährt.

Zusammengefasst sähe das so aus:

Code: Alles auswählen

<img src="pfad/zum/bild.jpg" alt="Alternativtext" width="300" height="50" title="Tooltip" border="0" />