Pengenalan Dasar Html (Part #4) (Gambar)

Aizu
Maret 07, 2026

 

Pada pembahasan part #4 ini kita akan membahas tentang gambar, bagaimana cara menampilkan gambar ke web, mengatur letak gambar, mengubah ukuran gambar, dll.

Cara Insert Gambar Ke Website

Seperti pembahasan part #2 terdapat list tag yang sering digunakan di html, nah salah satunya terdapat tag untuk menampilkan gambar yaitu <img>.

Lantas bagaimana cara menampilkan gambar dengan tag <img>? mari kita praktekan.

Contoh


Penjelasan

Pada pada tag <img src="icon.png">, terdapat atribut src="icon.png" kenapa harus icon.png?
Dikarnakan saya menamai file gambar dengan nama icon.png, kalian harus memastikan nama dan jenis file gambar tersebut harus sama.

Ada beberapa tipe file gambar yang bisa di terima di html, di antarnya ada jpg, png, jfif, dll.

Pemecahan masalah

Misalnya kalian membuat folder khusus untuk meletakan semua gambar, dan menamai folder tersebut dengan nama "gambar", maka kalian harus mengubah nilai atribut nya menjadi:

Saya rasa kamu paham apa yang di maksud kode dia atas, perhatikan pada atributnya.

Cara Mengatur Letak Gambar

Kita bisa atur letak gambar ke kanan, ke kiri, ke tengah sesuka hati kita, nah muncul pertanyaan gimana sih caranya???

Caranya


Bisa dilihat pada atribut align="right", coding diatas digunakan untuk membuat gambar menjadi dikanan, jika ingin mengubah kekiri kita hanya tinggal mengubah nilai atribut menjadi align="left", lantas bagaimana untuk membuat gambar menjadi di tengah? apa kita ubah nilai atribut menjadi align="center"? tentu itu tidak akan bisa!

Cara Membuat Gambar Rata Tengah


Disini kita sedikit menggunakan css ya, perhatikan pada atribut style="display:block; margin:auto;"!

Apakah ada cara lain? tentu saja ada!

Cara Kedua


Disini kita hanya menambahkan tag <center> di atas / sebelum tag img, mudah bukan?

Cara Merubah Resolusi / Ukuran Gambar

Disini untuk mengubah ukuran gambar sangat mudah, tentu resolusi asli gambarnya tidak berubah, hanya kita memadatkan dan membesarkan pixel pada gambar tersebut.

Caranya


Bisa di perhatikan pada atribut height="100px" width="100px", atribut height di gunakan untuk menentukan ukuran tinggi gambar, dan width di gunakan untuk menentukan ukuran lebar gambar, dan nilai atribut tersebut sebagai angka untuk menentukan tinggi dan lebar nya gambar tersebut.

Penutup

Sekian untuk part #4, mari lanjutkan ke part #5