Tutorial HTML Mudah : 4 Cara Memasukan Gambar di HTML

Setiap website akan terlihat lebih menarik dengan adanya gambar.

Bukan hanya sebagai pelengkap, tapi gambar juga membuat pengunjung website betah membaca seluruh isi blog sampai selesai.

Pada artikel kali ini, akan dijelaskan secara detail panduan praktis tentang cara memasukan gambar di HTML. 

HTML merupakan syntax atau  tag dasar yang dipakai pada struktur pemrograman website.

Bahkan, berdasarkan survei dari W3Techs, 94,5% website di seluruh dunia memakai HTML.

Itulah mengapa saat kamu ingin membuat harus familiar dengan istilah- istilah atau tag HTML yang sering digunakan.

Baca Juga : HTML adalah Bahasa Pemrograman Dasar, Kenali Lebih Dekat Yuk!

Tutorial Mudah Cara Memasukan Gambar di HTML 

Ketika kamu ingin menyisipkan gambar dalam dokumen HTML agar dapat ditampilkan di halaman website, ada beberapa persiapan dan panduan yang harus dilakukan.

Dengan mengikuti langkah-langkah ini, maka kamu dapat dengan mudah menambahkan gambar ke dalam dokumen HTML.

Pertama- tama kamu harus mengetahui apa saja hal- hal yang dipersiapkan sebelum mulai eksekusi memasukan gambar ke dalam HTML.

Persiapan yang harus kamu lakukan cukup mudah, berikut ini adalah beberapa hal yang harus dipersiapkan.

1. Pilih Gambar dengan Format yang Sesuai

Untuk menampilkan gambar di website, pastikan pilih format yang sesuai dengan yang disediakan oleh HTML.

Bila format gambarnya tidak tepat, maka gambarnya tidak bisa ditampilkan.

Apa saja format gambar yang bisa disisipkan ke dokumen HTML? Nah, di bawah ini merupakan tipe format gambar yang dapat kamu masukkan ke dalam HTML.

• PNG => .png
• GIF => .gif
• APNG => .apng
• JPEG => .jpg, .jpeg, .jfif, .pjpeg, .pjp
• ICO => .ico
• SVG => .svg

Perlu kamu ketahui, di antara format tersebut beberapa yang paling banyak digunakan adalah JPG, PNG, dan GIF.

2. Familiar dengan Tag <img>

Seperti yang kamu ketahui, HTML memang terdiri dari kumpulan tipe tag.

Untuk itu pastinya ketika kamu ingin memasukan gambar juga akan berbeda dengan saat kamu memasukan gambar ke dalam dokumen seperti word.

Nah, tag yang digunakan untuk memasukan gambar pada dokumen HTML adalah menggunakan tag <img>.

Tag <img> menentukan gambar yang akan ditampilkan dalam dokumen HTML.

Tag <img> sendiri memiliki memiliki beberapa atribut atau turunan yang bisa kamu gunakan untuk memasukan gambar.

Berikut ini adalah atribut- atribut pada tag <img>, antara lain :

• src => Menentukan gambar URL
• alt => Menentukan teks alternatif untuk gambar. Ini ditampilkan saat fitur grafik dimatikan di browser atau saat gambar sedang diunduh
• height => Menentukan ketinggian gambar
• width => Menentukan lebar gambar
• usemap => Mendefinsikan gambar map
• style => Memudahkan untuk mengaplikasikan inline style gambar di HTML

Setelah memilih akan menggunakan atribut yang mana, selanjutnya kamu bisa mulai ngoding HTML di editor teks atau buka file HTML yang ada di editor teks tempat Anda ingin menyisipkan gambar.

Misalnya seperti source code HTML berikut.

3. Berikan Atribut Alt Text

Atribut Alt Text adalah untuk memberi teks alternatif di gambar.

Teks alternatif akan muncul ketika gambar tidak bisa muncul karena beberapa alasan.

Keberadaan alternatif text di gambar ini juga dapat mendorong peningkatan web ranking.

Memang Alt text memudahkan search engine untuk memahami konteks dan deskripsi gambarnya agar semakin mudah untuk terindeks SERP (Search Engine Result Page).

“Bagimana cara memasukan gambar di HTML dengan alt text?”

Tenang saja! Untuk memasukan gambar HTML dengan alt text, kamu harus menambahkan atribut alt text ke dalam tag <img>.

Contohnya adalah seperti berikut,

Tentang cara menggunakan atribut Alt Text, cara penulisannya adalah seperti ini.

4. Menambah Keterangan Pada Gambar

Setelah melihat penjelasan tentang penambahan alternatif text dalam gambar, kali ini ada poin lain yang tak kalah penting yaitu keterangan gambar dengan atribut title.

