Menampilkan Gambar HTML
Format gambar yang biasa digunakan pada halaman web adalah JPG, PNG dan GIF. Menampilkan gambar pada halaman web menggunakan tag <img>.
<img src="url" alt="teks">
Contoh
<!DOCTYPE html>
<html>
<head>
<title>Menampilkan gambar HTML</title>
</head>
<body>
<h1>Saitama</h1>
<img src="saitama.jpg" alt="Saitama" style="width:200px;"/>
</body>
</html>
Atribut src berfungsi memanggil file atau sebagai alamat (url) gambar yang akan ditampilkan. karena pada contoh ini file gambar saya letakan pada satu folder yang sama jadi pemanggilan cukup dengan memanggil nama file gambarnya.
Atribut alt berfungsi sebagai nama gambar dan pada kasus gambar tidak bisa atau gagal ditampilkan pada browser maka sebagai alternatif teks pada alt yang akan ditampilkan.
Atribut style adalah CSS untuk mengatur lebar gambar (tinggi gambar akan menyesuaikan jika tidak ditentukan nilainya). Selain mengubah ukuran gambar yang ditampilkan anda juga dapat merubah pengaturan tampilan lain pada atribut ini (style).
Gambar pada folder lain
Pada sebuah project web, file gambar biasanya dipisah dengan file lainnya pada folder tersendiri yang disimpan pada satu folder utama.
Contoh
<img src="gambar/saitama.jpg" alt="Saitama" style="width:200px;"/>
Perhatikan pada atribut src, teks "gambar" menandakan bahwa file "saitama.jpg" berada pada folder bernama "gambar" dengan tidak perlu memasukan nama folder utama.
Gambar pada server lain
Anda tinggal meng-copy alamat URL gambar dan menaruh URL tersebut pada atribut src.
Contoh
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStR2OFkNt_mVNSSvHM-XACS2Q0lXq5kmwfxCZZ7-P5zXcszEZQc-5_QGwPbjn1_ark6nBz_aG8lUscXfaumWxbpmnU1WCi0oqXPgtyV9zxqkJOD7Bsds8hftJ4F27SOvB7yC6SnvDuffo/s1600/HTML_inntekno.jpg" alt="Saitama" width="200" height="200"/>
Pada contoh tersebut saya menampilkan gambar dari website lain yaitu blog ini.
Karena mengambil gambar dari sebuah website yang sudah online maka untuk menampilkan gambarnya pun anda harus online jika tidak maka gambar tidak dapat ditampilkan.
Baca juga Cara membuat link gambar.
EmoticonEmoticon