Thursday, May 16, 2013

Materi Ke 4 HTML : Memberi Warna Background atau Gambar Background pada HTML

Pada Materi Ke 4 HTML dibahas mengenahi; memberi warna background dan memberi gambar background pada halaman html. Tentunya untuk mempercantik halaman situs diperlukan warna2 atau gambar2 sebagai background supaya lebih menarik pengunjung juga. 

Perintah dasar memberi warna dan gambar adalah attribut BGCOLOR dan BACKGROUND. Karena yang akan diberi warna adalah BODY (tubuh) HTML maka attribut BGCOLOR dan BACKGROUND diletakkan pada tag <BODY>. Contoh penggunaannya akan dibahas dalam latihan berikut:


1. Pertama-tama buka text editor HTML disarankan kita gunakan Notepad++

2. Ketikkan kode berikut:
<html>
<head>
<title>Managemen Background</title>
</head>
<body bgcolor="#ADE8E6">
<h1><font color="#0000CD">Contoh Memberi Warna Background</font></h1>
<p><font color="#000080">Tentunya untuk mempercantik halaman situs diperlukan
warna2 atau gambar2 sebagai background supaya lebih menarik pengunjung juga.</font></p>
</body>
</html>
Simpan dengan nama background.html pada folder C:\AppServ\www\coba seperti gambar:

Notepad++ jangan ditutup dulu karena masih akan dipakai untuk percobaan yang lain.
Selanjutnya buka webbrowser (saya pakai mozilla firefox) panggil halaman yang kita buat tadi di  localhost/coba/background.html hasilnya:


 Hasil warna pada background adalah pengaruh dari tag <body bgcolor="#ADE8E6">. Kode warna #ADE8E6 memberi hasil warna seperti yang terlihat pada gambar diatas. Kode warna ini bisa disesuaikan sesuai selera anda. Kode warna-warna lain bisa dilihat dipostingan sebelumnya disini.

3. Praktik selanjutnya memberi background berupa gambar. Sebelumnya masuk ke folder tempat menyimpan file2 HTML latihan kita di C:\AppServ\www\coba lalu buat folder baru disini dengan nama "gambar". Hasilnya seperti pada gambar berikut:

Selanjutnya masuk ke folder C:\AppServ\www\coba\gambar lalu taruh sembarang gambar dengan format jpg (atau pakai gambar contoh download disini) beri nama file gambar background.jpg sesuai gambar berikut:

Buka kembali Notepad++ cari dan ganti kode berikut: 
<body bgcolor="#ADE8E6">
dengan kode :
<body background="gambar/background.jpg">
Simpan ulang kode yang sudah diketikkan. Kembali buka webbrowser dan reload halaman localhost/coba/background.html  maka hasilnya akan berubah seperti ini:



 Demikian sepintas tentang manajemen background. Nantikan postingan lanjutan semoga manfaat....

13 comments:

  1. Thanks infonya gan...

    bagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html

    ReplyDelete
  2. bagaimana jika mengubah warna background secara otomatis tanpa harus klik. jadi berubah2 sendiri..

    ReplyDelete
  3. bagaimana jika mengubah warna background secara otomatis tanpa harus klik. jadi berubah2 sendiri..

    ReplyDelete
  4. pengen full gambar di bg gimana ya ??

    ReplyDelete
  5. pengen full gambar di bg gimana ya ??

    ReplyDelete
  6. penjelasannya kurang jelasgan gua msih ngkmengerti

    ReplyDelete
  7. Terima Kasih atas infonya gan. Dengan script bgcolor='kodewarna', maka dapat mensetting warna backgroundnya.

    Kunjungi blog saya ya: https://tedsu.mahasiswa.atmaluhur.ac.id
    dan website kampus saya: http://www.atmaluhur.ac.id

    ReplyDelete
  8. Terima Kasih atas informasinya gan. Dengan mengunakan script BGCOLOR 'kodewarna', maka dapat mensetting warna backgroundnya secara otomatis tanpa harus diklik..

    jangan lupa kunjungi website saya:http://sopiantoro.mahasiswa.atmaluhur.ac.id

    dan website kampus saya:http://www.atmaluhur.ac.id

    ReplyDelete
  9. terima kasih gan .... ternyata menseting warna dengan script BGCOLOR'kodewarna'
    Kunjungi juga website saya di : https://bagussmj.mahasiswa.atmaluhur.ac.id/
    dan website kampus saya di : http://www.atmaluhur.ac.id/

    ReplyDelete
  10. Biar beckgroundnya nggak nge-zoom gimana?

    ReplyDelete