Cara Memuat Gambar HTML

oleh

Cara Memuat Gambar HTML

Setelah anda mengetahui struktur dari sebuah file HTML dan apa saja yang harus di tulis untuk pertama kalinya, selanjutnya kita akan mempelajari cara memuat atau menampilkan sebuah gambar dan memahami apa itu atribut HTML.

Untuk memuat sebuah gambar pada dokumen HTML, kita akan menggunakan tag <img>, lalu di mana 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, yaitu :
 <img src>
 Selanjutnya untuk memasukkan nilai pada atribut, kita gunakan operator “sama dengan” (=) yang di ikuti dengan lokasi gambar yang di apit oleh tanda kutip.

<img src=”gambar.jpg”>
Tag img termasuk ke dalam tag spesial dan tidak memiliki tag penutup, di sebut juga sebagai Self Closed Tag, seperti tag-tag lainnya, ini di karenakan tag ini tidak memiliki konten seperti :
<title>Ini adalah Konten tag title</title>

Sebagai pengganti, kita tambahkan tanda slash (/) sebelum kurung tutup, yaitu :
<img src=”gambar.jpg”/>

Sekaranglah saatnya anda mencoba untuk memuat gambar pada file HTML, yaitu :
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 :

1. <!DOCTYPE HTML>
2. <HTML>
3. <head>
4. <title>Judul File HTML</title>
5. </head>
6.
7. <body>
8. <p>ini adalah contoh pemuatan gambar pada file HTML<p>
9. <img src=‚logo.png‛ />
10. </body>
11. </HTML>

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 menyertakan atribut alt yang akan di gunakan sebagai teks alternatif ketika gambar tidak berhasil di muat atau gambar hilang, berikut kode HTML-nya. 

<img src=‚logo.png‛ alt=”Ini adalah teks alternatif” /> 

Dan atribut lainnya adalah atribut width dan height, yang berfungsi untuk menentukan lebar dan tinggi dari gambar tersebut, memang hal ini tidak perlu di lakukan, karena gambar secara otomatis akan terload dengan ukuran sebenarnya, namun hal ini sangat di anjurkan 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 properties, pada tab details akan anda temui ukuran gambar tersebut.

Dengan penambahan atribut alt, ketika gambar yang di maksud hilang atau gagal termuat, maka akan muncul sebuah icon broken file dan isi dari atribut alt akan di tampilkan di sana. 

Cara penulisan lokasi file
Jika anda menyimpan gambar tersebut pada sebuah folder seperti berikut.

Maka yang perlu anda lakukan adalah menambahkan nama folder tersebut yang di ikuti dengan tanda slash (/) dan nama file gambar yang akan di muat :

<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 gambar seperti di atas, anda juga bisa menampilkan gambar yang sudah terdapat di internet, penulisan seperti ini di sebut dengan hot linking, misalnya :

<img src=”http://ariona.net/images/gambar.jpg” alt=”logo” />

Penggunaan hot linking sangat tidak di anjurkan, sebab gambar yang di muat bukanlah  milik kita dan tentunya juga akan merugikan si pemilik gambar, karena bisa saja itu memiliki hak cipta.