Überblick Elemente

Bilder können einerseits (große) Fotos oder Grafiken sein, aber auch kleine Icons innerhalb einer Zeile. Da <img> ein Inline-Element ist, drückt ein Bild, wenn es höher als ein Großbuchstabe ist, die Zeile in der es sich befindet, auseinander. Dass Text seitlich um das Bild fließt, geht nur mit Hilfe von CSS.

Tag Elementname original Beschreibung Beispiel, wie es dargestellt wird
(kann zwischen Browsern differieren) 		Gehe zu
<img> image Bild    
    Klein, innerhalb einer Zeile.
Achtung Vorsicht.
  
    Groß, innerhalb einer Zeile.
Der Koala ist ein Symbol für Australiens Flora und Fauna. KoalabärAufgrund seines Niedlichkeitswertes hat er eine hohe Popularität auf allen Kontinenten erlangt. Neben seinen flauschigen Ohren und der großen Nase tragen seine friedliche Art und seine Ähnlichkeit mit dem Teddybär dazu bei.
 
    Groß, innerhalb einer Zeile, jedoch formatiert mit CSS.
KoalabärDer Koala ist ein Symbol für Australiens Flora und Fauna. Aufgrund seines Niedlichkeitswertes hat er eine hohe Popularität auf allen Kontinenten erlangt. Neben seinen flauschigen Ohren und der großen Nase tragen seine friedliche Art und seine Ähnlichkeit mit dem Teddybär dazu bei.
 
<map>        
<area>        
<object>        
<param>        

Beschreibung

Bilder: img (image)

Elementbeschreibung <img>

Gibt im HTML-Code die Stelle an, an der das Bild eingefügt werden soll.

img ist ein inhaltsleeres (standalone) HTML-Element, es gibt daher keinen End-Tag: daher nur <img>. Es ist auch ein ersetztes HTML-Element, an seiner Stelle wird im Browser das Bild eingefügt, auf das img verweist.

img ist ein Inline-Element.

 

Attribute <img>

Attribute (notwendige bzw empfohlene):

src: Adresse der Bilddatei

src steht für "source" und bedeutet Quelle.

src ist verpflichtend.

Der angegebene Wert für src gibt an, welche Datei das Bild beinhaltet.

Attributwerte
  • Text (a-z, 0-9, sowie - und _ ) ohne Sonderzeichen (keine Umlaute, Leerzeichen, Großbuchstaben, Sonderzeichen)
    Dateiname inkl. Dateinamenserweiterung, also z.B. team-mustermann-max.jpg
    Pfadangabe, falls die Bilddatei in einem anderen Ordner ist als die HTML-Datei (in der das HTML-Element <img> ist).
    • relativer Pfad: Wenn in der selben Website.
    • absoluter Pfad: Wenn das Bild von einer anderen Website verwendet wird. Sehr selten. Vorsicht: Mögliche rechtliche Konsequenzen bei unerlaubten Verwenden von fremden Bildern.

(und wenn in einem anderen Ordner: Pfad zum Bild)

alt: Alternativtext

alt steht für "alternative text" und bedeutet Alternativtext.

alt ist verpflichtend.
Teil der Philosophie von HTML ist die "Barrierefreiheit", was bedeutet, dass das WWW für alle verwendbar sein soll. Da blinde Menschen Bilder nicht sehen können, sind Alternativtexte die einzige Möglichkeit, mit der der Bildinhalt blinden Menschen beschrieben werden kann.

Der angegebene Wert erklärt den Bildinhalt, welche Information mit dem Bild transportiert werden soll.

Attributwerte
  • Text (ohne Einschränkungen) CR &#x0D; geht anscheinend nicht.
Veranschaulichung

nächste Absatz ist inhaltlich doppelt

Alternativtexte sind enorm wichtig für blinde und sehbehinderte Menschen. Sie können die Bilder nicht sehen und ihre Hilfsprogramme können Bildinhalte nicht erkennen und daher auch nicht weitergeben. Daher sind Alternativtexte die einzige sinnvolle Informationsquelle zu Bilder und sie können auch von den Hilfsprogrammen vorgelesen werden. Anmerkung: Auch für Suchmaschinen ist der Alternativtext die einzige Informationsquelle zum Bild.

Der Alternativtext wird im Browser anstelle des Bildes dargestellt, wenn dieses nicht angezeigt werden kann.

Gründe dafür können sein: das Bild ist nicht verfügbar (Fehler in der Verknüpfung, Dateiname falsch, Bild gelöscht, Fehler bei der Übertragung), Bilder sind im Browser ausgeschalten, …

Alternativtexte wie "Abbildung 1" oder "Bild" sind sinnlos.

Anschauung:

Alternativtexte sollen aussagekräftig sein. Sie müssen nicht unbedingt erzählen, was auf dem Bild zu sehen ist. Oft ist es besser zu beschreiben, was das Bild aussagen soll.

Eine Versicherung stellt auf ihrer Website neben eines ihrer Produkte ein Bild, auf dem eine Familie glücklich in die Kamera lächelt.
Beispielbild: Alternativtext wird im Text beschrieben.
Nicht aussagekräftig wäre ein Text wie:
"Ein Mann mittleren Alters hält sein Baby im Arm. Angeschmiegt steht seine Frau hinter ihm und blickt über seine Schulter auf das Baby. Beide lächeln das Baby glücklich an."
Das stimmt zwar alles, aber das ist sicher nicht das, was das Bild vermitteln soll. Besser wäre:
"Sicherheit für die gesamte Familie."

Eine Finanzdienstleister stellt auf seiner Website neben eines seiner Produkte eine Grafik, welche ein Diagramm über die Entwicklung in den letzten Jahren zeigt. Zu sehen ist eine gezackte Kurve, die stetig nach oben geht sowie einige Beschriftungen.
Beispielbild: Alternativtext wird im Text beschrieben.
Nicht aussagekräftig wäre ein Text wie:
"Die Kurse unseres Produktes "Super-Z" stiegen zu Beginn stark an, um das Jahr 2008 kam es zu einigen Schwankungen, die aber in den letzen Jahren wieder wettgemacht wurden."
Das stimmt zwar alles, aber das ist sicher nicht das, was das Bild vermitteln soll. Besser wäre:
"Der Wert unseres Produktes "Super-Z" steigt stetig und bietet Ihnen für Ihre Zukunft Sicherheit und Wohlstand."

Alternativtexte können wie normaler Text geschrieben werden. Dies bedeutet, dass Umlaute, Leerzeichen, Großbuchstaben etc. erlaubt sind.

width, height: Breite und Höhe

width und height bedeuten Breite und Höhe.

width und height sind empfohlen (aber nicht verpflichtend).

Die angegebenen Werte bestimmen wie groß das Bild im Browser dargestellt wird.

Attributwerte
  • Zahl (Dezimalzahl)
    • Wird keine Einheit angegeben, wird vom Browser als Einheit Pixel verwendet.
    • Es ist auch eine Prozentangabe möglich, z.B. 50% bedeutet, dass das Bild die Hälfte des zur Verfügung stehenden Platzes einnimmt. Ändert sich die Breite des Platzangebots, ändert sich auch die Darstellungsgröße des Bildes.
Erläuterung

Warum werden diese beiden Attribute empfohlen?

  • Sind die Attribute vorhanden, weiß der Browser sofort wie groß das Bild ist und reserviert gleich den Platz dafür: quasi einen leerer Rahmen. Der darauf folgende Text kann nun an der richtigen, endgültigen Position weiter angezeigt werden.
  • Sind die Attribute nicht angegeben, werden beim Aufbau der Seite Textstellen nach Bildern sofort dargestellt, aber dann immer wieder nach unten springen. Dies ist lästig, wenn man schon zu lesen beginnt, bevor alle Bilder vollständig angezeigt werden.
    Warum passiert das?
    Bilder werden unabhängig von der HTML-Datei gesondert über das Internet übertragen. Wenn der Browser einen img-tag liest, fordert er die Datei des Bildes an.
    Zu diesen Zeitpunkt kennt der Browser aber noch nicht die Größe des Bildes. Diese erfährt er erst, wenn die Bilddatei vollständig übertragen ist. Dies dauert aber im Regelfall weit länger als die Übertragung der HTML-Datei, die ja nur aus Text besteht.
    In der Zwischenzeit fährt der Browser fort, den Text darzustellen. Da er nicht weiß, wie groß das Bild sein wird, fügt er den folgenden Text unmittelbar danach ein.
    Langt die Bilddatei nun vollständig ein, wird das Bild an die vorgesehene Stelle eingefügt und verdrängt den darauf folgenden Text, der nun mit einem Sprung nach unten rückt. Sind vor einer Textstelle mehrere Bilder eingefügt, so wird sie öfters nach unten springen: jedes Mal, wenn eine Bilddatei vollständig empfangen wurde.

Anmerkung: Bilder können danach auch als Hyperlink verwendet werden. So können kleingerechnete Bilder als Vorschau (oft thumbnail genannt) dienen und durch draufklicken auf eine große Version gesprungen werden.

Universalattribute

id, class, style, title, lang, dir

siehe Universalattribute

title

Eine junge Katze schläft - einfach süß.title kann verwendet werden, um einen Text einzublenden, sobald sich der Mauszeiger über dem Bild befindet.

Der ORF verwendet dies bei seiner Online-Nachrichtenseite news.orf.at dazu, die Urheberhinweise bei den Titelbildern einzublenden.

Tipp: Ein Hund blickt zur Begrüßung auf.Im eingeblendeten Text kann man mit dem Zeichen CR (Carrige Return: Wagenrücklauf) einen Zeilenumbruch bewirken. Dazu fügt man an der gewünschten Stelle den Zeichencode 0D hexadezimal mit &#x0D; in den Text ein, z.B. title="Hallo!&#x0D;Wie geht es dir?".

Web-Editoren

Expression Web | BlueGriffon | Dreamweaver 8

Expression Web

<img>
Einfügen eines Bildes
Menü: Einfügen | Bild | Aus Datei … auswählen - im sich öffnenden Dialogfenster "Bild" die gewünschte Datei auswählen.
Symbolleiste: Allgemein: "Bild aus Datei einfügen" - im sich öffnenden Dialogfenster "Bild" die gewünschte Datei auswählen.
Tastenkombination: nicht verfügbar

An die Stelle, wo das Bild eingefügt wird, fügt Expression Web ein img-Tag ein und das Attribut src bekommt als Wert den Dateinamen (ev. mit Pfad) des Bildes.

Arbeitsschritte

  • Im Fenster Dateien (rechts vom Dokumentfenster, unten) die Datei des Bildes mit der Maus an die gewünschte Stelle in der HTML-Datei ziehen.
  • Anmerkung: Die HTML-Datei sollte schon gespeichert worden sein, damit sie einen Speicherort und somit einen Pfad zum Verzeichnis (in dem sie gespeichert ist) hat.
  • Einfügemarke an die gewünschte Stelle im Text platzieren.
  • Einfügen eines Bildes - Varianten siehe oben.
  • Es öffnet sich das Dialogfenster "Bild".
  • Im Dialogfenster die gewünschte Datei auswählen und mit der Schaltfläche "Einfügen" bestätigen.
  • Es öffnet sich das Dialogfenster "Einenschaften für Barrierefreiheit".
    • Erscheint das Dialogfenster nicht, wurde es deaktiviert. Es kann folgendermaßen wieder aktiviert werden:
      Menü: Extras | Seiteneditieroptionen | Registerkarte Allgemein | Kontrollkästchen "Beim Einfügen von Bildern zur Eingabe von Eigenschaften für Barrierefreiheit auffordern" aktivieren.
    Folgendes eingeben:
    • Alternativer Text:
      Hier kann man den Alternativtext eintippen. Leider ist im Eingabekästchen sehr wenig Platz.
      Verpflichtend! Muss eingegeben werden, damit HTML-Code gültig (valide) ist.
      Kontrollkästchen davor eingeschaltet lassen (Hackerl).
    • Lange Beschreibung:
      Nicht verwenden. Ist nicht mehr Teil von HTML (deprecated, obsolet).
    • Diese Aufforderung beim Einfügen von Bildern anzeigen
      Kontrollkästchen davor eingeschaltet lassen (Hackerl).
    Mit der Schaltfläche "OK" bestätigen.

Anmerkung: Die HTML-Datei sollte vor dem Einfügen eines Bildes schon gespeichert worden sein, damit sie einen Speicherort und somit einen Pfad zum Verzeichnis (in dem sie gespeichert ist) hat.

