Title: HTML
Course: eTapas 2014/15

Q: Vervollständigen Sie die folgende HTML-Seite, sodass die Elemente wohlgeformt und valide benutzt werden, und auch die Auswahl der Elemente die Text-Struktur widerspiegelt:

<html>

<head>

[...]HTML - Eine Einführung[...]

</head>

[...]

<h1>HTML - Eine Einführung</h1>

<h2>Elemente</h2>

<p>HTML besteht aus Elementen, die in einer hierarchischen Struktur verschachtelt werden. Wird diese Grundregel eingehalten, so ist ein Dokument wohlgeformt.</p>

[...]Attribute[...]

<p>Elemente können über Attribute mit verschiedenen Eigenschaften ausgestattet werden.</p>

</body>

[...]
A: <title>; </title>; <body>; <h2>; </h2>; </html>

Q: Erstellen Sie mit den nachfolgenden Elementen eine sinnvoll zusammengesetzte Tabelle:
- 1 | <table>
- 2 | <colgroup span="2" width="200" />
- 3 | <thead>
- 4 | <tr><th>A</th><th>B</th></tr>
- 5 | </thead>
- 6 | <tbody>
- 7 | <tr><td>A</td><td>B</td></tr>
- 8 | </tbody>
- 9 | </table>

Q: Vervollständigen Sie die folgende Tabelle:

<table>

<thead>

<tr><th>A</th><th>B</th></tr>

</thead>

[...]

<tr><td colspan="[...]">[SUMME]</td></tr>

[...]

<tbody>

<!-- Content of Table follows here -->

</tbody>

</table>
A: <tfoot>; 2; </tfoot>

HINWEIS: Zur Lösung dieses Beispiels laden Sie bitte die ZIP-Datei FlowerPower.zip herunter.

Aufgabe

Die Aufgabe besteht darin, eine bestehende HTML-Seite (index.html) um eine  CSS-Datei derart zu ergänzen, dass die Seite möglichst exakt wie die nachfolgende Vorlage aussieht. In der HTML-Seite sind keine Änderungen mehr notwendig, alle Tags, IDs und CLASSes sind bereits gesetzt

Laden Sie nach Bearbeitung des Beispiels die Datei "stylesheet.css" hier hoch!

Lösungshinweise

Zu den einzelnen Bereichen der Seite (index.html) gibt es hier detaillierte Erläuterungen:

[Image: Nr 1] | Der Hintergrund der gesamten Seite soll ein dunkles Grau sein. Die Inhalte  haben vom linken Rand einen Abstand von 35 Pixel, von oben einen Abstand von 30 Pixel Der gesamte Text der Webseite soll auf „font-family: Verdana, Helvetica, sans-serif;“ mit einer Schriftgröße von 13px gesetzt sein. Schriftfarbe ist grau;
[Image: Nr 2]
Der rote Button soll im rechten unteren Eck der Bannergrafik positioniert sein.

Diese Positionierung kann mit Hilfe folgender Anweisung gelöst werden:
                 position: absolute;

                top: 180px;

                left:785px;
Die Grafik soll per CSS entsprechend verkleinert werden.
[Image: Nr 3] | Der Block „gesamt“ soll eine schwarze Hintergrundfarbe haben und von der Breite her an das Bannerbild angepasst sein. Alle Inhalte sollen einen Abstand von 15 Pixel vom Rand haben, der Rand selbst soll grau sein.
[Image: Nr 4] | Alle Bilder (mit Ausnahme des roten Buttons und der „Download-Pfeile“) sollen einen einfachen,grauen Rand haben
[Image: Nr 5] | Der Textabsatz soll einen Abstand nach oben von 40 Pixel und einen Abstand nach unten von 35 Pixel aufweisen. Die in der Vorlage rot oder gelb dargestellten Textteile sind ebenfalls zu formatieren.
[Image: Nr 6] | Die Überschrift soll einen angemessenen Abstand zum Bild oben einhalten, Schriftgröße 40 aufweisen und in weiß gehalten sein.
[Image: Nr 7]
Das Menü soll einen angemessenen Abstand zur Überschrift nach oben und zum Inhalt nach unten haben. Weiters soll gelten:

- Alle Menülemente sind nebeneinander angeordnet
- Zwischen den Menüpunkten soll ein angemessener Abstand sein
- Text der Menüpunkte in Fettschrift und schwarz
- Bei Mausover ändert sich die Textfarbe in grau
- Das Menü hat eine gelbe Hintergrundfarbe und ist nach allen Seiten durch eine strichlierte Linie begrenzt
[Image: Nr 8]
Die Tabellendarstellung soll sich über die gesamte Blockbreite erstrecken. Weiters gilt:

- Rahmen 1 Pixel in schwarz
- Alle Inhalte links oben positioniert
- Zelleninhalte weisen in alle Richtungen einen Abstand von 12 Pixel auf
- Die Zeilen haben abwechselnd die Hintergrundfarbe mittelbrau bzw. dunkelgrau.
[Image: Nr 9] | Alle Links, die nicht zum Menü gehören, sind grün, beim Darüberfahren mit der Maus dunkelgrün.

 [Image: Flowerpower - Lösung]

HINWEIS: Zur Lösung dieses Beispiels laden Sie bitte die ZIP-Datei FlowerPower.zip herunter.

Aufgabe

Die Formate der in Aufgabe 1 erstellten CSS-Datei sollen in der gallerie.html zugeordnet werden, sodass das Ergebnis aussieht wie in der nachfolgenden Vorlage beschrieben. Nicht auf die gelben Texte vergessen!!

Laden Sie die Datei gallerie.html nach der erfolgten Bearbeitung hier hoch!

Es gilt:

- In der HTML-Seite sind  IDs und CLASSes einzufügen, sowie <DIV>- oder <SPAN>-Tags zum Zuordnen von Formaten. Weitere Änderungen in der HTML-Datei sowie in der CSS-Datei sind nicht erlaubt.

Die Seite soll zum Schluss so aussehen:

[Image: Lösung]