Cara Menambahkan Gambar di HTML – Tag Image

Belajar HTML Dasar Tag image

Selain teks, link, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :

  • GIF (Grafical Interchange Format) (.gif)
  • JPEG (Joint Photographic Expert Image) (.jpg)
  • PNG( Portable Network Graphic) (.png)
  • BMP (Bitmap) (.bmp)

Atribut src dalam tag <img>

Atribut src diisi dengan alamat yang menunjuk pada sumber file gambar, bisa relatif maupun absolute. Penggunaan Absolute path, biasanya gambar diletakkan pada folder yang
sama dengan halaman web tersebut, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website.

Contoh src image

<img src=”https://phpdanmysql.com/image/logo.png”>
<img src=”logo.png”>
Penggunaan relative path, yaitu file gambar disimpan pada folder yang terpisah dengan folder halaman webnya
<img src=”/image/logo.png”>
Penggunaan gambar dapat diletakkan dibagian mana saja di halaman web, yang harus dilakukan hanya memanggil tag <IMG> dimana gambar tersebut akan tampilkan.

Contoh html image

<!DOCTYPE html>
<html>
<head>
<title>Contoh Tag Image</title>
</head>
<body>
<h1>Tag Gambar</h1>
<img src="https://phpdanmysql.com/wp-content/uploads/2018/06/logo.png"/>
</body>
</html>

Atribut alt dalam tag <img>

Atribut alt digunakan untuk keterangan dari gambar jika gambar tersebut gagal ditampilkan oleh web browser.

<!DOCTYPE html>
<html>
<head>
<title>Tag Image</title>
</head>
<body>
<h1>Belajar Tag Alt</h1>
<img alt="gambar" src="https://phpdanmysql.com/wp-content/uploads/2018/07/menambah-gambar-html.jpg"/>
</body>
</html>

Atribut width dan height dalam tag <img>

Kita dapat mengatur ukuran gambar sesuai yang kita ingin dengan menggunakan atribut width dan height

<html>
<head>
<title>Tag Image</title>
</head>
<body>
<h1>Belajar Tag Alt</h1>
<img alt="gambar" src="https://phpdanmysql.com/wp-content/uploads/2018/07/menambah-gambar-html.jpg" height="200" width="100"/>
</body>
</html>

Cukup mudah bukan untuk menampilkan gambar dalam halaman HTML. sebenarnya dengan tampilan gambar bisa saja kita percantik dengan css, namun karena panduan ini masih belajar html maka dilain waktu kita akan bahas tutorial dengan cssnya.
setelah anda mengerti tentang menambah gambar kedalam html, jangan lupa untuk belajar Tutorial html dasar selanjutnya membuat table dengan html dengan tag table

Get real time updates directly on you device, subscribe now.

Ingin Berkomentar?

×
Lewat ke baris perkakas