Cara Menambahkan & Mengubah Warna Background HTML

Cara Menambahkan & Mengubah Warna Background HTML

by

anakui.com – Mengatur warna latar belakang halaman web atau mengubah warna background HTML memungkinkan Anda membuat tata letak yang unik.

Ambil beranda Delish sebagai contoh. Gambar latar belakang bagian tajuk adalah sup berwarna-warni. Warna latar kotak teks disetel menjadi putih agar pembaca tetap dapat melihat nama resepnya. Efeknya terlihat dan mudah dibaca.

Warna Background HTML

Dalam HTML dan CSS, warna latar belakang ditunjukkan oleh properti background-color. Untuk menambah atau Mengubah Warna Background HTML, cukup tambahkan CSS sebaris ke kode Anda. Misalnya:

<body style="background-color:#33475b">

Dulu, Anda bisa mengubah warna latar belakang halaman atau elemen menggunakan properti bgcolor.

Katakanlah Anda ingin mengubah warna latar belakang halaman web Anda menjadi merah marun. Cukup tambahkan atribut bgcolor ke tag body pembuka seperti yang ditunjukkan di bawah ini dan setel ke kode warna heksadesimal #800000.

<body bgcolor="#800000">

Namun, properti ini sudah tidak digunakan lagi di versi HTML yang lebih baru dan telah digantikan oleh alternatif yang jauh lebih baik, properti CSS background-color. Anda dapat menggunakan properti ini untuk menambah dan mengubah warna latar belakang di situs web Anda.

Tutorial dibahas lebih detail di bawah ini.

Cara Menambahkan Warna Background di HTML

Untuk menambahkan warna latar belakang dalam HTML, gunakan properti CSS background-color. Setel ke nama atau kode warna apa pun yang Anda inginkan dan letakkan di dalam atribut style. Kemudian tambahkan atribut gaya ini ke elemen HTML seperti tabel, judul, div, atau tag span.

Menambahkan warna latar membuat elemen tertentu menonjol di halaman, meningkatkan keterbacaan.

Mari kita lalui proses ini langkah demi langkah. Tutorial ini membuat tabel dalam HTML sebagai contoh.

1. Identifikasi elemen HTML yang ingin Anda tambahkan atau buat latar belakang.

Pindai kode HTML Anda untuk menentukan elemen yang ingin Anda ubah. Jika berupa header, temukan tag pembuka <header>. Jika berupa div, ia mencari tag <div>.

Contoh ini membuat tabel dengan tag <table>.

2. Pilih Warna Latar Belakang HTML.

Ada banyak kode warna HTML untuk dipilih. Contoh ini menciptakan warna #33475b.

3. Tambahkan Atribut Gaya ke Tag Pembuka.

Selanjutnya, tambahkan atribut style ke tag pembuka elemen. Dalam tutorial ini, hanya warna latar belakang dari tabel khusus ini yang diubah. Perubahan tidak memengaruhi elemen lain di halaman.

Ini adalah HTML dengan CSS sebaris.

<table style="background-color:#33475b">
  <tr>
  <th>Name</th>
  <th>Job Title</th> 
  <th>Email address</th>
  </tr>
  <tr>
  <td>Anna Fitzgerald</td>
  <td>Staff Writer</td>
  <td>[email protected]</td>
  </tr>
  <tr>
  <td>John Smith</td>
  <td>Marketing Manager</td>
  <td>[email protected]</td>
  </tr>
  <tr>
  <td>Zendaya Grace</td>
  <td>CEO</td>
  <td>[email protected]</td>
  </tr>
  </table>

Itu mudah. Sekarang mari kita lihat apa yang harus dilakukan jika Anda ingin menyetel warna latar belakang beberapa elemen pada halaman.

Cara Mengubah Warna Background HTML

Katakanlah Anda ingin menyetel warna latar belakang seluruh halaman web ke satu warna dan mengubah warna latar belakang elemen tertentu ke warna lain. Kabar baiknya adalah mengubah warna latar belakang suatu elemen hampir sama dengan menambahkan elemen.

Anda dapat menggunakan CSS sebaris untuk ini, tetapi contoh di bawah ini menggunakan beberapa gaya CSS. Mari kita lalui proses ini langkah demi langkah.

1. Temukan pemilih CSS “body”.

