3009298
/
lab-development-imb
forked from WEB-IMB-WS2526/lab-development-imb
1
0
Fork 0
Code Pull Requests Activity
lab-development-imb/web/02/labor/02_aufgaben.md

3.7 KiB
Raw Blame History

Ü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

  1. Setzen Sie das Format der Nummerierung auf römische Zahlen (Großschreibung).

  2. Setzen Sie den Start der Nummerierung auf "IV".

  3. 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):

Stundenplan

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. 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).

    2. Abschließender Bereich mit Copyright-Hinweis: "© 2025 WebWeekly Redaktion"

    3. Einleitender Bereich mit Navigation. Folgende Navigationslinks sollen sichtbar sein:

      1. Hauptinhalt: Link zu Hauptbereich
      2. Technik: Link zu Artikel "HTML"
      3. Design: Link zu Artikel "CSS"
      4. Kontakt: Link zu abschließendem Bereich

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