Skip to main content

HTML Dasar Part:10 Cara Menampilkan Gambar di HTML

Cara Menampilkan Gambar di HTML

Bagaimana jika sebuah website tanpa adanya gambar satupun ? Pasti akan terlihat membosankan. Pada belajar koding html kali ini, kita akan membahas cara menampilkan gambar di HTML.

Dengan adanya gambar, maka website tersebut akan lebih terlihat menarik. Karena itu, gambar sangat penting didalam website.


Cara Menambahkan Gambar di HTML

Untuk menampilkan atau menambahkan gambar di HTML. HTML sendiri menyediakan sebuah tag khusus yaitu tag <img>. Tag ini memerlukan beberapa atribut, mari kita bahas satu per satu.

Tag <img> adalah sebuah tag inline level element dan juga merupakan void element sehingga tidak memerlukan tag penutup, seperti yang pernah kita bahas tentang pengertian tag, atribut dan element HTML.

Atribut Tag <img>

Ada beberapa atribut yang terdapat dalam tag <img>, mari kita bahas satu per satu !!!

1. Atribut src

Atribut src merupakan singkatan dari source yang akan berfungsi untuk menulis alamat gambar yang ingin ditampilkan. Alamat yang dimasukkan bisa alamat absolut atau alamat relatif. Perbedaan tentang kedua alamat ini telah kita bahas pada cara membuat link html.

Untuk contohnya, kita terlebih dahulu menyiapkan sebuah gambar yang ingin kita tampilkan. Dan gambar tersebut harus berada dalam satu folder dengan source code html. Gambar bisa berupa PNG, GIF ataupun JPG.

Disini saya akan menggunakan gambar kucing.jpg. Buka text editor, lalu ketikkan kode dibawah ini, kemudian simpan dengan nama gambar.html.

Contoh cara menampilkan gambar di html


<!DOCTYPE html>
<html>
<head>
   <title>Cara Menampilkan Gambar</title>
</head>
<body>
   <h1>Belajar Membuat Gambar HTML</h1>
   <img src="kucing.jpg" />
</body>
</html>
 

Ingat untuk membuat gambar harus satu folder dengan source code html seperti ini :

Maka hasil kode yang telah ditulis tadi akan seperti ini :

Seringkali terjadi kesalahan untuk menampilkan gambar bagi yang baru belajar koding HTML, karena salah penulisan aturannya yang src, karena pengetikannya cepat mungkin jadi scr yang tertulis. Jadi hati-hati terhadap ini yaaa 😄

2. Atribut Alt

Selain atribut src, tag <img> juga memiliki atribut alt yang juga tidak kalah pentingnya.

Atribut alt merupakan singkatan dari alternate text yang berfungsi untuk memberikan teks alternatif atau keterangan pada gambar, ketika gambar tidak tampil di browser.

Contoh penggunaan atribut alt :


<!DOCTYPE html>
<html>
<head>
   <title>Cara Menampilkan Gambar</title>
</head>
<body>
   <h1>Belajar Membuat Gambar HTML</h1>
   <p>Dibawah ini gambar kucing :</p>
   <img src=" " alt="Kucingku yang manis" />
</body>
</html>
 

Hasilnya :

altribut alt

Nah, lihat hasilnya, karena gambar tidak tampil, karena kita tidak mengisi dibagian src maka yang akan ditampilkan adalah bagian atribut alt.

3. Atribut Width dan Height

Yapzz, kita pasti sudah tahu fungsi atribut ini dari terjemahan nya.

Atribut width berfungsi untuk mengatur lebar gambar dan atribut height berfungsi untuk mengatur tinggi gambar.

Contoh penggunaan atribut width dan height


<!DOCTYPE html>
<html>
<head>
   <title>Cara Menampilkan Gambar</title>
</head>
<body>
   <h1>Belajar Membuat Gambar HTML</h1>
   <p>Dibawah ini gambar kucing :</p>
   <img src="kucing.jpg" alt="Kucingku yang manis" height="200" width="300" />
</body>
</html>
 

Hasilnya :

atribut width dan height

Untuk mengubah ukuran gambar besar atau kecil dan mempertahankan kualitas gambar, kita hanya memerlukan salah satu atribut saja. Baik itu width saja atau height yang artinya tidak dapat menggunakan dua-duanya, karena akan mempengaruhi kualitas gambar.

Contohnya, apabila ingin mengatur ukuran atribut width sebesar 400px dan tidak mengatur ukuran atribut height. Maka browser sendiri akan menampilkan gambar dengan lebar 400px, dan untuk ukuran tinggi akan diatur secara otomatis untuk mempertahankan kualitas gambar.

4. Atribut Title

Atribut title pada gambar ini, bersifat opsional yang berarti: boleh ditulis atau tidak ditulis.

Atribut ini berfungsi untuk menampilkan keterangan dari gambar pada saat kursor mouse berada digambar atau biasanya disebut efek mouse hover.

Contoh penggunaan atribut title


<!DOCTYPE html>
<html>
<head>
   <title>Cara Menampilkan Gambar</title>
</head>
<body>
   <h1>Belajar Membuat Gambar HTML</h1>
   <p>Dibawah ini gambar kucing :</p>
   <img src="kucing.jpg" title="Kucingku yang manis" />
</body>
</html>
 

Hasilnya :

atribut title

Nah, sekarang udah terlihat atribut title nya berfungsi dimana yaitu ketika mouse berada didalam gambar.


Masih banyak lagi atribut tag <img>, nanti kita bahas pada saat masuk belajar koding HTML Lanjutan


Intinya, kita harus mengingat tag untuk menampilkan gambar ini adalah tag <img>, selanjutnya kita akan belajar cara membuat tabel di HTML untuk menginput data, baik itu dari database atau sumber lainnya.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar