diff --git a/web/01/labor/01_loesungen/Bilder/Rose.png b/web/01/labor/01_loesungen/Bilder/Rose.png new file mode 100644 index 0000000..e0ae780 Binary files /dev/null and b/web/01/labor/01_loesungen/Bilder/Rose.png differ diff --git a/web/01/labor/01_loesungen/Bilder/Vergissmeinnicht.png b/web/01/labor/01_loesungen/Bilder/Vergissmeinnicht.png new file mode 100644 index 0000000..fc157ea Binary files /dev/null and b/web/01/labor/01_loesungen/Bilder/Vergissmeinnicht.png differ diff --git a/web/01/labor/01_loesungen/uebung1.html b/web/01/labor/01_loesungen/uebung1.html new file mode 100644 index 0000000..ccf6f71 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung1.html @@ -0,0 +1,15 @@ + + + + + Überschriften + + +

H1-Überschrift

+

H2-Überschrift

+

H3-Überschrift

+

H4-Überschrift

+
H5-Überschrift
+
H6-Überschrift
+ + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung2.md b/web/01/labor/01_loesungen/uebung2.md new file mode 100644 index 0000000..3fd9457 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung2.md @@ -0,0 +1,12 @@ +- Beispiel 1: + - Variante A: schließender Tag fehlerhaft +- Beispiel 2: + - Variante B: Schließendes Tag fehlt. +- Beispiel 3: + - Variante B: img-Tag ist ein Void-Element, hat also kein schließendes Tag. +- Beispiel 4: + - Variante A: Schließendes Tag fehlt. +- Beispiel 5: + - Variante A: href-Attribut fehlt. +- Beispiel 6: + - Variante B: #-Marker fehlt in Sprungmarke. \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung3.html b/web/01/labor/01_loesungen/uebung3.html new file mode 100644 index 0000000..a703022 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung3.html @@ -0,0 +1,124 @@ + + + + + + Struktur, Text, Sprungmarken und Links + + + + Springe zu Absatz 10 +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor feugiat magna non consequat. Etiam + volutpat + elementum elit in ornare. Integer dictum egestas est, vitae cursus nisl varius a. Etiam ut nunc lacinia, + suscipit + turpis ut, euismod libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. + Pellentesque a ante libero. Vivamus scelerisque, dolor at tempus dignissim, mi nisl viverra elit, eu lacinia + ipsum + nulla vitae justo. Morbi maximus vestibulum lectus. Suspendisse vulputate, ligula sed tincidunt vehicula, augue + augue euismod ipsum, in lacinia ex risus sit amet nisi. Orci varius natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Nunc vestibulum, ipsum eget consequat porta, augue justo consequat ipsum, sed + rutrum + lacus turpis in lorem. Pellentesque consectetur varius aliquam. +

+

+ Morbi tincidunt varius lectus. Proin in massa et sem consequat ullamcorper. Curabitur aliquam ultricies neque + quis + semper. Praesent pellentesque semper mi, sit amet auctor justo hendrerit in. Sed congue mollis rutrum. + Suspendisse + ligula nulla, dapibus non ultricies ac, convallis vel odio. Maecenas suscipit metus nunc, non accumsan elit + congue + eget. Donec sit amet mi ut tellus efficitur posuere. Maecenas pellentesque vitae lectus quis feugiat. + Suspendisse + potenti. Praesent finibus diam at est pellentesque, imperdiet luctus enim varius. Etiam bibendum at dolor + fringilla + interdum. Nulla dictum vulputate velit, et viverra ipsum consequat eu. +

+

+ Fusce id euismod justo. Praesent posuere eros sed justo fringilla, id euismod metus consectetur. Sed volutpat + tempor + faucibus. Aenean pulvinar malesuada dictum. Etiam viverra augue non mi maximus, ut pellentesque quam congue. + Nulla + facilisi. Aenean cursus felis quis rhoncus rhoncus. Donec consectetur ullamcorper semper. Aliquam tristique elit + sed + pharetra tincidunt. Cras eget vehicula enim, in pulvinar elit. Aenean suscipit magna vel efficitur volutpat. + Vestibulum sed accumsan lectus. +

+

+ Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio + ultricies. + Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit + elit + arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor feugiat magna non consequat. Etiam + volutpat + elementum elit in ornare. Integer dictum egestas est, vitae cursus nisl varius a. Etiam ut nunc lacinia, + suscipit + turpis ut, euismod libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. + Pellentesque a ante libero. Vivamus scelerisque, dolor at tempus dignissim, mi nisl viverra elit, eu lacinia + ipsum + nulla vitae justo. Morbi maximus vestibulum lectus. Suspendisse vulputate, ligula sed tincidunt vehicula, augue + augue euismod ipsum, in lacinia ex risus sit amet nisi. Orci varius natoque penatibus et magnis dis parturient + montes, nascetur ridiculus mus. Nunc vestibulum, ipsum eget consequat porta, augue justo consequat ipsum, sed + rutrum + lacus turpis in lorem. Pellentesque consectetur varius aliquam. +

