HTML Übungsaufgaben Woche 1

Erklärung: Du beginnst mit einem neuen JSFiddle-Projekt. Im HTML-Bereich schreibst du deinen sichtbaren Seiteninhalt. Mit Run aktualisierst du die Vorschau. Optional kannst du einstellen, dass sich die Vorschau automatisch aktualisiert.

✅ Akzeptanz: Du hast ein neues Projekt geöffnet, kannst HTML eingeben und die Vorschau sichtbar aktualisieren.

Erklärung: Jetzt füllst du deine Seite mit den ersten sichtbaren Inhalten. Du brauchst eine große Überschrift mit deinem Namen, eine Begrüßung, den Bereich Über mich und einen Abschnitt für Links.

<h1>Max Mustermann</h1>
<p>Willkommen auf meiner ersten Webseite.</p>

<h2>Über mich</h2>
<p>Ich lerne gerade HTML und möchte verstehen, wie Webseiten aufgebaut sind.
Ich interessiere mich für Technik, Musik und kreative Projekte.</p>

<h2>Links</h2>

✅ Akzeptanz: Deine Seite zeigt eine Hauptüberschrift, eine Begrüßung, einen Über-mich-Abschnitt und einen Bereich für Links.

Erklärung: Eine gute Webseite besteht nicht nur aus einzelnen Texten, sondern aus logisch gegliederten Bereichen. Dafür nutzt du semantische Elemente wie <header>, <main> und <footer>.

<header>
  <h1>Max Mustermann</h1>
  <p>Willkommen auf meiner ersten Webseite.</p>
</header>

<main>
  <h2>Über mich</h2>
  <p>Hier stehen 2–3 Sätze über mich.</p>
</main>

<footer>
  <h2>Links</h2>
  <p>© 2026 von mir erstellt</p>
</footer>

✅ Akzeptanz: Deine Inhalte sind sichtbar in Header, Main und Footer aufgeteilt und folgen einer nachvollziehbaren Struktur.

Erklärung: Kommentare helfen dir, deinen Code zu dokumentieren. Sie sind nur für dich als Entwickler sichtbar und erscheinen nicht auf der fertigen Webseite.

<!-- Hier beginnt der Seitenheader -->
<header>
  ...
</header>

<!-- Ab hier kommt der Hauptinhalt -->
<main>
  ...
</main>

<!-- Unten auf der Seite -->
<footer>
  ...
</footer>

✅ Akzeptanz: Du hast mindestens drei sinnvolle Kommentare eingefügt und sie werden nicht in der Browseransicht angezeigt.

Erklärung: Jetzt wird deine Seite persönlicher. Im Bereich Über mich fügst du ein Lieblingsbild aus dem Internet ein. Im Bereich Links ergänzt du einige Webseiten, die du gerne besuchst.

<img src="https://picsum.photos/300" alt="Ein Beispielbild" />

<a href="https://www.wikipedia.org">Wikipedia</a>
<a href="https://www.youtube.com">YouTube</a>
<a href="https://www.mozilla.org">Mozilla</a>

✅ Akzeptanz: Ein Bild ist sichtbar eingebunden und im Link-Bereich befinden sich mehrere anklickbare Webseiten-Links.

Erklärung: Ergänze drei neue Abschnitte mit Überschrift und Absatz zu den Themen Hobbys, Was ich mag und Was ich nicht mag. Jeder Bereich soll verständlich formuliert sein und mindestens 2–3 Sätze enthalten.

<h2>Hobbys</h2>
<p>Ich höre gerne Musik und beschäftige mich mit Technik.
Außerdem probiere ich gern neue Dinge am Computer aus.</p>

<h2>Was ich mag</h2>
<p>Ich mag ruhige Abende, gutes Essen und kreative Projekte.</p>

<h2>Was ich nicht mag</h2>
<p>Ich mag Hektik und unübersichtliche Dinge nicht besonders.</p>

✅ Akzeptanz: Alle drei Themenbereiche sind vorhanden und bestehen jeweils aus Überschrift und erklärendem Text.

Erklärung: Bestimmte Wörter oder Aussagen kannst du mit HTML hervorheben. Nutze dafür <strong> für Wichtiges, <em> für Betonung und <mark> für einen Markiereffekt.

<p>Ich lerne gerade <strong>HTML</strong> und finde
<em>Webdesign</em> sehr spannend. Besonders wichtig ist mir,
dass ich den Aufbau von Webseiten <mark>wirklich verstehe</mark>.</p>

✅ Akzeptanz: Mindestens fünf Hervorhebungen mit strong, em oder mark sind sichtbar auf deiner Seite vorhanden.

Erklärung: Mit Listen kannst du Inhalte geordnet und übersichtlich darstellen. Erstelle einen neuen Abschnitt Meine Lieblingsdinge und füge mindestens fünf Einträge hinzu.

