Dalam dokumen html kita
dapat menampilkan gambar, untuk menampilkan gambar di dokumen html biasanya
menggunakan tag <img>. Berikut adalah contoh penggunaan tag <img>.
<!DOCTYPE
html>
<html>
<head>
<title>Belajar
ambil gambar</title>
</head>
<body>
<img src="gambar1.png" height="80%" width="20%"
<img src="gambar1.png" height="80%" width="20%"
alt="Ini
gambar ">
</body>
</html>
Atribut
src dalam tag <img>
Atribut src adalah singkatan
dari source, adalah alamat dari gambar yang akan ditampilkan. Alamat ini bisa
relatif atau absolute. (perbedaan tentang alamat relatif dan absolute telah
kita bahas pada Belajar HTML: Cara Membuat link di HTML).
Untuk contoh kode HTML
tentang image ini, sediakan sebuah gambar yang akan digunakan sebagai tampilan,
dan tempatkan gambar tersebut ke dalam satu folder dengan halaman contoh.
Gambar dapat berupa JPEG, PNG, maupun GIF
Pada contoh dibawah ini saya
menggunakan sebuah gambar gambar2.jpg yang berada dalam satu folder dengan
halaman HTML. Savelah sebagai img.html
<!DOCTYPE
html>
<html>
<head>
Baca Juga
- Menggunakan Library dan Helper di CodeIgniter
- CodeIgniter & Database
- Bagian 19. Membuat Halaman Website Minimalis
- Bagian 18. Lebih Dalam Bekerja dengan CSS
- Bagian 17. Struktur Penulisan Pada CSS
- Bagian 16. Cara Menggunakan CSS
- Bagian 15. Memulai Menggunakan CSS
- Tutorial Video The Complete Angular Course Beginner to Advanced Free Download
- Kumpulan Video dan Source Tutorial Master PHP Pemula Full Complit Gratis
- Kumpulan Tutorial Developers 2018 Full Gratis Download
<title>Penggunaan
Tag Image</title> </head>
<body>
<h1>Belajar
Tag Gambar</h1>
<img
src="gambar2.png" />
</body>
</html>
Atribut
alt dalam tag <img>
Tag image juga memiliki atribut penting
lainnya, yaitu alt
Atribut alt adalah singkatan
dari alternative description, dimana alt digunakan untuk keterangan dari gambar
jika gambar tersebut gagal ditampilkan oleh browser. Atau web broser yang
disetting untuk tidak menampilkan gambar
Contoh penggunaan atribut alt pada tag
<img>:
<!DOCTYPE
html>
<html>
<head>
<title>Penggunaan
Tag Image</title>
</head>
<body>
<h1>Belajar
Tag Gambar</h1>
<img
alt="gambar dua" src="gambar2.png"/>
</body>
</html
Atribut
width dan height dalam tag <img>
Atribut lainnya membolehkan
kita untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan
height.
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 alt="Gambar
Satu" src="gambar1.png" height="200"
width="100"
/>
</body>
</html>
Bagian 7. Menampilkan Gambar Pada Halaman HTML
Reviewed by Akief Takaful
on
6:29 PM
Rating:
Reviewed by Akief Takaful
on
6:29 PM
Rating:
No comments: