# Ü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:**  
```html
<ul>
  <li>Erster Punkt
  <li>Zweiter Punkt
</ul>
```
**Variante B:**  
```html
<ul>
  <li>Erster Punkt</li>
  <li>Zweiter Punkt</li>
</ul>
```

#### Beispiel 5 – Link

**Variante A:**  
```html
<a "https://example.com">Zur Website</a>
```

**Variante B:**  
```html
<a href="https://example.com">Zur Website</a>
```

#### Beispiel 6 – Sprungmarken

**Variante A:**  
```html
<a href="#kontakt">Zum Kontaktbereich springen</a>
...
<h2 id="kontakt">Kontakt</h2>
```
**Variante B:**  
```html
<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](https://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](https://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](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](https://www.google.de) ein.

5. Fügen Sie auf einer der HTML-Seiten das Unicode-Zeichen für Fahrrad als HTML-Entity ein: `&#x1F6B2;`

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


