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