HTML for Kids · Pelajaran

Warna dan Latar Belakang

Tambahkan warna dan latar belakang agar halaman Anda lebih menarik

Warna dan Latar Belakang adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML for Kids, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML for Kids mencakup 4 pelajaran total.

Warna dan Latar

Selamat datang di pelajaran berikutnya! Hari ini, kita akan mempelajari cara menambahkan warna dan latar ke halaman web agar lebih hidup dan menarik secara visual.

Mengapa Menggunakan Warna dan Latar?

Warna dan latar dapat:

Membuat halaman web Anda lebih menarik.
Menyoroti konten penting.
Menciptakan suasana atau tema halaman Anda.

Mari kita pelajari cara menggunakannya secara efektif!

Mengubah Warna Teks

Anda dapat mengubah warna teks menggunakan properti color. Anda dapat menggunakan:

Nama warna: Contoh: red, blue.
Kode heksadesimal: Contoh: #ff0000, #0000ff.
Nilai RGB: Contoh: rgb(255, 0, 0).

Contoh:

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

Menambahkan Warna Latar

Properti background-color digunakan untuk mengubah warna latar suatu elemen.

Contoh:

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

Latar Seluruh Halaman

Anda dapat mengubah warna latar seluruh halaman dengan menerapkan properti background-color pada tag <body>.

Contoh:

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

Menambahkan Gambar Latar

Anda dapat menetapkan gambar sebagai latar menggunakan properti background-image.

Contoh:

Dalam contoh ini:

background-size: cover; membuat gambar menutupi seluruh halaman.
background-repeat: no-repeat; mencegah gambar berulang.

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

Menggabungkan Warna Teks dan Latar

Anda dapat menggabungkan warna teks dan latar untuk membuat desain yang menarik secara visual. Pastikan teks mudah dibaca!

Contoh:

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

Coba Sendiri

Mari kita membuat halaman web dengan warna dan latar. Berikut contohnya:

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

Kerja Bagus!

Selamat! Anda telah mempelajari cara menggunakan warna dan latar untuk membuat halaman web lebih hidup dan menarik secara visual. Pada pelajaran berikutnya, kita akan mempelajari pemformatan teks untuk menambahkan efek tebal, miring, dan lainnya pada teks Anda. Bersiaplah untuk meningkatkan keterampilan desain Anda!

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Warna dan Latar Belakang” gratis?

Ya — teks lengkap “Warna dan Latar Belakang” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML for Kids, upgrade ke CoddyKit PRO. Kursus HTML for Kids mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Warna dan Latar Belakang”?

Tambahkan warna dan latar belakang agar halaman Anda lebih menarik Kamu berlatih HTML for Kids dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML for Kids?

Tidak diperlukan pengalaman sebelumnya. HTML for Kids di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Warna dan Latar Belakang” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML for Kids ini?

Ya. Setiap pelajaran HTML for Kids menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML for Kids