WebTech Wolf 6-7 (reduziert)

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

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

• 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

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">

• 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