Cara Memasang Warna Latar Belakang HTML

Artikel How.com.vn ini akan mengajarkan kepada Anda cara mengubah warna latar halaman web dengan menyunting dokumen HTML-nya.

Metode 1

Metode 1 dari 4:

Mempersiapkan Penyuntingan HTML

Unduh PDF

1
Tentukan warna latar yang ingin digunakan. 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.
2
Buka berkas HTML pada program penyunting teks. Sejak diluncurkannya HTML5, atribut HTML <bgcolor> tidak lagi didukung. Warna latar dan beragam aspek gaya/desain halaman lainnya diatur melalui CSS.^{[1]XTeliti sumber}
- Anda bisa menggunakan Notepad++ atau Notepad pada komputer Windows. Untuk pengguna Mac, Anda bisa menyunting dokumen menggunakan TextEdit atau BBEdit.
3
Tambahkan kepala "html" pada dokumen. Semua informasi gaya atua desain halaman (termasuk warna latar) harus dikodekan di antara penanda <style></style>:
Anda harus menyisipkan satu baris yang dapat ditambahi informasi di bawah penanda <style> dan di atas penanda </style>.
5
Tambahkan elemen "body". Tikkan kode berikut di antara penanda <style></style>:
- 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.
Iklan

Metode 2

Metode 2 dari 4:

Mengatur Latar Belakang Warna Polos

Unduh PDF

Elemen ini berada di bagian atas dokumen.
2
Sisipkan properti "background-color" ke elemen "body". Tikkan background-color: di antara kurung kurawal elemen “body”. Pada tahap ini, Anda memiliki elemen "body" sebagai berikut:
- Dalam konteks ini, Anda hanya bisa menggunakan kata “color” alih-alih "colour".
3
Tambahkan warna latar yang diinginkan ke properti "background-color". 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:
4
Periksa informasi atau kode pada segmen "style". Pada tahap ini, bagian kepala dokumen HTML Anda akan tampak sebagai berikut:
5
Gunakan properti "background-color" untuk menerapkan warna latar pada elemen halaman yang lain. 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:^{[2]XTeliti sumber}
Iklan

Metode 3

Metode 3 dari 4:

Membuat Latar Belakang Gradien

Unduh PDF

Elemen ini berada di bagian atas dokumen.
2
Pahami sintaksis dasar proses pembuatan ini. 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.^{[3]XTeliti sumber}

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(#216fdb, #C9DCB9);     background: -o-linear-gradient(#216fdb, #C9DCB9);     background: -moz-linear-gradient(#216fdb, #C9DCB9);     background: linear-gradient(#216fdb, #C9DCB9);     background-color: #216fdb; }

Berbeda peramban, berbeda pula implementasi fungsi gradiennya sehingga Anda perlu mencantumkan beberapa versi kode.

4
Buat gradien yang terarah. 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>:^{[4]XTeliti sumber}
- Anda bisa bereksperimen dengan penanda "left" (kiri) dan "right" (kanan) untuk melihat arah gradien yang berbeda.
5
Gunakan properti lain untuk membuat penyesuaian pada gradien. Sebenarnya, ada banyak modifikasi yang bisa Anda terapkan pada gradien.
- Sebagai contoh, selain menambahkan lebih dari dua opsi warna pada gradien, Anda juga dapat menetapkan persentase pada setiap warna. Dengan persentase ini, Anda bisa mengatur jarak setiap segmen warna terhadap warna lainnya dalam satu halaman. Berikut adalah contoh kode yang menggunakan prinsip persentase:
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
6
Tambahkan transparansi pada warna. 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).

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, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>

Metode 4

Metode 4 dari 4:

Membuat Latar Belakang dengan Warna yang Berubah

Unduh PDF

Elemen ini berada di bagian atas dokumen.
2
Tambahkan properti animasi pada elemen "body". Tikkan kode berikut pada kolom di bawah kurung kurawal "body {" dan di atas kurung kurawal penutup: ^{[5]XTeliti sumber}
- Baris kode atas ditujukan untuk peramban berbasis Chromium, sementara baris kode bawah ditujukan untuk peramban-peramban lain.
3
Tambahkan warna pada animasi. 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":^{[6]XTeliti sumber}
- 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>

Tips

Jika Anda ingin menggunakan warna-warna dasar pada kode HTML, tikkan nama warna tanpa tagar (“#”) sebagai pengganti kode warna HTML. Sebagai contoh, jika Anda ingin menggunakan warna oranye sebagai warna latar halaman, tikkan background-color: orange;.
Anda juga bisa mengatur gambar sebagai latar belakang halaman situs dengan HTML.