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
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
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>
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
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