Medienportfolio
2. Klasse

2. Klasse

Persönliche Website

Persönliche Website

Im Rahmen des Fachs IMSK haben wir uns mit der Programmierung und Gestaltung von Websites beschäftigt, um den Code einer Website besser zu verstehen. Die Aufgabe war es, eine persönliche Webseite zu erstellen. Die Startseite sollte ein Portraitbild auf der linken Seite und eine persönliche Beschreibung auf der rechten Seite enthalten.

Wir verwendeten HTML, um die einzelnen Textdateien zu strukturieren. Um zu verstehen, wie unterschiedliche Befehle die Webseite beeinflussen, haben wir verschiedene Befehle ausprobiert. Das Ziel war es, später eine professionelle Website zu programmieren und zu gestalten. Dabei ist es faszinierend, welche Wirkung ein einzelner Befehl auf die gesamte Seite haben kann. Durch den Einsatz unterschiedlichster Befehle bekommt die Website mehr Persönlichkeit und Professionalität.

Die Seiten IMSK und MINF enthalten jeweils eine kurze Fachbeschreibung und ein Bild. Dabei haben wir auf die Verwendung von DIV statt Tabellen geachtet, um eine saubere Struktur zu gewährleisten. Außerdem wurde darauf geachtet, webgerechte Bilder zu verwenden und die Dateien unter einem eigenen Namen ohne Leer- oder Sonderzeichen zu speichern.

Zum Programmieren haben wir Visual Studio Code verwendet, und ein Screenshot des Codes wurde angefertigt, um die Arbeit zu dokumentieren.

Screenshot von der finalen Website:


Box Model – Red Bull

Die Aufgabe war es, eine Webseite zu erstellen, die eine bestimmte Struktur aufweist. Zuerst sollte ein Red Bull Banner als oberstes DIV platziert werden, gefolgt von einer weiteren Box als nächstes DIV. Am Ende der Seite sollte eine Footer-DIV-Box eingebaut werden. Dabei wurde darauf geachtet, den vorhandenen Text zu entfernen und die Seite ausschließlich mit der geforderten Struktur aufzubauen.

Für die Programmierung der Webseite haben wir Visual Studio Code verwendet. Die Abgabe umfasst sowohl Screenshots der fertigen Webseite im Browser als auch einen Screenshot des Codes in Visual Studio Code, um die Umsetzung zu dokumentieren.

Screenshot vom Ergebnis: