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 :
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>
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 :
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 :
Oke, 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.
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 :
