lab-development-ib/web/01/labor/01_aufgaben.md

Übungsblatt 01

1. HTML-Übung: Überschriften

Aufgabenstellung:
Erstellen Sie eine einfache Webseite, die die sechs verschiedenen Überschriftenebenen darstellt – von der größten zur kleinsten.

Anforderungen:

• Verwenden Sie eine gültige HTML5-Struktur.
• Stellen Sie sicher, dass die Sprache auf Deutsch gesetzt ist.
• Definieren Sie die Zeichencodierung als UTF-8.
• Vergeben Sie einen passenden Seitentitel.
• Geben Sie jeweils eine Überschrift für die Ebenen eins bis sechs aus.

2. HTML-Tags – Richtig vs. Falsch

Aufgabenstellung: Erkennen und korrigieren Sie typische Fehler in HTML-Strukturen: Lesen Sie die folgenden Beispiele und entscheiden Sie, welche Variante fehlerhaft ist. Begründen Sie Ihre Antwort kurz.

Beispiel 1 – Überschrift

Variante A: <h1>Willkommen<h1>
Variante B: <h1>Willkommen</h1>

---

Beispiel 2 – Absatz

Variante A: <p>Dies ist ein Absatz.</p>
Variante B: <p>Dies ist ein Absatz.

---

Beispiel 3 – Bild

Variante A: <img src="bild.jpg" alt="Beschreibung">
Variante B: <img>bild.jpg</img>

---

Beispiel 4 – Liste

Variante A:

<ul>
  <li>Erster Punkt
  <li>Zweiter Punkt
</ul>

Variante B:

<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ul>

Beispiel 5 – Link

Variante A:

<a "https://example.com">Zur Website</a>

Variante B:

<a href="https://example.com">Zur Website</a>

Beispiel 6 – Sprungmarken

Variante A:

<a href="#kontakt">Zum Kontaktbereich springen</a>
...
<h2 id="kontakt">Kontakt</h2>

Variante B:

<a href="kontakt">Zum Kontaktbereich springen</a>
...
<h2 id="kontakt">Kontakt</h2>

3. HTML-Übung: Struktur, Text, Sprungmarken und Links

Aufgabenstellung: Erstellen Sie eine einfache Webseite mit Absätzen und Sprungmarken.

Arbeitsschritte:

1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.

2. Rufen Sie die Seite www.lipsum.com auf und erzeugen Sie zehn Absätze Blindtext.

3. Fügen Sie die Absätze einzeln auf der Seite ein.

4. Markieren Sie den zehnten Absatz mit einer Sprungmarke.

5. Setzen Sie zu Beginn der Seite einen Link, über den direkt zum zehnten Absatz gesprungen wird.

6. Setzen sie einen externen Link zu www.google.de in den zehnten Absatz.

4. HTML-Übung: Bilder

Aufgabenstellung: Erstellen Sie eine einfache Webseite mit Bildern.

Arbeitsschritte:

1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.

2. Rufen Sie die Seite https://pixabay.com/de auf und suchen sich zwei Bilder Ihrer Wahl aus.

3. Fügen Sie die Bilder einzeln auf der Seite ein.

4. Denken Sie daran geeignete Alternativtexte zu vergeben.

5. Skalieren Sie die Bilder auf eine Breite von 200 px.

5. HTML-Übung: Head-Bereich, Unicode und Character Entities

Aufgabenstellung: Erstellen Sie die Struktur einer einfachen Website und verwenden Sie eine Basis-URL.

Arbeitsschritte:

1. Erstellen Sie folgende Ordnerstruktur mit insgesamt vier HTML-Seiten:

Home/
├── Damen/
│   └── Fahrraeder.html
├── Herren/
│   └── Fahrraeder.html
└── Unisex/
    └── Fahrraeder.html
Produkte.html

2. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und passenden Titel für jede Fahrraeder.html sowie Produkte.html.

3. Tragen die Sie ./Home/ als Basis-URL in allen drei Webseiten ein.

4. Fügen Sie in Produkte.html

   1. einen Link auf /Herren/Fahrraeder.html ein.

   2. einen Link auf /Unisex/Fahrraeder.html ein.

   3. eine automatische Weiterleitung auf www.google.de ein.

5. Fügen Sie auf einer der HTML-Seiten das Unicode-Zeichen für Fahrrad als HTML-Entity ein: 🚲

6. Fügen Sie auf /Damen/Fahrraeder.html folgende Überschrift ein: "In den Farben: Rot, Grün & Blau" (Hinweis: HTML-Entity verwenden.)