Memasukan Gambar HTML (tag image)
Pada tutorial ini Anda akan mempelajari cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam halaman web, menggunakan <img>.
Atribut src dalam tag <img>
Atribut src adalah singkatan dari source, merupakan atribut yang berisi alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute.
Untuk latihan ini Anda harus menyiapkan gambar (JPEG, PNG, GIF) yang disimpan dalam folder yang sama dengan file latihan ini. Anda dapat mengambil gambar yang akan digunakan disini dowload.
Contoh penggunaan tag <img>:
Kopas kode berikut ke Notepad++, lalu simpan dengan nama image1.html pada folder image.
<!DOCTYPE html> <html> <head> <title>Menggunakan Tag Image</title> </head> <body> <h1>Latihan Tag Gambar</h1> <img src="motorGP.jpg" /> </body> </html>
Perhatikan bahwa tag <img> tidak memiliki elemen, sehingga langsung ditutup dengan />
Buka folder image > klik ganda pada file image1 untuk membuka halaman web.👌
Hati-hati dengan penulisan atribut src, sering gambar gagal tampil karena kita salah ketik atribut src menjadi “scr”.
Atribut alt dalam tag <img>
Atribut alt adalah singkatan dari alternative description, dimana alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh browser.
Contoh penggunaan atribut alt pada tag <img>:
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Tag Image</title>
</head>
<body>
<h1>Latihan Tag Gambar</h1>
<img alt="gambar motorGP" src="motorGP.jpg"/>
</body>
</html>
Atribut alt berperan penting pada mesin pencari seperti Google. Karena cara kerja google yang meng-index seluruh situs dengan memproses tulisan yang ada, Google tidak mengerti isi dari gambar tanpa bantuan deskripsi yang ditulis dalam atribut alt.
Atribut width dan height dalam tag <img>
Atribut lainnya untuk menentukan besar dari gambar yang ditampilkan, yaitu width dan height.
Contoh penggunaan atribut width dan height pada tag <img>:
Kopas kode berikut ke Notepad++, lalu simpan dengan nama image2.html pada folder image.😀
<!DOCTYPE html> <html> <head> <title>Menggunakan Tag Image</title> </head> <body> <h1>Latihan Tag Gambar</h1> <img alt="Gambar motorGP" src="motorGP.jpg" height="300" width="200" /> </body> </html>
Buka folder image > klik ganda pada file image2 untuk membuka halaman web.
Proposi gambar ditampilkan sesuai dengan nilai yang diberikan pada atribut width dan height .
Untuk mempertahankan proporsi gambar, cantumkan hanya salah satu atribut saja. Misalkan jika kita menetapkan atribut width=300px (tanpa mencantumkan height), maka web browser akan menampilkan gambar dengan lebar 300px, dan menghitung secara otomatis tinggi gambar agar gambar tetap proporsional.
Kopas kode berikut ke Notepad++, lalu simpan dengan nama image3.html pada folder image.<!DOCTYPE html> <html> <head> <title>Menggunakan Tag Image</title> </head> <body> <h1>Latihan Tag Gambar</h1> <img alt="Gambar motorGP" src="motorGP.jpg" height="300"/> </body> </html>
Buka folder image > klik ganda pada file image3 untuk membuka halaman web.
Selamat mencoba, semoga sukses!!!😀😀😀
Link Buku:
Suryanto Tabrani dan Seno Adjie
2 Komentar
Terimakasih pelajaran bagus
BalasHapusthanks
Hapus