Anmerkung: Die Bilder sollten schon vor den Einfügen mit Hilfe eines Bildbearbeitungsprogrammes in die gewünschte Größe umgewandelt werden.

Attribute

  • src
    Der Wert für source wird durch Auswählen der gewünschten Datei bestimmt und von Expression Web eingesetzt.
    • Wurde die HTML-Datei zuvor schon gespeichert, wird als Wert eine relativer Adresse vom Speicherort (Verzeichnis) der HTML-Datei verwendet - diese Variante ist übersichtlicher.
    • Wurde die HTML-Datei zuvor nicht gespeichert, wird als Wert eine absolute Adresse inkl. Laufwerksangabe verwendet - diese Variante ist sehr unübersichtlicher.
      Anmerkung: Sobald die HTML-Datei gespeichert wird, wird im Wert von src die absolute Adresse in eine relative umgewandelt.
  • alt
    Der Alternativtext sollte schon beim Einfügen des Bildes im Dialogfenster "Eigenschaften für Barrierefreiheit" unter "Alternativer Text:" eingegeben werden.
    Nachträglich kann der Alternativtext auch verändert (oder eingegeben) werden. Dazu das Bild markieren und dann die Eigenschaften im Menü Format bzw. mit der Tastenkombination Alt+Eingabetaste aufrufen oder einfach das Bild doppelklicken.
    Es öffnet sich das Dialogfenster "Bildeigenschaften". In der Registerkarte Allgemein kann man den Alternativtext eingeben oder verändern.
  • width und height
    Die Größe des Bildes wird von Expression Web automatisch ermittelt und als Wert in die passenden Attribute eingefügt.
    Nachträglich kann die Größe der Darstellung des Bildes auch verändert (oder eingegeben) werden. Dazu das Bild markieren und dann die Eigenschaften im Menü Format bzw. mit der Tastenkombination Alt+Eingabetaste aufrufen oder einfach das Bild doppelklicken.
    Es öffnet sich das Dialogfenster "Bildeigenschaften". In der Registerkarte Darstellung kann man die Werte für Breite und Höhe eingeben oder verändern.

    Eine Änderung der Darstellungsgröße sollte nur in Ausnahmefälle gemacht werden. (Es gibt nur ein paar Tricks, bei denen dies sinnvoll ist.)
    Die Zahlen hier zu verändern, um das Bild zu verkleinern, ist nicht sinnvoll. Das Bild ist dadurch nicht kleiner, es wird im Browser nur kleiner dargestellt. Übers Internet wird weiterhin die großen Ausmaße übertragen und das dauert somit unnötig länger.
    Bilder werden in Bildbearbeitungs­programmen wie z.B. GIMP und Photoshop verkleinert und erst dann in die Website eingebaut. Nicht nur die Übertragung ist dadurch um einiges schneller, sondern die Qualität ist auch viel besser, als wenn der Browser das Bild kleiner rechnet. muss.
  • title
    Muss in der Ansicht "Code" oder mit dem "Direkt-Editor für Tags" (Menü: Bearbeiten | Direkt-Editor für Tags bzw. Tastenkombination Strg+Q) händisch eingegeben werden.