+

+ Morbi tincidunt varius lectus. Proin in massa et sem consequat ullamcorper. Curabitur aliquam ultricies neque + quis + semper. Praesent pellentesque semper mi, sit amet auctor justo hendrerit in. Sed congue mollis rutrum. + Suspendisse + ligula nulla, dapibus non ultricies ac, convallis vel odio. Maecenas suscipit metus nunc, non accumsan elit + congue + eget. Donec sit amet mi ut tellus efficitur posuere. Maecenas pellentesque vitae lectus quis feugiat. + Suspendisse + potenti. Praesent finibus diam at est pellentesque, imperdiet luctus enim varius. Etiam bibendum at dolor + fringilla + interdum. Nulla dictum vulputate velit, et viverra ipsum consequat eu. +

+

+ Fusce id euismod justo. Praesent posuere eros sed justo fringilla, id euismod metus consectetur. Sed volutpat + tempor + faucibus. Aenean pulvinar malesuada dictum. Etiam viverra augue non mi maximus, ut pellentesque quam congue. + Nulla + facilisi. Aenean cursus felis quis rhoncus rhoncus. Donec consectetur ullamcorper semper. Aliquam tristique elit + sed + pharetra tincidunt. Cras eget vehicula enim, in pulvinar elit. Aenean suscipit magna vel efficitur volutpat. + Vestibulum sed accumsan lectus. +

+

+ Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio + ultricies. + Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit + elit + arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus. +

+

+ Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio + ultricies. + Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit + elit + arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus. +

+ +

Absatz 10

+

+ Vivamus congue facilisis elit, ut malesuada nunc elementum a. In lacinia sit amet lacus et tempus. Cras a + consectetur nulla. Aenean pretium sit amet metus quis posuere. Vestibulum ante ipsum primis in faucibus orci + luctus + et ultrices posuere cubilia curae; Fusce sagittis ut quam id luctus. Nunc commodo ligula et fermentum + tristique. + Gehe zu Google + Etiam feugiat sit amet odio et efficitur. Vivamus quis augue tristique ante interdum malesuada. Vestibulum + sagittis + enim erat, sit amet pretium purus aliquam ut. +

+ + + + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung4.html b/web/01/labor/01_loesungen/uebung4.html new file mode 100644 index 0000000..29346a7 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung4.html @@ -0,0 +1,16 @@ + + + + + Bilder + + +

Schöne Blumenbilder

+

Vergissmeinnicht

+ Vergissmeinnicht +
+

Rose

+ Rose +
+ + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung5/Home/Damen/Fahrraeder.html b/web/01/labor/01_loesungen/uebung5/Home/Damen/Fahrraeder.html new file mode 100644 index 0000000..abc875c --- /dev/null +++ b/web/01/labor/01_loesungen/uebung5/Home/Damen/Fahrraeder.html @@ -0,0 +1,11 @@ + + + + + + Damen-Fahrräder + + +

"Alle 🚲 für Damen in den Farben: Rot, Grün & Blau."

+ + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung5/Home/Herren/Fahrraeder.html b/web/01/labor/01_loesungen/uebung5/Home/Herren/Fahrraeder.html new file mode 100644 index 0000000..00c1913 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung5/Home/Herren/Fahrraeder.html @@ -0,0 +1,11 @@ + + + + + + Herren-Fahrräder + + + Alles für Herren. + + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung5/Home/Unisex/Fahrraeder.html b/web/01/labor/01_loesungen/uebung5/Home/Unisex/Fahrraeder.html new file mode 100644 index 0000000..9b21cd0 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung5/Home/Unisex/Fahrraeder.html @@ -0,0 +1,11 @@ + + + + + + Unisex-Fahrräder + + + Alles für alle. + + \ No newline at end of file diff --git a/web/01/labor/01_loesungen/uebung5/Produkte.html b/web/01/labor/01_loesungen/uebung5/Produkte.html new file mode 100644 index 0000000..b677a70 --- /dev/null +++ b/web/01/labor/01_loesungen/uebung5/Produkte.html @@ -0,0 +1,13 @@ + + + + + + + Produkte + + + Link zu Herren-Fahrrädern. + Link zu Unisex-Fahrrädern. + + \ No newline at end of file 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..699044b --- /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..71e135c --- /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..91081c8 --- /dev/null +++ b/web/02/labor/02_aufgaben.md @@ -0,0 +1,107 @@ +# Ü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. Setzen Sie das Format der Nummerierung auf römische Zahlen (Groß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. Setzen Sie eine Überschrift Ihrer Wahl auf der obersten Ebene (`h1`). + +3. Unterhalb der Überschrift soll eine Tabelle erscheinen mit folgendem Inhalt (kein Styling verwenden): + +![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. 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 \ No newline at end of file