2.14.3 Grafiken einbinden

• 1 Allgemein
  • a) HTML-Tags
  • b) HTML-Elementreferenz img
  • c) Attribute zum Element img
• 2 Grundlagen-Websites & Workshops
  • a) Allgemeines zu Grafiken einbinden
  • b) Grafikreferenz definieren
  • c) Namen für Grafiken
  • d) Langbeschreibung für Grafiken
• 3 Relative Adressierung
  • a) Beispiel: Das Bild ist im Ordner "grafiken" dieser Website
  • b) Workshop zu Relative Adressierung
• 4 Absulute Adressierung
  • Beispiel 1: Das Bild ist auf einer andern Website
  • Beispiel 2: Mit bestimmter Grösse und Rand der Grösse 1
  • Beispiel 3: Mit noch grösser und Rand der Grösse 5
  • Workshop zu Absulute Adressierung
• 5 Alternativer Text alt="..." (Angabe im Quelltext)

-

⇧ 1 Allgemein

• a) HTML-Tags
• b) HTML-Elementreferenz img
• c) Attribute zum Element img

-

↑ a) HTML-Tags

• Bachmann (via Wayback)
  de Home: Grafische Gestaltung von HTML-Seiten
  de Die HTML-Tags in der Übersicht
  

-

↑ b) HTML-Elementreferenz img

• SELFHTML de 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 de HTML-Attribut-Referenzz - img

-

⇧ 2 Grundlagen-Websites & Workshops

• a) Allgemeines zu Grafiken einbinden
• b) Grafikreferenz definieren
• c) Namen für Grafiken
• d) Langbeschreibung für Grafiken

-

↑ a) Allgemeines zu Grafiken einbinden

• SELFHTML de Grafiken einbinden - Allgemeines zu Grafiken

• Bachmann (via Wayback)
  de Allgemeines zum Einbinden von Bildern
  de Einbinden von Grafiken in HTML-Seiten
  

-

↑ b) Grafikreferenz definieren

• SELFHTML de Grafikreferenz definieren
  SELFHTML de Beispiel: Tanzmaus

-

↑ c) Namen für Grafiken

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

-

↑ d) Langbeschreibung für Grafiken

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

-

⇧ 3 Relative Adressierung

• a) Beispiel: Das Bild ist im Ordner "grafiken" dieser Website
• b) Workshop zu Relative Adressierung

-

↑ a) Beispiel: Das Bild ist im Ordner "grafiken" dieser Website

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 zu Relative Adressierung

• Bachmann (via Wayback) de Relative Adressierung

-

⇧ 4 Absulute Adressierung

• Beispiel 1: Das Bild ist auf einer andern Website
• Beispiel 2: Mit bestimmter Grösse und Rand der Grösse 1
• Beispiel 3: Mit noch grösser und Rand der Grösse 5
• Workshop zu Absulute Adressierung

-

↑ 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="">

-

↑ 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">

-

↑ 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 zu Absulute Adressierung

• Bachmann (via Wayback) de Absolute Adressierung

-

⇧ 5 Alternativer Text alt="..." (Angabe im Quelltext)

• Bachmann (via Wayback) de Alternativer Text

• bjoernsworld de Warum ALT Attribute Pflicht sind ALT Attribute