Sehen Sie sich bitte die Struktur („Sitemap“) der folgenden fiktiven Website einer kleinen Firma an, die insgesamt vier HTML-Dokumente enthält: index.html, produkte.html, mitarbeiter.html und kontakt.html.
1. Aufgabe:
a) Realisieren Sie bitte diese ganze Website. Lassen Sie dabei Ihrer Fantasie freien Lauf.
b) Verwenden Sie nur die im Studienheft gezeigten HTML-Elemente. Falls Sie weitere einsetzen wollen, überprüfen Sie bitte unter https://developer.mozilla.org/de/docs/Web/HTML/Element, ob das Element nicht schon veraltet ist.
c) Bitte nutzen Sie auch die groben Strukturierungselemente wie main, header, nav etc.
d) Legen Sie dazu als Erstes einen neuen Ordner auf Ihrem Rechner an und nennen Sie ihn nachname-mmde20-aufgabe, wobei Sie bitte für nachname Ihren eigenen Nachnamen einsetzen.
e) Sie können selbstverständlich alle HTML-Dokumente aus den Übungen dieses Heftes verwerten und „ausschlachten“, um daraus die erforderlichen Webseiten zu generieren. Das ist eine absolut legitime Technik, die auch von allen Profis eingesetzt wird. Warum sollte man das Rad immer wieder neu erfinden?
f) Vergessen Sie nicht, zum Verwerten vorhandener Code-Teile die Zwischenablage zu benutzen, d.h. die Befehle Kopieren + bzw. Einfügen + (auf dem Mac entsprechend statt die -Taste).
g) Von der Homepage index.html sollen natürlich Links auf alle drei Unterseiten gehen.
h) Unter den Links auf der Startseite erstellen Sie bitte einen Absatz mit folgenden Angaben: Ihr Vor- und Nachname, das Datum, Ihre Teilnehmernummer
i) Bitte benutzen Sie keine Tabellen zur Anordnung von Elementen (also für Layoutzwecke).
j) Von jeder Unterseite soll aber auch ein Link zurück auf die Homepage gehen.
k) Achten Sie auch auf die Dokumenttitel!
l) Legen Sie bitte für Fotos oder Grafiken einen Unterordner images an. Nehmen Sie ein Bild von Ihrem Smartphone oder Ihrer Digitalkamera und verkleinern Sie es auf eine für das Web sinnvolle Größe (z.B. 400 px Breite). Alle Bilder zusammen sollten nicht mehr als 1 MB haben. Speichern Sie Ihre Bilder in dem zuvor angelegten Ordner images.
m) Auf der Seite mitarbeiter.html sollten mindestens drei beliebige Fotos eingebaut werden.
n) Auf der Seite produkte.html soll eine Liste (keine Tabelle!) verwendet werden (z.B. für eine Produkt- oder Preisliste).
o) Auf der Seite kontakt.html soll ein Kontaktformular mit mindestens vier Formularfeldern angeboten werden.
p) Überprüfen Sie alle Ihre HTML-Dokumente auf Syntaxfehler!