Alih-alih menambahkan CSS ini ke tag body file HTML, kami menambahkannya menggunakan pemilih body CSS. Temukan di kode CSS situs web.

2. Ubah warna latar belakang teks.

Selanjutnya, kami menggunakan properti background-color untuk mengubah warna latar belakang seluruh halaman web.

CSS adalah:

body {
  background-color: #DBF9FC;
  }

Hasilnya adalah:

Cobalah sendiri!

Modul kode di bawah ini dapat diedit. Beralih antara tab HTML dan CSS, edit kode, lalu klik Ulangi di pojok kanan bawah.

Jika ini adalah satu-satunya CSS, semua yang ada di halaman akan memiliki latar belakang biru muda yang sama. Selanjutnya, kami menambahkan CSS sebaris untuk mengubah warna latar belakang tabel.

3. Tambahkan CSS sebaris untuk mengubah warna latar belakang elemen tertentu.

Jika ingin mengubah warna latar belakang tabel, Anda dapat menargetkan elemen tunggal tersebut dengan CSS sebaris.

Ini adalah tag pembuka dengan CSS sebaris:

<table style="background-color:#33475b">

Hasilnya adalah:

Cobalah sendiri!

Modul kode di bawah ini dapat diedit. Beralih antara tab HTML dan CSS, edit kode, lalu klik Ulangi di pojok kanan bawah.

Cara Mengubah Warna Background Div

Div adalah elemen penampung yang biasa digunakan untuk menunjuk berbagai bagian halaman web. Mengubah warna latar belakang div sama dengan mengubah warna latar belakang badan halaman web.

Halaman web biasanya memiliki banyak div. Tutorial ini akan mengajarkan Anda cara mengubah hanya satu div. Mari kita melalui proses langkah demi langkah.

1. Tambahkan kelas css ke div yang ingin Anda ubah.

Pertama temukan div dalam kode HTML Anda dan tambahkan kelas ke tag pembuka. Menambahkan kelas ke elemen memungkinkan Anda untuk mengubah hanya elemen itu.

Ini terlihat seperti ini:

<div class=”example”>This is a div on a webpage. </div>

2. Tambahkan pemilih kelas baru ke kode CSS Anda.

Selanjutnya, buka kode CSS Anda dan tambahkan pemilih kelas baru. Sertakan properti background-color dalam tanda kurung.

Ini terlihat seperti ini:

.example {
  background-color: ;
  }

3. Pilih Warna latar belakang baru.

Selanjutnya, pilih warna latar belakang CSS untuk properti warna latar belakang. Kami memilih rgb(255, 122, 89).

Ini kodenya.

Hasilnya adalah:

.example {
  background-color: rgb(255, 122, 89);
  }

Semua selesai! Saya mengubah latar belakang div di halaman web.

Cobalah sendiri!

Modul kode di bawah ini dapat diedit. Beralih antara tab HTML dan CSS, edit kode, lalu klik Ulangi di pojok kanan bawah.

Daftar Isi

