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)
Erläutere den Tag <video>
- 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
Videos über Youtube einbetten.
- <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>
Erläutere den Tag <audio>
- 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
Nenne gängige HTML-Formulare
- Kontaktformulare
- Umfragen
- Anmeldung auf einer Website
- Gästebücher
- Bestellformulare
- Suchfunktionen
- Hinzufügen und Hochladen von Dateien