htm l mit Adi Prinz

img-Element

Mit dem img-Element werden Grafikdateien in HTML eingebunden. Das img-Tag ist ein inline-block Element (eine Mischung aus Inline und Block-Element) in einem Standalone-Tag.

<img src="bildname.png" alt="Bildbeschreibung">

Folgende Attribute stehen zur Verfügung

• alt: Bildbeschreibung (Pflicht)
• crossorigin: regelt, ob und welche fremden Seiten per Skript direkt auf das Bild zugreifen können
• height: Bildhöhe in Pixel oder Prozent
• width: Bildbreite in Pixel oder Prozent
• ismap: boolescher Wert für klickbare serverseitige Image Map
• longdesc: URL einer Quelle, für ausführliche Beschreibung des Bildes
• src: Bildname und Pfad
• usemap: Name einer Image Map

picture-Element

Das picture-Element wird verwendet, um verschiedene Versionen eines Bildes für unterschiedliche Anzeigebedingungen bereitzustellen. Es ermöglicht die Definition mehrerer Bildquellen (<source>), die jeweils eigene Medientypen oder Größenbeschränkungen haben. Der Browser wählt dann die passendste Quelle basierend auf den aktuellen Anzeigeeigenschaften des Geräts aus.

source-Element

Das picture-Element alleine kann nichts machen, sie müssen unbedingten eines oder mehrere source-Tags schreiben. Mit jedem source-Element definieren sie ein Bild mit unterschiedlichen Größen. Der jeweilige Browser ladet dann das für ihn passende Bild. Sollte der Browser das picture-Tag nicht kennen, bzw sollte kein media-Attribut zutreffen, steht ein Fallback zur Verfügung, welches nach den source-Elemente geschrieben wird.

<picture>
<source media="(min-width: 980px)" srcset="bild-980.jpg">
<source media="(min-width: 480px)" srcset="bild-480.jpg">
<!---Fallback--->
<img src="bild.jpg" alt="Bild">
</picture>

Fallback

Geben Sie immer ein img-Element als letztes Kindelement des picture-Elements an. Das img-Element wird von Browsern verwendet, die das picture-Element nicht unterstützen oder wenn keine der source-Tags übereinstimmen.

Folgende Attribute stehen zur Verfügung

• srcset: Pfad und Dateiname für Bilddateien im picture-Element
• media: für media queries z.B. (min-width: 1024px)
• type: MIME-Typ
• sizes: Größenangabe für unterschiedliche Seitenlayouts (nur Bilder)

Format-Unterstützung

Manche Browser oder Geräte unterstützen nicht alle Bildformate. Durch die Verwendung des picture-Elements können Sie Bilder in verschiedenen Formaten bereitstellen. Der Browser verwendet das erste Format, das er erkennt, und ignoriert alle nachfolgenden Elemente.

<picture>
  <source srcset="img_avatar.png">
  <source srcset="img_girl.jpg">
  <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
</picture>

Der Browser wird das erste source-Element mit übereinstimmenden Attributwerten verwenden und alle folgenden source-Elemente ignorieren.

map-Element

Mit dem öffnenden map-Tag leiten sie eine verweissensitive Grafik ein. Mit dem Attribut "name" definieren sie die Grafik, welche mit img-Tag vorab geschrieben wird. Achten sie auf das Attribut usemap im image.Tag. Definieren sie dort einen Namen (ohne Leer- bzw. Sonderzeichen) inklusive einer Raute vorab. Denselben Namen (ohne Raute) verwenden sie für das Attribut name im map-Tag.

<img src="Bildname.png" width="260" height="140" alt="Oesterreich" usemap="#oesterreich">
<map name="oesterreich">
<!--Koordinaten-->
</map>

Die Position der verweissensitiven Grafik wird durch das img-Element bestimmt. Das map-Element kann deshalb irgendwo im HTML-Code stehen, vorausgesetzt das img-Element wird zuerst geschrieben!

Folgende Attribute stehen zur Verfügung

• name: Bildname aus usemap
• Universalattribute

area-Element

Mit dem area-Tag definieren sie verweissensitive Bereiche. Dabei stehen drei Formen für Flächen zur Verfügung, die Koordinaten werden in Pixel angegeben.

• Kreis (circle): Daür brauchen sie x und y-Werte des Kreismittelpunkts und den Radius (z.B. 228,43,8)
• Rechteck (rect): Daür brauchen sie x und y-Werte der linken, oberen Ecke und x und y-Werte der rechten, unteren Ecke (z.B. 110, 100, 178, 122)
• Polygon (poly): Daür brauchen sie x und y-Werte für jeden Eckpunkt des Vielecks (z.B. 173,22,240,21,249,50, 230, 76, 176, 65)

das area-Tag ist ein Standalone-Element und muss nicht geschlossen werden. Mit dem title-Attribut geben sie dem User einen Hinweis bei Mouseover.

