TAG HTML UNTUK MEMASUKKAN GAMBAR



Langsung saja kita ke TKP gan!
Tag HTML dasar untuk sebuah gambar ialah <img src=" ">
img menyatakan bahwa konten yang dikelola adalah sebuah image(gambar), sedangkan src merupakan alamat(lokasi) dari image yang hendat ditampilkan.
Contoh:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiSNlYUR2fFM4Z-oyXzEouz-Wlt9PtzAxFrl0epLFjBYgIoNjWzPCUM2OSip8gSuUZ9741Z2b_WVQRQUBQju2MSSGGBlo9nZ1mJzGC8_w_qOzVSWM5fV0lAPDACEWk0y3GSWTgiSDnBO4/s320/Untitled.png"  />

image(img) yang hendak saya tampilkan berada di .... (lihat warna merah cetak tebal diatas). Maka, browser akan mencari/serch(src)alamat tersebut dan menampilkannya, seperti dibawah ini!


- Bagaimana pula menentukan panjang dan lebarnya, supaya sesuai?
Ya, cukup tambah aja tag lebar(width) dan tinggi(height). Tag HTML-nya: width = " " dan height=" ". 
Contoh: 
<img src="http://2.bp.blogspot.com/-L1eQeqge1DQ/Uqx3A-
yGUQI/AAAAAAAABV4/nIdqkFfZbTc/s320/Untitled.png" width="50" height="110" border="0" alt="gif creator" />
Maka akan ditampilkan seperti di bawah ini:


- Bagaiman pula jika kita ingin gambar yang ditampilkan itu menjadi sebuah link penghubung? Ya, cukup tambahkan saja tag html untuk membuat sebuah link. Tag html untuk membuat ling adalah <a href=" ( tujuan) " </a>.
Contoh link: <a href="http://www.twitter.com/simbisa_366">Tulisan yang ditampilkan</a> makan hasilnya (silahkan klink untuk mencobanya) --> Tulisan yang ditampilkan 
Berikut contoh tag html untuk menjadikan sebuah image menjadi link:
<a href="http://www.twitter.com/simbisa_366"><img src="http://2.bp.blogspot.com/-L1eQeqge1DQ/Uqx3A-
yGUQI/AAAAAAAABV4/nIdqkFfZbTc/s320/Untitled.png" width="50" height="110"/></a>

Hasilnya seperti di bawah ini! Klik untuk mencoba.


Dan, bangaimana pula jika kita ingin gambar yang telah menjadi link tadi, juga merupakan sepuah marquee(konten yang bergerak)? Ya, kita tinggal menambahkan tag html untuk sebuah marquee. Tag-nya adalah: <marquee> .... </marquee>.
Kita coba dengan menyatukan tag-tag sebelumnya! 

<marquee> <a href="http://www.twitter.com/simbisa_366"><img src="http://2.bp.blogspot.com/-L1eQeqge1DQ/Uqx3A-
yGUQI/AAAAAAAABV4/nIdqkFfZbTc/s320/Untitled.png" width="50" height="110"/></a></marquee>
Hasilnya: 


Selanjutnya anda tinggal mengembangkan dan  dapat merubah panjang, lebar, dll sesuai dengan keinginan anda. Selamat mencoba.


Post a Comment

أحدث أقدم