Blog

Yuk Intip 4 Cara Mudah Memasukkan Gambar di HTML

Situs web mana pun terlihat lebih menarik dengan gambar. Lebih dari sekadar pelengkap, gambar memberikan ketenangan pikiran kepada pengunjung situs web Anda dan memungkinkan mereka membaca seluruh konten blog Anda. Artikel ini merinci panduan praktis untuk menyisipkan gambar dalam HTML.

HTML adalah sintaks atau tag dasar yang digunakan dalam struktur pemrograman situs web. Faktanya, menurut penelitian W3Techs, 94,5% situs web di seluruh dunia menggunakan HTML. Oleh karena itu, Anda harus memahami istilah dan tag HTML yang umum digunakan saat membuat.

Panduan Sederhana Memasukkan Gambar ke HTML

Jika Anda ingin memasukkan gambar ke dalam dokumen HTML agar dapat ditampilkan di halaman website Anda, Anda harus melakukan beberapa persiapan dan panduan. Anda dapat dengan mudah menambahkan gambar ke dokumen HTML Anda dengan mengikuti langkah-langkah berikut.
Pertama, sebelum memasukkan gambar ke dalam HTML, kita perlu mengetahui apa saja yang sedang dipersiapkan. Persiapan yang diperlukan sangatlah sederhana. Ada beberapa hal yang perlu Anda persiapkan.

1. Pilih Gambar dengan Format yang Sesuai

Untuk menampilkan gambar di website Anda, pilih format yang sesuai dengan format yang disediakan oleh HTML. Gambar tidak dapat ditampilkan jika format gambar salah.
Format gambar apa yang dapat disisipkan ke dalam dokumen HTML? Jenis format gambar yang dapat dimasukkan ke dalam HTML adalah:

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

Perlu Anda ketahui bahwa di antara format ini, JPG, PNG, dan GIF adalah yang paling umum digunakan.

2. Kenali Tag <img>

Seperti yang Anda ketahui, HTML terdiri dari kumpulan jenis tag. Ini juga mengapa menyisipkan gambar berbeda dengan menyisipkan gambar ke dalam dokumen seperti Word.
Sekarang, alat yang digunakan untuk memasukan gambar ke dalam dokumen HTML adalah menggunakan tag <img> . Tag <img> ini menentukan gambar yang akan ditampilkan dalam dokumen HTML.
Tag <img> sendiri memiliki beberapa atribut atau turunan yang dapat digunakan untuk menyertakan gambar. Atribut tag <img> antara lain:

src => Menentukan URL gambar.
alt => Menentukan teks alternatif untuk gambar. Ini akan muncul jika fitur grafis dinonaktifkan di browser Anda atau saat gambar sedang diunduh.
height => Menentukan tinggi gambar.
width => Menentukan lebar gambar.
usemap => Mendefinisikan imagemap.
Style => Memudahkan penerapan gaya gambar sebaris pada HTML.

Setelah Anda memilih atribut yang ingin Anda gunakan, mulailah mengkode HTML dalam editor teks, atau buka file HTML tempat Anda ingin menyisipkan gambar.

Misalnya seperti source code HTML berikut.

<!Doctype html>
<Html>   
<Head>    
<Title> Contoh Gambar 1 </Title>
</Head>
<Body>
<p> Gambar 1 </p>
  <img src="gambar1.jpg">
</Body>
</Html>

3.Tentukan Atribut Alt Text

Atribut alt text digunakan untuk menyediakan teks alternatif pada gambar. Jika gambar tidak dapat ditampilkan karena alasan tertentu, teks alternatif akan ditampilkan. Kehadiran teks alternatif pada gambar ini juga dapat meningkatkan peringkat web.
Faktanya, teks alternatif membantu mesin pencari memahami konteks dan deskripsi gambar Anda, membuatnya lebih mudah untuk diindeks di SERP (Search Engine Result Page).
“Bagaimana cara menyisipkan gambar dalam HTML menggunakan teks alt?”
Jangan khawatir! Untuk menyisipkan gambar HTML dengan alt text, Anda perlu menambahkan atribut alt text ke tag <img>.

Contohnya adalah seperti berikut,

<img src="gambar1.jpg" alt="Gambar 1">

Notasi penggunaan atribut alt text adalah sebagai berikut:

<!Doctype html>
<html>
<head>
  <title> Contoh Gambar 1</title>
</head>
<body>
  <p> Contoh Gambar 1 </p>
  <img src="gambar1.jpg" alt="Gambar 1">
</body>
</html>

4. Menambah Caption Pada Gambar

Setelah membaca tentang menambahkan alt text pada gambar, ada satu hal lagi yang harus Anda ketahui. Itu adalah keterangan dengan atribut judul. Informasi ini ditampilkan ketika pengunjung situs web mengarahkan kursor ke gambar.

Deskripsi ini muncul saat Anda mengarahkan kursor ke bagian gambar untuk memperjelas deskripsi gambar. Contoh penambahan informasi menggunakan atribut title.

<img src="gambar1.jpg" alt="Gambar meja kerja" title="Meja kerja type XYZ">
Selengkapnya adalah sebagai berikut:
<!Doctype html>
<html>
<head>
  <title> Contoh Gambar Meja Kerja </title>
