HTML for Kids · Lekcja

Kolory i tła

Dodawanie kolorów i teł, aby ożywić stronę

Kolory i tła to bezpłatna lekcja HTML for Kids na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML for Kids, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Kolory i tła

Witamy w kolejnej lekcji! Dzisiaj nauczymy się dodawać kolory i tła do stron internetowych, aby nadać im bardziej wyrazisty i atrakcyjny wygląd.

Po co używać kolorów i teł?

Kolory i tła mogą:

Sprawić, że strona będzie bardziej atrakcyjna.
Wyróżnić ważne treści.
Ustalić nastrój lub motyw strony.

Nauczmy się używać ich skutecznie!

Zmienianie koloru tekstu

Kolor tekstu można zmienić za pomocą właściwości color. Możesz użyć:

nazw kolorów: przykład: red, blue.
kodów szesnastkowych: przykład: #ff0000, #0000ff.
wartości RGB: przykład: rgb(255, 0, 0).

Przykład:

<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>

Dodawanie koloru tła

Właściwość background-color służy do zmiany koloru tła elementu.

Przykład:

<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>

Tło całej strony

Możesz zmienić kolor tła całej strony, stosując właściwość background-color do znacznika <body>.

Przykład:

<!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>

Dodawanie obrazów tła

Możesz ustawić obraz jako tło za pomocą właściwości background-image.

Przykład:

W tym przykładzie:

background-size: cover; sprawia, że obraz pokrywa całą stronę.
background-repeat: no-repeat; zapobiega powtarzaniu obrazu.

<!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>

Łączenie kolorów tekstu i tła

Możesz łączyć kolory tekstu i tła, aby tworzyć atrakcyjne wizualnie projekty. Upewnij się, że tekst jest czytelny!

Przykład:

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

Spróbuj samodzielnie

Utwórzmy stronę internetową z kolorami i tłami. Oto przykład:

<!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>

Świetna praca!

Gratulacje! Nauczyłeś się używać kolorów i teł, aby nadać stronom internetowym bardziej wyrazisty i atrakcyjny wygląd. W następnej lekcji zajmiemy się formatowaniem tekstu, aby dodawać pogrubienie, kursywę i inne efekty. Przygotuj się do rozwijania swoich umiejętności projektowania!

Często zadawane pytania

Czy lekcja „Kolory i tła” jest bezpłatna?

Tak — pełny tekst „Kolory i tła” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML for Kids, przejdź na CoddyKit PRO. Kurs HTML for Kids zawiera 4 lekcji w sumie.

Co nauczysz się w „Kolory i tła”?

Dodawanie kolorów i teł, aby ożywić stronę Ćwiczysz HTML for Kids z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML for Kids?

Nie wymagamy żadnego doświadczenia. HTML for Kids w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Kolory i tła”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML for Kids?

Tak. Każda lekcja HTML for Kids zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do HTML for Kids