Membuat background pada halaman web

1:15 AM
Membuat background pada halaman web
Di Posting Oleh : wandi
Kategori : HTML



Background merupakan bagian yang paling penting pada halaman web , karena setiap website pasti memiliki background , tetapi tunggu dulu . Apakah background tersebut pas dengan kontent yang kita sajaikan , atau malah membuat pengguna ketika melihat website kita malah jadi matanya lelah . Oleh karena itu kita jangan asal asal untuk membuat sebuah background .


Di dalam situs web kita  bisa membuat background full warna atau background gambar . menggunakan gambar kita tinggal panggil saja gambarnya atau kalo dengan warna kita tinggal panggil saja warnanya . default background di html adalah background warna , yaitu warna putih .

tetapi tentu kita bisa merubahnya . Oke sekarang inggin warna background di html adalah warna merah . 

Untuk merubah background berupa warna kita telah di sediakan atribut bgcolor di bagian tag body .

<html>
<head>
<title>Merubah background</title>
</head>
<body bgcolor="red">
</body>
</html>



Gimana mudah bukan kita tinggal tulis bgcolor="warnanya" . kita bisa juga diisi nilainya dengan rgb , rgba , hexadesimal . contoh .

contoh dengan hexadesimal 

<html>
<head>
<title>Merubah background</title>
</head>
<body bgcolor="#000fff">
</body>
</html>

contoh dengan rgb

<html>
<head>
<title>Merubah background</title>
</head>
<body bgcolor="rgb(255,255,0)">
</body>
</html>

catatan : untuk rgb maksimal angkanya adalah 255 

contoh dengan rgba

<html>
<head>
<title>Merubah background</title>
</head>
<body bgcolor="rgba(0,0,255,-6)">
</body>
</html>

catatan : untuk rgba angka yang terakhir adalah tingkat ke transparanan .

Oke itu dia caranya dengan warna , sekarang dengan gambar . Kalo dengan gambar kita gunakan atribut yang namanya background = "lokasinya_gambar"

contohnya 

<!doctype HTML>
<html>
<head>
<title>Merubah background</title>
</head>
<body background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSp5ZNpFprFogAQlIfh3FndGc4oYz1Yib7D3Zdqx7OPRLC9kiKY9QQ1fCB9_R2J-6MOF4g63-3ndwQ1xKAS32nucNkX5SfT5eaMln6TZzlZyZEZxtnTTeuZqDms4UHez14QmuUZD4qYRQr/s1600/hateemel5.png">
</body>
</html>


Oke mungkin itu dia semoga bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat . 



Mau liat atau download source code aplikasi premium bisa disini.
Previous
Next Post »
0 Komentar