WebTech Wolf 6-7 (reduziert)
Grundlagen
Grundlagen
Kartei Details
Karten | 12 |
---|---|
Sprache | Deutsch |
Kategorie | Informatik |
Stufe | Andere |
Erstellt / Aktualisiert | 24.01.2021 / 24.01.2021 |
Lizenzierung | Keine Angabe (zbw) |
Weblink |
https://card2brain.ch/box/20210124_webtech_wolf_67_reduziert
|
Einbinden |
<iframe src="https://card2brain.ch/box/20210124_webtech_wolf_67_reduziert/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
|
Schnellübersicht über HTML-Elemente für Grafiken und Multimedia
- <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
Erläutere den Tag <img>
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">
Erläutere den Tag <picture>
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
Erläutere das Favicon.
- Icon in der Adressleiste
- Das Favicon wird mittels Generator erstellt. (ico-Datei inkl. diverser Nebendateien)