2. Klasse
HAK Webseite mit HTML und CSS nachgestalten
Problemstellung
Die Aufgabe bestand darin, die Startseite der HAK (Handelsakademie) Schwaz basierend auf einer vorgegebenen Struktur in einem Worddokument als einfache Webseite nachzubauen. Das Layout sah einen sogenannten Header also den obersten Kopfbereich der Webseite mit einem Bild als Banner vor, gefolgt von einem Hauptteil mit den Bereichen Home und Ausbildung sowie einem Bild mit Text. Den Abschluss bildete ein Footer was die Fußzeile am unteren Rand der Seite ist mit dem Namen des Erstellers und der aktuellen Jahreszahl. Eine wesentliche Vorgabe war es, die Struktur der Seite mit Div (Division) Elementen aufzubauen. Das sind im Grunde unsichtbare digitale Boxen, die Inhalte auf einer Webseite gruppieren und ordnen. Das obere Bild sollte direkt über CSS (Cascading Style Sheets) eingebettet werden. Das ist eine Gestaltungssprache, die das komplette Aussehen einer Webseite wie Farben, Abstände und Positionen bestimmt.
Kompetenzen
Die wesentlichen Kompetenzen für diese Arbeit umfassten grundlegende Kenntnisse in der Webentwicklung mit HTML (Hypertext Markup Language). Das ist die grundlegende Textauszeichnungssprache, die quasi das unsichtbare Knochengerüst jeder Webseite bildet. Ebenso wichtig war die bereits erwähnte Gestaltungssprache CSS (Cascading Style Sheets) für das optische Design. Dazu gehörte das logische Strukturieren der Seiteninhalte mithilfe der Div (Division) Boxen sowie die Vergabe von sogenannten IDs (Identifier). Eine ID (Identifier) ist ein eindeutiger Name für so eine Box, um sie im Code gezielt ansprechen und einfärben zu können. Besonders wichtig war das Verständnis für spezielle Layouttechniken, wie etwa die Nutzung der Float Eigenschaft. Dieser Befehl sorgt dafür, dass Boxen nicht stur untereinanderstehen, sondern aneinander vorbeifließen und sich nebeneinander anordnen. Ebenso wichtig war die Clear Eigenschaft, ein Befehl, der dieses Fließen wieder stoppt, damit der Fußbereich wieder normal unter den anderen Elementen steht. Auch das korrekte Einbinden von Bildern als Hintergrundgrafiken war eine zentrale Fähigkeit.
Umsetzung und Beschreibung
Die Bilder daneben zeigen die praktische Umsetzung dieser Problemstellung anhand des geschriebenen Programmiercodes und der finalen Ansicht im Webbrowser. Die Webseite wurde mit fünf klar definierten Boxen strukturiert. Über die Gestaltungssprache CSS (Cascading Style Sheets) wurden dem Kopfbereich und dem Inhaltsbereich die passenden Fotografien als Hintergrund zugewiesen. Mithilfe des beschriebenen Float Befehls konnten der blaue linke Bereich und der Text über die Schnuppertage exakt nebeneinander platziert werden. Der schwarze Fußbereich schließt die Seite am Ende durch den passenden Clear Befehl sauber ab und präsentiert das gewünschte Layout fehlerfrei.
