HTML for Kids · Lektion

Farben und Hintergründe

Fügen Sie Farben und Hintergründe hinzu, damit Ihre Seite hervorsticht

Farben und Hintergründe ist eine kostenlose HTML for Kids-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML for Kids-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

Farben und Hintergründe

Willkommen bei der nächsten Lektion! Heute lernen Sie, wie Sie Farben und Hintergründe zu Ihrer Webseite hinzufügen, damit sie lebendiger und ansprechender wirkt.

Warum Farben und Hintergründe verwenden?

Farben und Hintergründe können:

Ihre Webseite attraktiver machen.
Wichtige Inhalte hervorheben.
Die Stimmung oder das Thema Ihrer Seite festlegen.

Lernen wir, wie Sie sie wirkungsvoll einsetzen!

Textfarbe ändern

Sie können die Textfarbe mithilfe der Eigenschaft color ändern. Sie können Folgendes verwenden:

Farbnamen: Beispiel: red, blue.
Hexadezimale Farbcodes: Beispiel: #ff0000, #0000ff.
RGB-Werte: Beispiel: rgb(255, 0, 0).

Beispiel:

<p style="color: red;">This text is red.</p>
<p style="color: #0000ff;">This text is blue.</p>
<p style="color: rgb(0, 128, 0);">This text is green.</p>

Hintergrundfarbe hinzufügen

Mit der Eigenschaft background-color wird die Hintergrundfarbe eines Elements geändert.

Beispiel:

<p style="background-color: yellow;">This paragraph has a yellow background.</p>
<div style="background-color: lightgray; padding: 10px;">
  This is a box with a gray background.
</div>

Hintergrund für die gesamte Seite

Sie können die Hintergrundfarbe der gesamten Seite ändern, indem Sie die Eigenschaft background-color auf den <body>-Tag anwenden.

Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a light blue background.</p>
  </body>
</html>

Hintergrundbilder hinzufügen

Mit der Eigenschaft background-image können Sie ein Bild als Hintergrund festlegen.

Beispiel:

In diesem Beispiel:

background-size: cover; sorgt dafür, dass das Bild die gesamte Seite bedeckt.
background-repeat: no-repeat; verhindert, dass das Bild wiederholt wird.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-image: url('background.jpg');
        background-size: cover;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This page has a background image.</p>
  </body>
</html>

Text- und Hintergrundfarben kombinieren

Sie können Text- und Hintergrundfarben kombinieren, um ansprechende Designs zu erstellen. Achten Sie darauf, dass der Text gut lesbar ist!

Beispiel:

<p style="color: white; background-color: black; padding: 10px;">
  This is white text on a black background.
</p>

Probieren Sie es selbst aus

Erstellen wir eine Webseite mit Farben und Hintergründen. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lavender;
      }
      h1 {
        color: darkblue;
      }
      p {
        background-color: lightyellow;
        padding: 10px;
        border: 1px solid darkgray;
      }
    </style>
  </head>
  <body>
    <h1>My Colorful Page</h1>
    <p>This paragraph has a light yellow background with a border.</p>
  </body>
</html>

Sehr gut!

Herzlichen Glückwunsch! Sie haben gelernt, wie Sie Farben und Hintergründe verwenden, um Ihre Webseiten lebendiger und ansprechender zu gestalten. In der nächsten Lektion beschäftigen wir uns mit der Textformatierung, um Ihren Text fett, kursiv und mit weiteren Effekten darzustellen. Machen Sie sich bereit, Ihre Gestaltungskompetenzen zu erweitern!

Farben und Hintergründe — Illustration 10

Häufig gestellte Fragen

Ist die Lektion „Farben und Hintergründe“ kostenlos?

Ja — der vollständige Text von „Farben und Hintergründe“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML for Kids-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML for Kids-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Farben und Hintergründe“?

Fügen Sie Farben und Hintergründe hinzu, damit Ihre Seite hervorsticht Du übst HTML for Kids mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML for Kids zu starten?

Keine Vorkenntnisse erforderlich. HTML for Kids auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Farben und Hintergründe“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML for Kids-Lektion Code schreiben und ausführen?

Ja. Jede HTML for Kids-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu HTML for Kids