Lösungen

Lösung zu Aufgabe 1 – Meine erste HTML-Seite

Datei: index.html (Beispiel)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste HTML-Seite</title>
  </head>
  <body>
    <h1>Ricky Reichert</h1>

    <p>Ich bin Auszubildender im Bereich Fachinformatik und lerne gerade HTML.</p>

    <p>
      Hier ist eine Seite, die ich häufig besuche:
      <a href="https://informatik-pruefung.de" target="_blank">
        Informatik-Prüfung
      </a>
    </p>

    <hr>

    <p>Das ist das Ende meiner ersten HTML-Seite.</p>
  </body>
</html>

Lösung zu Aufgabe 2 – Textformatierung

Datei: text.html (Beispiel)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Textformatierung</title>
  </head>
  <body>
    <h1>Textformatierung in HTML</h1>

    <p>
      Dies ist ein <strong>sehr wichtiger</strong> und
      <em>besonders hervorgehobener</em> Absatz.
    </p>

    <p>
      In diesem Absatz ist ein
      <mark>wichtiges Stichwort</mark> markiert, damit es besser ins Auge fällt.
    </p>

    <blockquote>
      „Wer aufhört zu lernen, ist alt – egal ob mit 20 oder 80 Jahren.“
    </blockquote>

    <small>Quelle: Unbekannt</small>
  </body>
</html>

Lösung zu Aufgabe 3 – Links und Bilder

Datei: links_bilder.html (Beispiel)
(Annahme: index.html liegt im gleichen Ordner, Bilddateien entsprechend anpassen)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Links und Bilder</title>
  </head>
  <body>
    <h1>Links und Bilder</h1>

    <p>
      Externer Link:
      <a href="https://www.google.com" target="_blank">Google öffnen</a>
    </p>

    <p>
      Interner Link:
      <a href="index.html">Zur Startseite (index.html)</a>
    </p>

    <p>Ein eingebettetes Bild:</p>
    <img src="bilder/ava.jpg" alt="Mein Hund Ava" width="300">

    <p>Bild als Link:</p>
    <a href="https://reichert.studio" target="_blank">
      <img src="bilder/reichert_logo.png" alt="Studio Reichert Logo" width="200">
    </a>
  </body>
</html>

Lösung zu Aufgabe 4 – Tabellen

Datei: tabelle.html (Beispiel)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Tabelle</title>
  </head>
  <body>
    <h1>Mitarbeiterübersicht</h1>

    <table border="1">
      <caption>Mitarbeiterübersicht</caption>
      <thead>
        <tr>
          <th>Name</th>
          <th>Abteilung</th>
          <th>Standort</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Anna Müller</td>
          <td>Vertrieb</td>
          <td>Berlin</td>
        </tr>
        <tr>
          <td>Ben Schröder</td>
          <td>IT</td>
          <td>Konstanz</td>
        </tr>
        <tr>
          <td>Clara Weiß</td>
          <td>Buchhaltung</td>
          <td>Zürich</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">Ende der Tabelle</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Lösung zu Aufgabe 5 – Formular

Datei: formular.html (Beispiel)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Kontaktformular</title>
  </head>
  <body>
    <h1>Kontaktformular</h1>

    <form action="#" method="post">
      <p>
        <label for="name">Name:</label><br>
        <input type="text" id="name" name="name" required>
      </p>

      <p>
        <label for="mail">E-Mail:</label><br>
        <input type="email" id="mail" name="mail" required>
      </p>

      <p>
        <label for="abt">Abteilung:</label><br>
        <select id="abt" name="abteilung">
          <option>IT</option>
          <option>Vertrieb</option>
          <option>Marketing</option>
        </select>
      </p>

      <p>
        <label>
          <input type="checkbox" name="newsletter">
          Newsletter abonnieren
        </label>
      </p>

      <p>
        <label for="msg">Nachricht:</label><br>
        <textarea id="msg" name="nachricht" rows="4" cols="40"></textarea>
      </p>

      <p>
        <input type="submit" value="Senden">
      </p>
    </form>
  </body>
</html>

