Cara Menambahkan Gambar di HTML
"Silahkan kunjungi postingan Cara Menambahkan Gambar di HTML untuk membaca artikel selengkapnya dengan klik link di atas."
2 min read
Menambahkan gambar di HTML sebenarnya mudah saja. Untuk menyisipkan gambar atau memasukkan gambar, yang dibutuhkan adalah gambar yang ingin dimasukkan. Gambar tersebut adalah gambar yang sudah ada di internet atau server dan memiliki URL untuk dipanggil. |
| Cara Menambahkan Gambar di HTML |
Dalam menambahkan gambar di HTML, kita menggunakan tag IMG dengan atribut SRC yang berisi nilai URL atau alamat dari gambar tersebut. Agar lebih mudah, mari kita lihat cara menambahkan gambar di HTML ke dalam website.
Menambahkan Gambar di HTML
Untuk menyisipkan gambar ke dalam website menggunakan HTML, maka kita dapat menggunakan tag img. Berikut cara menyisipkan gambar ke dalam halaman website.
Buka notepad dan copy dan paste kode di bawah ini. Save as dengan nama gambar.html dan type files all files. Kemudian buka file gambar.html dengan browser Google Chorme.
<html>
<head>
<title>Menyisipkan gambar</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<p>Menyisipkan gambar</p>
<img src="https://www.simentik.eu.org//gambar.jpg" />
<p>Menyisipkan gambar dengan atribut</a>
<img src="https://www.simentik.eu.org//gambar.jpg" width="90px" height="200px" />
<p>Membuat link tujuan dari gambar</p>
<a target="_blank" href="https://www.simentik.eu.org"><img src="https://www.simentik.eu.org//gambar.jpg" />
</body>
</html>
Berikut beberapa atribut dan value untuk tag img.
- Atribut src dengan value link gambar yang akan ditampilkan.
- Atribut align untuk menentukan posisi gambar dengan value left, center, dan right.
- Atribut width dan height untuk ukuran gambar dengan value bisa px ataupun %.
- Atribut border untuk tebal garis tepi gambar.
Agar gambar tampil, sebaiknya URL gambar di ganti dengan nama file gambar dalam satu folder yang sama. Karena dalam contoh di atas, kita tidak terhubung ke internet. Dan ingat nama file harus sesuai dengan format file, seperti JPG atau PNG.
<html>
<head>
<title>Menyisipkan gambar</title>
</head>
<body>
<p>Belajar HTML Pemula</p>
<a target="_blank" href="https://www.simentik.eu.org"><img src="gambarku.jpg" />
</body>
</html>
Gambarku.jpg merupakan nama file gambar yang akan ditampilkan di dokumen HTML nanti ketika di buka di browser Google Chorme. Dan agar gambar bisa tampil, letaknya harus berada dalam 1 folder dengan file HTML yang kita buat tersebut.
Untuk Blogger yang menggunakan CMS, pasti tidak akan repot menambahkan gambar ke blog karena semua sudah ada tombolnya. Berbeda dengan website yang dibangun sendiri, semuanya harus dikerjakan satu per satu.
Demikianlah cara menambahkan gambar di HTML. Semoga bermanfaat and see you next time