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-

Terkini Lainnya

Apa Itu Komunikasi Bencana?

Apa Itu Komunikasi Bencana?

Skola
Pengertian Pasar Global dan Ciri-cirinya

Pengertian Pasar Global dan Ciri-cirinya

Skola
Instrumen Perlindungan Hak Asasi PBB

Instrumen Perlindungan Hak Asasi PBB

Skola
Ciri-ciri Teks Argumentasi, Apa Saja?

Ciri-ciri Teks Argumentasi, Apa Saja?

Skola
Mengenal Cerita Fiksi dan Nonfiksi

Mengenal Cerita Fiksi dan Nonfiksi

Skola
Kalimat Majemuk Setara: Pengertian, Ciri-ciri, dan Contohnya

Kalimat Majemuk Setara: Pengertian, Ciri-ciri, dan Contohnya

Skola
Bedanya Konjungsi Koordinatif dan Subordinatif

Bedanya Konjungsi Koordinatif dan Subordinatif

Skola
Peribahasa: Pengertian, Ciri-ciri, Fungsi, dan Contohnya

Peribahasa: Pengertian, Ciri-ciri, Fungsi, dan Contohnya

Skola
Mengenal 3 Struktur Teks Deskripsi

Mengenal 3 Struktur Teks Deskripsi

Skola
Rumus Luas Jajaran Genjang beserta Contoh Soal dan Jawabannya

Rumus Luas Jajaran Genjang beserta Contoh Soal dan Jawabannya

Skola
Jawaban dari Soal 'Luas Alas Suatu Kubus 25 Cm^2'

Jawaban dari Soal "Luas Alas Suatu Kubus 25 Cm^2"

Skola
Apa Itu Komunikasi CSR?

Apa Itu Komunikasi CSR?

Skola
Bagaimana Cara Memahami Isi Teks Nonfiksi?

Bagaimana Cara Memahami Isi Teks Nonfiksi?

Skola
Jaringan Nirkabel (Wireless): Pengertian dan Fungsinya

Jaringan Nirkabel (Wireless): Pengertian dan Fungsinya

Skola
Contoh Fenomena Antroposfer, Apa Saja?

Contoh Fenomena Antroposfer, Apa Saja?

Skola
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