WebTech Wolf 6-7 (reduziert)

• <img> = Grafikdatei in eine HTML-Datei einbinden
• <map>,<area> =eine verweissensitive Grafike rstellen
• <picture>,<source> = aus mehreren Bildquellen das passende Bild laden
• <svg> = eine skalierbare Vektorgrafik in die Webseit integrieren
• <math> = eine mit MAthML geschrieben Formel einbinden
• <canvas> = eine Zeichenfläche zum Zeichnen von Grafiken bereitstellen
• <video> = Videodateien ohne Plug-ins wiedergeben
• <audio> = Audiodateien ohne Plug-ins wiedergeben
• <embed>, <object>, <iframe> = Einbinden von aktiven Elementen wie PDF-Dokumenten, Flash-Animationen, Java-Applets, Word-Dokumenten und vielen anderen  mehr

Allgemeines:

• ist ein alleinstehendes Tag <img .../>

Attribute:

• alt = alternativer Text, falls Bilder nicht angezeigt werden können (veraltet)
• heigth = Höhe in Pixel
• ismap = boolscher Wert, (...) vgl Buch
• src = Verweisziel zur Bilddatei (relativer Pfad, absoluter Pfad zum Verzeichnis oder Internetadresse)
• usemap= Name der Image-Map, die mit dem Bild verknüpft werden soll
• width = Breite in Pixel

Beispiel:

<img src="bilder/malerin.jpg" alt="Malerin in Tel Aviv" width = "400" height="256">

Dieses Tag wird für passendes Bild für entsprechdendes Medium verwendet

<picutre>
         <source media="(min-width: 1024px)" srcset="bilder/HK-1024.jpg">
         <source media="(min-width: 640px)" srcset="bilder/HK-640.jpg">
         <source media="(min-width: 480px)" srcset="bilder/HK-480.jpg">
         <img sry="bilder/HK-480.jpg" alt="Hong Kong Island">
</picture>

HTML-Attribut media macht eine Source abfrage (Media Query).Das bedeutet: Die Quellen von source werden von oben nach unten gelesen. Ist der Viewport mindestens 1024 pixel, dann greift die erste datei, ansonsten die zweite etc.

Attribute:

• srcset = Angabe der Medienquelle, die geladen werden soll
• media = Abfrage (Media Query) für die zu ladenden Medienquellen. 
• type = MIME-Typ (Dateiformat)
• sizes = Breite und Pixeldichte

• Icon in der Adressleiste
• Das Favicon wird mittels Generator erstellt. (ico-Datei inkl. diverser Nebendateien)

• macht es möglich, ein Video ohne Plug-In einzubetten
• Brower muss jedoch MP4 Dateien unterstützen

Beispiel
<video width="640" src="Varanasi.MP4" controls autoplay>Ihr Webbrowser unterstützt das Video nicht.</video>

Attribute:

• autoplay = Startet das Video, sobald es geladen wird.
• controls = blendet die Steuerelemente für die Steuerung (Play, Pause, Lautstärke etc.) des Videos ein.
• height = Höhe
• loop = Das Video wird in der Endlosschlreife gespielt
• muted = Das Video wird ohne Ton abgespielt
• poster = Eine Referenz zu einem Bild, das angezeigt wrid, bis das Video gestartet wird.
• preload = gibt an wie das Video geladen wird
  • preload="auto" --> Video wird geladen, wenn die Seite geladen wird
  • preload="none" -->video wird nicht automatisch geladen
• src = URL der Videodatei
• type = Videoformat (MP4, OGG oder WebM)
• width = Breite

• <iframe>
  <iframe width="400" heigth="225" src="//www.youtube.com/embed/asdfgda" allowfulllscreen"></iframe>
• <object> 
  <object width="400" heigth="225" data="//www.youtube.com/embed/asdfgda" allowfulllscreen"></object>
• <embed>
  <embed width="400" heigth="225" src="//www.youtube.com/embed/asdfgda" allowfulllscreen"></embed>

• analog Video
• Medien-Typ: MP3, OGG, WAV

Attribute:

• autoplay = startet automatisch
• controls = Blendet die Steuerelemente ein (Play, Stop etc.)
• loop = wird in Endlosschleife gespielt
• muted = ist auf stumm geschaltet
• preload = Gibt an ob die Datei geladen werden soll
  • preload = "auto"
  • preload = "none"
• type = Kennzeichnen des Audioformats
• src = URL der Audiodatei

• Kontaktformulare
• Umfragen
• Anmeldung auf einer Website
• Gästebücher
• Bestellformulare
• Suchfunktionen
• Hinzufügen und Hochladen von Dateien