diff --git a/web/02/demos/Listen.html b/web/02/demos/Listen.html new file mode 100644 index 0000000..62a76e4 --- /dev/null +++ b/web/02/demos/Listen.html @@ -0,0 +1,41 @@ + + + + + Listen + + +

Fussball-Camp 2025

+

Teilnehmerliste:

+ +

Agenda:

+
    +
  1. Begrüßung
    2. +
  2. Aufwärmen
    3. +
  3. Parcour
    4. +
  4. Mittagessen
    5. +
  5. Turnier
    6. +
  6. Siegerehrung
    7. +
  7. Abschluss
    8. +
+

Begriffserklärungen

+
+
Parcour
+
Festgelegter Hindernisweg
+ +
Turnier
+
Organisierte Wettkampfveranstaltung
+ +
Siegerehrung
+
Feierliche Auzeichnung der besten Teams
+
+ + \ No newline at end of file diff --git a/web/02/demos/SemanticWeb.html b/web/02/demos/SemanticWeb.html new file mode 100644 index 0000000..e819949 --- /dev/null +++ b/web/02/demos/SemanticWeb.html @@ -0,0 +1,60 @@ + + + + + + Beispielseite mit semantischem HTML5 + + + + +
+

Meine Beispielseite

+ +
+ +
+
+

Einleitung

+

Willkommen auf dieser Beispielseite. Hier zeigen wir, wie man HTML5-Elemente sinnvoll einsetzt.

+
+ +
+

Inhalt

+ +
+

Was ist semantisches HTML?

+

Semantisches HTML verwendet aussagekräftige Elemente, um die Struktur und Bedeutung von Inhalten zu + verdeutlichen.

+
+ +
+

Warum ist das wichtig?

+

Suchmaschinen, Screenreader und Entwickler profitieren von klar strukturiertem, semantischem Code. +

+
+ +
+ +
+

Bild

+
+ Die verschiedenen Bereiche einer HTML-Seite als Schema. +
Semantische Bereiche von HTML
+
+
+
+ + + + + + \ No newline at end of file diff --git a/web/02/demos/Tabellen.html b/web/02/demos/Tabellen.html new file mode 100644 index 0000000..048a49d --- /dev/null +++ b/web/02/demos/Tabellen.html @@ -0,0 +1,73 @@ + + + + + + Krimi-Bestseller 2024 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Krimi-Bestseller - Top 5
PlatzierungBuchcoverTitelAutorVerlag
Top 5 Krimi-Bestseller in Deutschland im Jahr 2024 - basierend auf Verkaufszahlen und + Leserinteresse
Platz 1Titelbild zu Kalendermädchen + Das KalendermädchenSebastian FitzekDroemer
Platz 2Titelbild zu Mimik + MimikSebastian FitzekKnaur
Platz 3Titelbild zu Bretonische Sehnsucht + Bretonische SehnsuchtJean-Luc BannalecKiepenheuer & Witsch
Platz 4Titelbild zu Sie kann dich hören + Sie kann dich hörenFreida McFaddenHeyne
Platz 5Titelbild zu Dunkles Wasser + Dunkles WasserCharlotte LinkBlanvalet
+ + + + \ No newline at end of file diff --git a/web/02/demos/bilder/.DS_Store b/web/02/demos/bilder/.DS_Store new file mode 100644 index 0000000..ee373d2 Binary files /dev/null and b/web/02/demos/bilder/.DS_Store differ diff --git a/web/02/demos/bilder/semantic_elements.gif b/web/02/demos/bilder/semantic_elements.gif new file mode 100644 index 0000000..f56b534 Binary files /dev/null and b/web/02/demos/bilder/semantic_elements.gif differ diff --git a/web/02/labor/02_aufgaben.md b/web/02/labor/02_aufgaben.md new file mode 100644 index 0000000..2ba4659 --- /dev/null +++ b/web/02/labor/02_aufgaben.md @@ -0,0 +1,108 @@ +# Ü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): + +![Stundenplan](stundenplan.png) + +_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 \ No newline at end of file diff --git a/web/02/labor/stundenplan.png b/web/02/labor/stundenplan.png new file mode 100644 index 0000000..401aa17 Binary files /dev/null and b/web/02/labor/stundenplan.png differ