Cara menambahkan gambar pada html

Sebelumnya kita telah membahas tentang Text Formatting pada html bagaimana kita menambahkan penebalan pada teks, membuat miring teks, membuat teks dicoret, dan seterusnya.

Kali ini kita akan membuat halaman web menjadi lebih menarik dengan adanya gambar.

Pada html sendiri untuk menambahkan gambar digunakan tag <img> hanya tag pembuka saja tanpa tag penutup, akan tetapi tidak hanya menuliskan saja kita juga perlu menambahkan attribut pada tag tersebut. Contoh nya seperti berikut.

Penulisan tag img

Penjelasan:

1. Tag img mempunyai tag pembuka tetapi tidak memiliki tag penutup
2. Attribut src pada tag img fungsi nya kita menambahkan gambar yang kita inginkan.
   Catatan: Teliti lagi ekstensi pada gambar, ekstensi gambar saya adalah .jpg. Karena banyak orang yang kurang teliti pada ekstensi gambar nya, sehingga gambar tersebut tidak tampil di halaman web.
3. Attribut alt berfungsi sebagai penanda apabila gambar tidak tampil.
   Catatan: Apabila gambar tidak tampil dikarenakan salah dalam penulisan nama gambar, ekstensi gambar, dan penempatan folder gambar. Maka pesan alt ini yang akan tampil.

File luffy.jpg dan file index.html berada pada folder yang sama

Tampilan pada halaman browser ketika menjalankan perintah diatas

Tampilan pada browser ketika gambar tidak muncul dan menampilkan attribut alt

Setelah mempunyai gambaran atau kamu sudah mencoba nya sendiri mengenai tag img ini, mari kita menambahkan sedikit kasus. Dimana file gambar kita yaitu luffy.jpg berada di dalam folder images.

File luffy.jpg berada di dalam folder images

Ketika kasus nya seperti itu maka tidak bisa lagi menjalankan perintah yang diawal tadi, nanti gambar nya tidak akan tampil di halaman browser dan akan menampilkan apa yang kita ketikan di attribut alt.

Maka perintah yang harus digunakan adalah menggunakan:
<img src=”namafolder/namafile” alt=”Gambar Luffy”>
Ketika file gambar berada di dalam folder maka kita harus menuliskan nama folder nya terlebih dahulu dan dibatasi dengan garis miring ( / ).

Lebih tepat nya seperti ini:

Menambahkan nama folder dibelakang nya lalu dibatasi dengan garis miring ( / )

Oke, selanjutnya kita tambah lagi kasus kita, dimana file index.html kita berada pada folder html. Bagaimana supaya menampilkan gambar nya?

File index.html berada di folder html dan file luffy.jpg berada di folder images

Untuk melakukan itu kita harus terlebih dahulu keluar dari folder html, lalu ke folder images dan file gambar nya.

Maka perintah yang harus digunakan adalah menggunakan:
<img src=”../images/luffy.jpg” alt=”Gambar Luffy”>
Ketika file gambar berada di luar folder maka kita harus mengeluarkan nya terlebih dahulu dengan titik titik garis miring ( ../ ) artinya keluar satu langkah dari folder dan dibatasi dengan garis miring( / ).

Lebih tepat nya seperti ini:

Pemanggilan gambar ketika diluar file index.html

Selanjutnya untuk supaya lebih paham lagi, saya ada sedikit latihan dimana file gambar luffy.jpg berada di dalam folder images dan folder images berada di folder asset. Sedangkan file index.html kita kembalikan ke awal, kita hapus saja folder html nya dan akan tampilanannya akan seperti ini:

File luffy.jpg berada di dalam folder images dan folder images berada di dalam folder asset

Jadi, kesimpulan nya adalah tag img memiliki tag pembuka tapi tidak memiliki tag penutup dan terdapat beberapa attribut seperti src yang fungsi nya untuk memanggil file gambar dan alt yang berfungsi menampilkan pesan di halaman web ketika gambar tidak tampil.

Sebenarnya masih ada attribut lainnya pada gambar seperti height, width, loading, dll. Tetapi yang saya dapat jelaskan hanya dua attribut src dan alt saja karena ini sering dipakai.

Dan untuk pemanggilan file gambar, ketika file gambar berada di dalam folder atau satu tingkatan dari file html nya maka tambahkan nama folder nya dan ketika diluar folder atau satu turunan maka gunakanlah ( ../ ).

Untuk kasus yang terakhir itu apabila sudah mengerjakan dengan baik dan benar, silahkan kirim lewat telegram saya https://t.me/riann18 dan bisa juga bertanya-tanya lewat telegram, saya sangat mengapresiasi itu :D

Sekian yang dapat saya berikan mengenai cara menambahkan gambar pada html kurang lebih nya saya mohon maaf, apabila ada saran dan kritik bisa tuliskan di kolom komentar. Karena masukkan berupa saran dan kritik dari kalian membuat saya lebih belajar lagi terhadap kekurangan yang saya miliki.

Terima kasih.

Sumber Gambar Luffy : https://unsplash.com/photos/nU-uOifIwEk