forked from WEB-IMB-WS2526/lab-development-imb
02: Demos und Labor-Aufgaben
parent
62da933733
commit
8083bbe70f
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Listen</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Fussball-Camp 2025</h1>
|
||||||
|
<h2>Teilnehmerliste:</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Robert Lewandowski</li>
|
||||||
|
<li>Josua Kimmich</li>
|
||||||
|
<li>Manuel Neuer</li>
|
||||||
|
<li>Lamine Yamal</li>
|
||||||
|
<li>Harry Kane</li>
|
||||||
|
<li>Jules Koundé</li>
|
||||||
|
<li>Marc-André Ter Stegen</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Agenda:</h2>
|
||||||
|
<ol reversed>
|
||||||
|
<li>Begrüßung</li>
|
||||||
|
<li>Aufwärmen</li>
|
||||||
|
<li>Parcour</li>
|
||||||
|
<li>Mittagessen</li>
|
||||||
|
<li>Turnier</li>
|
||||||
|
<li>Siegerehrung</li>
|
||||||
|
<li>Abschluss</li>
|
||||||
|
</ol>
|
||||||
|
<h2>Begriffserklärungen</h2>
|
||||||
|
<dl>
|
||||||
|
<dt>Parcour</dt>
|
||||||
|
<dd>Festgelegter Hindernisweg</dd>
|
||||||
|
|
||||||
|
<dt>Turnier</dt>
|
||||||
|
<dd>Organisierte Wettkampfveranstaltung</dd>
|
||||||
|
|
||||||
|
<dt>Siegerehrung</dt>
|
||||||
|
<dd>Feierliche Auzeichnung der besten Teams</dd>
|
||||||
|
</dl>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,60 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Beispielseite mit semantischem HTML5</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1>Meine Beispielseite</h1>
|
||||||
|
<nav>
|
||||||
|
<a href="#einleitung">Einleitung</a> |
|
||||||
|
<a href="#inhalt">Artikel</a> |
|
||||||
|
<a href="#bild">Bild</a> |
|
||||||
|
<a href="#kontakt">Kontakt</a>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="einleitung">
|
||||||
|
<h2>Einleitung</h2>
|
||||||
|
<p>Willkommen auf dieser Beispielseite. Hier zeigen wir, wie man HTML5-Elemente sinnvoll einsetzt.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 id="inhalt">Inhalt</h2>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3>Was ist semantisches HTML?</h3>
|
||||||
|
<p>Semantisches HTML verwendet aussagekräftige Elemente, um die Struktur und Bedeutung von Inhalten zu
|
||||||
|
verdeutlichen.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article>
|
||||||
|
<h3>Warum ist das wichtig?</h3>
|
||||||
|
<p>Suchmaschinen, Screenreader und Entwickler profitieren von klar strukturiertem, semantischem Code.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2 id="bild">Bild</h2>
|
||||||
|
<figure>
|
||||||
|
<img src="bilder/semantic_elements.gif" alt="Die verschiedenen Bereiche einer HTML-Seite als Schema.">
|
||||||
|
<figcaption>Semantische Bereiche von HTML</figcaption>
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer id="kontakt">
|
||||||
|
<p>Kontakt: <a href="mailto:info@beispiel.de">info@beispiel.de</a></p>
|
||||||
|
<p>© 2025 Beispielseite</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Krimi-Bestseller 2024</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<caption>Krimi-Bestseller - Top 5</caption>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Platzierung</th>
|
||||||
|
<th scope="col">Buchcover</th>
|
||||||
|
<th scope="col">Titel</th>
|
||||||
|
<th scope="col">Autor</th>
|
||||||
|
<th scope="col">Verlag</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<td colspan="5">Top 5 Krimi-Bestseller in Deutschland im Jahr 2024 - basierend auf Verkaufszahlen und
|
||||||
|
Leserinteresse</td>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Platz 1</th>
|
||||||
|
<td><img src="https://images.thalia.media/00/-/2c579c4757724723b1b64a1f88365a56/das-kalendermaedchen-taschenbuch-sebastian-fitzek.jpeg" alt="Titelbild zu Kalendermädchen" height="100">
|
||||||
|
</td>
|
||||||
|
<td>Das Kalendermädchen</td>
|
||||||
|
<td>Sebastian Fitzek</td>
|
||||||
|
<td>Droemer</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Platz 2</th>
|
||||||
|
<td><img src="https://m.media-amazon.com/images/I/418wtYtX6wL._SY445_SX342_.jpg" alt="Titelbild zu Mimik" height="100">
|
||||||
|
</td>
|
||||||
|
<td>Mimik</td>
|
||||||
|
<td>Sebastian Fitzek</td>
|
||||||
|
<td>Knaur</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Platz 3</th>
|
||||||
|
<td><img src="https://m.media-amazon.com/images/I/41eQIFxjBCL._SY445_SX342_.jpg" alt="Titelbild zu Bretonische Sehnsucht" height="100">
|
||||||
|
</td>
|
||||||
|
<td>Bretonische Sehnsucht</td>
|
||||||
|
<td>Jean-Luc Bannalec</td>
|
||||||
|
<td>Kiepenheuer & Witsch</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Platz 4</th>
|
||||||
|
<td><img src="https://m.media-amazon.com/images/I/510gv7KbEKL._SY445_SX342_.jpg" alt="Titelbild zu Sie kann dich hören" height="100">
|
||||||
|
</td>
|
||||||
|
<td>Sie kann dich hören</td>
|
||||||
|
<td>Freida McFadden</td>
|
||||||
|
<td>Heyne</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Platz 5</th>
|
||||||
|
<td><img src="https://m.media-amazon.com/images/I/51+kxPcWMmL._SY445_SX342_.jpg" alt="Titelbild zu Dunkles Wasser" height="100">
|
||||||
|
</td>
|
||||||
|
<td>Dunkles Wasser</td>
|
||||||
|
<td>Charlotte Link</td>
|
||||||
|
<td>Blanvalet</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,108 @@
|
||||||
|
# Ü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. Variieren Sie das Format der Nummerierung:
|
||||||
|
1. Buchstaben (Groß- und Klein-Schreibung)
|
||||||
|
2. Römische Zahlen (Groß- und Klein-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. Die Webseite soll unter dem Titel die Überschrift "Stundenplan - 8. Schuljahr" tragen.
|
||||||
|
|
||||||
|
3. Unterhalb der Überschrift soll eine Tabelle erscheinen mit folgendem Inhalt (Styling ist nicht notwendig):
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
_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. Einleitender Bereich mit Navigation. Folgende Navigationslinks sollen sichtbar sein:
|
||||||
|
1. Startseite
|
||||||
|
2. Technik
|
||||||
|
3. Design
|
||||||
|
4. Kontakt
|
||||||
|
|
||||||
|
2. 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).
|
||||||
|
|
||||||
|
3. Abschließender Bereich mit Copyright-Hinweis: "© 2025 WebWeekly Redaktion"
|
||||||
|
|
||||||
|
## 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
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Loading…
Reference in New Issue