Cara Menampilkan Gambar di HTML

Hallo Guys….

Apa Kabar???

Website tanpa gambar,

Sebatas tulisan,

Pasti membosankan.

Setuju?

Harusnya iyya.

Tapi, kenapa penyertaan gambar di website itu penting?

Karena gambar akan membuat website kita terlihat lebih menarik. Karena otak manusia akan lebih mudah menyerap dan mengolah informasi dengan penyampaian dan tampilan berupa visual dibandingkan hanya berupa teks saja.

Jadi, kesimpulannya bahwa Gambar di website = Penting.

Pada artikel kali ini, saya akan memberikan tutorial menambahkan gambar di HTML.

Let’s Start It….

Menambahkan Gambar di HTML

Pada HTML, kita dapat menambahkan gambar menggunakan tag <img>. Tag ini memiliki atribut wajib yaitu “src”. Jika tidak menyertakan atribut “src”, maka gambar tidak akan ditampilkan.

Pada HTML, alamat URL dari gamabr pada atribut “src” dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.

Sebagai contoh:

Hasilnya:

Perhatikan!

Pada di atas, kita langsung mengetikkan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML.. Namun, apabila gambarnya tersimpan di folder yang berbeda, makanya kita hanya perlu menuliskan alamat path-nya.

Misalkan, kita akan menyimpan gambar di dalam folder “Web”

Maka di HTML bisa kita tuliskan seperti di bawah ini:

Maka hasilnya akan tetap sama seperti sebelumnya:

Lalu bagaimana kalau gambar yang kita ingin masukkan ini berada pada situs internet atau berada di website lain?

Kalau semisal ingin menggunakan gambar dari website lain, caranya dengan menuliskan alamat URL lengkap daari gambar tersebut.

Sebagai contoh:

Hasilnya akan sebagai berikut:

Mudah bukan?

Yang perlu diingat ketika ingin menambahkan gambar di HTML adalah format-format gambar yang support di HTML.

Berikut ini daftar beberapa format gambar yang sering digunakan dalam web:

Sekian untuk tutorial singkat mengenai cara memasukkan gambar ke HTML. Sampai ketemu di tutorial-tutorial berikutnya. Semangat belajar!