HTML Basics – Aufgabenübersicht

Hier findest du Vorschläge und Lösungsansätze für die Aufgaben aus den Kapiteln.

Kapitel 1

Keine praktische Aufgabe.

Kapitel 2

Aufgabe: HTML-Datei mit Titel und Absatz erstellen.
Lösung:

VornameNachname.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Meine zweite Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <p>Ich lerne gerade HTML!.</p>
</body>
</html>

Kapitel 3

Aufgabe: Grundstruktur mit Titel und Absatz.
Lösung: Siehe Beispielcode aus Kapitel 3.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Der Titel der Seite</title>
</head>
<body>
    <h1>Die wichtigste Überschrift</h1>
    <p>Und dieser Text steht einfach so hier.</p>
    <h2>Neues Kapitel</h2>
    <p>Diese Überschrift ist etwas kleiner.</p>
</body>
</html>

Kapitel 4

Aufgabe: Überschrift <h1>, Unterüberschrift <h2>, Absatz.
Lösung:

<h1>Mein Hobby</h1>
<h2>Warum ich es mag</h2>
<p>Ich liebe es, weil...</p>

Kapitel 5

Aufgabe: Liste mit Lieblingswebseiten, jede mit Link.
Lösung:

<ul>
  <li><a href="https://www.example.com">Beispielseite</a></li>
</ul>

Kapitel 6

Aufgabe: Bild mit Alt-Text.
Lösung:

<img src="https://via.placeholder.com/300" alt="Beispielbild">

Kapitel 7

Aufgabe: Tabelle mit Name, Lieblingsfarbe, Lieblingstier.
Lösung:

<table>
<tr><th>Name</th><th>Lieblingsfarbe</th><th>Lieblingstier</th></tr>
<tr><td>Max</td><td>Blau</td><td>Hund</td></tr>
</table>

Kapitel 8

Aufgabe: Einfaches Formular mit Name und E-Mail.
Lösung:

<form>
  <label>Name:</label>
  <input type="text"><br>
  <label>E-Mail:</label>
  <input type="email"><br>
  <input type="submit" value="Absenden">
</form>

Kapitel 9

Aufgabe: Satz mit <strong> und <em> in einem <div>.
Lösung:

<div>
  <p>Dies ist <strong>wichtig</strong> und <em>besonders</em>.</p>
</div>

Kapitel 10

Abschlusstest und Teilnahmebescheinigung.