WebTech Wolf 6-7 (reduziert)
Grundlagen
Grundlagen
Fichier Détails
| Cartes-fiches | 12 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Autres |
| Crée / Actualisé | 24.01.2021 / 24.01.2021 |
| Lien de web |
https://card2brain.ch/box/20210124_webtech_wolf_67_reduziert
|
| Intégrer |
<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
Nenne Tags für HTML-Formulare
Bisherige Tags:
- <form> = einen Bereich für FOrmulare definieren
- <fieldset> = Formularelemente gruppieren
- <legend> = eine Überschrift für ein fieldset-Element definieren
- <label> = Textlabel zu Eingabefeldern, Radioschaltflächen, Checkboxen hinzufügen und verknüpfen
- <datalist> = eine LIste mit Option-Werten
- <input> Wird zur Abfrage von Daten vom Benutzer verwendet. (gibt vers. Typen)
- <button> = Button
- <select> = Einleiten einer Auswahlliste, einen Eintrag der Auswahlliste erstellt man mit <option>
- <optgroup> = option-Elemente einer Auswahlliste gruppieren
- <option> = Elemente einer DropDownliste
- <textarea> = Element definiert einen Eingabebereich für Text
- <output> = Ausgabe von Werten
- <progress> = visuelle Darstellung eines Fortschritts
- <meter> = visualisieren der Grösse eines Wertes
Erläutere das Tag <form>
- dazwischen stehen verschiedene Eingabefelder
Attribute:
- action = Angabe einer URL, an die die Daten übertragen werden sollen (PHP-Skript)
- method = wie werden die Daten übertragen
- get = HTTP-Request-Methode
- post = Daten werden im Body integriert
- enctype = standardmässig ist der MIME-Type "application" eingestellt (kann geändert werden)
- accept-charset = Wie wollen wir Zeichen sehen --> mit Charset-UTF 8
- target = Zielfenster angeben, in dem der Webserver seine Antwort ausgeben soll
Erläutere den Input-Tag und nenne dir bekannte Typen.
Bekannte Input Typen:
Ckeckbox:
<input type="checkbox" name="extra" id"c1" value="breakfast">
<label for="c1">Frühstück</label><br>
Dateiupload: <input type="file" name="bild" accept="image/*">
Neue Feldtypen für <input>
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
Attribute für Eingabefelder
- autofocus = Das Feld soll beim Laden den Fokus erhalten
- autocomplete = Autovervollständigung eines Feldes
- list = verwenden einer Liste von vorgegebenen Werten
- max resp. min = Festlegen von Maximum und Minimum
- multiple = Eingabe von mehreren Werten
- pattern = Überprüft eine Eingabe anhand eines regulären Ausdrucks
- placeholder = Text wird als Platzhalter angezeigt
- required =Pflichtfeld
- step = Steuert Schrittstufe beim Eingeben
Weitere nützliche Attribute:
- disabled = Eingabeelement deaktivieren
- readonly = Eingabeelement nur lesbar, nicht editierbar
- tabindex = Vorgeben einer Tabulator-Reihenfolge, wenn die Tab-Taste gedrückt wird
- accesskey = Tastenkürzel für ein Formularelement
- <fieldset> = mehrere Formularelemente gruppieren