Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:bilder [2021/01/14 12:44] – lutz
+++ html:bilder [2021/01/14 14:26] (aktuell) – [Aufgaben] lutz
@@ Zeile 6: / Zeile 6: @@
 ^ Attribut ^ Wirkung^
-| ''%%width='b'%%'' | Bild in der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Breite angegeben wird, wird die Höhe entsprechend scaliert.|
+| ''%%width='b'%%'' | Bild in der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Breite angegeben wird, wird die Höhe entsprechend skaliert.|
-| ''%%height='b'%%'' | |
+| ''%%height='h'%%'' | Bild in der Höhe h darstellen, h kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Höhe angegeben wird, wird die Breite entsprechend skaliert. |
+| ''%%align%%'' | horizontale Ausrichtung: left, center, right |
+| ''%%valign%%'' | vertikale Ausrichtung: top, middle |
 Die Verwendung wird in der folgenden Quelltext demonstriert:
+**Beispiel 1**
 <code html>
@@ Zeile 25: / Zeile 29: @@
 </html>
 </code>
+Bilder können auch als Links benutzt werden. Dazu schreibt man den ''%%<img>%%''-Tag in den ''%%<a>%%''-Tag hinein.
+**Beispiel 2**
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <title> Bilder </title>
+  </head >
+  <body>
+    <p>Ein Link auf mein liebstes Betriebssystem:</p>
+    <a href="http://www.kernel.org"><img width=100 src="tux.png"></a>
+  </body>
+</html>
+</code>
+Bilder können auch als Links benutzt werden. Dazu schreibt man den ''%%<img>%%''-Tag in den ''%%<a>%%''-Tag hinein.
+=====Imagemaps=====
+Imagesmaps sind Bilder von denen bestimmte Bereiche als Link verknüpft sind. Die folgende HTML-Datei demonstriert die Wirkungsweise:
+**Beispiel 3**
+<code html>
+<!DOCTYPE html>
+<html lang="de">
+  <head>
+    <meta charset="utf-8">
+    <title> Bilder </title>
+  </head >
+  <body>
+    <p align="center"><img width="718" height="539" border="0" usemap="#Map" src="beispielmap.jpg"></p>
+    <map name="Map">
+      <area shape="circle" coords="550,430,40" href="http://www.wikipedia.de">
+      <area shape="circle" coords="333,222,40" href="http://www.google.de">
+      <area shape="circle" coords="590,90,40" href="http://www.facebook.de">
+      <area shape="circle" coords="135,390,40" href="http://www.youtube.de">
+    </map>
+  </body>
+</html>
+</code>
+Zunächst wird das Bild mit exakter Höhe und Breite dargestellt. Mit dem Attribut ''%%usemap="#Map"%%'' wird das Bild mit der Map verknüpft. Im öffnenden Tag der Map:  ''%%<map name="Map">%%'' wird der name der Map festgelegt. In der Map werden jetzt die aktiven Bereiche: ''%%<area shape="circle" coords="550,430,40" href="http://www.wikipedia.de">%%'' definiert. Das Attribut ''%%shape%%'' legt die Art des Bereichs fest: (kreisförmig - circle, rechteckig - rectangle). Mit ''%%coords%%'' werden die Koordinaten des bereichs festgelegt, bei einem Kreis der Mittelpunkt und der Radius. Mit ''%%href%%'' wird das Linkziel festgelegt.
+====Erklärvideos zur Imagemap====
+{{youtube>BMQLLhGUVxs}}
+=====Aufgaben=====
+**Aufgabe 1**
+Teste die Beispiele 1 und 2. Probiere dabei verschiedene Bildattribute aus. (Das Bild tux.png muss im selben Ordner wie die HTML-Datei sein.)
+{{ :html:tux.png?linkonly |}}
+**Aufgabe 2**
+Lade dir sich aus dem Internet ein Bild herunter, welches zu deiner Lieblingseite im Internet passt. Erzeuge entsprechend dem Beispiel 2 eine HTML-Seite, in der man über einen Bildlink zu ihrer Lieblingsseite gelangt.
+**Aufgabe 3**
+Teste das Beispiel 3 zur Imagemap!
+{{ :html:beispielmap.jpg?linkonly |}}
+Aufgabe 4
+Erstelle entsprechend dem Erklärvideo eine eigene Imagemap mit mindestens 4 Links!