HTML/CSS Workshop: Unterschied zwischen den Versionen
Misan (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Misan (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| Zeile 31: | Zeile 31: | ||
=== Einleitung - etwa 45 Minuten === | === Einleitung - etwa 45 Minuten === | ||
* Geschichte und Stand der heutigen Definition HTML5 & CSS3 | * Geschichte und Stand der heutigen Definition <abbr title="Hyper Text Markup Language">HTML5</abbr> & <abbr title="Cascading Style Sheets">CSS3</abbr> | ||
* HTML ist keine Programmiersprache sondern eine "Markup" Sprache ähnlich wie SVG/SGML/XML etc | * HTML ist keine Programmiersprache sondern eine "Markup" Sprache ähnlich wie <abbr title="Scalable Vector Graphics">SVG</abbr>/<abbr title="Standard Generalized Markup Language">SGML</abbr>/<abbr title="eXtensible Markup Language>XML</abbr> etc | ||
* Herkömmliche Methoden (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos & Don'ts) | * Herkömmliche Methoden (Ausflug in die Geschichte der TableLayouts, SpacerGIFs, Dos & Don'ts) | ||
* Natürlich im späteren Verlauf auch die modernen Methoden und Approaches | * Natürlich im späteren Verlauf auch die modernen Methoden und Approaches | ||
| Zeile 54: | Zeile 54: | ||
* Kleine Einleitung in die Bedeutung der wichtigsten HTML Elemente | * Kleine Einleitung in die Bedeutung der wichtigsten HTML Elemente | ||
* CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen. | * CSS schreiben bedeutet sich selbst Werkzeuge zur Verfügung zu stellen. | ||
* W3C Boxmodell (Margin, Outline, Border, Padding, Content) | * <abbr title="World Wide Web Consortium">W3C</abbr> Boxmodell (Margin, Outline, Border, Padding, Content) | ||
=== Aufbau eines ersten Layouts - Open End === | === Aufbau eines ersten Layouts - Open End === | ||
| Zeile 61: | Zeile 61: | ||
** Kopfbereich (Header) | ** Kopfbereich (Header) | ||
** Inhalt | ** Inhalt | ||
** | ** Fußbereich (Footer) | ||
* Aufbau der Seite mit Unterstützung zusammen mit CSS. | * Aufbau der Seite mit Unterstützung zusammen mit CSS. | ||
* Eigene Ideen umsetzen. | * Eigene Ideen umsetzen. | ||
| Zeile 69: | Zeile 69: | ||
=== Tools & Quellen === | === Tools & Quellen === | ||
Eine Liste aller gängigen und zuverlässigen | Eine Liste aller gängigen und zuverlässigen Quellen sowie Tools WebKick - Ein Boilerplate/WebTemplate Kickstarter der sich alle nützlichen Tools die hier aufgelistet sind zu Nutze macht. Liefert auch eine Ordnerstruktur für das Anlegen und Einbinden von CSS/Bildern/Javascript und Bildern mit. Zusätzlich sind ein paar Hilfsklassen vorhanden (clear oder clearfix aka .group) Erschaffen von mir :) | ||
https://github.com/MartinMuzatko/WebKick | https://github.com/MartinMuzatko/WebKick | ||