MMDE2F Einsendeaufgabe - Formatierung und Layout mit CSS - Note 1

A. Praxisaufgabe
Sehen Sie sich bitte die folgende Abbildung einer Webseite an, wie sie im Firefox dargestellt wird. Entwickeln Sie bitte nach dieser Vorlage ein HTML-Dokument css-aufgabe.html mit einem zugehörigen externen Stylesheet css-aufgabe.css. Dabei müssen Sie weder dieselben Maße einhalten noch genau dieser Farbgebung folgen. Das Layout sollte aber diesem Muster entsprechen. Dazu hier noch einige Informationen und Anforderungen:
Vorlage für CSS-Einsendeaufgabe
(Abbildung)

Aufgabe:
• Legen Sie dazu als Erstes einen neuen Ordner auf Ihrem Rechner an und nennen Sie ihn name-mmde2f-aufgabe, wobei Sie bitte für name Ihren eigenen Nachnamen einsetzen.
• Speichern Sie bitte darin die beiden Dateien css-aufgabe.html und css-aufgabe.css.
• Orientieren Sie sich bei Ihrem Entwurf an den Beispielen aus Kapitel 8 und Kapitel 9. Das Layout der Aufgabe ist eine stark vereinfachte Variante dieser Beispiele.
• Grundsätzlich soll auf der ganzen Seite eine Schrift mit der Prioritätsreihenfolge Verdana, Geneva, sans-serif verwendet werden.
• Machen Sie ausgiebigen Gebrauch von kontextabhängigen Selektoren. Hier können Sie Ihrer Fantasie freien Lauf lassen!
• Im linken Container sollen nach der Hauptüberschrift zwei Absätze eingefügt werden, denen die Klassen .grosstext und .kleintext mit entsprechenden CSS-Regeln zugewiesen sind.
• Die Verweise im rechten Container sollen als Liste ausgezeichnet sein (ohne Aufzählungspunkte!) und im Normalzustand keine Unterstreichung haben.
• Mithilfe von Pseudoklassen soll ein sinnvoller Hover-Effekt für die Links implementiert werden. Denken Sie daran, dass Sie als Linkpfad im href-Attribut den „Gartenzaun“ verwenden.
Liefern Sie bitte den gesamten Ordner nachname-mmde2f-aufgabe mit allen darin enthaltenen Dateien ab (z.B. als ZIP-Archiv).

B. Multiple Choice
Bitte beantworten Sie die folgenden 10 Fragen durch Ankreuzen der richtigen Antwort. Zu jeder Frage gibt es nur eine (!) richtige Antwort. Jede korrekt gelöste Frage wird mit 4 Punkten gewertet.
Bitte lesen Sie sich die Fragen aufmerksam durch, bevor Sie antworten. Viel Erfolg!
Aufgabe:
CSS führt zur Trennung von
[ ] Struktur und Inhalt
[ ] Layout und Design
[ ] Inhalt und Gestaltung
[ ] Struktur und Gestaltung
Aufgabe:
Frage: Welche CSS-Codezeile ist korrekt?
[ ] p {font-family:Helvetica, font-weight:bold}
[ ] p {font-family:Helvetica, sans-serif; font-weight:bold;}
[ ] p {font-family=Helvetica, sans-serif; font-weight=bold}
[ ] p {font-family:Helvetica, font-weight:bold};

Aufgabe:
Welche Aussage zu kontextabhängigen Selektoren ist richtig?
[ ] Sie identifizieren Elemente in einem bestimmten HTML-Dokument.
[ ] Sie beschreiben die Vererbung der Eigenschaften von Eltern-Elementen auf Kind-Elemente.
[ ] Sie werden auch als „Nachfahre-Selektoren“ bezeichnet.
[ ] Sie erlauben die Formatierung mehrerer HTML-Elemente gleichzeitig.
Aufgabe:
Die Deklaration {font-family:Helvetica, Arial, sans-serif;} wendet man an, um
[ ] dem User die Auswahl zwischen verschiedenen Schriften zu ermöglichen.
[ ] dem Browser die Möglichkeit zu geben, aus verschiedenen Schriften zu wählen.
[ ] den Browser anzuweisen, nach Möglichkeit die erste Schrift in der Liste zu verwenden.
[ ] kontextabhängige Schriften zu verwenden.
Aufgabe:
Für die Vererbung von Eigenschaften gilt,
[ ] dass sie der Webdesigner mit entsprechenden Regeln definieren muss.
[ ] dass sie immer zwischen Eltern-Elementen und Kind-Elementen stattfindet.
[ ] dass sie immer zwischen allen gleichartigen Elementen (p, h1, h2 usw.) stattfindet.
[ ] dass sie nur innerhalb eines Containers stattfindet.
Aufgabe:
Welche Aussage zu der Bezeichnung „cascading“ ist richtig?
[ ] „Cascading“ bedeutet, dass mehrere Regeln gleichzeitig auf ein Element wirken.
[ ] „Cascading“ bedeutet, dass bei gleichzeitiger Wirkung mehrerer Regeln auf ein Element genau festgelegt ist, welche Regel dann tatsächlich angewandt wird.
[ ] „Cascading“ bedeutet dasselbe wie kontextabhängig.
[ ] „Cascading“ bezeichnet die hierarchische Schreibweise des CSS-Codes.
Aufgabe:
Welche Eigenschaften werden in dem Box-Modell beschrieben?
[ ] Hintergrundfarben und Ränder von Containern sowie deren Abstände untereinander.
[ ] Die Breite und Höhe eines block-Elements, dessen Außen- und Innenabstand sowie sein Rahmen.
[ ] Die Gesamtbreite und -höhe von inline-Elementen.
[ ] Die hierarchische Struktur mehrerer ineinander verschachtelter div-Container.
Aufgabe:
Eine CSS-Regel wird von einer weiter unten in der Kaskade notierten Regel überschrieben, wenn
[ ] diese Regel in einem Inline-Style definiert wird.
[ ] beide Regeln für Elementselektoren gelten.
[ ] die definierte Eigenschaft nach dem Punktesystem eine höhere Spezifität besitzt.
[ ] beide Selektoren identisch sind und das gleiche Gewicht haben.
Aufgabe:
Die Eigenschaft float:left bedeutet für ein Element:
[ ] Das betreffende Element befindet sich am rechten Rand der Seite und wird links umflossen.
[ ] Sobald links neben dem betreffenden Element genug Platz ist, soll der übrige Content diesen Raum einnehmen.
[ ] Der Inhalt des Elements fließt so lange links an allen anderen Elementen vorbei, bis er wieder die gesamte Breite der Seite einnehmen kann.
[ ] Das betreffende Element befindet sich am linken Rand der Seite und wird rechts umflossen.
Aufgabe:
Für die Eigenschaft float gilt:
[ ] float gilt so lange, bis das betreffende Element von einem anderen Element genau einmal umflossen worden ist.
[ ] Die Eigenschaft float bleibt so lange wirksam, bis sie explizit wieder aufgehoben wird.
[ ] float gilt ab dem betroffenen Element grundsätzlich immer für alle Elemente bis zum Dokumentende.
[ ] float gilt immer nur so lange, bis es in dem betreffenden Element zu einem Überlauf des Inhalts kommen würde.