Suche in meinem Heimatblatt Mein Heimatblatt Hochschulrechenzentrum Universität

Schein Aufgabe Lösung HTML-Kurs Kurse, allgemein

Hinweise (Blatt 3)

Einbinden von Grafik

Inhalt:

• Grafik-Formate
• So verschaffe ich mir Bilder
• Grafik-Einbindung
• Inline-Grafiken
• Externe Grafiken
• Inline-Grafik als Verweis für eine externe Grafik

Grafik-Formate

Die wesentlichen, in WWW-Dokumenten genutzten Grafik-Formate sind (siehe dazu auch Stefan Münz [grafik/formate.htm]):

• GIF: sehr häufig eingesetzt; für farbige Bitmap-Grafiken mit scharfen Übergängen geeignet; nur 256 Farben; im Vergleich zu BMP relativ kleine Dateien; verlustfrei; plattformunabhängig
• JPEG (Joint Photographic Expert Group): nicht so häufig eingesetzt; für farbige Grafiken mit kontinuierlichen Übergängen geeignet; für bis zu 16,7 Millionen Farben; noch kleinere Dateien; i.allg. nicht verlustfrei; plattformunabhängig
• PNG (Portable Network Graphic): relativ neu und daher noch sehr selten eingesetzt; verlustfrei; für bis zu 16,7 Millionen Farben; plattformunabhängig

So verschaffe ich mir Bilder

Es gibt mehrere Möglichkeiten:

• "Einfangen" im WWW (hier mit Netscape):
  1. Maus auf die gewünschte Grafik positionieren
  2. rechte Maustaste drücken und dann
     • Save Image as... (Grafik speichern unter...) wählen oder
     • Copy Image Location (Grafikadresse kopieren)
• aus Grafik-Sammlungen; siehe dazu Stefan Münz [http://selfaktuell.teamone.de/links/design.htm#sammlung_german ] und [http://selfaktuell.teamone.de/links/design.htm#sammlung_inter]
• Export aus einem Grafik-Programmen als jpg-, gif- oder png-Datei
• Scannen mit Hilfe eines Scanners und eines Scan-Programms und Abspeichern als jpg-, gif- oder png-Datei

Grafik-Einbindung

Es gibt im Wesentlichen zwei Arten der Grafik-Einbindung:

• als Inline-Bild (siehe Stefan Münz [html/grafiken/einbinden.htm#referenz])
• als externes Bild (anklickbarer Verweis auf eine Grafik-Datei; nicht anders als sonstige Links)

Andere Möglichkeiten der Grafik-Einbindung, wie z.B. Hintergrundbilder (siehe Stefan Münz [html/dateiweit/hintergrundbild.htm]), sollen im Kurs nicht betrachtet werden.

Inline-Grafiken

• Einzusetzendes HTML-Element: img (image)
  <img src="Grafik-URL" alt="Ersatztext">
• Anzeige eines Ersatztextes durch das Attribut alt (alternate text); in Stefan Münz [html/grafiken/einbinden.htm#referenz]
• Breite und Höhe einer Grafik durch die Attribute width und height; Stefan Münz [html/grafiken/einbinden.htm#breite_hoehe]
• Ausrichtung des Textes durch das Attribut align="TOP" (oder MIDDLE oder BOTTOM); Stefan Münz [html/grafiken/ausrichten.htm]

Externe Grafiken

• Funktionsweise wie bei anderen Links
• Einbindung:

  <a href="Grafik-URL">anklickbarer Text</a>
  

Inline-Grafik als Verweis für eine externe Grafik

• <a href="Grafik-URL1"><img src="Grafik-URL2" alt="alternativer Text"></a>
• Der anklickbare Verweis wird durch die Inline-Grafik Grafik-URL₂ realisiert.
• Ein Klick auf diese kleine Grafik führt zur externen Grafik Grafik-URL₁.

$Revision: 1.13 $ ($Date: 2003/11/02 11:51:53 $) by $Author: g029 $