Cara Memasukkan Gambar di HTML

Kuy Belajar - Cara Memasukkan Gambar di HTML. setelah sebelumnya kita telah membahas Cara Membuat Daftar/List di HTML. Dan pada kesempatan kali ini kita akan membahas cara memasukkan gambar di HTML. Kuy kita simak penjelasan dibawah ini!

Suatu halaman web akan terlihat kaku, terkesan formal dan sedikit menjemukan bila tidak disertai gambar. Kita bisa lihat saat ini, halaman web yang ada di internet, hampir semuanya memasukan unsur gambar, animasi bahkan audio dan video untuk menarik dan membuat tercengang para pengunjungnya.

Cara Memasukkan Gambar di HTML

img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).

img element, ibarat sebuah rumah atau penampung (container) bagi sebuah file gambar (picture). Anda dapat memasukkan file gambar seperti .jpg, .gif dan .png didalam element img dengan merujukkan (link) file gambar tersebut yang di ditulis pada src attribute.

Untuk memanggil objek gambar di HTML, kita akan menggunakan tag <img> yang memang berfungsi untuk memanggil gambar di HTML. tag <img> ini memiliki beberapa atribut, yaitu src, alt, width, height yang akan kita bahas pada materi dibawah ini.

Atribut src dalam tag <img>

Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.

Untuk mempraktikkan materi ini, silahkan sediakan sebuah gambar yang akan digunakan sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF. Saya menyarankan untuk menaruh gambar berada satu folder dengan file HTML agar mudah dalam memanggil gambar tersebut.


<html>





<title>Kuy Belajar Tag Image</title>





</head>





<body>

<h1>Kuy belajar memasukkan gambar ke HTML</h1>

<img src="Penguins.jpg" />


</html>

Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan /> dan jangan sampai salah dalam penulisan nama file gambar dan ektensi file gambar yang kita masukkan dalam attribut src.

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, yaitu alt. Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser. Atau jika web browser telah disetting untuk tidak menampilkan gambar.

Untuk lebih memahaminya mari langsung kita praktikkan saja, kita akan menggunakan kode HTML yang taadi, hanya saja kita akan menambahkan atribut alt pada tag <img>

Untuk lebih jelasnya, kuy simak kode di bawah ini.


<html>




<title>Kuy Belajar Tag Image</title>






</head>





<body>

<h1>Kuy belajar memasukkan gambar ke HTML</h1>

<img src="Penguins.jpg" alt="Gambar Pinguin" />


</html>

Atribut alt juga berperan penting untuk mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google ‘tidak mengerti’ isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini menambah pentingnya menambahkan atribut alt. atribut ALT akan muncul saat gambar tidak bisa di-load

Atribut width dan height dalam tag <img>

Atribut width dan height ini pun berperan sangat penting tentunya. Karena seperti namanya, atribut ini akan kita gunakan untuk menentukan lebar dan tinggi dari gambar yang kita masukkan. untuk lebih jelasnya kuy simak kode dibawah ini.


<html>




<title>Kuy Belajar Tag Image</title>






</head>





<body>

<h1>Kuy belajar memasukkan gambar ke HTML</h1>

<img src="Penguins.jpg" alt="Gambar Pinguin" height="200px" width="300px />


</html>

Pada penggunaan tag image diatas, gambar terlihat tidak proporsional, hal ini karena penggunaan atribut width dan height ‘memaksa‘ gambar untuk tampil dengan nilai yang kita tetapkan. Dan satuan yang di gunakan pada atribut width dan height di atas menggunakan px atau pixel dan sobat juga bisa menggunakan % (persen) untuk satuan dari width dan height

Maka akan menghasilkan dokumen HTML seperti pada gambar dibawah ini.

Itu lah kira nya pembahasan kita kali ini tentang cara memasukkan gambar di HTML, sekian dulu dari saya "Singkat, Semoga Bermanfaat" Keep Coding ya Sobat!

Kuy ke Materi Selanjutnya : Cara Membuat Table di HTML