Einbinden von Grafiken in HTML

img src="URL"

Mit dem Tag img bindet man Grafiken in HTML ein. Über das Attribut scr (Source) wird die URL zur Grafik angegeben, die in das Dokument eingebunden werden soll. Wird im Attribut scr nur ein Dateiname angegeben, so sucht der Browser im gleichen Verzeichnis, wie sich die Webseite befindet. Befindet sich das Bild in einem anderen Ordner, ist eine Pfadangabe notwendig.
Die Grafik erscheint an der Stelle, an welcher der Tag verwendet wird.

• Öffne das Dokument „Goethe_Zauberlehrling.jpg“ in Photoshop. Schneide den Teil des Bildes, welcher den Zauberer enthält, mit Hilfe des Auswahlwerkeugs Ellipse aus. Wähle dabei einen geeignetet Wert für Weiche Kante. Füge den Bildausschnitt in ein neues Dokument mit transparentem Hintergrund ein!
• Verkleinere das Bild auf eine Breite von 200 Pixel.
• Speichere das Bild für das Web und wähle dazu geeignete Einstellungen - Tranparenz soll erhalten bleiben!
• Füge das Bild an beliebiger Stelle im Dokument Zauberlehrling.html ein!

Bindet man eine Grafik ein, so sollte man zu dieser eine Kurzbeschreibung angeben. Dieser Text wird angezeigt, wenn die Grafik nicht dargestellt wird, beispielsweise wenn der Besucher der Webseite die Darstellung von Grafiken deaktiviert hat. Außerdem wird der alternative Text je nach Browser als QuickInfor angezeit, wenn man den Cursor über die Grafik bewegt.

Fortsetzung Aufgabe 1: Füge einen passenden Alternativtext hinzu!

  ...
  <p>Hat der alte Hexenmeister<br>
  <img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" >Sich doch einmal wegbegeben!<br>
  Und nun sollen seine Geister<br>
  ...

Die Größe von eingefügten Bildern kann mit den Attributen height und width festgelegt werden. Die Größenangaben können dabei mittels Prozent (auf Basis des Browserfensters) oder mittels Pixel erfolgen.

Man sollte jedoch beachten, dass die Eingabe von Werten für die Höhe und Breite, die nicht dem ursprünglichen Verhältnis entsprechen, zu eine z.B. gestauchten oder gestreckten Bild führen können.

Fortsetzung Aufgabe 2:
Finde eine geeignete Größe für das zuvor eingefügte Bild.

 <img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" height="250" width="150"> 

Mit Hilfe des Attributs border kann wie auch bei den Tabellen ein Rahmen für das eingefügte Bild festgelegt werden.

Über das Attribut align wird festgelegt, wie ein Text, der sich neben einer Grafik befindet, dargestellt werden soll.

Mögliche Werte, die align annehmen kann:

• top (oben)
• middle (mittig)
• bottom (unten)

Diese drei Werte eignen sich auch sehr gut zur Ausrichtung einer Bildbeschriftung.

zum Beispiel:

  <img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" height="250" width="150" align="bottom">
  <i>Der Hexenmeister</i> <br>

• left
• right

Mit diesen beiden Werten des Attributs align kann insbesondere der Fluß des Textes um die Grafik festgelegt werden.

zum Beispiel:

<img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" height="250" width="150" align="left">

Der Abstand einer Grafik zum Text wird mit den Attributen hspace und vspace festgelegt. Die Werte werden in Pixeln angegeben.

  ...
  Auch nach meinem Willen leben.<br>
  <img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" align="left" vspace="20" hspace="10">
  Seine Wort und Werke <br>
  ...