Blatt 4 - Universität Paderborn
Blatt 4 - Universität Paderborn Blatt 4 - Universität Paderborn
Universität Paderborn Webbasierte Informationssysteme SS 2013 Dr. Th. Lettmann 3. Mai 2013 Übungsblatt 4 Für den Erwerb einer Bonusstufe in der Abschlussnote müssen Lösungen zu den mit Punktzahlen versehenen Übungsaufgaben in Gruppen zu zwei oder drei Personen über koaLA abgegeben werden. Abgabetermin: 14.05.2012, 09:00h Aufgabe 1 : HTML+CSS (10 Punkte) (a) Beschreiben Sie den Unterschied zwischen physischen und logischen Auszeichnungen. (b) Folgendes HTML-Fragment ist nach den Regeln für Transitional-HTML aufgebaut. Überschrift Halten Sie die Modellierung für vorbildlich? (mit Begründung) Wenn ja, geben Sie zusätzlich ein Beispiel für eine schlechtere Modellierung. Wenn nein, geben Sie eine bessere Modellierung des Inhaltes an. (c) An welchen Stellen dürfen -Elemente in HTML-Dateien stehen? (d) Erläutern Sie die allgemeine Form von CSS-Regeln und die Aufgaben ihrer Bestandteile. (e) Beschreiben Sie die Struktur des folgendem HTML-Fragmentes durch einen Baum (Skizze). Wichtige Überschrift Text im Abschnitt mit Betonung und ohne.Text Textknoten können in der Skizze weggelassen werden. (f) Gegeben seien die folgenden CSS Regeln in der zugehörigen CSS-Datei. div {color:black} h1 {color:red} .definition {color:green} #top {color:blue} p em {color:yellow} Notieren Sie in Ihrer Skizze an jedem Elementknoten die Farbe, mit der er aufgrund dieser CSS-Regeln dargestellt wird. (g) Welcher Konflikt kann zwischen Regeln eines Stylesheets auftreten? Aufgabe 2 : CSS Informieren Sie sich über die folgenden Möglichkeiten, durch Einsatz von CSS Regeln das Layout einer Seite zu beeinflussen: • Property display: inline | block • Property position: static | relative | absolute | fixed Properties top, right, bottom, left Wie können Sie solche Regeln einsetzen, um Inhalte im Sinne von Aufgabe 3 zu positionieren. 1 c○ Stein/Lettmann 2013
- Seite 2: Aufgabe 3 : HTML+CSS (10 Punkte) Fo
<strong>Universität</strong> <strong>Paderborn</strong><br />
Webbasierte Informationssysteme<br />
SS 2013<br />
Dr. Th. Lettmann 3. Mai 2013<br />
Übungsblatt 4<br />
Für den Erwerb einer Bonusstufe in der Abschlussnote müssen Lösungen zu den mit Punktzahlen<br />
versehenen Übungsaufgaben in Gruppen zu zwei oder drei Personen über koaLA abgegeben werden.<br />
Abgabetermin: 14.05.2012, 09:00h<br />
Aufgabe 1 : HTML+CSS (10 Punkte)<br />
(a) Beschreiben Sie den Unterschied zwischen physischen und logischen Auszeichnungen.<br />
(b) Folgendes HTML-Fragment ist nach den Regeln für Transitional-HTML aufgebaut.<br />
Überschrift<br />
Halten Sie die Modellierung für vorbildlich? (mit Begründung) Wenn ja, geben Sie zusätzlich ein<br />
Beispiel für eine schlechtere Modellierung. Wenn nein, geben Sie eine bessere Modellierung des<br />
Inhaltes an.<br />
(c) An welchen Stellen dürfen -Elemente in HTML-Dateien stehen?<br />
(d) Erläutern Sie die allgemeine Form von CSS-Regeln und die Aufgaben ihrer Bestandteile.<br />
(e) Beschreiben Sie die Struktur des folgendem HTML-Fragmentes durch einen Baum (Skizze).<br />
Wichtige Überschrift<br />
Text im Abschnitt mit Betonung<br />
und ohne.Text<br />
Textknoten können in der Skizze weggelassen werden.<br />
(f) Gegeben seien die folgenden CSS Regeln in der zugehörigen CSS-Datei.<br />
div {color:black}<br />
h1 {color:red}<br />
.definition {color:green}<br />
#top {color:blue}<br />
p em {color:yellow}<br />
Notieren Sie in Ihrer Skizze an jedem Elementknoten die Farbe, mit der er aufgrund dieser<br />
CSS-Regeln dargestellt wird.<br />
(g) Welcher Konflikt kann zwischen Regeln eines Stylesheets auftreten?<br />
Aufgabe 2 : CSS<br />
Informieren Sie sich über die folgenden Möglichkeiten, durch Einsatz von CSS Regeln das Layout einer<br />
Seite zu beeinflussen:<br />
• Property display: inline | block<br />
• Property position: static | relative | absolute | fixed<br />
Properties top, right, bottom, left<br />
Wie können Sie solche Regeln einsetzen, um Inhalte im Sinne von Aufgabe 3 zu positionieren.<br />
1 c○ Stein/Lettmann 2013
Aufgabe 3 : HTML+CSS (10 Punkte)<br />
Folgendes Web-Seiten Layout soll realisiert werden:<br />
Body<br />
Header<br />
Navigation<br />
Menue<br />
Content<br />
Header<br />
Side<br />
Information<br />
Content<br />
Footer<br />
Footer<br />
Bisher wurde HTML 4.01 verwendet und folgendes Dokument erstellt:<br />
<br />
<br />
<br />
Example page with some dummy content.<br />
<br />
<br />
<br />
<br />
Firma XYZ<br />
<br />
<br />
<br />
Menue Option 1<br />
Menue Option 2<br />
<br />
<br />
Artikelüberschrift<br />
z.B. Verfasser<br />
Artikeltext ...<br />
z.B. Quelle<br />
<br />
<br />
Titel des Seitentextes<br />
Inhalt ...<br />
<br />
<br />
Fußzeile mit Link zum Impressum<br />
<br />
<br />
Nutzen Sie die Möglichkeiten von HTML 5, um ein leichter verarbeitbares HTML-Dokument zu schaffen.<br />
Verwenden Sie dazu die Elemente article, aside, footer, header, section.<br />
2 c○ Stein/Lettmann 2013
Change language