<a href="bild.png" download>Download</a>
Das download-Attribut des a-Tags bietet ein Dokument zum direkten Download an, ohne dass
es zuvor im Browserfenster angezeigt wird.
Das iframe-Element ermöglicht die Einbettung eines externen Dokuments (PDF, andere
Webseite, HTML Datei) in das aktuelle Dokument. iframe fügt innerhalb des body-Elements
ein Inline-Fenster in die Webseite ein, das unabhängig von der aufrufenden Seite ist.
Ein iframe-Element bringt sein eigenes CSS und
Javascript mit, und beeinflusst Stile und Script der aufrufenden Seite nicht.
iframe-Elemente zeigen beliebige Inhalte, z.B. Formulare, Bilder, Videos, Tabellen und
nicht zuletzt Werbung.
Für die Seite, die Inhalte anderer Seiten über iframe einbettet, birgt iframe ein
gewisses Maß an Sicherheit: Eingekapselt in ein iframe statt direkt in die Seite
eingebettet bleibt der fremde Inhalt von der eigenen Seite getrennt.
<iframe src="iframe.html"
sandbox=""></iframe> sandbox verhindert das Ausführen
von Scripten, Plugins und Links, die aus dem iframe hinausführen, sowie den Zugriff auf
Cookies und auf andere Seiten (auch aus derselben Domaine). selfhtml/HTML/#Vorteile_einer_Sandbox
Mithilfe des srcdoc Attributs lässt sich HTML-Code als Inhalt des iframes
angeben, dabei hat das srcdoc-Attribut Vorrang vor dem src-Attribut. selfhtml/HTML/#srcdoc
Formular
<form>...</form> | Das form-Element definiert
Formulare auf
Web-Seiten.
<input id="vname" name="vname"> | Das
input-Element stellt ein Datenfeld dar, das in der Regel mit einem form-Element
in
Verbindung steht
<form id="example">
<label > Namen </label>
<fieldset>
<legend>Name</legend>
<label for="vorname">
Vorname: <input name="vorname"
id="vorname">
</label>
<label for="zuname">
Zuname: <input name="zuname"
id="zuname">
</label>
</fieldset>
</form>
Das fieldset-Element ermöglicht eine optionale Gruppierung unter einer
gemeinsamen
Überschrift für einen Satz von Formular-Steuerelementen.
Das legend-Element definiert eine Überschrift für einen Formularbereich.
Das label-Element stellt eine Beschriftung für Formularelemente dar.
<datalist id="Vögel">
<option value="Amsel">
<option value="Buntspecht">
</datalist>
Das datalist-Element stellt eine Datenliste dar, die
vordefinierte Auswahlmöglichkeiten für andere Steuerelemente enthält.
<select name="top3" size="3">
<optgroup label="Namen mit B">
<option>Berta</option>
<option>Beatrice</option>
<option>Bianca</option>
</optgroup>
</select>
Das select-Element stellt eine Liste dar, welche vordefinierte
Auswahlmöglichkeiten enthält.
Diese können in einem Dropdown angeklickt werden.
Das optgroup-Element stellt eine Gruppierung vordefinierter
Auswahlmöglichkeiten dar.
<textarea cols="50" rows="10">Lorem
Ipsum</textarea>
Das textarea-Element repräsentiert ein mehrzeiliges Eingabeelement.
form-Attribute
action | URL – Namen und Pfad (index.php) zur verarbeitenden Anwendung;
kann auch auch eine Mailadresse (mailto:info@mydomain.de) sein.
autocomplete | (on / off); gibt an, ob autocomplete verwendet werden soll
oder nicht
method | gibt an, welche HTTP-Methode für die Übertragung des
Formulars-Inhalts verwendet werden soll. method="get" überträgt die Daten in
der Adressleiste (unsicher). method="post" überträgt größere und Daten und auch
sicherer.
Mehr Attribute im Link: mediaevent/html/form
attribute: autocomplete, list, height and width, autofocus, step, required,
placeholder, pattern,
multiple, min and max, maxlength, size, disabled, readonly, value w3schools.com/html/form_attributes
Quantity Input (oder auch Number Spinner) beschreibt die Auswahl einer Anzahl /
Stückzahl wie zB in einen Warenkorb. Das lässt sich nur umständlich stylen.
pre wird eingesetzt, für die typografische Formatierung des Textes, am
häufigsten um Computer-Code,
HTML-Quelltext, Javascript oder CSS im Browser anzuzeigen. Mit pre werden
Leerzeichen, Tabulatoren, neue Zeilen und Zeilenumbrüche NICHT
ignoriert.
pre { white-space: pre-wrap; } | benötigt man doch ein Zeilenumbruch dann
mit CSS...
pre { overflow: scroll; } | oder alternativ mit scrollbar
img fügt ein Bild oder eine Grafik ein. Zwei Attribute
werden gebraucht: src, der Pfad zum Bild und alt, ein alternativer
Text für Browser ohne
Bilddarstellung.
Zuverlässige Bildformate sind JPEG, GIF, PNG, WebP oder SVG. mediaevent/html/img
<img src="mond.png" width="600" height="230"
alt="Mond mit Wolken" loading="lazy">
alt="" | aussage des Bildes
loading="" | lazy lädt das Bild erst, wenn es in den Viewport
kommt; eager soll der Browser das Bild bevorzugt laden
srcset="" | Liste von alternativen Bildern für verschiedene Umgebungen
(hochauflösende Monitore, Desktop-Monitore, mobile Geräte) mediaevent/html/srcset
<time datetime="2022-11-03">3. November 2022</time>
time umfasst die Angabe einer Zeit im Klartext mit einem optionalen
maschinenlesbaren Attribut datetime für maschinenlesbare Zeitangaben.
time kann ein Datum oder eine Uhrzeit exakt oder vage darstellen, aber keine
Zeitdauer.
Das Datum folgt dem Schema YYYY-MM-DD
die Uhrzeit dem Schema HH:MM[:SS[.mmm]]
mp4 ist das gängige Format für Video und mp3 für Audio, was von allen
Browsern unterstütz wird. Für Videos braucht man keine height angeben da diese
automatisch mit der width skaliert wird.
autoplay | Video startet sobald es geladen ist
controls | Videosteuerung wird angezeigt
height | Höhe des Videos
width | Breite des Videos
loop | Video startet erneut
muted | Video ohne Ton
poster | Bild wird bis zum start des Videos angezeigt
preload="none" | verhindert, dass der Browser Videodaten vorab lädt, bevor
der Nutzer auf Play klickt
#t=4,10 | Video startet bei 4 Sekunden und endet bei 10
Das dialog tag erzeugt eine neue Ebene, die sich über die Website legt. Während
die Dialog-Box aktiv ist, ist die darunter liegende Webseite nicht aktiv. Bestes
Beispiel sind Login Formulare. Zum Öffnen und Schließen benötigt man aber
Javascript.
<button type="submit">Senden</button>
Außerhalb von Formularen hat ein Button ohne Javascript keine Funktion.
Zwischen dem öffnenden und schließenden button-tag, kann HTML verwendet werden.
Innerhalb von Formularen sind sie auch ohne ausdrückliches type="submit", der Button zum
Absenden des Formulars. mediaevent/html/button
<input type="submit" value="Senden">
Das Attribut type="submit" macht aus einem Input, einen grafischen Button. Wenn
der Nutzer auf den Button klickt, leitet der Browser die eingegebenen Daten zu der URL
aus dem action-Attribut des form-tags. mediaevent/html/submit
Und man kann ein Link stylen damit er wie ein Button aussieht. Dieser kann aber nur auf
eine andere Seite oder Sprunganker führen.
sub / sup
sub setzt einen Text tief, sup fügt einen Text hochgestellt ein.
sub und sup sind Inline-Elemente, d.h. sie führen nicht zu einem Zeilenumbruch innerhalb
eines Textes und dürfen keine Blockelemente wie p, table oder div-Tags enthalten. Die
meisten Browser verkleinern Text in sub und sup auf die halbe Schriftgröße und
benutzen dieselbe Schrift wie im Rest des Textes.
In Oliven-Knoblauch gebratene Gambas B,L,J,G
H2O | 50m2 | MarkeTM
Im Fließtext fallen Zeilen mit sup und sub aus dem Rahmen.
sup, sub {
position: relative;
vertical-align: baseline;
top: -0.4em;
}
sub { top: 0.4em; }