Cara Mengganti Background HTML Ternyata Mudah Banget, Lho!

Suci Wulandari

•

02 June 2023

•

24534

Kode program HTML sederhana bisa dibuat dengan menggunakan notepad. Bagi kamu yang masih dalam tahap awal belajar HTML yang simpel. Menariknya lagi, kamu juga bisa mengganti background HTML lho! Penasaran caranya? Simak artikel ini sampai selesai, ya!

Dilansir dari laman web Vendatu, notepad merupakan software bawaan dari OS Windows yang berbasis teks editor sederhana.Format file dari notepad adalah .txt. Selain itu, notepad seringkali dimanfaatkan untuk menulis kode program.

Caranya dengan mengganti ekstensi teks dari file .txt. menjadi ekstensi lain, misalnya .java.

Mengubah Background Warna HTML CSS

Background Warna HTML CSS perlu diperhatikan sebab jika salah pilih warna, tampilan website bisa jadi kurang menarik. Pemilihan warna menjadi penting dengan menyesuaikan tujuan dan kepentingan sebuah website. Cara mengubah background warna HTML CSS bisa dilakukan menggunakan notepad. Kamu hanya perlu mengikuti langkah-langkah berikut ini.

Buat file index.html terlebih dulu.
Untuk mengubah background warna, gunakan atribut style. Atribut ini akan menentukan gaya sebaris sebuah elemen.
Misalnya background ingin diganti dengan warna merah, maka kode yang ditambahkan berupa <body style=”background-color:red;”>
Pada bagian red bisa diganti dengan warna lain sesuai yang diinginkan.
Kode lengkapnya bisa dilihat seperti pada gambar yang tertera di bawah ini.

Perlu diperhatikan bahwa atribut style digunakan dengan tag HTML <body> dengan properti CSS background-color. HTML5 tidak mendukung atribut tag <body> bgcolor, sehingga untuk menambah background warna dipakailah gaya CSS. Atribut bgcolor tidak lagi dipakai pada HTML5.

Mengubah Background Gambar HTML CSS

Tidak hanya warna saja, gambar juga bisa menjadikan tampilan website lebih menarik. Untuk itu, Sobat MinDi perlu memilih gambar yang juga sesuai dengan tujuan website.

Hanya saja, mengubah latar belakang gambar HTML CSS dengan notepad tidak disarankan jika website yang dinamis. Mengapa demikian?

Saat ini CSS sudah mampu melakukan tugas tersebut dan membuat tampilan desain website jadi lebih responsif. Artinya, jika websitemu termasuk jenis yang statis, mengubah background gambar HTML dengan notepad mungkin cocok.

Berikut akan dijelaskan step by step dengan sederhana.

Siapkan gambar yang akan digunakan sebagai latar belakang websitemu pada satu folder. Gambar yang dipilih dapat berbentuk png, jpg, jpeg, ataupun gif.
Misalnya kamu ingin memasukkan gif, maka kode yang ditambahkan berupa background-image: url("paper.gif")

Berikut ini kode lengkapnya untuk mengubah background gambar HTML

<html>
<head>
<title>Contoh Background Warna</title>
<meta content="">
<style>
body {
background-image: url("paper.gif");
}
header {
background: rgba(255,255,225, 0.5);
}
</style>
</head>
<body>
<header>
<h1>Belajar Background di CSS</h1>
</header>
</body>
</html>

Kamu juga bisa menambahkan kode berupa background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg"); jika gambar yang dipakai merupakan URL luar. URL bisa diganti sesuai kebutuhan. Gambar di bawah ini adalah ilustrasi penulisan kode secara lengkap untuk mengganti background gambar memakai URL luar.

<!DOCTYPE html>
<html>
<head>
<style>
body{
background-image:url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg);
}
</style>
</body>
<h1>Gambar background HTML CSS</h1>
<p>Hello World!</p>
</body>
</html>

Itu dia cara mengubah background HTML dengan Notepad. Mudah bukan? Jika sudah mulai menulis kode program yang lebih kompleks, para programmer biasanya menggunakan Notepad++. Sebenarnya notepad tetap bisa dipakai untuk menulis kode yang kompleks hanya saja fiturnya terbatas. Fitur yang disediakan Notepad++ lebih beragam serta mendukung banyak bahasa pemrograman.

Keunggulan Menggunakan Notepad

Notepad memang cukup populer penggunaannya baik itu di kalangan para programmer maupun orang dengan profesi lain. Mengapa begitu? Barangkali keunggulan notepad yang sudah terbukti membuat banyak orang jadi memilih untuk menggunakannya. Berbagai keunggulan menggunakan notepad di antaranya yaitu:

Dapat digunakan untuk membuat program sederhana berbasis HTML.
Berfungsi menjadi catatan kecil sebab notepad dengan file ukuran kecil mudah diakses dan simpel saat digunakan.
Menetralisir font pada sebuah teks saat akan dipindahkan (biasanya salinan tulisan dari internet ke Microsoft Word atau aplikasi lain).
Tampilannya cukup sederhana sehingga mudah untuk dipelajari dan digunakan.

Tag HTML CSS yang digunakan

Untuk mengubah background warna HTML CSS, beberapa tag akan dimasukkan. Sebelum mulai menuliskan tag HTML tersebut. Dikutip dari laman geeksforgeeks berikut pengertian masing-masing tag tersebut.

<html> merupakan tag awal, dan kode untuk mengakhirinya menggunakan </html>
<head> merupakan tag untuk judul tab atau halaman yang dibuat. Pada tag ini, kamu bisa menyisipkan kode CSS, JavaScript, Ads, meta tags, dan lain sebagainya. Tag ini ditutup dengan </head>
<title> merupakan tag yang menyatakan halaman judul dan ditutup dengan </title>
<body> merupakan tag untuk menampilkan isis kepada user, tag diakhiri dengan </body>

Jika Sobat MinDi tertarik menjadi programmer tetapi bingung mulai belajar dari mana, join program Bootcamp Web Developer by dibimbing.id, aja! Pastinya kamu akan bertemu mentor terbaik yang berpengalaman dan bisa membimbingmu. Segera daftarkan dirimu agar tidak kehabisan kuota Bootcamp-nya, ya!
Referensi:
1. Most commonly used tags in HTML - Buka
2. What is Notepad? - Buka