Iklan bawah header

Belajar HTML Part 9 - Menambahkan Gambar di HTML (Tag Image)

menambahkan gambar di html

Website tanpa sebuah gambar akan terlihat membosankan dan kurang menarik. Hal itu dikarenakan otak kita lebih mudah untuk menyerap informasi dengan visual dibandingkan hanya teks saja.

Selain untuk memberikan informasi dengan cara visual, gambar juga akan membuat tampilan website menjadi lebih menarik.

Oleh karena itu, gambar pada sebuah website sangatlah penting.

Pada tutotial kali ini, kita akan belajar bagaimana cara menambahkan gambar di HTML.

mari kita bahas..

Cara Menambahkan Gambar di HTML

Untuk menambahkan gambar di HTML, kita bisa menggunakan tag <img> (image). Tag ini memiliki atribut wajib, yaitu src (source) yang berisi alamat dari gambar yang akan ditampilkan. Nilai dari atribut src ini bisa berupa alamat URL maupun alamat path.

Tag <img> merupakan tag yang tidak memiliki pasangan penutup, jadi tag <img> harus ditutup hanya dengan menambahkan garis miring.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>Cara Membuat Gambar di HTML</title>
    </head>
    <body>
         <h1>Menampilkan Gambar di HTML</h1>
         <p>
             Berikut adalah contoh gambar yang ditampilkan:
         </p>
         <p>
             <img src="gambarlaut.jpg" />
         </p>
    </body>
</html>

Hasilnya:

menampilkan gambar di html

Format File Gambar untuk HTML

Tidak semua format file gambar bisa ditampilkan di halaman website. Berikut adalah daftar format gambar yang sering digunakan untuk website:

Nama FormatNama PanjangEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb Picture.webp

Atribut untuk Tag <img>

Berikut beberapa atribut yang sering digunakan pada tag <img>:

Atribut height dan width

Atribut height dan width adalah atribut yang digunakan untuk menentukan tinggi dan lebar dari gambar.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>Cara Membuat Gambar di HTML</title>
    </head>
    <body>
         <h1>Menampilkan Gambar di HTML</h1>
         <p>
             Berikut adalah contoh gambar yang ditampilkan dengan tinggi dan lebar yang berbeda:
         </p>
         <p>
             <img src="gambarlaut.jpg" width="600" height="300" />
             <img src="gambarlaut.jpg" width="400" height="200"/>
             <img src="gambarlaut.jpg" width="200" height="100"/>
         </p>
    </body>
</html>

Hasilnya:

gambar dengan atribut width dan atribut height

Atribut alt

Atribut alt digunakan untuk memberikan teks alternatif pada gambar saat gambar gagal untuk dimuat atau ditampilkan.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>Cara Membuat Gambar di HTML</title>
    </head>
    <body>
         <h1>Menampilkan Gambar di HTML</h1>
         <p>
             Berikut adalah contoh gambar yang ditampilkan saat gagal dimuat:
         </p>
         <p>
             <img src="" alt="gambar laut" />
         </p>
    </body>
</html>

Hasilnya:

gambar dengan atribut alt

Atribut style

Atribut style digunakan untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu pada gambar.

Contoh:

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title>Cara Membuat Gambar di HTML</title>
    </head>
    <body>
         <h1>Menampilkan Gambar di HTML</h1>
         <p>
             Berikut adalah contoh gambar yang ditampilkan:
         </p>
         <p>
             <img src="gambarlaut.jpg" style="width: 160px;border: 3px solid blue;" />
             <img src="gambarlaut.jpg" style="width: 160px;border-radius: 10px;" />
             <img src="gambarlaut.jpg" style="width: 160px;height: 100px;border-radius: 100%;" />
         </p>
    </body>
</html>

Hasilnya:

gambar dengan atribut style

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel