====== Begriffe ====== ^Begriff ^Beschreibung ^ |Void Element|Elemente die ein Opening Tag haben, aber kein Closing-Tag| |Attribute|Definieren Eigenschaften von Dokumenten \\ \\ Befinden sich im Opening Tag eines Elements| ====== Einige Elemente ====== ^Element ^Beschreibung ^ |main|Haupttext der Seite. \\ Sollte sich nicht wiederholen \\ Semantisches Element| |section|Sektion. \\ \\ Zum Beispiel eine Untersektion innerhalb Main (umfassend die Überschrift und den Inhalt des Abschnittes) oder eine Kopf- oder Fußzeile \\ Semantisches Element (im Gegensatz zu div).| |figure|Figur (im Sinne von Abbildung in Büchern). \\ \\ Ein Block von Inhalt (häufig ein Bild) welches in sich geschlossen ist - z.B. ein Stück Code, eine Abbildung, ein Bild, ein Zitat. \\ Kann eine Abbildungserklärung darunter haben - siehe figcaption-Tag. \\ \\ Das Element umschließt alles was Teil der figure sein soll| |figcaption|Ein Erklärungstext zur figure. \\ Muss im figure-Element stehen| |em|Emphasys - Betonung/Heraushebung. \\ Genutzt um ein Wort oder Gruppe von Wörtern besonders zu betonen/hervorzuheben. \\ \\ Sollte an Stelle von Formatierung genutzt werden wenn angebracht, weil es durch srceen reader z.b. erkannt und entsprechend anders betont werden kann. \\ In der Regel wird der Text in italic dargestellt| |strong|Unterstreicht (nicht visuell, sondern im literarischen Sinne) ein Wort oder Wortgruppe. \\ In der Regel dick dargestellt| |label|Gruppiert Text und Elemente. \\ In der Regel einen Text und ein Interaktionselement (Textfeld, Radio-Button, Check-Box) die zusammengehören. \\ \\ Visuell in der Regel nicht sichtbar. \\ Aber klick auf den Text aktiviert das Interaktionselement -> vergrößert den Einzugsradio -> gut bei Touchscreens oder für Menschen mit Genauigkeitsproblemen. \\ Screenreader können Interaktionselement und Text zusammenbringen| |form|Formular. \\ \\ action -> URL an welche die Daten gesendet werden sollen. \\ method -> get oder post -> HTTP-Methode über die gesendet werden soll| |fieldset|Gruppiert zusammengehörende Controls (User-Interaktionselemente) zu einem Block. \\ Zum Beispiel Radio-Buttons der gleichen Entscheidung. \\ \\ Visuell sichtbar. \\ "Überschrift" kann durch Legend-Element erreicht werden| |Legend|Erzeugt eine Legende/Überschrift/Erklärung für ein Fieldset. \\ Ähnlich figcaption für figure-Element| |input|Eingabe-Element. \\ * type: ^type ^Beschreibung ^ |submit|Sendet das Formular ab| |text|Text| |email|E-Mail-Addresse| |password|Eingabe wird mit Sternchen maskiert| |radio|Radio-Button. \\ Mehrere können über den gleichen Namen im name-Attribut zu einer Gruppe zusammengefasst werden von der nur einer ausgewählt werden kann| |file|Button zum hochladen einer Datei| |number|Zahl - es können nur Zahlen eingegeben werden. \\ \\ siehe auch min und max| * value -> Beschriftung * required -> hat keinen Wert, wenn angegeben muss dieses Feld ausgefüllt werden um das Formular absendend zu können * minlength -> minimale Länge der Eingabe * pattern -> definiert ein regular Expression der erfüllt sein muss -> pattern="[a-z0-5]{8,}" * name -> Names des Feldes wie er dann im Post bzw. get übertragen wird * bei Radio-Buttons können mehrere Buttons den gleichen Namen haben, es kann dann nur einer dieser Gruppe ausgewählt werden * checked -> per Default ausgewählt (Radio-Button/Check-Box). Hat keinen Wert * min -> für Zahlenfelder der Minimalwert * max -> für Zahlenfelder der Maximalwert | |select|Drop-Down-Menü. \\ \\ * options geben die Optionen an die zur Auswahl stehen * value ist optional, wird es nicht angegeben wird der Text gesendet | |textarea|Ein Multi-Zeilen-Textfeld. \\ Benötigt schließendes Tag * cols -> definiert Anzahl Spalten/Zeichen (Breite) * rows -> Anzahl Zeilen (Länge) * placeholder -> Ein Plathalter-Text (verschwindet beim reinklicken) | ||Pseudo-Element welches definiert um was für eine Art Dokument es sich handelt -> html5-Element| |html|root-Element einer html-Seite. \\ \\ lang-Attribut = definiert welche Sprache diese Seite nutzt. lang="de" -> Deutsch; lang=de_de -> Deutsch-Deutschland| |meta|Definiert Meta-Informationen der Seite. \\ Innerhalb vom head-Element ^Attribut ^Beschreibung^ |charset|Kodierung des Dokumentes. \\ "utf-8" für UTF8| | |iframe|Einbinden anderer html-files in das aktuelle \\ \\ Funktioniert ähnlich einem frame, allerdings ohne dessen Nachteile, un dohen Definition eines Framesets. \\ Die einzubindende Datei wird einfach direkt in die aktuelle Datei eingebunden. \\ \\ Syntax: