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 <strong>Absatz.</p></strong>
Variante B: <p>Dies ist ein Absatz.</p>

---

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. Laden Sie diese herunter.

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 das Home-Verzeichnis korrekt als Basis-URL in allen vier Webseiten ein.

4. Fügen Sie in Produkte.html

   1. einen Link auf die Webseite mit den Herren-Fahrrädern ein.
   2. einen Link auf die Webseite mit den Unisex-Fahrrädern ein.