Rekomendasi:

  • Beasiswa PPA: Informasi Lengkap Terbaru 2020, Persyaratan,… Pendidikan merupakan faktor paling penting untuk menunjang masa depan yang lebih baik. Masalahnya, untuk mendapatkan pendidikan yang bermutu, dibutuhkan dana yang cukup besar. Namun, kamu tidak perlu khawatir karena ada banyak…
  • NADIO FLO: Seorang Praktisi Media yang Terjun ke Dunia… Cewek yang bernama lengkap Nadia Flouriana Louisa, sering dipanggil ‘Flo’ lahir di Jakarta, 19 Juli 1984 yang lalu. Dia tinggal di daerah Pejaten, Jakarta Selatan. Hobi yang sering digeluti oleh…
  • 20+ Contoh Proposal Siap Download Jika Anda membaca artikel ini, berarti Anda sedang mencari referensi contoh proposal untuk berbagai kebutuhan Anda kan? Baca terus untuk mendapatkan lebih dari 20 contoh proposal siap download, seperti proposal…
  • Contoh Kata Pengantar Makalah, Laporan, Skripsi, Proposal,… Anda sedang membuat karya tulis dan mencari inspirasi contoh kata pengantar? Artikel ini memberikan berbagai contoh kata pengantar untuk berbagai kebutuhan penulisan karya tulis Anda, dari kata pengantar makalah, kata…
  • UI Menjadi Nominator di Indonesia Information and… Temen-temen semua, pasti semuanya belum pada tahu kan (sok tahu mode=ON), kalo UI itu termasuk jadi nominator sebuah acara award (penghargaan) atas kemajuan teknologi dan informasi yang diselenggarakan pemerintah? Saya…
  • Yuk Melihat Peluang Bisnis Online Dan Ambil Peluang… Apakah Anda penasaran dengan istilah “bisnis online”? Khusus Anda yang sekarang ini masih belum tahu, bisnis online adalah usaha yang dijalankan lalu dipasarkan secara online. Ya, sesimpel begitu pengertian bisnis…
  • Pengumuman Peserta Lolos Seleksi 1 YDBP UI Yayasan Daya Bakti Pendidikan Universitas Indonesia (YDBP UI) mengundang rekan-rekan mahasiswa yang telah lolos seleksi 1 untuk mengikuti seleksi Tes Psikologi pada Hari Minggu, 1 November 2009, Pukul 08.00 WIB…
  • 9 Contoh Desain Website Akuntan yang Kami Sukai anakui.com - Desain Website Akuntan - Apakah Anda membangun atau mendesain ulang situs web kantor akuntan Anda? Apakah musim pajak sudah dekat atau tidak, selalu ada waktu yang tepat untuk…
  • Entrepreneurial Youth 2012 Para ekonom menyatakan bahwa solusi untuk menekan angka pengangguran adalah dengan menciptakan jiwa kewirausahaan (entrepreneurship) yang dapat menciptakan lapangan pekerjaan yang baru. Entrepreneurial Youth 2012 (E-Yotuh 2012) merupakan salah satu…
  • 3 Contoh Surat Lamaran Kerja Bahasa Inggris yang Baik Salah satu trik agar surat lamaran tampil beda dan lebih baik adalah dengan menulisnya menggunakan bahasa Inggris, contohnya seperti ini.
  • Beasiswa Unggulan Kemendikbud: Informasi Lengkap Jenjang S1,…   Beasiswa unggulan merupakan salah satu beasiswa yang ditawarkan oleh pemerintah melalui Kemendikbud. Beasiswa ini ditujukan bagi putra-putri terbaik Indonesia yang ingin melanjutkan pendidikan ke jenjang yang lebih tinggi atau…
  • Bikin Slide Presentasi yang Keren Tuh Kaya Begini! Bosan sama presentasi yang itu-itu aja? Berikut ini presentasi yang bisa bikin dosen dan teman kamu berdecak kagum
  • Rekomendasi Aplikasi Screenshot Laptop Terbaik ! anakui.com- Aplikasi Screenshot Laptop , Dalam panduan ini, kami menjelajahi alat tangkapan layar terbaik untuk pengguna Windows agar dapat dengan mudah mengambil snapshot atau screenshot cepat dan tangkapan layar saat…
  • Arti HTML5 Pengertian , Elemen Dan Perbedaan anakui.com - Arti HTML5 , HTML5 didefinisikan sebagai versi kelima dari HTML, bahasa markup yang digunakan oleh browser web untuk memvisualisasikan kode. Ini membawa beberapa peningkatan dalam fungsionalitas situs web,…
  • Olimpiade Ilmiah Mahasiswa UI (OIM UI) 2008 OLIMPIADE ILMIAH MAHASISWA UNIVERSITAS INDONESIA 2008 (OIM UI 2008) Adalah kompetisi mahasiswa yang terdiri dari 12 Fakultas se-Universitas Indonesia dalam bidang ilmiah. Tema OIM 2008 : “ Science As A…
  • Hijau FISIP-ku, Lestari Alamku Lihatlah bumi ini! Hampir 500 juta hingga 1 milyar kantung plastik digunakan di dunia tiap tahunnya. Jika sampah-sampah kantung plastik itu dibentangkan maka akan membungkus permukaan bumi setidaknya hingga 10…
  • PRESS RELEASE The 3rd StudentsxCEOs Summit (POST EVENT) PRESS RELEASE The 3rd StudentsxCEOs Summit (POST EVENT) Indonesia diperkirakan memiliki penduduk dengan usia produktif atau yang disebut bonus demografi yang puncaknya akan terjadi pada tahun 2020-2035 mendatang. Pertanyaannya, apakah…
  • Jenis-Jenis Burung Berwarna Hitam Gelap ! anakui.com - Burung Berwarna Hitam , Sangat mudah untuk mengabaikan burung tanpa bulu berwarna cerah. Faktanya, banyak yang melakukannya karena mereka yakin burung berwarna kusam ini hanya memiliki sedikit hal…
  • Akber Depok - "Rahasia Secangkir Kopi" Sudah kenal Akademi Berbagi?  Akademi Berbagi hadir sebagai jembatan antara dunia pendidikan dan professional. Terkadang, akan ada 'missing link' yang sulit untuk dicari penyelesaiannya. Akademi Berbagi memfasilitasi setiap mereka yang ingin…
  • Beasiswa Kursus Bahasa Inggris di Amerika - Indonesia… Program ini bertujuan untuk meningkatkan kemampuan Bahasa Inggris peserta, khususnya dalam English for Academic Purposes. Selain itu, peserta akan memiliki kesempatan untuk mempelajari secara langsung kebudayaan dan masyarakat Amerika Serikat…
  • Call For Essay Indonesia Economic Outlook Indonesia Economic Outlook (IEO) adalah salah satu proyek tahunan Kanopi (Kajian Ekonomi dan Pembangunan Ekonomi) FEUI yang mengulas perekonomian Indonesia secara makro dalam satu tahun terakhir dan memproyeksikan prospek dan tantangan perekonomian…
  • Register to be UI's delegation for HNMUN 2014! Dear future delegates, Universitas Indonesia is currently looking for the official UIHNMUN 2014 delegation! Harvard National Model United Nations (HNMUN) is back next year with its 60th Session in Boston,…
  • Ingin Mengubah Hidupmu Sebagai Mahasiswa yang Punya Banyak… Kamu pasti pernah ngalamin "Kanker" atau Kantong Kering dan bikin kamu terpaksa ngutang--bahkan udah jadi kebiasaan. Duh! Harus dihilangkan, tuh. Nah, kami nantang kamu buat ikut permainan ini kalau kamu…
  • Beasiswa LPDP: Persyaratan dan Alur Pendaftaran Terbaru 2019   Beasiswa Lembaga Pengelola Dana Pendidikan atau yang lebih dikenal dengan LPDP merupakan salah satu beasiswa yang banyak diincar oleh mahasiswa untuk melanjutkan studinya. Bagaimana tidak, beasiswa dari pemerintah yang…
  • Kumpulan Aplikasi Story Instagram Android Terbaru anakui.com - Aplikasi Story Instagram Android , Apakah Anda ingin membumbui kisah Instagram Anda? Ponsel Android hadir dengan beberapa aplikasi terbaik untuk membuat konten yang menyenangkan serta menarik untuk Cerita…
  • Setelah Lulus, Lebih Cocok Kerja di Startup atau Corporate,… Setelah lulus, kamu akan dihadapkan dengan begitu banyak pilihan industri, perusahaan, dan pekerjaan. And here comes the dilemma most fresh graduates face these days: should I work at startup or…
  • Rekomendasi Tools AI untuk Digital Marketing anakui.com- Tools AI untuk Digital Marketing, Di era digital ini, perusahaan dituntut untuk mampu memanfaatkan teknologi guna meningkatkan kinerja pemasaran mereka. Di tengah persaingan yang semakin ketat dan cepat, strategi…
  • The 34th Jazz Goes To Campus “Jazz The Way It Is” Jazz Goes To Campus merupakan festival jazz tertua di Indonesia dan diselenggarakan oleh para mahasiswa yang mencintai musik jazz dan ingin membagi semangat musik yang mereka miliki. Semangat ini telah…
  • Informasi Beasiswa S2 Dalam dan Luar Negeri Terbaru 2019   Setelah menyelesaikan program S1, ada dua jalan yang akan dipilih seseorang. Langsung bekerja untuk mendapatkan penghasilan atau melanjutkan kuliah. Mereka yang melanjutkan studi S2 lagi-lagi memilih apakah menggunakan biaya…
  • Cara Foto Makanan Untuk Jualan Online Dengan HP anakui.com - Cara Foto Makanan Untuk Jualan Online , Sulit bagi pemula untuk memilih fotografi dan memahami jalur yang benar. Fotografi subjek yang serius untuk periklanan dan promosi produk dan…

Leave a Comment