Beispiel HTML CSS Code und HTML/CSS Pattern Download
hier als ZIP
oder hier zum browsen:
http://github.com/tux2323/software-technik-html/
Folien Download
hier als PDF
HTML CSS Pattern - Box Model
Hier zum vollständigen Quelltext mit CSS: hier
HTML CSS Pattern - Column Layout
Hier zum vollständigen Quelltext mit CSS: hier
HTML CSS Pattern - Grid
Hier zum vollständigen Quelltext mit CSS: hier
Lernziele (Fragen zur Vorlesung)
- In welche Typen von Elemente können Dokumente aufgeteilt werden? Oder aus welchen Bestandteilen bestehen Dokumente?
- Wie sieht die Grundstruktur einer HTML-Seite aus?
- Was ist der Unterschied zwischen HTML und XHTML? Nennen Sie ein paar Code Beispiele.
- Was beschreibt das Element DOCTYPE in einer HTML Seite?
- Wie kann das Encoding in einer XHTML Datei angegeben werden?
- Wie deklariert man ungeordnete und geordnete Listen?
- Wie legt man Tabellen in HTML an? Wie unterscheiden sich die beiden Tags <td> und <th> in ihrer Bedeutung?
- Wie kann eine HTML Tabelle mit Kopf- und/oder Fußzeile anlegen?
- Wie definiert man Links?
- Wie schreibt man ein Formular in HTML?
- Wo und wie bindet man Stylesheets in eine HTML-Seite ein?
- Wie lautet die Syntax für die Definition von Stylesheet-Angaben?
- Was besagt das Prinzip Separation of Concerns (SoC)?
- Nennen Sie ein Beispiel wie das Prinzip SoC im Kontext HTML und CSS eingehalten werden kann.
- Wie sieht der HTML Code für ein Column-Model mit drei Column aus?
- Beschreiben Sie oder zeigen Sie mit HTML Code wie Elemente angeordnet werden können mit einem CSS Grid.
Literatur
- CSS and HTML Design Patterns - Michael Bowers - 2007 Apress
Links CSS Frameworks
- 960 Grid System ist ein CSS Framework das auf dem 960 Layout basiert - http://960.gs/
- YUI 2: Grids CSS -das Yahoo CSS Framework - https://developer.yahoo.com/yui/grids/
- Blueprint is a CSS framework - http://www.blueprintcss.org
Links HTML und CSS
- DOCTYPE – Document Type Definition (DTD) - zur Bestimmung der HTML-Version - http://www.mediaevent.de/xhtml/doctype.html
- HTML Formulare effektiv gestalten - http://www.web-spirit.de/webdesign-tutorial/8/HTML-Formulare-effektiv-gestalten
- HTML-Elementreferenz - http://de.selfhtml.org/html/referenz/elemente.htm
- CSS Beispiel Seite csszengarden - http://www.csszengarden.com/
- Blueprint Sample ein CSS Grid usw. - http://www.blueprintcss.org/tests/parts/grid.html
- W3C HTML Validation Test - http://validator.w3.org/
- Firebug Werkzeug zum CSS und HTML Debugging in Firefox - http://getfirebug.com/
Links zu HTML5
- Overview HTML5 Feature - http://diveintohtml5.org/detect.html
- HTML5 Canvas Demo - http://htmlfive.appspot.com/static/draw.html
- Formular Elemente in HTML5 - http://diveintohtml5.org/forms.html
- Testseite für HTML5 Formular Element - http://html5-buch.de/html5demos/formulare/
Video YUI 2: Grids CSS
Sehr gutes Video gibt einen Überblick über dass CSS Framework von Yahoo. Vermittelt aber auch die Grundlegenden Konzepte hinter modernem Web-Design und den Layout Patterns die heute dazu genutzt werden.
Keine Kommentare:
Kommentar veröffentlichen