BlueGriffon

  • img
    Einfügen eines Bildes: An die Stelle, wo das Bild eingefügt wird, fügt BlueGriffon ein img-tag ein und das Attribut src bekommt als Wert den Dateinamen (ev. mit Pfad) des Bildes.
    Einfügemarke an die gewünschte Stelle platzieren. Im Menü Einfügen den Befehl Bild auswählen. Es erscheint das Dialogfenster "Bild einfügen".
    Es gibt drei Möglichkeiten:
    • Im Fenster Dateien (rechts vom Dokumentfenster, unten) die Datei des Bildes mit der Maus an die gewünschte Stelle in der HTML-Datei ziehen.
    • Im Textfeld "Bild Ort:" die Datei aussuchen.
    • "Titel" ist nicht notwendig.
    • "Alternativer Text" ist notwendig!
    • "URI lange Beschreibung" ist inzwischen aus HTML rausgeflogen, daher nicht mehr verwenden.
    Der Alternativtext kann auch nachträglich verändert werden, indem man das Bild doppelklickt. Es scheint dann wieder das Dialogfeld.
  • Anmerkung: vor dem Einfügen eines Bildes sollte die HTML-Datei gespeichert sein = einen Dateinamen/Speicherort haben.
  • Die Größe des Bildes wird leider nicht automatisch eingefügt. Die Attribute width und height (Breite und Höhe) müssen händisch im Quellcode (Quelltext) eingefügt werden. Dazu muss man wissen, wie groß das Bild ist (z.B. in Windows Explorer unter Eigenschaften) und genau diese Werte eingeben.
    Eine Änderung der Darstellungsgröße sollte nur in Ausnahmefälle gemacht werden. (Es gibt nur ein paar Tricks, bei denen dies sinnvoll ist.)
    Die Zahlen hier zu verändern, um das Bild zu verkleinern, ist nicht sinnvoll. Das Bild ist dadurch nicht kleiner, es wird im Browser nur kleiner dargestellt. Übers Internet wird weiterhin die großen Ausmaße übertragen und das dauert somit unnötig länger.
    Bilder werden in Bildbearbeitungsprogrammen wie z.B. Photoshop verkleinert und erst dann in die Website eingebaut. Nicht nur die Übertragung ist dadurch um einiges schneller, sondern die Qualität ist auch viel besser, als wenn der Browser das Bild kleiner rechnet. muss.

Dreamweaver

  • img
    Einfügen eines Bildes: An die Stelle, wo das Bild eingefügt wird, fügt Dreamweaver ein img-tag ein und das Attribut src bekommt als Wert den Dateinamen (ev. mit Pfad) des Bildes.
    Es gibt drei Möglichkeiten:
    • Im Fenster Dateien (rechts vom Dokumentfenster, unten) die Datei des Bildes mit der Maus an die gewünschte Stelle in der HTML-Datei ziehen.
    • Einfügemarke an die gewünschte Stelle platzieren. Im Menü Einfügen, Bild auswählen. Im Dialogfenster den Dateinamen aussuchen.
    • Mit der Tastenkombination Strg+Alt+I das Dialogfenster aufrufen und den Dateinamen aussuchen.
  • Alternativtext (notwendig)
    • Im Dreamweaver 8 erscheint in allen drei Fällen ein weiteres Dialogfenster, in dem man den Alternativtext eintippen kann.
      Im Dreamweaver 7 (MX 2004) erscheint kein Dialogfenster. Man muss daher den Alternativtext wie unten beschrieben nachträglich eingeben.
    • Nachträglich kann der Alternativtext auch verändert (oder eingegeben) werden. Dazu das Bild anklicken. Im Fenster Eigenschaften erscheinen dann mehrere Eingabefelder zum Bild. Das Feld für den Alternativtext heißt "Alt."
  • Anmerkung: vor dem Einfügen eines Bildes sollte die HTML-Datei gespeichert sein = einen Dateinamen/Speicherort haben.
  • Die Größe des Bildes wird automatisch eingefügt. Eine Änderung der Darstellungsgröße sollte nur in Ausnahmefälle gemacht werden. (Es gibt nur ein paar Tricks, bei denen dies sinnvoll ist.)
    Die Zahlen hier zu verändern, um das Bild zu verkleinern, ist nicht sinnvoll. Das Bild ist dadurch nicht kleiner, es wird im Browser nur kleiner dargestellt. Übers Internet wird weiterhin die großen Ausmaße übertragen und das dauert somit unnötig länger.
    Bilder werden in Bildbearbeitungsprogrammen wie z.B. Photoshop verkleinert und erst dann in die Website eingebaut. Nicht nur die Übertragung ist dadurch um einiges schneller, sondern die Qualität ist auch viel besser, als wenn der Browser das Bild kleiner rechnet. muss.
    Wurde dennoch eine der beiden Zahlen verändert, so erscheint im Fenster Eigenschaften neben den Eingabefeldern eine Klammer mit einem Pfeil in Kreisform. Der Wert, der nicht mit der Originalgröße des Bildes übereinstimmt, wird fett dargestellt. Möchte man die Originalgröße wiederherstellen, braucht man nur auf den Pfeil in Kreisform klicken.
    Eingabefelder für die Bildgröße wenn ein Wert verändert wurde.