Einzelaufgabe 1: HTML und CSS
Einzelaufgabe, Termin Mo 19.10.
Erreichbare Punkte: 6
Kontext
Wir werden Kenntnisse in HTML und CSS als Basis für die Entwicklung von Webseiten und serverseitigen Scripts im Rahmen des Praktikums benötigen. Es sind keine Vorlesungseinheiten zu HTML/CSS vorgesehen, es wird jedoch in der zweiten Praktikumseinheit ein kleines Tutorial dazu geben. Versuchen Sie aber schon vorher erste Schritte mit HTML/CSS selbständig zu machen. Dafür steht Ihnen der Almighty Laborserver zur Verfügung.
Aufgabe
Erstellen Sie eine Webseite in HTML (auf Ihrem Almighty Account, in einem Unterverzeichniss von Ihrem public_html). Diese Seite soll die Titelseite eines Computerhardware Online-Shop darstellen. Die Seite soll den Titel/Name des Shops trägen (als Hauptüberschrift), eine kurze Beschrebung des Shops ("wir sind die Besten…") und eine Liste von Produktkategorien.
Jede Kategorie auf der Liste soll einen Titel und eine (Unter)Liste der einzelnen Produkten umfassen und soll mit einer bestimmten Untergrundfarbe dargestellt werden (z.B. Hellgrünn für Laptops, Hellgrau für Toners, usw.).
Die Liste der Produkte in einer Kategorie soll die folgende Informationen zum jeden Produkt enthalten: Titel, kurze Beschreibung (1-2 Sätze/Absätze), eine Abbildung/Photo des Produkts, und zwei Preisangaben in EUR pro Stück (1)ohne und (2)inkl. MWSt. Für die Berechnung des Preises inkl. Mehrwertsteuer verwenden Sie den "ohne MWSt." Preis und eine JavaScript methode. Werden Sie beim Scripting ratlos? Siehe den Hinweis unten…
Anforderungen
- Im HTML dürfen keine Angaben zur Formattierung bzw. Visualisierung gemacht werden, sondern nur unformattierte Liste, Überschrifte, Absätze usw. Klartext: ich will keine style, font, valign, center, width, color, border, und ähnliches direkt in den HTML Elementen sehen.
- Verlinken Sie Ihre Shopseite mit einem CSS Stylesheet, das die Shopseite visuell gut aussieht.
- Was soll das CSS eigentlich formatieren:
- Wählen Sie einen geigneten Font für die ganze Seite.
- Die ganze Blöcke (Kategorien, Produkten in einer Kategorie) können mit der Hilfe von "gestyleten" DIV Elementen formattiert werden.
- Experimentieren Sie mit verschiedenen CSS Styles. Mindestens will ich sehen: Schrift, Positionierung von Elementen, Rahmen, Abstände (margin, padding), Farben, usw.
- Die Seite soll auch OHNE einem CSS gut lesbar sein, da wir auch sehbehinderte Kunden unterstützen. Dies ist leicht zu testen im Browser, e.g. Firefox: unter View/Page style/No style.
- Dies ist eine Einzelaufgabe.
Abgabe
Speichern Sie diese Files auf Ihrem Almighty Account im Webverzeichnis (in einem Unterverzeichnis), und geben Sie den Link im Abgabebereich ab (da befinden sich auch weitere Hinweise wie man den Link abgibt).
Links
Siehe die kurzen Einführungen in HTML, CSS und HTTP unter der zweiten Einheit oder besuchen Sie die folgenden Seiten:
- Für die Nerds: «CSS 2.1 Spezifikation vom W3C»
Hinweis: Bei Kalkulierung des inkl.-MWSt.-Preises können Sie sich auch mit Beispiel zum Scripting inspirieren lassen – was im Praktikum als Beispiel zum JavaScripting angezeigt wurde
Letzte Änderung: 28.10.2009, 10:26 | 472 Worte