forked from WEB-IMB-WS2526/lab-development-imb
108 lines
3.7 KiB
Markdown
108 lines
3.7 KiB
Markdown
# Übungsblatt 02
|
||
|
||
## 1. HTML-Übung: Ungeordnete Liste
|
||
|
||
**Aufgabenstellung:**
|
||
Erstellen Sie eine einfache Webseite mit einer unnummerierten Liste.
|
||
|
||
#### Arbeitsschritte:
|
||
|
||
1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.
|
||
|
||
2. **Ungeordnete Liste:**
|
||
Unterhalb einer frei gewählten Überschrift soll eine unnummerierte Liste erscheinen mit den Themen:
|
||
- HTML lernen
|
||
- Tags
|
||
- Listen
|
||
- Formulare
|
||
- CSS entdecken
|
||
- JavaScript üben
|
||
|
||
## 2. HTML-Übung: Geordnete Listen
|
||
|
||
**Aufgabenstellung:**
|
||
Erstellen Sie eine einfache Webseite mit einer geordneten Liste.
|
||
|
||
#### Arbeitsschritte:
|
||
|
||
1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.
|
||
|
||
2. Die Webseite soll unter dem Titel die Überschrift "Muffins backen" tragen.
|
||
|
||
3. Unterhalb der Überschrift soll eine geordnete Liste erscheinen mit Anweisungen aus einem Rezept:
|
||
|
||
- Backofen auf 180 °C vorheizen
|
||
|
||
- Teig vorbereiten (Mehl, Zucker, Eier etc. verrühren)
|
||
|
||
- Teig in Förmchen füllen
|
||
|
||
- Muffins 20 Minuten backen
|
||
|
||
- Abkühlen lassen und servieren
|
||
|
||
4. Variieren Sie das Format der Nummerierung:
|
||
1. Buchstaben (Groß- und Klein-Schreibung)
|
||
2. Römische Zahlen (Groß- und Klein-Schreibung)
|
||
|
||
5. Setzen Sie den Start der Nummerierung auf "IV".
|
||
|
||
6. Kehren Sie die Reihenfolge der Nummerierung um.
|
||
|
||
|
||
## 3. HTML-Übung: Tabellen
|
||
|
||
**Aufgabenstellung:**
|
||
Erstellen Sie eine einfache Webseite mit einer Tabelle.
|
||
|
||
#### Arbeitsschritte:
|
||
|
||
1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.
|
||
|
||
2. Die Webseite soll unter dem Titel die Überschrift "Stundenplan - 8. Schuljahr" tragen.
|
||
|
||
3. Unterhalb der Überschrift soll eine Tabelle erscheinen mit folgendem Inhalt (Styling ist nicht notwendig):
|
||
|
||
|
||
|
||
_Hinweis_: Verwenden Sie u.a. `thead`, `tfoot` und `caption`.
|
||
|
||
## 4. HTML-Übung: Sectioning Content Elements
|
||
|
||
**Aufgabenstellung:**
|
||
Erstellen Sie eine strukturierte Webseite unter Verwendung von Sectioning Content Elements.
|
||
|
||
#### Arbeitsschritte:
|
||
|
||
1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.
|
||
|
||
2. Die Webseite soll folgende Struktur haben:
|
||
|
||
1. Einleitender Bereich mit Navigation. Folgende Navigationslinks sollen sichtbar sein:
|
||
1. Startseite
|
||
2. Technik
|
||
3. Design
|
||
4. Kontakt
|
||
|
||
2. Hauptbereich mit zwei Abschnitten:
|
||
1. Abschnitt mit zwei Artikeln mit folgenden Überschriften: "HTML" und "CSS". Füllen Sie die Artikel mit beliebigen Inhalt (1 Satz).
|
||
2. Abschnitt mit folgender Überschrift: "Tipp der Woche". Füllen Sie den Abschnitt mit beliebigen Inhalt (1 Satz).
|
||
|
||
3. Abschließender Bereich mit Copyright-Hinweis: "© 2025 WebWeekly Redaktion"
|
||
|
||
## 5. HTML-Übung: Eigene Rezepte-Sammlung
|
||
|
||
**Aufgabenstellung:**
|
||
Erstellen Sie eine Website mit einer Sammlung von 5 Lieblingsrezepten.
|
||
|
||
#### Arbeitsschritte
|
||
|
||
1. Erstellen Sie eine HTML-Seite mit einer Tabelle, die 5 Rezepte Ihrer Wahl auflistet. Jedes Rezept soll mindestens durch einen Titel, ein Bild und Angaben zum Arbeitsaufwand (in Minuten) und zur Anzahl der Personen/Portionen repräsentiert werden.
|
||
|
||
2. Wenn man einen Rezept-Titel oder -Bild auswählt, wird man auf eine Detailseite des Rezeptes weitergeleitet. Erstellen Sie für jedes der 5 Rezepte eine solche Detailseite und verlinken Sie diese mit der Tabelle.
|
||
*(Hinweis: Die Rezepte müssen nicht vollständig oder korrekt sein)*
|
||
|
||
3. Erweitern Sie die HTML-Seite mit der Tabelle so, dass es mindestens folgende Bereiche gibt:
|
||
1. Navigationsbereich mit Links zu den 5 Rezepten
|
||
2. Hauptbereich mit Tabelle
|
||
3. Fußzeile mit Kontakt-Informationen |