html und css. plan erstellen weitere differenzierung
TRANSCRIPT
![Page 1: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/1.jpg)
HTML und CSS
![Page 2: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/2.jpg)
Plan erstellen
![Page 3: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/3.jpg)
Weitere Differenzierung
![Page 4: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/4.jpg)
Varianten
![Page 5: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/5.jpg)
Inhaltliche Klärung
![Page 6: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/6.jpg)
Mögliche Erweiterungen
![Page 8: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/8.jpg)
HTML-Gerüst anlegen
Das Wurzelelement html hat zwei Kindelemente: head und body. Alle sind in öffnende und schließende Tags gepackt.
![Page 9: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/9.jpg)
Drei Grundelemente
![Page 10: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/10.jpg)
Detailliertere Darstellung
![Page 11: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/11.jpg)
Navigationen
![Page 12: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/12.jpg)
id- und class-Attribute
![Page 13: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/13.jpg)
Schreibweisen
Verwende möglichst sprechende Namen!
![Page 14: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/14.jpg)
Grundstruktur einer CSS-Datei
![Page 15: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/15.jpg)
Seitenbreite
![Page 16: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/16.jpg)
Seitenbreite ausmessen
![Page 17: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/17.jpg)
Grafik einbinden
![Page 18: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/18.jpg)
Grafik verlinken
![Page 19: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/19.jpg)
Breite und Höhe
Diese Angaben sind optional, werde sie nicht gemacht, wird die Grafik in ihrer Originalgröße dargestellt.
![Page 20: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/20.jpg)
Grafikformate
![Page 21: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/21.jpg)
Komprimierung
![Page 22: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/22.jpg)
Block-Elemente
Im Gegensatz dazu reichen Inline-Elemente so lange die Zeile reicht.
![Page 23: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/23.jpg)
Margin und Padding
![Page 24: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/24.jpg)
Farbbeispiel
![Page 25: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/25.jpg)
Darstellung
![Page 26: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/26.jpg)
Margin
![Page 27: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/27.jpg)
Darstellung
![Page 28: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/28.jpg)
float
![Page 29: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/29.jpg)
Darstellung
![Page 30: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/30.jpg)
Darstellung
![Page 31: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/31.jpg)
Positionierung
![Page 32: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/32.jpg)
Alles fließt
![Page 33: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/33.jpg)
Darstellung
![Page 34: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/34.jpg)
float-Problem
![Page 35: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/35.jpg)
clear
![Page 36: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/36.jpg)
clear-div
Umschließende Elemente verlieren ihre Höhe durch darin gefloatete Elemente. Um die Höhe wieder herzustellen, verwendet man ein clear-div, dieses löst das float-Verhalten nicht hinter, sondern innerhalb des betroffenen Blocks auf. Realisiert wird das über zwei Bestandteile:Den einen Teil repräsentiert ein div im HTML-Code, das mit einem Klassennamen, wie zum Beispiel float-ende versehen wird. Das <div class=„float-ende“></div> muss vor dem schließenden Tag des <div id=„kopf-oben“> stehen.Der andere Teil ist die CSS-Regel, über welche die float auflösende clear-Eigenschaft definiert wird. Das div mit der class=„float-ende“ löst das Fließverhalten noch innerhalb des div=„kopf-oben“ auf und sorgt dafür, dass die Höhe wieder eingenommen wird.
![Page 37: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/37.jpg)
clear-div
![Page 38: HTML und CSS. Plan erstellen Weitere Differenzierung](https://reader035.vdocuments.pub/reader035/viewer/2022062218/570491c71a28ab14218dbaa2/html5/thumbnails/38.jpg)
clearfixFloat auflösen mit clearfix: http://h5c3.de/link-5-1