Mengatur Latar Belakang Warna Polos Mempersiapkan Penyuntingan HTML Membuat Latar Belakang Gradien Membuat Latar Belakang dengan Warna yang Berubah
Elemen ini berada di bagian atas dokumen. Tikkan background-color: di antara kurung kurawal elemen “body”. Pada tahap ini, Anda memiliki elemen "body" sebagai berikut:   body {     background-color:  }   Dalam konteks ini, Anda hanya bisa menggunakan kata “color” dalam satu ejaan (bahasa Inggris Amerika Serikat); Anda tidak bisa menggunakan ejaan "colour" (bahasa Inggris Britania Raya). Tikkan kode numerik warna terpilih, diikuti titik koma di samping elemen "background-color:". Sebagai contoh, jika Anda ingin memilih warna merah muda sebagai warna latar halaman, gunakan kode sebagai berikut:  body {     background-color: #d24dff; } Pada tahap ini, bagian kepala dokumen HTML Anda akan tampak sebagai berikut:   <!DOCTYPE html> <html> <head> <style> body { background-color: #d24dff } </style> </head> </html> Seperti halnya pada elemen “body” atau tubuh halaman, Anda bisa menggunakan properti "background-color" untuk mengatur warna latar elemen halaman yang lain, seperti kepala, paragraf, dan sebagainya. Sebagai contoh, untuk menerapkan warna latar ke tajuk utama (“<h1>”) atau paragraf (“<p>”), Anda bisa menggunakan kode sebagai berikut:  <!DOCTYPE html> <html> <head> <style> body {     background-color: #93B874; } h1 {     background-color: #00b33c; } p {     background-color: #FFFFFF); } </style> </head> <body> <h1>Tajuk dengan Latar Belakang Hijau</h1> <p>Paragraf dengan latar belakang putih</p> </body> </html> Warna-warna HTML ditentukan oleh kode (dalam basis per warna). Anda bisa menggunakan layanan pemilih warna gratis W3Schools HTML untuk mencari kode warna yang ingin dipilih:  Kunjungi https://www.w3schools.com/colors/colors_picker.asp melalui peramban web komputer. Klik warna dasar yang ingin digunakan pada segmen "Pick a Color". Pilih corak warna di sisi kanan halaman. Catat kode numerik di samping kanan corak. Sejak diluncurkannya HTML5, atribut HTML <bgcolor> tidak lagi didukung. Warna latar dan beragam aspek gaya/desain halaman lainnya diatur melalui CSS. Anda bisa menggunakan Notepad++ atau Notepad pada komputer Windows. Untuk pengguna Mac, Anda bisa menyunting dokumen menggunakan TextEdit atau BBEdit. Semua informasi gaya atua desain halaman (termasuk warna latar) harus dikodekan di antara penanda <style></style>:  <!DOCTYPE html> <html> <head> <style> </style>  </head> </html> Anda harus menyisipkan satu baris yang dapat ditambahi informasi di bawah penanda <style> dan di atas penanda </style>. Tikkan kode berikut di antara penanda <style></style>:   body {  }   Modifikasi yang Anda lakukan pada elemen "body" di CSS akan memengaruhi seluruh halaman. Lewati langkah ini jika Anda ingin membuat gradien sebagai latar belakang halaman. Elemen ini berada di bagian atas dokumen. Saat membuat gradien, Anda membutuhkan dua informasi: titik atau sudut awal, dan warna-warna dalam transisi gradien. Anda bisa menentukan beberapa warna untuk diterapkan dalam transisi, serta memilih arah atau sudut gradien.  background: linear-gradient(arah/sudut, warna1, warna2, warna3, dan sebagainya); Tanpa penentuan arah, gradien akan “bergerak” dari atas ke bawah (vertikal). Untuk membuat gradien, tambahkan kode berikut di antara penanda <style></style>:   html {     min-height: 100%;  } body {     background: -webkit-linear-gradient(#93B874, #C9DCB9);      background: -o-linear-gradient(#93B874, #C9DCB9);      background: -moz-linear-gradient(#93B874, #C9DCB9);      background: linear-gradient(#93B874, #C9DCB9);      background-color: #93B874;  }   Berbeda peramban, berbeda pula implementasi fungsi gradiennya sehingga Anda perlu mencantumkan beberapa versi kode. Jika Anda ingin menciptakan gradien selain gradien vertikal, tambahkan informasi arah agar Anda bisa mengubah pola perubahan warna. Sisipkan informasi arah dengan mengetikkan kode berikut di antara penanda <style></style>:   html {     min-height: 100%; }  body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);      background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  }   Anda bisa bereksperimen dengan penanda "left" (kiri) dan "right" (kanan) untuk melihat arah gradien yang berbeda. Dengan properti ini, Anda bisa membuat warna tampak pudar. Gunakan warna yang sama untuk dipudarkan dari titik paling solid ke titik transparan. Fungsi rgba() perlu digunakan untuk menetapkan tampilan warna. Nilai akhir pada fungsi menentukan tingkat transparansi warna: 0 untuk warna solid dan 1 untuk tampilan transparan (bening).  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1)); Secara keseluruhan, kode untuk membuat gradien warna sebagai latar belakang situs akan tampak seperti ini:  <!DOCTYPE html> <html> <head> <style> html {     min-height: 100%; }   body {     background: -webkit-linear-gradient(left, #93B874, #C9DCB9);      background: -o-linear-gradient(right, #93B874, #C9DCB9);     background: -moz-linear-gradient(right, #93B874, #C9DCB9);      background: linear-gradient(to right, #93B874, #C9DCB9);      background-color: #93B874;  } </style> </head> <body> </body> </html> Elemen ini berada di bagian atas dokumen. Tikkan kode berikut pada kolom di bawah kurung kurawal "body {" dan di atas kurung kurawal penutup:        -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite;   Baris kode atas ditujukan untuk peramban berbasis Chromium, sementara baris kode bawah ditujukan untuk peramban-peramban lain. Sekarang, Anda perlu menggunakan aturan “@keyframes” untuk menetapkan warna-warna latar yang akan digilir, serta durasi tampilan setiap warna pada halaman. Sekali lagi, Anda membutuhkan entri kode berbeda untuk setiap peramban. Masukkan baris-baris kode berikut di bawah kurung kurawat penutup elemen "body":   @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }   Perlu diingat bahwa aturan atau kode @-webkit-keyframes dan @keyframes harus memiliki warna latar dan persentase yang sama. Pastikan kedua elemen tersebut tetap serasi agar setiap peramban bisa memuat penampilan halaman yang sama. Persentase yang digunakan (0%, 25%, dan lain-lain) mengacu pada persentase dari total durasi animasi (60s untuk 60 detik). Saat halaman dimuat, warna latar yang digunakan merupakan warna yang diatur pada persentase 0% (#33FFF3). Setelah animasi berjalan selama 25% dari 60 detik, warna latar akan berubah menjadi warna pada kode #7821F, dan selanjutnya. Anda bisa mengubah waktu dan warna agar cocok dengan hasil akhir yang diinginkan. Secara keseluruhan, kode untuk warna latar yang berubah akan tampak seperti ini:  <!DOCTYPE html> <html> <head> <style> body {     -webkit-animation: colorchange 60s infinite;      animation: colorchange 60s infinite; } @-webkit-keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} } @keyframes colorchange {      0%  {background: #33FFF3;}     25%  {background: #78281F;}     50%  {background: #117A65;}     75%  {background: #DC7633;}     100% {background: #9B59B6;} }    </style> </head> <body> </body> </html>
Cari bagian kepala "html" pada dokumen. Sisipkan properti "background-color" ke elemen "body". Tambahkan warna latar yang diinginkan ke properti "background-color". Tinjau informasi atau kode pada segmen "style". Gunakan properti "background-color" untuk menerapkan warna latar pada elemen halaman yang lain. Tentukan warna latar yang ingin digunakan. Buka berkas HTML pada program penyunting teks. Tambahkan kepala "html" pada dokumen. Buat baris kosong di antara penanda "style". Tambahkan elemen "body". Cari bagian kepala "html" pada dokumen. Pahami sintaksis dasar proses pembuatan ini. Ciptakan gradien vertikal. Buat gradien yang terarah. Tambahkan transparansi pada warna. Tinjau hasil akhir kode yang dibuat. Cari bagian kepala "html" pada dokumen. Tambahkan properti animasi pada elemen "body". Tambahkan warna pada animasi. Tinjau hasil akhir kode.
https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML https://www.wikihow.com/Set-Background-Color-in-HTML
Setting a Solid Background Color Preparing to Edit Your HTML Creating a Gradient Background Creating a Changing Background