Beta-Phase

Diese Website befindet sich noch in der Beta-Phase und funktioniert in dieser leider nur unter Google Chrome.

Wenn du möchtest, kannst du dir den Browser hier herunterladen.

Grundprinzipien
Hier kannst du dir schnell einen Überblick über das Verhalten von html und css machen. Du kannst die Grundprinzipien der Reihe nach durchgehen oder, falls du manche Begriffe bereits kennst, einzelne Prinzipien aussuchen.

1. Aufbau von HTML und CSS

1.1 HTML-Grundbegriffe

Ei­ne Aus­wahl an Grund­begriffen in HTML ist wichtig, um die­se Spra­che zu ver­stehen und mit ihr arbei­ten zu können.

1.2 HTML-Struktur und Syntax

Der Auf­bau ei­nes HTML-Dokumentes und das Zusammen­spiel der HTML-Elemente sind Grundla­ge für ei­ne funktionieren­de Web­site.

html, head, body
1.3 CSS-Grundbegriffe

Ei­ne Aus­wahl an Grund­begriffen in CSS ist wichtig, um die­se Spra­che zu ver­stehen und mit ihr arbei­ten zu können.

1.4 CSS-Struktur und Syntax

Der Auf­bau ei­ner CSS-Datei und das Zu­sammen­spiel der CSS-Anga­ben sind Grundla­gen, um ein HTML-Dokument zu ge­stal­ten.

1.5 Verbindung von HTML und CSS

Um CSS-Anga­ben wirksam zu ma­chen, ist es wichtig, das CSS-Dokument mit dem ent­spre­chen­den HTML-Dokument zu ver­bin­den.

style, link

2. Box-Modell

2.1 Darstellung von Elementen

Elemente wer­den auf un­ter­schiedli­che Art und Weise dar­ge­stellt. Zwei Ar­ten sind besonders grundlegend, um die An­ord­nung von Elemen­ten in ei­nem HTML-Doku­ment zu ver­stehen.

display
2.2 Größe von Elementen

Die Größe von Elemen­ten ist von meh­re­ren Fak­to­ren ab­hängig. Ne­ben der Breite und Höhe, können ei­nem Element weite­re Be­rei­che hinzugefügt wer­den.

width, height, padding, border, margin
2.3 Alternatives Box-Modell

Jeder Brow­ser be­rech­net die Größe ei­nes Elements auf die glei­che Art und Weise. Ein alternatives Box-Modell, kann die Be­rech­nung und Dar­stellung ei­nes Elements stark ver­einfacht.

box-sizing
2.4 Übung: Box-Modell

Vertiefe und teste de­in Wis­sen in die­ser prakti­schen Übung zur ge­sam­ten Lekti­on.

3. Positionierung

3.1 Umfließen von Elementen

Durch die Ein­stellun­gen für das Umfließen, ist es mög­lich durch CSS-Anga­ben Ele­mente nebenein­an­der oder gegenüber zu positionie­ren.

float, clear
3.2 Lage von Elementen

Die La­geei­genschaf­ten der Elemente zu kennen und anwen­den zu können ist grund­legend für ei­ne präzise Positionierung.

position, z-index
3.3 Versetzen von Elementen

Durch Ein­stellun­gen der La­ge wird es möglich, ein Element durch Ver­satz­anga­ben exakt von sei­ner Grundpositi­on abzurü­cken.

top, right, bottom, left
3.4 Übung: Positionierung

Vertiefe und teste de­in Wis­sen in die­ser prakti­schen Übung zur ge­sam­ten Lekti­on.