Lösung zu Aufgabe 6 – Multimedia

Datei: multimedia.html (Beispiel)
(Pfade zu Medien anpassen, hier Platzhalter)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Multimedia</title>
  </head>
  <body>
    <h1>Multimedia-Beispiele</h1>

    <h2>Bild</h2>
    <img src="bilder/landschaft.jpg" alt="Landschaftsbild" width="300">

    <h2>Audio</h2>
    <audio controls>
      <source src="audio/beispiel.mp3" type="audio/mpeg">
      Dein Browser unterstützt das Audio-Element nicht.
    </audio>

    <h2>Video</h2>
    <video width="400" controls poster="bilder/videovorschau.jpg">
      <source src="video/beispiel.mp4" type="video/mp4">
      Dein Browser unterstützt das Video-Element nicht.
    </video>

    <h2>YouTube (optional)</h2>
    <iframe width="400" height="225"
      src="https://www.youtube-nocookie.com/embed/TiC8pigZeh0"
      title="YouTube Video"
      frameborder="0"
      allowfullscreen>
    </iframe>
  </body>
</html>

Lösung zu Aufgabe 7 – CSS einbinden

index.html (Kopfbereich mit Stylesheet-Verknüpfung)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine erste HTML-Seite</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Ricky Reichert</h1>
    <p>Ich bin Auszubildender im Bereich Fachinformatik und lerne HTML und CSS.</p>
  </body>
</html>

style.css (Beispiel)

body {
  background-color: #f0f0f0;
  color: #333333;
  font-family: Arial, sans-serif;
  padding: 20px;
}

h1 {
  color: #b68751;
}

Lösung zu Aufgabe 8 – Klassen & IDs

Datei: selektoren.html + style.css (Beispiel)

selektoren.html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Selektoren</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Selektoren in CSS</h1>

    <p class="highlight">
      Dieser Text ist hervorgehoben.
    </p>

    <p id="wichtig">
      Dieser Text ist besonders wichtig.
    </p>

    <p>
      Normaler Text ohne spezielle Klasse oder ID.
    </p>
  </body>
</html>

style.css (Ergänzung):

.highlight {
  background-color: yellow;
}

#wichtig {
  color: red;
  font-weight: bold;
  text-transform: uppercase;
}

Lösung zu Aufgabe 9 – Mini-Projekt „Visitenkarte“

index.html (Beispiel)

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Visitenkarte</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">
      <img src="bilder/profil.jpg" alt="Profilbild" class="avatar">

      <h1>Ricky Reichert</h1>
      <h2>Fachinformatiker Systemintegration</h2>

      <p>
        Ich interessiere mich für Netzwerke, Webentwicklung und IT-Ausbildung.
      </p>

      <p class="contact">
        E-Mail: ricky@example.com<br>
        Standort: Konstanz
      </p>
    </div>
  </body>
</html>

style.css (Beispiel)

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

.card {
  width: 350px;
  margin: 40px auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.15);
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

h1 {
  margin: 10px 0 5px;
}

h2 {
  margin: 0 0 15px;
  font-size: 16px;
  color: #666666;
}

.contact {
  margin-top: 10px;
  font-size: 14px;
  color: #333333;
}

Lösung zu Aufgabe 10 – Bonus: Mini-Website (nur Grundidee)

Hier gibt es viele korrekte Varianten. Eine mögliche, einfache Struktur:

index.html – Startseite mit Navigation
galerie.html – Bildergalerie
kontakt.html – Kontaktformular
Alle verwenden dasselbe style.css.

Beispiel-Navigation in jeder Seite:

<nav>
  <a href="index.html">Start</a> |
  <a href="galerie.html">Galerie</a> |
  <a href="kontakt.html">Kontakt</a>
</nav>

Lösung zur Zusatzaufgabe – Hover-Effekt

CSS (z. B. in style.css)

p {
  color: #333333;
  transition: color 0.4s;
}

p:hover {
  color: #b68751;
}

Damit färbt sich der Text eines Absatzes beim Überfahren mit der Maus in deine „Gold“-Farbe.