Kategorie: Klasse 10-3

Aufgabe:
Baue in HTML und CSS eine Mini-Webseite mit den folgenden Elementen:

Teil A: HTML-Struktur

1. HTML-Grundaufbau:

Erstelle eine HTML-Datei mit:

• Einem Titel (z. B. <title>Übung Klassen und IDs</title>)
• Einer Überschrift (<h1>) mit einer ID „main-title“
• Einem Absatz (<p>) mit einer Klasse „intro-text“

2. Tabelle mit 10 Zeilen und 5 Spalten

Die Tabelle soll darstellen, wie Daten strukturiert werden. Beispielsweise könnte sie eine Liste von Kunden enthalten:
Inhalt der Tabelle:

3. Verwendung von Klassen-Selektoren:

• Wechsle die Farbe der Hintergrundzeilen in der Tabelle:
  • Unterscheide zwischen geraden und ungeraden Zeilen (bspw. eine Farbe für gerade Zeilen, eine andere für ungerade).
  • Nutze dazu Klassen (z. B. .odd und .even).

Teil B: CSS-Regeln

1. ID- und Klassenselektoren:

• Die Überschrift (#main-title) soll fett und unterstrichen (mit einer Linie) sein und einen orangefarbenen Hintergrund haben.

• Der Absatz (.intro-text) soll eine gelbe Schriftfarbe und eine andere Schriftgröße haben.

2. Tabellen-Design mit Klassen-Selektoren:

Definiere zwei CSS-Klassen:

• .odd: Hintergrundfarbe hellgrau (#f2f2f2)
• .even: Hintergrundfarbe weiß

3. Zusatzaufgabe:

Nutze eine Pseudoklasse wie :hover, damit die Tabellenzeile beim Überfahren mit der Maus blau markiert wird.