Aufgaben

Aufgabe 1: Meine erste HTML-Seite

Erstelle eine neue Datei mit dem Namen index.html.
Die Seite soll enthalten:

• Eine Überschrift <h1> mit deinem Namen

• Einen Absatz <p> mit einer kurzen Selbstvorstellung

• Einen Link zu einer anderen Seite (z. B. deiner Lieblingswebseite)

• Einen horizontalen Trenner <hr>

Speichere und öffne die Seite im Browser.

Aufgabe 2: Textformatierung

Erstelle eine Datei text.html mit folgendem Inhalt:

• Eine Überschrift <h1>

• Zwei Absätze <p> mit unterschiedlicher Formatierung

  • Der erste Absatz soll fett und kursiv sein

  • Im zweiten Absatz soll ein Wort markiert werden (<mark>)

• Füge ein Zitat mit <blockquote> hinzu

• Ergänze darunter eine kleine Quellenangabe mit <small>

Aufgabe 3: Links und Bilder

Lege eine Datei links_bilder.html an und füge ein:

• Einen externen Link zu einer anderen Website

• Einen internen Link zu deiner index.html

• Ein Bild mit alt-Text und Breitenangabe

• Ein Bild als klickbaren Link, das beim Klick eine andere Seite öffnet

Achte darauf, relative Pfade zu verwenden.

Aufgabe 4: Tabellen

Erstelle eine Datei tabelle.html und baue eine Tabelle mit:

• Drei Spalten: Name, Abteilung, Standort

• Drei Datenzeilen

• Einer Kopfzeile (<th>)

• Einer Tabellenüberschrift (<caption>)

Bonus:
Füge im Footer (<tfoot>) eine Zeile mit colspan ein, die z. B. „Ende der Tabelle“ anzeigt.

Aufgabe 5: Formular

Erstelle eine Datei formular.html.
Das Formular soll enthalten:

• Eingabefeld für Name (Pflichtfeld)

• Eingabefeld für E-Mail (Pflichtfeld)

• Auswahlfeld mit drei Abteilungen

• Checkbox „Newsletter abonnieren“

• Textbereich „Nachricht“

• Absende-Button mit der Aufschrift „Senden“

Tipp: Verwende label-Elemente für eine saubere Zuordnung.

Aufgabe 6: Multimedia

Erstelle eine Datei multimedia.html.
Inhalte:

• Eine Hauptüberschrift <h1>

• Ein eingebettetes Bild mit alt-Text

• Ein Audio-Element mit Steuerelementen (controls)

• Ein Video-Element mit Posterbild und Controls

• Optional: ein eingebettetes YouTube-Video per <iframe>

Aufgabe 7: CSS einbinden

Erstelle in deinem Projektordner eine Datei style.css
und verknüpfe sie mit deiner index.html: