====== Einbinden von Grafiken in HTML ======
===== Einbinden von Grafiken =====
<code html>
img src="URL"
</code>

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. 



=== Aufgabe 1 ===
  * Öffne das Dokument "[[http://elearn.bgamstetten.ac.at/wiki/addons/Photoshop/goethe_zauberlehrling.jpg|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!

==== Alternativer Text ====
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.

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

<code html>
  ...
  <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>
  ...
</code>

===== Grafiken formatieren =====
==== Größenangaben bei Grafiken ====
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.

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

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

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

===== Grafiken und Text =====
==== Ausrichtung von Grafiken ====
Ü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:
<code html>
  <img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" height="250" width="150" align="bottom">
  <i>Der Hexenmeister</i> <br>
</code>
{{:informatik:grundlagen_in_html:hexenmeister2.jpg|}}
  * ''left''
  * ''right''
Mit diesen beiden Werten des Attributs ''align'' kann insbesondere der Fluß des Textes um die Grafik festgelegt werden.

zum Beispiel:
<code html>
<img src="Bilder\Zauberlehrling.png" alt="Der Hexenmeister" height="250" width="150" align="left">
</code>
{{:informatik:grundlagen_in_html:hexenmeister1.jpg|}}

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

<code html>
  ...
  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>
  ...
</code>

{{:informatik:grundlagen_in_html:hexenmeister3.jpg|}}