Hendry Muda Rangkuti: Memuat Gambar Pada HTML

Selamat pagi para pembaca di blog saya, dalam postingan kali ini kita akan belajar Memuat Gambar Pada HTML. Langsung saja disimak dibawah ini...

Setelah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus ditulis pertama kali. Selanjutnya saya akan mengajak anda untuk mempelajari cara memuat/menampilkan sebuah gambat dan memahami apa itu atribut HTML.

Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>. Lalu dimana kita meletakkan gambar tersebut? Di dalam tag <img> kah?


Mengenal Atribut HTML

Setiap tag HTML dapat memiliki satu atau lebih atribut, atribut ini berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.

Pada tag <img> kita akan menggunakan atribut src untuk menyimpan lokasi gambar :

<img src>

Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator sama dengan (=) diikuti dengan lokasi gambar yang diapit oleh tanda kutip.

<img src="gambar.jpg">

Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup (Disebut juga sebagai Self Closed Tag, seperti tag-tag lainnya. Ini dikarenakan tag ini tidak memiliki konten seperti :

<title>Ini adalah Konten tag title</title>

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup :

<img src="gambar.jpg" />


Sekarang saatnya anda mencoba memuat gambar pada file HTML.

1. Buatlah file HTML baru dengan nama latihan2.html
2. Carilah sebuah gambar dan simpan satu folder dengan file HTML anda.
   
3. Ketikkanlah kode HTML berikut :
   
4. Bukalah pada browser, anda akan melihat gambar telah termuat pada file HTML anda.
   

Setiap tag img, selain memiliki atribut src untuk menyimpan lokasi gambar, anda juga harus mneyertakan atribut alt yang akan digunakan sebagai teks alternatif ketika gambar tidak berhasi dimuat atau gambar hilang.

<img src="logo.png" alt="Ini adalah teks alternatif" />

Dan atribut lainnya adalah width dan height, yang berfungsi untuk menetukan lebar dan tinggi gambar tersebut. Memang hal ini tidak perlu dilakukan karena gambar secara otomatis akan terload dengan ukutan sebenarnya, namun hal ini sangat dianjurkan untuk mempercepat proses pemuatan gambar.

<img src="logo.png" alt="Ini adalah teks alternatif" width=362 height=123 />

Anda tidak perlu memberi tanda kutip pada nilai lebar dan panjang. Nilai ini bisa anda dapatkan dengan mengklik kanan gambar tersebut dan pilih menu propertis. Pada tab details akan anda temui ukuran gambar tersebut.

Dengan penambahan atribut alt, ketika gambar yang dimaksud hilang/tidak/gagal termuat maka akan muncul sebuah icon broken file, dan isi dari atribut alt akan ditampilkan disana.

Cara Penulisan Lokasi File

Jika anda menyimpan gambar tersebut pada sebuah folder berbeda. Maka yang perlu anda lakukan adalah menambahkan nama folder tersebut diikuti dengan tanda slash (/) dan nama file gambar yang akan dimuat :

<img src="images/logo.png" alt="Ini adalah teks alternatif" />

Jika dalam folder tersebut terdapat folder lagi, dan gambar yang ingin anda muat ada di dalamnya maka penulisannya menjadi seperti berikut :

<img src="images/folder1/folder2/logo.png"  alt="Ini adalah teks alternatif" />

Selain penggunaan lokasi gamabar seperti diatas, anda juga bisa menampilkan gambar yang sudah terdapat di internet, penulisan seperti ini disebut dengan hotlinking misalnya :

<img src="http://hendrymuda.blogspot.com/images/gambar.jpg" alt="logo" />

Penggunaan hot linking sangat tudak dianjurkan karena gambar yang dimuat bukanlah milik kita dan tentunya juga akan merugikan si pemilik gambar.

Demikianlah postingan kali ini, selanjutnya kita akan belajar Membuat Link Pada HTML. Untuk itu pantengin terus http://hendrymuda.blogspot.com.