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:
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....
Thanks infonya gan...
ReplyDeletebagi agan yang berminat belajar membuat web bisa dilihat di situs berikut ini http://www.computer-course-center.com/web-design.html
Thanks infonya gan
ReplyDeletebagaimana jika mengubah warna background secara otomatis tanpa harus klik. jadi berubah2 sendiri..
ReplyDeletebagaimana jika mengubah warna background secara otomatis tanpa harus klik. jadi berubah2 sendiri..
ReplyDeletepengen full gambar di bg gimana ya ??
ReplyDeletepengen full gambar di bg gimana ya ??
ReplyDeletemembantu sekali gan, kunjungi My blog ok
ReplyDeleteBoleh juga nih dasar editing html buat warna.
ReplyDeletehttp://webdesign-jakarta.com/kode-warna-html-css/
penjelasannya kurang jelasgan gua msih ngkmengerti
ReplyDeleteTerima Kasih atas infonya gan. Dengan script bgcolor='kodewarna', maka dapat mensetting warna backgroundnya.
ReplyDeleteKunjungi blog saya ya: https://tedsu.mahasiswa.atmaluhur.ac.id
dan website kampus saya: http://www.atmaluhur.ac.id
Terima Kasih atas informasinya gan. Dengan mengunakan script BGCOLOR 'kodewarna', maka dapat mensetting warna backgroundnya secara otomatis tanpa harus diklik..
ReplyDeletejangan lupa kunjungi website saya:http://sopiantoro.mahasiswa.atmaluhur.ac.id
dan website kampus saya:http://www.atmaluhur.ac.id
terima kasih gan .... ternyata menseting warna dengan script BGCOLOR'kodewarna'
ReplyDeleteKunjungi juga website saya di : https://bagussmj.mahasiswa.atmaluhur.ac.id/
dan website kampus saya di : http://www.atmaluhur.ac.id/
Biar beckgroundnya nggak nge-zoom gimana?
ReplyDelete