Warna dan Latar Belakang
Warna dan Latar Belakang
Warna dan Latar Belakang adalah pelajaran HTML for Kids gratis di CoddyKit. Ini adalah pelajaran 1 dari 1. 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 1 pelajaran total.
Pendahuluan
Halo,
Kita dapat mengubah warna teks dengan properti Color.
Kita dapat menetapkan nilai pada properti ini dalam bentuk RGB, HEX, HSL, RGBA, atau HSLA.
Kita telah menggunakan properti color dalam banyak contoh sejauh ini. Sekarang mari kita lihat penggunaannya dengan berbagai jenis nilai.
<style>
#txt1{
color: red;
}
#txt2{
color: #ff0000;
}
#txt3{
color: rgb(255,0,0);
}
/*
0.4 is the alpha value.
We can define decimal values
between 1 and 0.
*/
#txt4{
color: rgba(255,0,0, 0.4);
}
</style>
<div class="box">
<h1 id="txt1">
This is red color
</h1>
<h1 id="txt2">
This is red color that defined with HEX type
</h1>
<h1 id="txt3">
This is red color that defined with RGB type
</h1>
<h1 id="txt4">
This is red color that defined with RGBA type
</h1>
</div>Latar Belakang
Kita dapat menentukan gaya untuk latar belakang elemen menggunakan properti Background.
Sekarang mari kita pelajari properti latar belakang berikut.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background-color
Properti ini digunakan untuk mengubah warna latar belakang suatu elemen.
Mari kita lihat contohnya.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Donec ante purus,
eleifend egestas tempus non, consequat ac ex..
</div>
</body>
</html>Opasitas
Properti ini digunakan untuk mengubah opasitas latar belakang suatu elemen.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
background-color: lightblue;
opacity: 0.5;
border:1px solid #c0c0c0;
color:#ffffff;
}
</style>
</head>
<body>
<div id="box">
Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</div>
</body>
</html>Opasitas - 2
Perubahan Opasitas CSS ditampilkan pada gambar di atas.
Gambar Latar Belakang
Properti background-image digunakan untuk menambahkan gambar ke latar belakang suatu elemen.
Kita memiliki gambar di https://coddy.s3.amazonaws.com/cms/Profile_Pictures_dc459075ee.png.
Sekarang mari kita definisikan elemen div dan menambahkan gambar ke latar belakangnya.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position
background-size
Jika Anda memperhatikan contoh di atas, kita tidak dapat menempatkannya dengan tepat karena ukuran standar gambar lebih besar daripada area tempat kita akan menambahkannya.
Kita akan menggunakan properti background-size untuk mengatasi hal ini.
Properti background-size dapat menerima nilai seperti cover, contain, dan auto. Kita juga dapat menetapkannya ke nilai tertentu untuk lebar dan tinggi.
Mari kita perbarui contoh kita sekali lagi.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* the element's background would fill the
div's background without
the image's ratio being distorted*/
background-size: contain;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-position 2
Sekarang mari kita menetapkan nilainya sebagai persentase untuk properti background-position.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height values
are set to 50%. */
background-size: 50% 50%;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-repeat
Namun, ada masalah di sini. Karena ukuran gambar lebih kecil daripada ukuran latar belakang elemen, gambar tersebut digunakan lebih dari sekali untuk mengisi area.
Untuk menghindari hal ini, gunakan properti background-repeat (dengan nilai repeat, repeat-x, repeat-y, initial, inherit, atau no-repeat).
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>background-attachment
Properti latar belakang lainnya adalah background-attachment. Dengan properti ini, kita dapat menentukan apakah gambar latar belakang akan bergulir bersama halaman.
Properti ini menerima nilai fixed atau scroll.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background-image: url("https://cdn.coddykit.com/cms/coddy_test.png");
/* The width and height
values are set to 50%. */
background-size: 50% 50%;
background-attachment:scroll;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Singkatan Latar Belakang
Saat ingin menerapkan properti latar belakang yang telah dipelajari pada contoh-contoh sebelumnya, kita mungkin perlu menuliskan 4–5 baris ekspresi.
Kita menggunakan properti pintasan background agar definisinya dapat ditulis dalam satu baris.
Mari kita lihat contohnya.
Pada properti background, ditentukan no-repeat, ukuran, penempatan dalam halaman, dan URL gambar sumber.
<!DOCTYPE html>
<html>
<head>
<style>
#box {
padding:10px;
width:300px;
height:300px;
background: no-repeat center/50%
url("https://cdn.coddykit.com/cms/coddy_test.png");
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>Selamat
Selamat 🎉
Di bagian ini, kita telah mempelajari Warna dan Latar Belakang.
Di bagian berikutnya, kita akan mempelajari konsep Kotak, Blok, dan Sebaris
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 16
- Pelajaran
- 35
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 1 pelajaran total.
Apa yang akan aku pelajari di “Warna dan Latar Belakang”?
Warna dan Latar Belakang 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 1 dari 1.
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.