CSS: Layouts, Positionierung, Pseudoelemente

Vorbereitung:

Verständnis für width/height, padding/margin soll vorhanden sein - lässt sich auf alle Tags anwenden
Boxmodell:https://www.w3schools.com/Css/css_boxmodel.asp

Außenabstand: CSS Margin (w3schools.com)
Innenabstand: CSS Padding (w3schools.com)
Rahmen: CSS Borders (w3schools.com)

Hintergründe: CSS Backgrounds (w3schools.com)
Pseudoelemente: CSS :hover Selector (w3schools.com)

Vorübung:

a) Erzeugen Sie einen DIV-Container, der den Text "DIV-Container ohne Float" enthält.
b) Formatieren Sie den DIV-Container mit CSS (über "id" oder "class")nach Belieben:
    Hintergrundfarbe, Rahmen, padding, margin (keine Breite/Höhe)
c) Bauen Sie nach dem DIV-Container einen ca. 5zeiligen Blindtext ein
(Lorem-ipsum-Generator - z. B. http://www.loremipsum.de/ oder http://html-ipsum.com/)

Tipp: DIV-Tags sind Blockelemente, SPAN-Tags sind Inlineelemente - beide sind unformatiert

Tabellen

Die Formatierung von Tabellen erfolgt seit HTML5 nicht mehr über die Attribute, zB <table border="1" ...> wird nicht mehr verwendet.

Stattdessen erfolgt die Formatierung über CSS.

Wenn Dreamweaver standardmäßig border="1" usw. einfügt, sollte dies gelöscht werden und Rahmen mit CSS vergeben werden (<table style=" border ..."> oder über eine Zuweisung im Style-Bereich) - siehe dazu auch https://wiki.selfhtml.org/wiki/HTML/Tabellen/Aufbau_einer_Tabelle#Gestaltung_durch_CSS

Tipp:
Die Rahmen der Tabelle werden als Formatierung zu <table> gesetzt, jene für die Zellen als Formatierung zu <td>.
Um Tabellenüberschriften zu kennzeichnen kann statt <td> der Tag <th> (table header> verwendet werden - siehe https://www.w3schools.com/tags/tag_th.asp.

Die Abstände zwischen den Zellen einer Tabelle werden mit border-spacing (nicht mit margin!) festgelegt - siehe https://www.w3schools.com/css/css_table.asp
zB <table style="border-spacing: 5px">

Wenn nur 1 Linie zw. den Zellen erscheinen soll, kann man die beiden Linien zw. den Zellen auf 1 Linie "zusammenfallen" lassen:
für <table> border-collapse: collapse;   
sollen beide Linien/Rahmen angezeigt werden, verwendet man border-collapse: separate;  (ohne Angabe wird standardmäßig separate verwendet).

Achtung: diese Angaben funktionieren nur, wenn für die Zellen (<td>) ein Rahmen definiert wurde, zB border: #FFF solid 1px
also: Rahmen für <td> angeben, das Zusammenfallen für <table> festlegen

Formulare ...

Vorbereitung:

Grundstruktur (form, action, method): https://www.w3schools.com/html/html_forms.asp
Eingabefelder (input, textarea): https://www.w3schools.com/html/html_form_input_types.asp
versteckte Elemente (hidden):

Buttons (senden/zurücksetzen): https://wiki.selfhtml.org/wiki/HTML/Elemente/form

Übertragung von Formulardaten

action = "1.html"   => nach "Absenden" wird die Datei 1.html aufgerufen
action = ""            => nach "Absenden" wird die gleiche Datei nochmals aufgerufen

action = "mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein." => nach "Absenden" werden die Daten an das eingerichtete email-Programm übergeben

method = "post" => Daten werden (für den User nicht sichtbar) über den HTTP-Header übertragen - notwendig bei action="mailto: ..."

method = "get"  => Daten werden an die URL angehängt - man erkennt, welche Variablen und welche Werte übertragen werden

Formatierung des Formulars mit CSS:

Eingabefelder für zB PLZ, Ort kommen nur 1 x im Formular vor und werden daher über id="..." identifiziert. Wenn zB alle Textfelder das gleiche Aussehen haben sollen, können sie über eine Klasse formatiert werden (class = "...").

Tipp: Legen Sie im Style-Bereich eine Klasse an (zB .eingabefeld), um Hintergrundfarbe, Rahmen, abgerundete Ecken usw. für Ihre Eingabefelder zu definieren

Erreichbarkeit eines Webservers ...

bei Interesse: "private" Webserver über dynamische Domains (Tipp: Dyndns-Einstellungen am Router)

Domain/Subdomain

Zusatzinfos zu: IP, Subnet, Gateway, Router ...

TLD (Top Level Domain): https://de.wikipedia.org/wiki/Top-Level-Domain
generische Domain vs. Länderdomain:  https://de.wikipedia.org/wiki/Domain_%28Internet%29https://de.wikipedia.org/wiki/Domain_%28Internet%29

www.nic.at (Domainvergabe)
whois (whois.com ...)

Welchen Wert hat eine Domain - siehe zB http://www.domainbewertung.de.com?

IFRAMES:

erste Schritte zum Aufbau von Seitenlayouts ...
Mit Hilfe von IFRAMES  (oder OBJECT) können andere Inhalte in einem Fenster auf der Webseite "eingeblendet" werden.

https://wiki.selfhtml.org/wiki/Iframe#iframe
https://www.w3schools.com/html/html_iframe.asp

Erstellen Sie die Seite iframe_1.html.
Erstellen Sie einen iframe und blenden Sie in diesem die Schulwebseite ein

Backgroundinfo zu: was bedeutet im Stylebereich "h1 a {}", "div#navi {}" und "#navi a" - siehe:

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator

Grundlagen der CSS-Formatierung

WO können CSS-Formatierungen abgespeichert werden?

a) direkt beim einzelnen Tag (zB <h1 style="...">): INLINE (= in der Zeile)

   https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Formate_direkt_in_einem_style-Attribut_festlegen oder
   https://www.w3schools.com/css/css_howto.asp

b) alle Formatierungsangaben werden im Head-Bereich festgelegt (<head> <style>...</style> </head>): INTERN (= in der HTML-Datei)
   https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Formate_zentral_in_einem_style-Element_festlegen

c) in einer externen CSS-Datei (zB format.css), die über einen Link mit dem HTML-Dokument verknüpft wird (<link>  ): EXTERN (= in einer anderen Datei)
   https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Einbinden_einer_externen_Datei

Zusatzinfo: es ist möglich, für unterschiedliche Ausgabemedien (Bildschirm = screen, Drucker = print) unterschiedliche CSS-Formatierungen zu definieren.
Dazu werden zB im <head> 2 Stylebereiche erstellt (<style media="screen"> und <style media="print">), der Browser verwendet für den Ausdruck dann automatisch die Formatierungen aus <style media="print"> (oder man verwendet nur 1 Stylebereich und gibt dort vereinzelte Druckformatierungen mit @media print ... an).

https://wiki.selfhtml.org/wiki/CSS/Media_Queries

FÜR WELCHE Elemente gelten Formatierungsangaben im Stylebereich (<style> im Head oder in externer CSS-Datei):

Selektoren = bestimmte Elemente auswählen:

siehe: https://wiki.selfhtml.org/wiki/CSS/Selektoren

oder: https://www.w3schools.com/html/html_classes.asp und https://www.w3schools.com/html/html_id.asp

 (Pseudoelemente und Pseudoklassen werden später behandelt)