Tutorial HTML Part 10: Menambahkan Gambar di HTML

Kamu telah mencapai part 10 dari 14 seri Belajar HTML Dasar

Cara Menambahkan Gambar di HTML (tag img) – Selamat malam teman2 semua, apa kabar semuanya? Saya harap kalian semua sehat-sehat saja. Sudah lama sekali saya tidak update tutorial HTML ini. Pada kesempatan ini saya akan melanjutkan tutorial HTML yang sebelumnya sudah kita bahas tentang Cara Membuat Link di HTML. Jadi, pada pembahasan kali ini… Kita akan belajar bagaimana penggunaan tag image. Tag Image sendiri digunakan untuk menampilkan sebuah gambar kedalam halaman web, dengan menggunakan tag <img>.

Atribut src dalam tag <img>

Atribut src (singkatan dari source) merupakan atribut yang berisi alamat dari gambar yang akan di tampilkan. Alamat ini bisa relatif atau absolute. Perbedaan atribut relatif dan absolute ini sudah kita bahas pada tutorial sebelumnya.

Untuk contoh code HTML tentang image ini, silahkan sediakan sebuah gambar yang akan digunakan untuk ditampilkan, dan tempatkan gambar tersebut ke dalam satu folder dengan halaman HTML yang akan di buat. Ekstensi gambar bisa dalam bentuk/berupa JPG, PNG, dan GIF.

Pada contoh dibawah ini saya menggunakan sebuah gambar penguin.jpg yang berada dalam satu folder dengan halaman HTML saat ini. Silahkan ketik kode dibawah ini dan simpan dengan nama gambar.html.

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="penguin.jpg"/>
</body>
</html>

Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung di tutup dengan />

Hati-hati dengan penulisan atribut src, gambar sering kali gagal di tampilkan karena kita salah ketik atribut src menjadi “scr”.

Atribut alt dalam tag <img>

Tag image juga memiliki atribut penting lainnya, salah satunya alt.

Atribut alt (alternative description) adalah atribut yang digunakan untuk keterangan dari gambar jika gambar tersebut gagal untuk di tampilkan pada halaman browser.

Berikut contoh penggunaan atribut alt pada tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="penguin.jpg" alt="Gambar Penguin"/>
</body>
</html>

Atribut alt juga berperan penting untuk search engine seperti Google. Karena cara kerja google yang meng-index seluruh website dengan memproses tulisan yang ada, Google “tidak mengerti” isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt. Hal ini lah yang membuat atribut alt menjadi tambah penting.

Atribut width dan height dalam tag <img>

Atribut lainnya membolehkan kita untuk menentukan besar dari sebuah gambar yang ditampilkan, yaitu width dan height.

Berikut contoh penggunaan atribut width dan height pada tag <img>:

<!DOCTYPE html>
<html>
<head>
   <title>Penggunaan Tag Image</title>
</head>
<body>
   <h1>Belajar Tag Gambar</h1>
   <img src="penguin.jpg" alt="Gambar Penguin" width="250" height="150"/>
</body>
</html>

Pada penggunaan tag image diatas, gambar tidak terlihat tidak proposional, hal ini di karenakan penggunaan width dan height “memaksa” gambar untuk tetap menampilkan dengan nilai yang kita sudah tentukan pada atribut width dan height.

Untuk tetap mempertahankan ukuran gambar yang proporsional, namun tetap membuat gambar menjadi lebih besar/kecil, kita hanya perlu cantumkan salah satu atribut saja (width atau height saja, tidak keduanya). Misalnya jika kita akan menetapkan nilai atribut width = 250px (tanpa mencantumkan height), maka browser akan menampilkan gambar dengan lebar 250px, dan menghitung secara otomatis tinggi dari gambar supaya gambar tetap proporsional.

Biasanya web server akan menampilkan text terlebih dahulu, baru mengirim gambar setelahnya. Untuk web server yang sibuk, atau gambar dengan ukuran besar, akan menyebabkan text berpindah tempat karena gambar yang terlambat ditampilkan. Mencantumkan ukuran dari gambar dengan atribut width dan height akan memberikan kesempatan kepada web browser untuk mempersiapkan ukuran tersebut untuk gambar, dan text tidak akan berpindah.

Kita telah selesai membahas Cara Menambahkan Gambar di HTML. Pada pembahasan selanjutnya kita akan membahas tentang cara membuat tabel di HTML menggunakan tag <table>.

Dibawah ini merupakan semua list dari proses part Belajar HTML Dasar

Belajar HTML Dasar