Archive for August, 2017

Beispiel für ein Formular

Posted on by Psytorion • Comments disabled

Eine Demonstration der Formular-Eigenschaften in CSS und HTML

email

Posted on by Sklave1 • Comments disabled

Es wird durch den Browser rudimentär auf @-Zeichen, Server und Domain geprüft. Dies ist kein Test ob die E-mail tatsächlich existiert.

textarea

Posted on by herr_seeliger • Comments disabled

Die Feineinstellungen erfolgen über die Attribute rows, maxlength und wrap.

Formular

Posted on by herr_seeliger • Comments disabled

Die meisten Möglichkeiten für die Eingabe sind Typen des <input>-Elements. Weitere wichtige Bestandteile ist das <label> Element und der <button>. Außerdem gibt es <textarea> oder <select>. <form> und seine Kinder erfassen nur die Daten. Für die Verarbeitung kommen andere Sprachen, z.B. PHP oder Javascript, zum Einsatz.

text und passwort

Posted on by herr_seeliger • Comments disabled

<input> mit type=“text“ und type=“passwort“ übergeben beide jeweils Text und sind Einzeilig. Ändert man type=“passwort“ in type=“text“ werden die Punkte sogar in Buchstaben konvertiert. Type=“passwort“ verfügt über keinerlei Sicherheitsvorkehrungen. Dies muss über weitere Techniken wie z.B. hash & salt erzeugt werden.

Border bei Tabellen

Posted on by herr_seeliger • Comments disabled

Wir können die üblichen Border-Eigenschaften verwenden. Allerdings hat die table Eigenschaft border-collapse einen wesentlichen Einfluss darauf ob die border durchgezogen oder unterbrochen sind.

Farben bei Tabellen

Posted on by herr_seeliger • Comments disabled

Keywords, HexRGB, RGB, RGBA, HSL und HSLA können genutzt werden.

Box Eigenschaften der Tabelle

Posted on by herr_seeliger • Comments disabled

Padding, border sowie width und height können genutzt werden. Die Eigenschaft border-spacing dient als eine Art Ersatz für margin.

Aufbau einer Tabelle

Posted on by herr_seeliger • Comments disabled

Die Tabelle gliedert sich in #thead, #tbody und #tfoot. Eine #tr bildet eine Zeile. In einer Zeile sind die Informationen in der #td abgelegt. Nur im #thead können anstelle von #td #th verwendet werden. Eine #td kann über mehrere Zellen laufen, wenn sie #colspan verfügt. #rowspan lässt die Zelle über mehrere Zeilen laufen. Bemerkenswert ist […]

Gestaltung von Tabellen

Posted on by herr_seeliger • Comments disabled

Man kann sich mit Hilfe von Pseudoklassen die Gestaltung der Tabelle enorm erleichtern. Z.B. wird im gezeigten Beispiel mit #:nth-child jede ungerade (odd) oder gerade (even) Spalte anders gefärbt. Leere #td werden mit #:empty gefärbt.

Interne Sprungmarken

Posted on by herr_seeliger • Comments disabled

Wenn das Attribut #href auf eine ID verweist wird bei Klick auf den Link auf das Element mit der entsprechenden ID gesprungen. Hier wird der Sprung mit dem Script abgefangen und stattdessen sanft gescrollt.

Download-Link

Posted on by herr_seeliger • Comments disabled

Wenn als Link-Ziel eine Datei angeben ist, dann wird diese geladen. Das Attribut #download sorgt für den Download der Datei ohne Anzeige im Browser, was bei PDF ansonsten passieren würde. Das Attribute kann außerdem über den Attribute Selektor gestaltet werden.

Bilder als Link

Posted on by herr_seeliger • Comments disabled

Das Bild als Kind-Element von #a wird zur Link-Quelle. Es kann mit CSS gestaltet werden.

Inhalt verlinken

Posted on by herr_seeliger • Comments disabled

Mit dem Anker-Tag #a können Verlinkungen auf andere Inhalte gesetzt werden. Link-Quelle kann Text, ein Bild oder auch andere Elemente sein. Ein Link hat vier Zustände und diese werden über die Pseudo-Klassen #:link, #:visited, #:hover und #:active angesprochen werden.

Head

Posted on by herr_seeliger • Comments disabled

In der Box #head werden Angaben über die Webseite gesammelt. Häufig genutzte Elemente sind: #title, #meta und #link. #head wird im Gegensatz zu #body im Browser nicht angezeigt, seine Informationen jedoch verarbeitet. #head könnte jedoch mit der Eigenschaft #display #block sichtbar gemacht werden. Was allerdings keinen großen Sinn macht.

Arnold-Bode-Schule
Berufliche Schule der Stadt Kassel
Kontakt | Impressum | Datenschutz