Keterangan ini bisa terlihat ketika visitor website mengarahkan kursor ke gambar.

Keterangan ini muncul ketika kursor mengarah ke bagian gambar dengan tujuan memperjelas deskripsi gambar.

Contoh penambahan keterangan dengan atribut title.

Selengkapnya adalah sebagai berikut;

Mengatur Gambar di HTML

Setelah melihat langkah-langkah di atas, sebenarnya tutorial cara memasukan gambar di HTML pada dasarnya sudah selesai.

Tapi, selain itu sebenarnya masih ada hal lain yang perlu kamu ketahui.

Ada kalanya kamu butuh menyesuaikan gambar dalam dokumen HTML agar gambarnya terlihat lebih proporsional, menarik, dan sesuai tampilan website.

Lalu apa saja dan bagaimana cara pengaturan gambar di dalam HTML?

1. Menyesuaikan Satuan Pixel Gambar

Cara mengatur bagian dimensi gambar, kamu bisa memakai atribut style yang dilengkapi dengan elemen height dan width.

Height berfungsi untuk mengatur ketinggian gambar, sedangkan width untuk mengatur lebar gambar.

Untuk syntax dari atribut style adalah seperti berikut.

Penggunaan atribut style tinggal tempelkan saja source code ke text editor.

Apakah kamu sudah tahu tentang satuan px pada height dan width kode diatas?

Untuk mengatur gambar pada HTML, kamu dapat menggunakan px (pixel).

Jadi, jangan bingung jika pengaturan gambar dengan satuan pixel ya.

Nah, walaupun kamu tanpa menyebutkan satuan pada width dan height, dari browser sendiri otomatis menunjukkan gambar berukuran pixel.

2. Menyesuaikan Letak Gambar

Agar posisi gambar sesuai dan nyaman dilihat oleh mata, maka kamu perlu mengaturnya.

Kamu bisa memanfaatkan atribut align agar posisi gambar yang kamu masukkan terlihat rapi, proporsional, dan tentunya enak dipandang.

Karena posisi gambar berubah, maka posisi teks juga berubah sesuai gambarnya.

Penempatan gambar bisa diatur beberapa posisi meliputi kanan, kiri, atas, bawah, atau tengah.

Tapi, perlu diketahui bahwa masing-masing posisi syntax-nya agak berbeda.

Simak contohnya berikut ini.

Penulisan syntax ke dokumen HTML adalah seperti berikut.

3. Menambah Border dengan Ukuran Tertentu

Setelah tahu cara memasukan gambar di HTML dan juga pengaturan lain untuk menyesuaikan tampilan gambar, kamu juga masih bisa menambah garis di sekeliling atau disebut dengan border.

Dengan atribut border, kamu bisa memberi bingkai atau garis di tepi gambar.

Ukuran ketebalan border-nya juga dapat diatur sendiri sesuai kebutuhan.

Cara menambah border dengan ukuran tertentu bisa dilakukan dengan mengganti nilai angka pada atribut border.

Contoh:

Cara penulisan selengkapnya adalah seperti ini.

Sekian pembahasan tentang cara memasukan gambar di HTML. Ada beberapa hal yang perlu diperhatikan saat mengatur gambar HTML :

• Beri nama yang spesifik dan jelas untuk gambar HTML yang ingin ditampilkan, karena ini berpengaruh pada pencarian Google
• Jika nama gambar jelas, maka websitemu lebih mudah untuk bisa ditemukan pengunjung.
• Saat proses modifikasi dimensi gambar, simbol px tidak harus dicantumkan pada height dan width, tapi pada atribut style perlu dicantumkan.

Pada intinya, dokumen HTML tidak akan langsung menampilkan gambar dalam website kamu.

Dalam hal ini, dibutuhkan proses memasukan gambar dari direktori atau penyimpanan misalnya dari drive atau dokumen dalam PC.

cara memasukan gambar di HTML memang membutuhkan beberapa atribut seperti yang telah dijelaskan di atas, agar gambar muncul di browser.

Jangan Tunda Untuk Belajar HTML!

Yang namanya belajar, jangan ditunda- tunda DomaiNesians.

Walaupun diawal terasa berat dan sulit, tapi yakinlah bahwa kamu bisa melalui itu semua.

Buat kamu yang tertarik dengan pemrograman web, kamu bisa belajar html gratis untuk pemula.

Dijamin mudah dan dapat dipahami. Semangat untuk belajar HTML ya DomaiNesians!

Baca Juga : PHP vs HTML, Perbandingan 2 Bahasa Pemrograman Web Paling Banyak Digunakan