Cara Menyisipkan gambar pada tag HTML
Rabu, 14 Mei 2014
0
komentar
Bagaimana cara menyisipkan gambar atau foto pada html ?
Ada banyak cara yang dapat anda lakukan untuk menyisipkan gambar pada tag HTML, dan programmer design biasanya akan memanipulasi dengan menggunakan Cascading Style Sheets (CSS) atau hanya menempatkan sebuah tag image saja pada container gambar yang mereka inginkan.
Lihat baris code dibawah ini, berupa beberapa baris html
Lihat baris code dibawah ini, berupa beberapa baris html
<body>
.....
<div id="contaner">
<!-- disini saya akan menyisipkan gambar pada
tag html div dengan id container -->
</div>
.....
</body>
Dengan beberapa baris css ini anda dapat memasukan gambar pada element dengan nama div
<head>
.....
<style type= text/css>
#container {
/* background */
background:transparent url('url gambar atau foto') no-repeat center center;
/* pastikan backgroundnya mengcover tinggi dan luasnya container gambar */
background-size: contain;
}
</style>
.....
</head>
<body>
.....
Atau anda bisa langsung menyisipkan css tersebut pada element yang kamu inginkan dengan menggunakan Style
<body> ..... <div id="contaner" style="background:transparent url('url gambar atau foto') no-repeat center center;background-size: contain;"> <!-- disini saya akan menyisipkan gambar pada tag html div dengan id container --> </div> ..... </body>
Jika concern dengan masalah Search Engine Optimization SEO pada gambar yang ingin anda jadikan background, cara ini mungkin akan banyak dipilih oleh para programmer design yaitu dengan langsung menggunakan element html dengan nama <img/> dengan menggunakan judul tag html berupa img robot mesin pencari akan mengindeks gambar dan judul anda, dan jangan lupa untuk menambahkan ALT karena itu akan berpengaruh terhadap hasil pencarian pada gambar.
<body>
.....
<div id="contaner" >
<img alt="judul gambar" height="100%" src="url gambar kamu" title="judul gambar" width="100%" />
</div>
.....
</body>
0 komentar:
Posting Komentar