Tutorial HTML 8 - Menampilkan Gambar

Menampilkan gambar pada HTML yaitu dengan menggunakan tag <img> dan atribut scr.

Tag Img dan Atribut Src

Tag <img> adalah tag tunggal dan harus memakai atribut, atribut scr kependekan dari source yang berarti sumber digunakan untuk menentukan alamat atau sumber dari gambar yang akan di tampilkan.

<html>
<body>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png" />

</body>
</html>
Coba di sini! >>>

Contoh di atas menggunakan alamat https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png sebagai nilai dari atribut scr. Nah itu adalah alamat atau sumber dari gambarnya, hasilnya akan menampilka gambar seperti dibawah ini

logo blog






Menambahkan Atribut Alt

Atribut alt (alternative) digunakan sebagai teks alternatif jika gambar yang di maksud tidak bisa di tampilkan karena beberapa alasan seperti koneksi yang lambat, error pada atribut scr, dan lainnya.

<html>
<body>

<img src="mobil.jpg" alt="mobil sedan">

</body>
</html>

Coba di sini! >>>

Pada contoh diatas jika gambar yang dimaksud tidak muncul, maka akan di gantikan dengan teks mobil sedan. Tapi pada beberapa browser mungkin tidak muncul, seperti pada Chrome.

Menambahkan atribut alt juga baik untuk seo, yaitu pada pencarian gambar.

Mengatur Tinggi dan Lebar Gambar

Mengatur tinggi gambar dapat menggunakan atribut heigh dan untuk mengatur lebar dengan atribut width

<html>
<body>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFtRO0TPNBllFAVPMrml4jnXZMBTMdFpW7Bu7a01QVdT07sU6gLFydwITcOBoceokUYqaQFFh_vqEIa-ru4ibU4GXWcDI_Ca3jvDj6tPHiutJngEDn1YNeqe8pJjaJ_ViKV7oLnEvReqHI/s320/logo+alusplus.png" alt="alusplus logo" width="200px" height="200px"/>

</body>
</html>
Coba di sini! >>>

Pada contoh diatas atribut width (lebar) di beri nilai 200 piksel, begitu juga dengan height (tinggi) yaitu 200 piksel. Maka akan menghasilkan gambar seperti di baawah


alusplus logo

Mengatur Posisi Gambar

pesisi gambar tergantung di mana kita meletakan tag <img>.
Contoh teks1<img>teks2 , maka gambar akan muncul sesudah teks1 dan sebelum teks2.

Peraktekan contoh di bawah untuk melihat contoh serta cara lainnya

<html>
<body>

<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" />Gambar sebelum teks</p>

<br/>

<p>Gambar sesudah teks<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" /></p>

<br/><hr />

<p>Gambar dengan atribut align nilai left<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="left" /></p>

<br/>

<p>Gambar dengan atribut align nilai right<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="right" /></p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="bottom" /> dengan atribut align nilai bottom</p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="middle" /> dengan atribut align nilai middle</p>

<br/>

<p>Gambar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" align="top" /> dengan atribut align nilai top</p>

<br/>

</body>
</html>
Coba di sini! >>>

Gambar Sebagai Link

Pada tutorial sebelumnya juga sudah di bahas cara membuat link termasuk membuat gambar sebagai link

<html>
<body>

<a href="http://alusplus.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnn4Ynup4NQc6Mpo7xDrWV-NbIyx8-4Lb1SYL5NFSYc0BZLBN-P7IelIUPYVHxxtSdsPw8_fuznK4vrtYFPyMJtYIFwwW_J-_EY970WbkCe98lnVFc35pBuKxQrsLqwRXsJOM36LJLSa00/s1600/bola.png" alt="bola" /></a>

</body>
</html>
Coba di sini! >>>

Ini adalah hasil contoh di atas
bola

Menentukan Bagian Gambar Yang Akan Menjadi Link

Dengan ini kita dapat menentukan bagian mana dari gambar yang dapat di klik sebagai link, jadi satu gambar dapat menghasilkan beberapa link dengan menentukan koordinat pada gambar.

Untuk lebih jelasnya lihat di sini



0 komentar:

Posting Komentar

 
© 2012 Alusplus | Blogger.com