forked from WEB-IB-SS26/development-ib
01: Lösungen
parent
9c61e93038
commit
7168a9a066
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Überschriften</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>H1-Überschrift</h1>
|
||||||
|
<h2>H2-Überschrift</h2>
|
||||||
|
<h3>H3-Überschrift</h3>
|
||||||
|
<h4>H4-Überschrift</h4>
|
||||||
|
<h5>H5-Überschrift</h5>
|
||||||
|
<h6>H6-Überschrift</h6>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
- Beispiel 1:
|
||||||
|
- Variante A: schließender Tag fehlerhaft
|
||||||
|
- Beispiel 2:
|
||||||
|
- Variante B: Schließendes Tag fehlt.
|
||||||
|
- Beispiel 3:
|
||||||
|
- Variante B: img-Tag ist ein Void-Element, hat also kein schließendes Tag.
|
||||||
|
- Beispiel 4:
|
||||||
|
- Variante A: Schließendes Tag fehlt.
|
||||||
|
- Beispiel 5:
|
||||||
|
- Variante A: href-Attribut fehlt.
|
||||||
|
- Beispiel 6:
|
||||||
|
- Variante B: #-Marker fehlt in Sprungmarke.
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Struktur, Text, Sprungmarken und Links</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a href="#absatz10">Springe zu Absatz 10</a>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor feugiat magna non consequat. Etiam
|
||||||
|
volutpat
|
||||||
|
elementum elit in ornare. Integer dictum egestas est, vitae cursus nisl varius a. Etiam ut nunc lacinia,
|
||||||
|
suscipit
|
||||||
|
turpis ut, euismod libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||||
|
mus.
|
||||||
|
Pellentesque a ante libero. Vivamus scelerisque, dolor at tempus dignissim, mi nisl viverra elit, eu lacinia
|
||||||
|
ipsum
|
||||||
|
nulla vitae justo. Morbi maximus vestibulum lectus. Suspendisse vulputate, ligula sed tincidunt vehicula, augue
|
||||||
|
augue euismod ipsum, in lacinia ex risus sit amet nisi. Orci varius natoque penatibus et magnis dis parturient
|
||||||
|
montes, nascetur ridiculus mus. Nunc vestibulum, ipsum eget consequat porta, augue justo consequat ipsum, sed
|
||||||
|
rutrum
|
||||||
|
lacus turpis in lorem. Pellentesque consectetur varius aliquam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Morbi tincidunt varius lectus. Proin in massa et sem consequat ullamcorper. Curabitur aliquam ultricies neque
|
||||||
|
quis
|
||||||
|
semper. Praesent pellentesque semper mi, sit amet auctor justo hendrerit in. Sed congue mollis rutrum.
|
||||||
|
Suspendisse
|
||||||
|
ligula nulla, dapibus non ultricies ac, convallis vel odio. Maecenas suscipit metus nunc, non accumsan elit
|
||||||
|
congue
|
||||||
|
eget. Donec sit amet mi ut tellus efficitur posuere. Maecenas pellentesque vitae lectus quis feugiat.
|
||||||
|
Suspendisse
|
||||||
|
potenti. Praesent finibus diam at est pellentesque, imperdiet luctus enim varius. Etiam bibendum at dolor
|
||||||
|
fringilla
|
||||||
|
interdum. Nulla dictum vulputate velit, et viverra ipsum consequat eu.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Fusce id euismod justo. Praesent posuere eros sed justo fringilla, id euismod metus consectetur. Sed volutpat
|
||||||
|
tempor
|
||||||
|
faucibus. Aenean pulvinar malesuada dictum. Etiam viverra augue non mi maximus, ut pellentesque quam congue.
|
||||||
|
Nulla
|
||||||
|
facilisi. Aenean cursus felis quis rhoncus rhoncus. Donec consectetur ullamcorper semper. Aliquam tristique elit
|
||||||
|
sed
|
||||||
|
pharetra tincidunt. Cras eget vehicula enim, in pulvinar elit. Aenean suscipit magna vel efficitur volutpat.
|
||||||
|
Vestibulum sed accumsan lectus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio
|
||||||
|
ultricies.
|
||||||
|
Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit
|
||||||
|
elit
|
||||||
|
arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor feugiat magna non consequat. Etiam
|
||||||
|
volutpat
|
||||||
|
elementum elit in ornare. Integer dictum egestas est, vitae cursus nisl varius a. Etiam ut nunc lacinia,
|
||||||
|
suscipit
|
||||||
|
turpis ut, euismod libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
|
||||||
|
mus.
|
||||||
|
Pellentesque a ante libero. Vivamus scelerisque, dolor at tempus dignissim, mi nisl viverra elit, eu lacinia
|
||||||
|
ipsum
|
||||||
|
nulla vitae justo. Morbi maximus vestibulum lectus. Suspendisse vulputate, ligula sed tincidunt vehicula, augue
|
||||||
|
augue euismod ipsum, in lacinia ex risus sit amet nisi. Orci varius natoque penatibus et magnis dis parturient
|
||||||
|
montes, nascetur ridiculus mus. Nunc vestibulum, ipsum eget consequat porta, augue justo consequat ipsum, sed
|
||||||
|
rutrum
|
||||||
|
lacus turpis in lorem. Pellentesque consectetur varius aliquam.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Morbi tincidunt varius lectus. Proin in massa et sem consequat ullamcorper. Curabitur aliquam ultricies neque
|
||||||
|
quis
|
||||||
|
semper. Praesent pellentesque semper mi, sit amet auctor justo hendrerit in. Sed congue mollis rutrum.
|
||||||
|
Suspendisse
|
||||||
|
ligula nulla, dapibus non ultricies ac, convallis vel odio. Maecenas suscipit metus nunc, non accumsan elit
|
||||||
|
congue
|
||||||
|
eget. Donec sit amet mi ut tellus efficitur posuere. Maecenas pellentesque vitae lectus quis feugiat.
|
||||||
|
Suspendisse
|
||||||
|
potenti. Praesent finibus diam at est pellentesque, imperdiet luctus enim varius. Etiam bibendum at dolor
|
||||||
|
fringilla
|
||||||
|
interdum. Nulla dictum vulputate velit, et viverra ipsum consequat eu.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Fusce id euismod justo. Praesent posuere eros sed justo fringilla, id euismod metus consectetur. Sed volutpat
|
||||||
|
tempor
|
||||||
|
faucibus. Aenean pulvinar malesuada dictum. Etiam viverra augue non mi maximus, ut pellentesque quam congue.
|
||||||
|
Nulla
|
||||||
|
facilisi. Aenean cursus felis quis rhoncus rhoncus. Donec consectetur ullamcorper semper. Aliquam tristique elit
|
||||||
|
sed
|
||||||
|
pharetra tincidunt. Cras eget vehicula enim, in pulvinar elit. Aenean suscipit magna vel efficitur volutpat.
|
||||||
|
Vestibulum sed accumsan lectus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio
|
||||||
|
ultricies.
|
||||||
|
Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit
|
||||||
|
elit
|
||||||
|
arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vivamus venenatis pellentesque ex nec egestas. Phasellus lobortis diam nec risus feugiat, a pretium odio
|
||||||
|
ultricies.
|
||||||
|
Nunc porttitor ac arcu at blandit. Nullam euismod faucibus odio, vel mattis eros convallis quis. Nulla suscipit
|
||||||
|
elit
|
||||||
|
arcu, eu pellentesque sapien mattis sed. Donec tempus nibh sed ultricies facilisis. Fusce eget tortor risus.
|
||||||
|
</p>
|
||||||
|
<a id="absatz10">
|
||||||
|
<h2>Absatz 10</h2>
|
||||||
|
<p>
|
||||||
|
Vivamus congue facilisis elit, ut malesuada nunc elementum a. In lacinia sit amet lacus et tempus. Cras a
|
||||||
|
consectetur nulla. Aenean pretium sit amet metus quis posuere. Vestibulum ante ipsum primis in faucibus orci
|
||||||
|
luctus
|
||||||
|
et ultrices posuere cubilia curae; Fusce sagittis ut quam id luctus. Nunc commodo ligula et fermentum
|
||||||
|
tristique.
|
||||||
|
<a href="http://www.google.de">Gehe zu Google</a>
|
||||||
|
Etiam feugiat sit amet odio et efficitur. Vivamus quis augue tristique ante interdum malesuada. Vestibulum
|
||||||
|
sagittis
|
||||||
|
enim erat, sit amet pretium purus aliquam ut.
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Bilder</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Schöne Blumenbilder</h1>
|
||||||
|
<h2>Vergissmeinnicht</h2>
|
||||||
|
<img src="Bilder/Vergissmeinnicht.png" alt="Vergissmeinnicht" width="200px">
|
||||||
|
<br>
|
||||||
|
<h2>Rose</h2>
|
||||||
|
<img src="Bilder/Rose.png" alt="Rose" width="200px">
|
||||||
|
<br>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="./Home/">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Damen-Fahrräder</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>"Alle 🚲 für Damen in den Farben: Rot, Grün & Blau."</h1>
|
||||||
|
</body>
|
||||||
|
</htm>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="./Home/">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Herren-Fahrräder</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
Alles für Herren.
|
||||||
|
</body>
|
||||||
|
</htm>
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="./Home/">
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Unisex-Fahrräder</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
Alles für alle.
|
||||||
|
</body>
|
||||||
|
</htm>
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<base href="./Home/" />
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="refresh" content="5; url=https://google.com">
|
||||||
|
<title>Produkte</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
Link zu <a href="Herren/Fahrraeder.html">Herren-Fahrrädern</a>.
|
||||||
|
Link zu <a href="Unisex/Fahrraeder.html">Unisex-Fahrrädern</a>.
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -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 id="bild">
|
||||||
|
<h2>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://m.media-amazon.com/images/I/718swMYaVSL._AC_UY436_QL65_.jpg" alt="Titelbild zu Kalendermädchen" height="100px">
|
||||||
|
</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,107 @@
|
||||||
|
# Ü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. Setzen Sie das Format der Nummerierung auf römische Zahlen (Groß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. Setzen Sie eine Überschrift Ihrer Wahl auf der obersten Ebene (`h1`).
|
||||||
|
|
||||||
|
3. Unterhalb der Überschrift soll eine Tabelle erscheinen mit folgendem Inhalt (kein Styling verwenden):
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
_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. 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).
|
||||||
|
|
||||||
|
2. Abschließender Bereich mit Copyright-Hinweis: "© 2025 WebWeekly Redaktion"
|
||||||
|
|
||||||
|
3. Einleitender Bereich mit Navigation. Folgende Navigationslinks sollen sichtbar sein:
|
||||||
|
1. *Hauptinhalt*: Link zu Hauptbereich
|
||||||
|
2. *Technik*: Link zu Artikel "HTML"
|
||||||
|
3. *Design*: Link zu Artikel "CSS"
|
||||||
|
4. *Kontakt*: Link zu abschließendem Bereich
|
||||||
|
|
||||||
|
|
||||||
|
## 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
|
||||||
Loading…
Reference in New Issue