Internet, Social Media und Kommunikation
Webdesign basiert fundamental auf der Trennung von Struktur und Design. HTML (Hypertext Markup Language) liefert das semantische Grundgerüst einer Seite. Durch den Einsatz von Tags (wie <header>, <nav>, <div>) wird dem Browser mitgeteilt, welche Bedeutungen die Inhaltsblöcke haben. CSS (Cascading Style Sheets) ist hingegen für die visuelle Präsentation zuständig. Ein zentrales Konzept in CSS ist das sogenannte Box-Modell. Jedes HTML-Element wird als rechteckige Box betrachtet, bestehend aus dem eigentlichen Inhalt, dem Innenabstand (Padding), dem Rahmen (Border) und dem Außenabstand (Margin). Die Beherrschung dieses Modells ist essenziell, um Elemente pixelgenau auf dem Bildschirm zu positionieren. Zudem spielt die Ladezeit eine große Rolle im modernen Web, weshalb Bilder zwingend komprimiert und in webgeeigneten Formaten (wie JPEG oder WebP) eingebunden werden müssen.
Die Aufgabe bestand darin, eine persönliche, mehrseitige Website zu erstellen. Diese musste eine Startseite (index.html) sowie spezialisierte Unterseiten für die Fachbereiche IMSK und MINF enthalten. Wichtig war eine saubere Navigation, die Einbindung von passenden Portrait-Bildern und die strikte Verwendung von lizenzfreien Medien, um rechtliche Standards (Urheberrecht) von Anfang an zu wahren.
Ich begann den Entwicklungsprozess mit einem Wireframe im Kopf und übersetzte diesen in eine Basis-Datei namens vorlage.html. Diese Vorlage enthielt den grundlegenden Aufbau mit dem Header, der Navigation und dem Footer. Durch diese Modularisierung sparte ich Zeit, da ich für die Unterseiten (imsk.html und minf.html) lediglich den Content-Bereich, der in DIV-Containern strukturiert war, anpassen musste. Bei der visuellen Gestaltung achtete ich auf harmonische Farben und die Integration meines Portraits (Ich.jpg). Für illustrierende Grafiken nutzte ich ausschließlich die Plattform Pixabay, da diese Bilder unter der CC0-Lizenz stehen und ohne rechtliche Bedenken verwendet werden dürfen.
Das fertige Projekt ist eine voll funktionsfähige, logisch verknüpfte und visuell ansprechende Personal Page. Durch die Arbeit an diesem Projekt habe ich ein tiefes Verständnis für die Arbeitsweise von Browsern und die Render-Prozesse von CSS-Regeln entwickelt. Ich verstehe nun, wie wichtig ein strukturierter HTML-Baum (DOM) für die spätere Erweiterbarkeit und Wartung einer Website ist.