</head>
<body>
<p> Contoh Gambar Meja Kerja </p>
<img src="gambar1.jpg" alt="Gambar meja kerja" title="Meja kerja type XYZ">
</body>
</html>

Menyiapkan Gambar di HTML

Setelah menyelesaikan langkah-langkah di atas, Anda hampir selesai dengan tutorial cara menyisipkan gambar di HTML.
Tapi selain itu, ada hal lain yang harus kamu ketahui. Dalam beberapa kasus, Anda mungkin perlu menyesuaikan gambar dalam dokumen HTML Anda agar terlihat lebih proporsional dan menarik, serta agar sesuai dengan tampilan dan nuansa situs web Anda.
Apa dan bagaimana memposisikan gambar dalam HTML?

1. Menyesuaikan Gambar Pixel

Untuk mengatur dimensi gambar, gunakan atribut style dengan elemen height dan width. ‘Height’ digunakan untuk mengatur tinggi gambar dan ‘width’ digunakan untuk mengatur lebar gambar.

Untuk syntax dari atribut style adalah seperti berikut.

<img src="gambar1.jpg" alt="Gambar meja kerja" style="width:150px;height:80px;"> 
Untuk menggunakan atribut style, cukup tempelkan kode sumber ke editor teks.
<!Doctype html>
<html>
<head>
 <title> Contoh Gambar Meja Kerja </title>
</head>
<body>
<p> Contoh Gambar Meja Kerja </p>
  <img src="gambar1.jpg" alt="Gambar meja kerja" style="width:150px;height:80px;">
</body>
</html>
Tahukah Anda height dan width dalam px (pixel) pada kode di atas?
Anda dapat menggunakan px (pixel) untuk memposisikan gambar dalam HTML. Jadi jangan bingung dengan mengatur gambar dalam pixel. Nah, browser sendiri otomatis menampilkan gambar berukuran pixel tanpa harus menentukan satuan height dan width.

2. Mengatur posisi gambar

Agar posisi gambar pas dan nyaman dipandang maka harus diatur.
Atribut align memungkinkan Anda membuat posisi gambar masukan tampak teratur, proporsional, dan indah alami. Jika posisi gambar berubah maka posisi teks juga akan berubah menyesuaikan dengan gambar. Perataan gambar dapat diatur dalam beberapa posisi, termasuk kanan, kiri, atas, bawah, dan tengah. Namun perlu diperhatikan bahwa syntax-nya untuk setiap posisi sedikit berbeda.

Perhatikan contoh berikut.
<img src=" gambar1.jpg" align="right">
<img src=" gambar1.jpg" align="left">
<img src=" gambar1.jpg" align="top">
<img src="gambar1.jpg" align="bottom">
<img src="gambar1.jpg" align="middle">

Penulisan syntax ke dokumen HTML adalah seperti berikut.

<!Doctype html>
<html>
<head>
<title> Contoh Gambar Meja Kerja </title>
</head>
<body>
<p> Contoh Gambar Meja Kerja:<img src=" gambar1.jpg" style= "width:150px;height:80px;" align="left"> dengan align="left"</p>
</body>
</html>

3. Menambahkan Bingkai dengan Ukuran Tertentu

Bahkan setelah mengetahui cara menyisipkan gambar dalam HTML dan juga melakukan pengaturan lain untuk mengatur tampilan gambar, bisa juga menambahkan garis atau biasa disebut border.
Atribut border memungkinkan Anda menambahkan batas atau garis pada tepi gambar. Anda juga dapat mengatur ketebalan tepi sesuai kebutuhan.Anda dapat menambahkan bingkai dengan ukuran tertentu dengan mengubah nilai atribut bingkai.
Contohnya.

<img src="Gambar1.jpg" border="2">

Cara penulisan selengkapnya adalah seperti ini.

<!Doctype html>
<html>
<head>
<title> Contoh Gambar Meja Kerja </title>
</head>
<body>
<p> Contoh Gambar Meja Kerja </p>
<img src="Gambar1.jpg" border="2">
</body>
</html>

Demikianlah penjelasan cara memasukkan gambar ke dalam HTML. Ada beberapa hal yang perlu diingat ketika menempatkan gambar HTML:

Berikan nama spesifik dan unik pada gambar HTML yang Anda tampilkan, karena memengaruhi penelusuran Google.
Nama gambar yang jelas memudahkan pengunjung menemukan website Anda.
Saat mengubah dimensi gambar, tinggi dan lebar tidak perlu menyertakan simbol px, tetapi harus menyertakan atribut style.

Pada dasarnya, dokumen HTML tidak menampilkan gambar langsung di website Anda. Dalam hal ini, Anda memerlukan proses untuk memasukkan gambar dari direktori atau penyimpanan, misalnya drive atau dokumen di PC Anda.
Seperti yang dijelaskan di atas, memasukkan gambar ke dalam HTML memerlukan beberapa atribut untuk menampilkan gambar di browser.

Nah, begitulah cara simple untuk memasukkan gambar pada HTML.

Jangan menunda untuk belajar HTML, walaupun terasa sulit tapi yakinlah bahwa kamu pasti bisa. Semoga membantu!