Memasukan Gambar di HTML
img merupakan singkatan dari image yang berarti gambar, digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak berada pada file (.html) akan tetapi, hanya merujukkan dimana file sumber gambar tersebut berada (disimpan).
Elemen img, ibarat sebuah tempat penampung (container) bagi sebuah file gambar (picture). Anda dapat memasukkan file gambar seperti .jpg, .gif dan .png didalam elemen img dengan merujukkan (link) file gambar tersebut yang di ditulis pada atribut src .
Elemen <img> memiliki beragam atribut yang dapat ditulis sesuai kebutuhan. Akan tetapi, hanya dua atribut yang wajib ditulis pada setiap elemen <img />, yaitu atribut src dan alt. Atribut src menujukkan sumber file tersebut berada, sedangkan alt menujukkan alternatif teks yang akan muncul sebagai pengganti apabila gambar tersebut tidak dapat ditampilkan.
Elemen img, tidak memiliki tag penutup (end/closing tag), jadi hanya ditulis <img />.
Atribut src untuk menyisipkan gambar
HTML tidak bisa langsung menampilkan gambar begitu saja. Dengan kata lain, HTML harus mengambil gambar dari suatu tempat penyimpanan atau direktori (drive, website, dan lain-lain). Oleh karena itu, diperlukan atribut untuk memanggil gambar tersebut agar bisa tampil pada browser.
Tempatkan gambar yang akan ditampilkan dalam folder yang sama dengan file HTMLnya.
Atribut yangdigunakan untuk menarik gambar dari server penyimpanan tersebut dinamakan src. Isi dari atribut ini bisa berupa link menuju direktori ataupun nama file gambar.
Untuk menggunakan atribut src, Anda cukup memasukkan tag berikut.
Contoh:
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Image pada HTML</title>
</head>
<body>
<p> contoh memasukan gambar pada halaman web </p>
<img src="motorGP.png">
</body>
</html>
- Pada HTMLPad > pilih File > Save As
- Simpan file pada folder yang sama dimana gambar berada.
- Klik ganda pada file html pada folder penyimpanan.
Hasilnya:
Atribut Alt Text pada Tag HTML Images
Atribut Alt berfungsi untuk memberikan teks alternatif pada gambar. Jadi, jika karena sebab tertentu gambar gagal ditampilkan, teks alternatif akan muncul sehingga pengunjung website tetap bisa mengidentifikasi gambar.
Selain itu, alt text pada gambar juga mampu meningkatkan ranking website. Sebab, alt text memudahkan mesin pencarian dalam memahami deskripsi dan konteks gambar. Dengan begitu, konten website pun akan lebih mudah diindeks dalam SERP.
Supaya gambar memiliki alt text, Anda perlu menambahkan atribut alt text di dalam tag <img>.
<img src="motorGP.png" alt="motoGP">
Untuk penggunaan atribut alt text dalam dokumen HTML bisa Anda temukan pada cara di bawah ini.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial Image pada HTML</title>
</head>
<body>
<p> contoh memasukan gambar pada halaman web </p>
<img src="motorGP.png" alt="motoGP">
</body>
</html>
Atribut title
Atribut ini digunakan untuk memberikan keterangan pada gambar, dalam bentuk Tooltips.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh gambar pada HTML </p>
<img src="motorGP.png" alt="motoGP" title="Ini gambar motoGP">
</body>
</html>
Atribut style
Atribut style digunakan untuk mengatur dimensi gambar. Atribut ini mengandung elemen width dan height. Elemen width berfungsi untuk memodifikasi lebar gambar, sedangkan elemen height untuk mengubah tinggi gambar.
Atribut style cukup sederhana, berikut syntax-nya.
<img src="motorGP.png" alt="motoGP" style="width:600px;height:350px;">
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title>Cara Memasukkan Gambar di HTML</title>
</head>
<body>
<p> Ini merupakan contoh mengatur dimensi gambar </p>
<img src="motorGP.png" alt="motoGP" style="width:600px;height:350px;">
</body>
</html>
Satuan ukuran gambar dalam dokumen HTML adalah pixel (px). Meski Anda tidak mencantumkan satuan dalam atribut Width dan Height, browser akan tetap menampilkan gambar dalam ukuran pixel.
Atribut border
Atribut ini digunakan untuk memberikan garis tepi atau bingkai.
Anda juga bisa mengatur sendiri level ketebalan border sesuai keinginan, dengan cara mengubah nilai di dalam atribut border.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html> <html> <head> <title>Cara Memasukkan Gambar di HTML</title> </head> <body> <p> Ini merupakan contoh membingkai gambar </p> <img src="motorGP.png" border="7"> </body> </html>
Floating Image di HTML
Atribut float digunakan untuk menampilkan gambar secara terapung (floating).
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title>Cara menjadikan gambar terapung </title>
</head>
<body>
<p>Floating image sebelah kanan<img src="motorGP.png" style="float:right;width:100px;height:75px;"></p>
</body>
</html>
Published: Seno Adjie.
0 Komentar