<img src="Bildname.png" width="260" height="140" alt="Oesterreich" usemap="#oesterreich">
<map name="oesterreich">
<area shape="circle" coords="228,43,8" 
href="http://www.wien.gv.at" alt="Wien" title="Wien" target="_blank">
<area shape="poly" coords="173,22,240,21,249,50, 230, 76, 176, 65" 
href="http://www.noe.gv.at" alt="Niederösterreich" title="Niederösterreich" target="_blank"> 
<area shape="poly" coords="241, 43, 218, 78, 221, 102, 249, 61" 
href="http://www.burgenland.at" alt="Burgenland" title="Burgenland" target="_blank">
<area shape="rect" coords="110, 100, 178, 122" 
href="http://www.ktn.gv.at" alt="Kärnten" title="Kärnten" target="_blank">
</map>

Folgende Attribute stehen zur Verfügung

• shape: circle, rect, poly
• coords: Koordinaten
• href: Verweis
• alt: Bildbeschreibung
• title: Hinweis bei Mouseover
• target: Verweisziel (z.B. _blank)
• download: Herunterladen beim Klicken
• hreflang: Sprache der Ziel-URL
• media: media query
• rel: Beziehung zwischen Bild und URL (z.B. alternate)
• type: media_type

Das Beispiel

img-Element mit figure und figcaption

Das figcaption-Element mit Bild und figure.

<figure>
<img src="bildname1.png" alt="Bildbeschreibung">
<figcaption>
Mein Garten im Mai 2024
</figcaption>
</figure>

Beispiel

Mehrere Elemente mit figure

Das figure-Element kann auch geschachtelt werden.

<figure>
  <figure>
  <img src="bildname1.png" alt="Bildbeschreibung">
  <figcaption>
  Eine Bildbeschreibung
  </figcaption>
  </figure>
  <figure>
  <img src="bildname2.png" alt="Bildbeschreibung">
  <figcaption>
  Eine zweite Bildbeschreibung
  </figcaption>
  </figure>
<figcaption>
Eine Gesamtübersicht
</figcaption>
</figure>

Für weitere Informationen über Multimedia schauen sie sich folgende Scripts an!

w3schools.com

Canvas-Beispiele

Eine Leinwand ist ein rechteckiger Bereich auf einer HTML-Seite. Standardmäßig hat eine Leinwand keinen Rahmen und keinen Inhalt.
Das Markup für eine einfache, leere Leinwand sieht folgendermaßen aus:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

Bei der Verwendung von Skripten geben Sie immer ein id-Attribut an, auf das verwiesen werden soll, und Attribute, um die Größe der Leinwand zu definieren. Um einen Rahmen hinzuzufügen, verwenden Sie das Attribut style.

JavaSript hinzufügen

// eine Linie Zeichnen
var c = document.getElementById("myCanvas1");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

// einen Kreis Zeichnen
var c = document.getElementById("myCanvas2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

// einen Text Zeichnen
var c = document.getElementById("myCanvas3");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Your browser does not support the HTML canvas tag. Your browser does not support the HTML canvas tag. Your browser does not support the HTML canvas tag.

Hauptmerkmale von SVG

• Vektorbasiert: SVG verwendet geometrische Formen wie Linien, Kreise und Polygone, um Grafiken zu erstellen, im Gegensatz zu Rastergrafiken (z.B. JPEG, PNG), die aus Pixeln bestehen.
• Auflösungsunabhängig: SVG-Grafiken können in beliebiger Größe dargestellt werden, ohne an Schärfe zu verlieren, was sie ideal für hochauflösende Displays macht.
• XML-basiert: SVG-Dateien sind Textdateien, die auf XML (Extensible Markup Language) basieren. Das bedeutet, dass sie leicht zu lesen und zu bearbeiten sind, sowohl manuell als auch mit Programmen.
• Interaktivität und Animation: SVG unterstützt Interaktivität und Animationen, die mit CSS und JavaScript gesteuert werden können.
• Einbettbar in HTML: SVG-Grafiken können direkt in HTML-Dokumente eingebettet werden.

SVG Code Beispiel

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="80" fill="red" />
<rect x="50" y="50" width="100" height="100" fill="blue" />
<text x="100" y="105" font-size="20" text-anchor="middle" fill="white">SVG</text>
</svg>

Erklärung des Beispiels:

• <svg>-Tag: Definiert den SVG-Bereich mit einer Breite und Höhe von 200 Pixeln.
• <circle>-Tag: Zeichnet einen Kreis mit Mittelpunkt bei (100, 100), einem Radius von 80 und einer roten Füllung.
• <rect>-Tag: Zeichnet ein Rechteck mit der oberen linken Ecke bei (50, 50), einer Breite und Höhe von 100 Pixeln und einer blauen Füllung.
• <text>-Tag: Fügt den Text "SVG" bei (100, 105) mit einer Schriftgröße von 20 Pixeln, zentriert und in weißer Farbe ein.

Unterschiede zwischen SVG und Canvas

SVG ist vektorbasiert, auflösungsunabhängig und ideal für statische Grafiken mit Interaktivität und Animation durch CSS/JavaScript. Canvas ist pixelbasiert, auflösungsabhängig und besser für komplexe, dynamische Szenen wie Spiele, mit Interaktivität und Animation durch JavaScript.