<h2>Meine Lieblingsdinge</h2>
<ul>
  <li>Musik</li>
  <li>Kaffee</li>
  <li>Spiele</li>
  <li>Design</li>
  <li>Technik</li>
</ul>

✅ Akzeptanz: Der Abschnitt enthält eine sichtbare Liste mit mindestens fünf Einträgen.

Erklärung: Dieser Bereich darf humorvoll sein. Jeder Fakt beginnt mit <strong> und endet mit einem überraschenden Zusatz in <small>.

<h2>Unnützes Wissen über mich</h2>
<p><strong>Ich habe einmal 12 Stunden geschlafen.</strong>
<small>Und war trotzdem müde.</small></p>

✅ Akzeptanz: Es gibt mindestens drei humorvolle Fakten, die fett beginnen und mit small enden.

Erklärung: Eine verschachtelte Liste ist eine Liste innerhalb eines Listeneintrags. Dadurch kannst du Ober- und Unterthemen sauber abbilden.

<ul>
  <li>Meine Interessen
    <ul>
      <li>Musik
        <ul>
          <li>Lo-Fi</li>
          <li>Klavier</li>
        </ul>
      </li>
      <li>Sport
        <ul>
          <li>Wandern</li>
          <li>Schwimmen</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

✅ Akzeptanz: Du hast mindestens eine Liste in einer Liste angelegt und die Einrückung funktioniert sichtbar korrekt.

Erklärung: Ergänze einen neuen Bereich mit der Überschrift Ein Bild von mir und füge darunter ein Bild ein. Wichtig ist das alt-Attribut, damit beschrieben wird, was auf dem Bild zu sehen ist.

<h2>Ein Bild von mir</h2>
<img src="https://picsum.photos/300" alt="Ein Platzhalterbild in 300 Pixel Breite" />

✅ Akzeptanz: Ein Bild ist sichtbar eingebunden und besitzt ein sinnvolles alt-Attribut.

Erklärung: Erstelle einen neuen Abschnitt Dinge, die ich mag und füge mindestens drei Bilder untereinander ein. Alle Bilder sollen die gleiche Breite haben und jeweils ein eigenes alt-Attribut besitzen.

<h2>Dinge, die ich mag</h2>

<img src="https://picsum.photos/200" alt="Erstes Beispielbild" width="200" />
<img src="https://picsum.photos/200?2" alt="Zweites Beispielbild" width="200" />
<img src="https://picsum.photos/200?3" alt="Drittes Beispielbild" width="200" />

✅ Akzeptanz: Mindestens drei Bilder sind sichtbar, haben dieselbe Breite und sinnvolle Alt-Texte.

Erklärung: Unter jedem Bild deiner Galerie soll ein passender Link zu einer thematisch passenden Webseite stehen. So verknüpfst du Medieninhalte mit weiteren Informationen.

<img src="https://picsum.photos/200" alt="Ein Katzenbild" width="200" />
<p><a href="https://www.tierschutzbund.de">Mehr dazu</a></p>

✅ Akzeptanz: Unter jedem Bild steht mindestens ein anklickbarer externer Link mit sinnvoller Bezeichnung.

Erklärung: Füge ein öffentlich erreichbares Video mit dem <video>-Element ein. Mit controls erscheinen Play- und Pause-Buttons.

<h2>Ein Video</h2>
<video src="https://upload.wikimedia.org/wikipedia/commons/transcoded/4/4d/Wikipedia_Edit_2014.webm/Wikipedia_Edit_2014.webm.480p.vp9.webm" controls></video>

✅ Akzeptanz: Ein Video ist auf deiner Seite sichtbar und lässt sich über Steuerelemente bedienen.

Erklärung: Mindestens ein Bild aus deiner Galerie soll beim Anklicken zu einer anderen Seite führen. Dazu wird ein <img> innerhalb eines <a>-Links platziert.

<a href="https://example.com">
  <img src="https://picsum.photos/200" alt="Ein klickbares Beispielbild" width="200" />
</a>

✅ Akzeptanz: Mindestens ein Bild ist anklickbar und öffnet die verlinkte Seite.

Erklärung: Erstelle einen Abschnitt über Lieblingsfilme, Lieblingsspiele oder Lieblingsgerichte und füge darunter eine Tabelle mit genau drei Spalten und mindestens drei Einträgen ein.

<h2>Meine Lieblingsfilme</h2>
<table>
  <tr>
    <th>Titel</th>
    <th>Genre</th>
    <th>Jahr</th>
  </tr>
  <tr>
    <td>Inception</td>
    <td>Science-Fiction</td>
    <td>2010</td>
  </tr>
</table>

✅ Akzeptanz: Eine Tabelle ist sichtbar und enthält mindestens drei Datenzeilen mit drei Spalten.

