forked from WEB-IB-WS2526/lab-development-ib
01: Aufgaben erstellt
parent
4504e00bf5
commit
00fab257ad
|
|
@ -0,0 +1,153 @@
|
|||
# Ü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: `🚲`
|
||||
|
||||
6. Fügen Sie auf `/Damen/Fahrraeder.html` folgende Überschrift ein: "In den Farben: Rot, Grün & Blau" (_Hinweis_: HTML-Entity verwenden.)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue