P 1.2 HTML Elemente
Diese Aufgabe baut auf der vorherigen Aufgabe des Unterkapitels P 1.1 auf. Sie benötigen für diese Aufgabe noch weder CSS noch JS und sollen auch keins benutzen.
In dieser Etape sollen Sie eine Portfolio-Website über Ihre Person anzulegen. Erstellen Sie für diese – sowie auch für alle folgenden Abgabe bitte – einen neuen Ordner an. Überschreiben Sie Ihre bisherige Arbeit nicht, sondern kopieren Sie das, was Sie übernhemen wollen, in den neuen Ordner. Sie können für die Portfolioseite bestehende Arbeiten von Ihnen nutzten, aber nur wenn Sie den oben genannten Bedingungen genügen und nur schlichtes HTML5 enthalten.
Falls Sie keine eigenen Komponenten wie Bilder, Videos, Audio-Dateien oder Texte haben, dann verwenden Sie Dummy-Inhalte aus lizenzfreien Quellen bei denen der Autor nicht genannt werden muss, wie z.B. Pixabay (Fotos/Videos/Illustrationen), Unsplash (High-Quality Bilder), Pexels (High-Quality Bilder), YouTube Audio Library (Lizenzfreie Musik) Freesound (Lizenzfreie Sounds) oder Seiten bei denen Autoren genannt werden müssen wie z.B. Freepik, Bensound etc… mit dem entsprechenden Verweis.
Ersetzen Sie also alle Platzhalterinhalte aus der Aufgabe des Unterkapitels 1.1 mit eigenem Bild- und Videomaterial.
Neben der Portfolio-Haupt-Seite sollten mindestens zwei weitere HTML-Dokumente erstellt werden, um eine Seitenstruktur wie diese zu schaffen:
- eine (Haupt-)Seite Portfolio, die Arbeiten von Ihnen präsentiert
- eine Seite über mich mit einem kurzen Steckbrief zu Ihrer Person
- eine Seite Kontakt, auf der Sie Kontaktmöglichkeiten (Mail, Facebook, Instagram, etc…) anbieten
Wenn Sie möchten können Sie natürlich weitere Unterseiten erstellen.
(*) Beachten Sie für die HTML Seiten folgende Details:
- verwenden Sie jeweils die grundlegende HTML5 Seitenstruktur
- zusätzlich zu den gundlegenden HTML-Elementen (html, head, body) mindestens 12 verschiedene Elemente (h, a, p, div, li, img, audio, video, etc.)
- arbeiten sie mindestens 3 Dateien verschiedenen Typs (z.B. Bilder, Videos, Audio, PDF, 3D-Modell, GIF, etc.) in ihre Seiten ein, die keine Weblinks sind, sondern sich im Aufgabenordner neben den HTML-Dokumenten befinden
- verlinken Sie die HTML-Seiten miteinander um eine rudimentäre Navigation zwischen den Seiten zu ermöglichen
- bauen Sie Ihre Seiten ausschließlich auf gültigem HTML5 auf und prüfen Sie diese mit dem W3 HTML Validierer
Zusätzliche Werkzeuge
Folgende mögliche Werkzeuge können Sie bei der Erstellung der visuellen Komponenten für Ihr Portfolio unterstützen.
Werkzeuge für das Zuschneiden/Vorbereiten von Fotos, Grafiken und Illustrationen:
- Adobe Photoshop
- Adobe Illustrator
- Gimp (OpenSource und Kostenlos), vergleichbar mit Adobe Photoshop
- Paint.net, vergleichbar mit Gimp
- Inkscape (OpenSource und Kostenlos) (OpenSource), vergleichbar mit Adobe Illustrator
- Affinity Photo (Studentenrabatt), vergleichbar mit Adobe Photoshop
- Sketch (fairer Studentenrabatt und Mac only), vergleichbar mit Adobe Illustrator
- Pixlr (free), WebApp für einfache Bildbearbeitung
- Vectr (free), WebApp für einfache Vektorbearbeitung
Werkzeuge für das Zuschneiden/Vorbereiten von Animationen und Videos:
- Adobe After Effects für Animationen
- Adobe Premiere für Videoclips
- Final Cut (Mac only)
- Ezgif (free), WebApp für einfaches Bearbeiten von Bewegtbild (eigentlich für GIFs optimiert, es lassen sich aber auch Videos in verschiedene Endformate konvertieren)