2.12.3 Grafiken einbinden

1 Allgemein

a) HTML-Tags

• Bachmann: Die HTML-Tags in der Übersicht

b) HTML-Elementreferenz img

• SELFHTML: HTML-Elementreferenz - img

c) Attribute zum Element img

• width="X" (Breite X des Bildes)
  Sollte angegeben werden, damit der Browser den Platzhalter in entsprechender Grösse vorsehen kann, solange das Bild noch nicht komplett übertragen ist!
• height="Y" (Höhe des Bildes)
  ⇒ Siehe Bemerkung in Beispielen!!!
  Sollte (gemäss HTML-Seminar) angegeben werden, damit der Browser den Platzhalter in entsprechender Grösse vorsehen kann, solange das Bild noch nicht komplett übertragen ist.
• border="0" oder border="1" (Bild ohne Rahmen resp. mit Rahmen)
  Eventuell auch dickeren Rahmen angeben
• alt="Erklärung zum Bild"
  Der ALTernativtext - dieser ist aus verschiedenen Gründen sehr wichtig:
  für Sehbinderte (die ihn von speziellen Browsern vorgelesen bekommen) für Suchmaschinen, da diese auch diesen Text indizieren zur Information für den Surfer

• SELFHTML: HTML-Attribut-Referenzz - img

2 Workshop

Workshop

• Bachmann: Einbinden von Grafiken in HTML-Seiten

3 Relative Adressierung

a) Beispiel: Das Bild ist im Ordner "grafiken"

Die Breite und Höhe muss im richtigen Verhältnis angegeben werden, sonst wird das Bild verzogen. Die Höhe kann nicht mit "" angegeben werden, da der Internet Explore 6 das im Gegensatz zu Opera nicht versteht.

<img src="../../grafiken/bilder/alfred_brandenberger.jpg"
width="120" height="157" border="0" 
alt="Fotografie von Alfred Brandenberger (493x644)">

b) Workshop

• Bachmann: Relative Adressierung

4 Absulute Adressierung

a) Beispiel 1: Das Bild ist auf einer andern Website

<img src="http://www.html-seminar.de/bilder/html-seminar.jpg"
width="" height="" border="0" alt="">

b) Beispiel 2: Mit bestimmter Grösse und Rand der Grösse 1

Bitte beachten: Die folgende Grafik hat im Quelltext einen Eintrag bei "alt"

<img src="http://www.html-seminar.de/bilder/html-seminar.jpg"
width="474" height="66" border="1" 
alt="html-seminar.de - jetzt HTML lernen">

c) Beispiel 3: Mit noch grösser und Rand der Grösse 5

(die Proportionen sollten aber beibehalten werden, sonst wird das Bild verzogen)

<img src="http://www.html-seminar.de/bilder/
html-seminar.jpg"
width="500" height="70" border="5" 
alt="html-seminar.de - jetzt HTML lernen">

d) Workshop

• Bachmann: Absolute Adressierung

5 Grundlagen

a) Allgemeines zu Grafiken einbinden

• SELFHTML: Grafiken einbinden - Allgemeines zu Grafiken

b) Grafikreferenz definieren

• SELFHTML: Grafikreferenz definieren
  SELFHTML: Beispiel: Tanzmaus

c) Namen für Grafiken

• SELFHTML: Namen für Grafiken
  SELFHTML: Beispiel: Baum

d) Langbeschreibung für Grafiken

• SELFHTML: Langbeschreibung für Grafiken
  SELFHTML: Beispiel: Alte Zeiten

6 Alternativer Text alt="..." (Angabe im Quelltext)

• Bachmann: Alternativer Text

• bjoernsworld: Warum ALT Attribute Pflicht sind ALT Attribute

↑