Hari ini saya mencoba bagaimana Memasukan Gambar ke Website, Mengatur Ukuran, Link dengan Gambar. Pertama kita siapkan terlebih dahulu file gambarnya. Bisa ambil dari photo hp atau media lain. Yang perlu diperhatikan adalah extensi dari gambar tersebut. Biasanya ada yang .gif ada ekstensinya .jpg ada juga .png . Kenapa penting karena jika tidak ditulis ektensi dibelakangnya gambar tidak akan muncul di halaman website kita.

Sedangkan untuk mengatur ukuran dari gambar bisa dengan mengatur resolusi dengan aplikasi photoshop atau aplikasi Paint dari windows pun bisa. Kalau Paint tinggal crop aja atau resize ukuran sesuai dengan keinginan. Cara mengatur ukuran gambar juga bisa dengan pengaturan di html itu sendiri dengan pengaturan witdh dan height.

Biar jelas ikuti penjelasan di bawah ini, perhatikan baik baik ya.

<img src=”rasid.jpg”>
Hanya dengan tag diatas sebenarnya sudah menampilkan gambar di web kita. Namun kita masih membutuhkan beberapa pengaturan yang lainnya.

style=”float: left;
Perintah ini digunalan agar tidak ada space kosong disamping gambar, diatas paragraf. Sehingga tulisan dibawahnya akan memenuhi space tersebut. Coba hapus saja perintah tersebut diatas. Maka tampilan akan terlihat kuang menarik karena daerah kosong.
Kalau kita perhatikan gambar berada disamping kiri, kita bisa merubahnya dengan mengganti left dengan right. Lihat perbedaanya.

margin-right:10px;
Nah ini untuk memberikan jarak antara gambar dengan tulisan atau paragraf. Jika menggunakan perintah margin:10px; saja maka akan mengatur semua jarak atas , bawah, kanan, dan kiri. Sedangkan jika ditambah right pengaturan jarak hanya berlaku di arah kanan saja.

width=”100px”
height=”125px”
Ini digunakan untuk mengatur lebar dan tinggi suatu gambar yang akan kita tampilkan. Hal ini kita lakukan agar komposisi gambar dan tulisan enak di pandang mata. Kita bisa saja hanya mengatur tingginya saja, maka lebarnya akan mengikuti sesuai dengan perbandingan dari tingginya yang kita atur. Contohnya kita cuma mengatur height tanpa menulis witdh, jika dijalankan lebar akan menyesuaikan perbandingan tingginya.

alt=”Foto Muhammat Rasid Ridho”
Ini akan bermanfaat jika koneksi internet lambat atau masalah lain sehingga gambar tidak muncul. Jadi text di alt ini untuk menggantikan (alternatif lain) gambar yang tidak muncul tadi.

<a href=”http://emerer.com” title=”Belajar HTML disini”>
<img src=”rasid.jpg”
….
</a>
Ini digunakan untuk membuat link dari gambar yang sudah tampil. Jadi jika diklik maka akan diarahkan ke website http://emerer.com.
Sedangkan text title akan muncul jika kursor diletakan di gambar. Coba saja jika dijalankan maka akan muncul tulisan “Belajar HTML disini”.

<figure>
<img src=”rasid.jpg”>
<figcaption>
Foto Pak Rasid Ukuran Asli
</figcaption>
</figure>
Tag figure merupakan tag baru di HTML5 untuk tempat meletakan gambar. Sedangkan tulisan diantara tag figcaption akan muncul dan selalu menempel di gambar yang kita buat.

Saya rasa sudah cukup jelas, jika ada pertanyaan jangan lupa tulis komentar di bagian bawah ini.