Web - Kompetenzcheck HTML & CSS 1

Thema: Zoo und seine Bewohner

Gestalte eine Website, bestehend aus 3 Seiten

1. Seite: Willkommensseite/ Homepage

• Willkommensblabla mit Bild(ern) und einem YouTube/Vimeo Video (erinnere dich an Übung 3)
• Erstelle eine Definitionsliste geordnet nach Säugetiere, Insekten, Fische, Vögel, (…) die in diesem Zoo beheimatet sind

2. Seite: Infoseite:

Tabelle mit folgenden Spalten:

1. Tier
2. Vegetarier (ja/nein)
3. Gattung
4. Lebensraum
5. Patenschaft (j/n)
6. Name (in Zoos bekommen Tiere mit Patenschaften meist einen persönlichen Namen)
7. falls dir noch etwas einfällt, erweitere die Tabelle

• wenn es keine Patenschaft gibt dann verbinde die Zellen Patenschaft und Name miteinander
• Ordne mehrere Tiere untereinander, bei denen du mittels senkrechter Zellenverbindung einen Eintrag für mehrere Tiere setzen kannst
• Tipp: mit der css Eigenschaft width: 100%; kannst du die Tabelle halbwegs responsive machen.

3.Seite: Kontaktseite

Auf dieser Seite soll es ein Formular geben.
Felder die Abgefragt werden (achte auf die Validierung):

1. Name
2. Mailadresse
3. Besuchstag (date)
4. Besuchszeit (time)
5. Hat es gefallen (range)
6. Weiterempfehlung (ja/nein)
7. Welche Tierart hat am besten gefallen (datalist)
8. Kommentar (textarea)
9. Besucherinfo (Auswahlliste)
   1. Familienausflug
   2. Allein unterwegs
   3. Gruppenausflug
   4. Ausflug mit Freunden
   5. was anderes
10. Absendebutton und Resetbutton

Allgemein

• Nutze die Stylinganweisungen aus Übung 1
• Nutze die strukturellen Tags und Auszeichnungstags aus Übung 2
• Nutze Bilder und Videos wie aus Übung 3