Baca berita tanpa iklan. Gabung Kompas.com+
Salin Artikel

Cara Memasukkan Gambar yang Benar di HTML (Tag Gambar)

KOMPAS.com- HTML atau Hyper Text Markup Language adalah sebuah bahasa pemrograman terstruktur yang dikembangkan untuk membuat halaman website yang dapat diakses atau ditampilkan menggunakan Web Browser.

Sebagai bahasa markup, HTML membutuhkan sebuah fungsi atau tanda untuk memberi tahu Web Browser apa yang perlu atau tidak perlu dilakukan.

Tanda itu disebut dengan "Tag". Tag memiliki ciri-ciri ditulis di dalam "<....>".

Penulisan tag pada HTML

Dilansir dari Buku Sakti Pemrograman Web (2017) oleh Didik Setiawan, kebanyakan tag dalam HTML ditulis secara berpasangan, yaitu tag pembuka dan penutup yang biasanya memiliki tanda "/" di dalam "<....>".

Contohnya:

<html>.......</html>

Tidak hanya itu, tag juga dapat berisi perintah memasukkan atau menambah gambar pada HTML.

Cara menambah gambar

Selanjutnya adalah cara memasukkan gambar pada HTML.

Tag yang digunakan di sini ialah tag "<img>".

Di dalam tag ini dasarnya memerlukan sebuah atribut "src" atau bisa dianggap sebagai source, yaitu sumber yang ingin ditampilkan di halaman.

File gambar dapat berupa JPG, PNG dan yang lain selama masih berwujud sebuah gambar.

Cara penggunaannya, pastika file gambar atau foto berada di folder yang sama dengan file HTML.

Kode pembuatan:

<!DOCTYPE html>
<html>
<head>
 <title>Title dari Head</title>
</head>
<body>
<header>
Isi header
</header>
<img src = "(nama file)">
<footer> Isi footer </footer>
</body>
</html>

Cara mengatur tampilan gambar dalam HTML

Dilansir dari Buku Ajar Pemrograman Web (2022) oleh Sepriano, pada tutorial HTML dasar tentang gambar, kita telah mempelajari cara memasukkan gambar ke dalam HTML.

Dalam tutorial HTML, lanjutan ini kita akan membahas 2 buah atribut yang sering digunakan di dalam mengatur tampilan gambar HTML, yaitu atribut align dan atribut border.

Atribut align dapat diisi dengan beberapa nilai, yakni bottom, left, middle, right, dan top.

Sedangkan atribut border digunakan untuk menambahkan garis tepi (border) ke dalam gambar.

Nilai dari atribut ini adalah angka yang berisi ukuran lebar garis tepi dalam satuan pixel.

Contoh: border="5"

Itulah penjelasan mengenai cara memasukkan atau menambah gambar (tag gambar) pada HTML, beserta atribut gambar.

https://www.kompas.com/skola/read/2023/08/08/210000869/cara-memasukkan-gambar-yang-benar-di-html-tag-gambar-

Baca berita tanpa iklan. Gabung Kompas.com+
Baca berita tanpa iklan. Gabung Kompas.com+
Baca berita tanpa iklan. Gabung Kompas.com+
Close Ads
Bagikan artikel ini melalui
Oke