Unduh PDF
Unduh PDF
Artikel wikiHow ini akan mengajarkan kepada Anda cara mengubah warna latar halaman web dengan menyunting dokumen HTML-nya.
Langkah
-
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.
-
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] X Teliti sumber
- Anda bisa menggunakan Notepad++ atau Notepad pada komputer Windows. Untuk pengguna Mac, Anda bisa menyunting dokumen menggunakan TextEdit atau BBEdit.
-
Tambahkan kepala " html " pada dokumen. Semua informasi gaya atua desain halaman (termasuk warna latar) harus dikodekan di antara penanda
<style></style>:<! DOCTYPE html > < html > < head > < style > </ style > </ head > </ html >
-
Buat baris kosong di antara penanda " style ". Anda harus menyisipkan satu baris yang dapat ditambahi informasi di bawah penanda
<style>dan di atas penanda</style>. -
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.
body { }
Iklan
-
Cari bagian kepala " html " pada dokumen. Elemen ini berada di bagian atas dokumen.
-
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 ".
body { background-color : }
-
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:
body { background-color : #d24dff ; }
-
Periksa informasi atau kode pada segmen " style ". Pada tahap ini, bagian kepala dokumen HTML Anda akan tampak sebagai berikut:
<! DOCTYPE html > < html > < head > < style > body { background-color : #d24dff } </ style > </ head > </ html >
-
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] X Teliti sumber
<! 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 >
Iklan
-
Cari bagian kepala " html " pada dokumen. Elemen ini berada di bagian atas dokumen.
-
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] X Teliti sumber
background : linear-gradient ( arah / sudut , warna1 , warna2 , warna3 , dan sebagainya );
-
Ciptakan gradien vertikal. Tanpa penentuan arah, gradien akan “bergerak” dari atas ke bawah (vertikal). Untuk membuat gradien, tambahkan kode berikut di antara penanda
<style></style>:- Berbeda peramban, berbeda pula implementasi fungsi gradiennya sehingga Anda perlu mencantumkan beberapa versi kode.
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 ; }
-
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] X Teliti sumber- Anda bisa bereksperimen dengan penanda " left " (kiri) dan " right " (kanan) untuk melihat arah gradien yang berbeda.
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 ; }
-
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 %);
- 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:
-
6Tambahkan 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).
background : linear-gradient ( to right , rgba ( 147 , 184 , 116 , 0 ), rgba ( 147 , 184 , 116 , 1 ));
-
Periksa hasil akhir kode yang dibuat. 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 >
Iklan
-
Cari bagian kepala " html " pada dokumen. Elemen ini berada di bagian atas dokumen.
-
Tambahkan properti animasi pada elemen " body ". Tikkan kode berikut pada kolom di bawah kurung kurawal
"body {"dan di atas kurung kurawal penutup: [5] X Teliti sumber- Baris kode atas ditujukan untuk peramban berbasis Chromium, sementara baris kode bawah ditujukan untuk peramban-peramban lain.
-webkit-animation : colorchange 60s infinite ; animation : colorchange 60s infinite ;
-
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] X Teliti 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.
@ -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 ;} }
-
Periksa hasil akhir kode. Secara keseluruhan, kode untuk warna latar yang berubah akan tampak seperti ini:
<! DOCTYPE html > < html > < head > < style > body { -webkit- animation : colorchange 60 s infinite ; animation : colorchange 60 s 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 >
Iklan
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.
Iklan
Peringatan
- Pastikan Anda menguji perubahan pada situs sebelum menerbitkannya atau meluncurkannya ke dalam jaringan.
Iklan
Referensi
- ↑ https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
- ↑ http://www.w3schools.com/css/css_background.asp
- ↑ https://css-tricks.com/css3-gradients/
- ↑ http://www.w3schools.com/css/css3_gradients.asp
- ↑ https://codepen.io/metagrapher/pen/tgcLl
- ↑ http://www.w3schools.com/css/css3_animations.asp
Iklan
