Baca :
Pengenalan dasar programming web
Mengenal lebih dalam struktur body HTML
Membuat paragraf dan heading pada halaman HTML
Cara mengatur font, ukuran dan perataan teks pada halaman HTML
Dalam dokumen html kita dapat menampilkan gambar, untuk menampilkan gambar di dokumen html biasanya menggunakan tag <img>. Berikut ini adalah contoh dari penggunaan tag <img> :
<!DOCTYPE html>
<html>
<head>
<title>Belajar menampilkan gambar pada halaman HTML</title>
</head>
<body>
<img src="contohgambar.png" height="50%" width="50%"
alt="Ini gambar ">
</body>
</html>
Atribut src dalam tag <img>
Atribut src adalah singkatan dari source, source adalah alamat dari gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan tentang alamat relatif dan absolute akan saya bahas nanti pada artikel 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. Ekstensi dari gambar dapat berupa JPEG, PNG, maupun GIF Pada contoh dibawah ini saya menggunakan sebuah gambar clocarius life.png yang berada dalam satu folder dengan halaman HTML. Savelah nama file html tersebut, Anda dapat memberikan nama apa saja, disini saya menyimpan file ini sebagai belajar html dasar.html.
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menampilkan Gambar Pada Halaman HTML</title>
</head>
<body>
<img src="clocarius life.png">
</body>
</html>
Hasil :
Atribut alt dalam tag <img>
Selain atribut src, 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. Untuk contoh penggunaan atribut alt pada tag <img> sudah saya siapkan source code nya seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menampilkan Gambar Pada Halaman HTML</title>
</head>
<body>
<img alt="clocarius life logo" src="clocarius life.png">
</body>
</html>
Atribut weight dan height dalam tag <img>
Atribut yang dapat membuat Anda mengubah-ubah besar dari gambar yang ditampilkan, yaitu width dan height. Akan tetapi Anda harus berhati-hati dalam menggunakan kedua atribut ini secara bersamaan, karena jika ukurannya tidak pas maka gambar Anda menjadi tidak proposional. Contoh penggunaan atribut width dan height pada tag <img>:
Source Code :
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menampilkan Gambar Pada Halaman HTML</title>
</head>
<body>
<img alt="clocarius life logo" src="clocarius life.png" height="20%" width="20%"
alt=" Ini gambar ">
</body>
</html>
EmoticonEmoticon