HTML Cara Pasang Gambar atau Foto

Oleh Ade Sanusi

12.03.2008

Bagikan :

Tweet

Terkait dengan pertanyaan di Shoutbox "Guest MAS CARANYA NARUK IKON FRIENDSTER DI BLOG ITU GIMANA CARANYA" Nah pada dasarnya pertanyaan itu bisa dengan mudah temen-temen jawab yaitu dengan mengunakan kode untuk gambar menggunakan HTML
Untuk memasang Gambar /Foto di Blog atau web, kita perlu mengatahui dulu alamat foto/gambar yang kita ingin tampilkan, Dahulu sudah agak lama saya bahas mengenai Cara menyimpan foto/gabar di internet salah satunya dengan menggunakan layanan Gratisan www.photobucket.com di sana juga anda sudah mendapatkan layanan yang saya rasa cukup memuaskan mulai dari pengaturan folder penyimpanan foto (album) modifikasi gambar secara online, dan Beserta kode gambar yang siap anda pakai untuk di pasang pada blog anda.

Di sini saya hanya memberikan sedikit gambaran atau cara untuk menampilkan gambar pada blog.

Kode yang di perlukan adalah kode ini: <img src="url gambar anda" alt="deskripsi gambar" width="x% atau xpx" height="y% atau ypx"/>

• Supaya tidak terjadi masalah pada browser anda pastikan di akhir kode image gunakan /> itu menandakan penutup kode, pada awalnya kode Image tidak memerlukan penutup kode tapi pada perkembangannya, harus memiliki kode penutup, selain tiu anda bisa menggunakan kode </img> dengan catatan tidak menggunakan kode /> contohnya: <img src="...." > </img>.
• SRC adalah URL gambar yang akan di pasang.
  
• Width untuk menentukan lebar gambar, satuannya dalam pixel atau persentase, Untuk gambar yang ingin di tampilkan apa adanya, silahkan hapus kode width="......"
• Height untuk menentukan tinggi gambar, satauannya sama seperti width yaitu persentase dan pixel.
• ALT adalah kode untuk mendeskripsikan sebuah gaambar yang anda maksud hal ini berguna untuk mesin pencari menemukan gambar yang sesuai di cari.

selain kode di atas, masih banyak parameter atau kode tambahan untuk tag IMG. selengkapanya bisa di baca di sini :http://www.htmlcodetutorial.com/images/_IMG.html
 Berikut Contoh kode beserta hasilnya:

Gambar aslinya:

<img src="http://klikrupiah.com/images/klik5.gif" alt="Dapatkan Uang lewat Klik Rupiah" width="50%" height="50%/>

Gambar seteleh di atur lebar dan tingginya sebesar 50% dar gambar normal.

Pasang Link pada Gambar

Pada Gambar di atas terlihat bahwa tidak ada link /tautan ke situs atau blog orang lain. jika anda klik maka yang tampil adalah gambar itu sendiri. Cara menambahkan Link pada Gambar adalah cukup mudah, Caranya dengan meletakan tag <a></a> diantara tag <img> Contohnya sebagai berikut:

<a href='https://www.klikrupiah.com/index.php?ref=contoh' target='_blank'><img alt='Klik Dapet Duit' src='http://klikrupiah.com/images/klik5.gif'/></a>

Coba perhatikan kode di atas,  maka saat anda klik, gambar maka akan membuka halaman baru yaitu https://www.klikrupiah.com/index.php?ref=contoh adapun hasilnya bisa di coba langsung pada gambar di bawah ini:

Tampilkan Gambar dari Blog/web Orang Lain

Kemudian bagaimana jika ingin menampilkan gambar dari situs atau blog orang lain?

Caranya hanya mencari alamat gambar yang ingin anda gunakan dan berikut screenshotnya: (sebagai sample saya menggunakan logo www.friendster.com

Cari gambar yang ingin anda pasang, kemudian klik kanan pada image tadi nanti akan muncul menu seperti ini:

Kemudian Pilih dan klik "Copy Image Location" nah setelah di copy silahkan gabungkan dengan kode Image yang sudah di berikan sebalumnya: atau silahkan paste dulu ke notepad atau halaman kerja anda di sini alamatnya sebagai berikut:
http://images.friendster.com/images/friendster_nav_logo.png

Kemudian Siapkan Alamat atau url yang ingin di jadikan link pada saat gamabr /logo Friendster tadi di klik: saya contohkan menggunakan URL friendster saya yaitu: http://profiles.friendster.com/adesanusi Nah setelah terkumpul maka selanjutnya adalah penggabungan yaitu sebagai berikut:

<a href='http://profiles.friendster.com/adesanusi' target='_blank'><img alt='Friendsternya Ade Sanusi' src='http://images.friendster.com/images/friendster_nav_logo.png'/></a>


Dan Hasilnya Sebagai berikut:

Silahkan klik Icon friendster di atas nanti akan tampil Account fiendster saya. Pemasangan dapat di terapkan pada Widget blog maupun postingan blog anda. Semoga berhasil.

Tag : Berita dan Request, HTML dan Java Script