Cara Mengubah Background HTML (Gambar dan Warna)

Membuat tampilan website yang indah dan menarik adalah tugas seorang designer web, mereka akan berlomba-lomba dan berusaha semaksimal mungkin untuk mendesign website agar terlihat menarik, untuk mendesign web maka seorang designer harus  tau cara mengubah background suatu halaman. ini adalah dasar yang perlu dikuasai oleh para design website. Ada berbagai cara dalam mengubah background website, dan umumnya menggunakan CSS atau mengedit manual pada kode HTML itu sendiri. cara mengedit manual pada HTML, adalah cara yang tidak dianjurkan, namun tetap perlu kamu kuasai.
Untuk mengubah background website pada HTML, kita dapat menggunakan Atribut Bgcolor, yang  digunakan untuk membuat seluruh background tampil berwarna. Dengan adanya bgcolor ini maka seluruh tag yang ditandai akan berwarna sesuai dengan warna yang kita cantumkan.
Sedangkan, untuk mengubah background menjadi gambar kita hanya perlu mencantumkan atribut Background dan ditambah dengan value url gambar (lokasi gambar).

Cara Mengubah Background HTML

Pertama-tama kita akan membahas tentang cara mengubah background html dengan warna :

1. mengubah warna background HTML

kode atribut yang digunakan adalah sebagai berikut :

bgcolor=”..warna yang dibutuhkan…”;

Jiki kita sisipkan dalam tag <body>, dengan warna merah (red), maka perintahnya akan tampak seperti kode berikut ini:

<html>
<head>
<title> ........<title>
</head>
<body bgcolor="red">

..........

</body>
</html>

 

Pada kode perintah diatas, kita telah menambahkan atribut bgcolor dengan value red. artinya bahwa halaman tersebut akan berwarna merah. Kita juga dapat menggunakan berbagai warna lainnya seperti “black” dan “yellow”. selain menggunakan kata red ataupun black, kita juga bisa mengisi value dengan kode dari suatu warna.

Untuk mendapatkan kode suatu warna, kita dapat menggunakan software Photoshop, perhatikan gambar berikut ini :

mendapatkan kode warna dari photoshop

 

Lihatlah bagian kode yang bertulisan #db28a2 (ini adalah kode yang bisa kita sisipkan dalam HTML Tag), jika kita tuliskan pada atributnya, maka akan tampak seperti bgcolor=”#db28a2″

sekarang, mari kita buat contah lainnya. silahkan buka text editornya, kamu bisa menggunakan notepad ++ ataupun notepad biasa. ketikan kode seperti berikut ini:

<html>
<head>
<title>belajar bgcolor</title>
</head>
<body bgcolor="green">
seperti ini warnanya

</body>
</html>

 

See also  Cara Membuat Form Biodata Dengan Html

Silahkan simpan perintah kode tersebut dengan nama yang anda inginkan, asalkan disertai dengan ekstensi “.html”,  misalnya seperti “aku_belajar.html”, setelah itu anda buka dengan browser kesayangan anda, seperti opera min, google chrome, dan sebagainya. kurang lebih akan tampak seperti berikut ini :

mengubah bckground dengan warna

Penjelasan dari kode diatas :

  • <html> merupakan tag awal dari kode html, dan file html ini ditutup dengan kode perintah </html>
  • <head> merupakan judul dari tab atau halaman yang telah kita buat. dalam tag ini, kita bisa menyisipkan kode CSS, JavaScript, Iklan, tag meta dan sebagainya. tag head ini perlu kita tutup dengan kode </head>.
  • <title> tag ini merupakan perintah untuk menyatak suatu judul dari halaman. tag ini terletak diantara <head> dan </head>. tag ini ditutup dengan kode perintah </title>
  • <body> Tag ini dibuat untuk menampilkan isi halaman kepada user, pada tag inilah kita menyatakan suatu konten artikel, recent post, popular post, dan sebagainya. tag ini diakhiri dengan tag </body>
  • bgcolor=”green” merupakan suatu atribut yang akan menyatakan bahwa tag ini akan berwarna hijau.

2. Mengubah Background HTML dengan Gambar

 

Selanjutnya kita akan mengubah background HTML dengan suatu gambar. sekali lagi saya katakan bahwa metode ini tidak dianjurkan untuk membuat website yang dinamis, namun jika ingin membuat website statis, bisa saja. kenapa pada website dinamis tidak dianjurkan ? karena saat ini sudah ada CSS yang mampu mendesign halaman menjadi lebih responsif.

peintah yang digunakan untuk mengubah background halaman, hampir sama dengan bgcolor, cuma yang menjadi templatenya adalah suatu foto atau gambar. atribut yang digunakan adalah background. Berikut ini merupakan cara penulisan atributnya :

background=”…lokasi_gambar…”

Pertama yang harus anda siapkan adalah suatu foto atau gambar, simpan foto dalam satu file bersama dengan file html yang kita buat, disini saya menggunakan gambar dengan nama “ari.jpg”. perhatikan gambar berikut ini :

penympanan file html dengan gambar satu lokasiOke, sekarang kita langsung saja ketikan kode HTML berikut ini :
<html>
<head>
<title>belajar background</title>
</head>
<body background="ari.jpg">

ini potonya jadi template

</body>
</html>

Pada kode tag <body background=”ari.jpg”> lihat kata “ari.jpg”, nah ini merupakan nama dari foto beserta ekstensinya yaitu “.jpg”, anda juga bisa menggunakan poto dengn nama ekstensi “.png” dan lain-lain, intinya anda harus menyesuaikan perintah diatas dengan poto dan ekstensinya.
jangan lupa, simpan gambar bersama dengan file html yang telah tadi kita buat.

See also  Cara Menampilkan Video Dengan Html

jika ingin memisahkan Gambar di folder yang berbeda atau lokasi lain juga bisa. pertama buatlah folder, misalnya folder “gambarku”, lalu simpan gambar dalam folder tersebut. setelah itu kamu tinggal ubah kode html tadi menjadi background=”gambarku/ari.jpg”.

silahkan simpan, dan buka dengan aplikasi browser, hasilnya akan tampak seperti gambar berikut ini :

mengubah background dengan gambar
Pembahasan Sebelumnya yaitu tentang penjelasan HTML, berikut pembahasaanya :