Erklärung: Füge unter deiner Tabelle einen Abschnitt Schreib mir eine Nachricht ein. Darin soll ein Formular mit Name, E-Mail und Absenden-Button enthalten sein.

<h2>Schreib mir eine Nachricht</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Dein Name" />
  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email" placeholder="Deine E-Mail" />
  <button type="submit">Absenden</button>
</form>

✅ Akzeptanz: Das Formular ist sichtbar und enthält alle geforderten Eingabeelemente.

Erklärung: Unter dem Formular schreibst du einen Absatz darüber, welche Felder wichtig sind, warum Webseiten solche Felder brauchen und was beim Klick auf den Button passieren soll.

<p>
Der Name und die E-Mail sind wichtig, damit man weiß, von wem die Nachricht kommt
und wie man antworten kann. Beim Klick auf den Button soll die Nachricht abgeschickt werden.
</p>

✅ Akzeptanz: Es gibt einen erklärenden Text unter dem Formular, der die Felder und ihren Zweck beschreibt.

Erklärung: Ergänze ein <select>-Element mit mehreren <option>-Einträgen, zum Beispiel für Jahreszeiten, Getränke oder Betriebssysteme.

<label for="os">Bestes Betriebssystem:</label>
<select id="os">
  <option>Windows</option>
  <option>macOS</option>
  <option>Linux</option>
</select>

✅ Akzeptanz: Ein sichtbares Dropdown mit mehreren auswählbaren Optionen ist eingebunden.

Erklärung: Baue ein Mini-Formular zu einem kreativen Thema deiner Wahl und nutze dabei mindestens fünf verschiedene Eingabetypen wie Text, Zahl, Datum, Checkbox, Radio oder Datei-Upload.

✅ Akzeptanz: Das Formular enthält mindestens fünf unterschiedliche Input-Typen und ist klar als zusammenhängender Bereich erkennbar.

Erklärung: Erstelle am Ende deiner Profilseite einen neuen Bereich mit einer Überschrift, einem kurzen aktuellen Absatz, einem Bild und einem externen Link, der zur Neuigkeit passt.

<h2>Neuigkeiten über mich</h2>
<p>Ich beschäftige mich gerade intensiver mit HTML und lerne jeden Tag etwas Neues.</p>
<img src="https://picsum.photos/300" alt="Ein aktuelles Platzhalterbild" />
<p><a href="https://developer.mozilla.org">Mehr dazu</a></p>

✅ Akzeptanz: Der neue Bereich enthält alle vier geforderten Bestandteile: Überschrift, Absatz, Bild und Link.

Erklärung: Ergänze im Neuigkeiten-Bereich eine Liste mit drei Punkten, in denen du kurz beschreibst, was du in dieser Woche gelernt hast.

<ul>
  <li>Ich habe gelernt, wie Überschriften und Absätze aufgebaut sind.</li>
  <li>Ich kann Bilder und Links einfügen.</li>
  <li>Ich weiß, wie Tabellen und Formulare grundsätzlich funktionieren.</li>
</ul>

✅ Akzeptanz: Die Liste enthält mindestens drei verständliche Lernpunkte.

Erklärung: Innerhalb des Neuigkeiten-Bereichs soll eine kleine Info-Karte mit <h3>, kurzem Absatz und mindestens drei Hervorhebungen entstehen.

<h3>Kurz über mich</h3>
<p>Ich arbeite gerade an meiner <strong>ersten Webseite</strong>,
finde <em>kreative Ideen</em> spannend und markiere mir
<mark>wichtige Dinge zum Lernen</mark>.</p>

✅ Akzeptanz: Es gibt eine kleine Unterüberschrift und mindestens drei sichtbare Hervorhebungen im Text.

Erklärung: Unter der Info-Karte soll eine Tabelle mit mindestens vier Spalten und drei Zeilen stehen. So wiederholst du die Tabellenstruktur aus Tag 4 in einem neuen Kontext.

<h2>Meine Wochenübersicht</h2>
<table>
  <tr>
    <th>Tag</th>
    <th>Aktivität</th>
    <th>Dauer</th>
    <th>Einschätzung</th>
  </tr>
  <tr>
    <td>Montag</td>
    <td>HTML gelernt</td>
    <td>30 Minuten</td>
    <td>gut</td>
  </tr>
</table>

✅ Akzeptanz: Eine Tabelle mit mindestens vier Spalten und drei Datenzeilen ist sichtbar vorhanden.

Erklärung: Füge einen Bereich mit der Überschrift Ein Sound, den ich mag ein und ergänze ein Audioelement mit sichtbaren Steuerelementen.

<h2>Ein Sound, den ich mag</h2>
<audio src="AUDIO-URL-HIER" controls></audio>

✅ Akzeptanz: Ein Audio-Player mit Play/Pause-Steuerung ist auf deiner Seite sichtbar eingebettet.