Cara Menampilkan Gambar pada HTML Menggunakan Tag Image
Penambahan Gambar Pada Sebuah Halaman Web
Tag "img" digunakan untuk menambahkan gambar pada laman web. Tag "img" adalah sebuah tag kosong, dimana tag ini baru bisa digunakan jika didalamnya terdapat atribut dan juga tag ini tidak memiliki closing tag.Sintak:
<img src="url" alt="some_text">
- src: atribut ini digunakan untuk penentuan alamat sumber gambar atau image. Setiap gambar memiliki satu laman sumber atribut yang akan memberitahukan browser posisi dimana dapat menemukan lokasi dari gambar tersebut untuk ditampilkan pada laman web. URL dari image menyediakan titik penentuan lokasi gambar tersebut disimpan.
- alt: jika gambar yang ingin ditampilkan tidak ditemukan, maka atribut alt akan mengeksekusi desripsi alternatif sebagai pengganti dari gambar yang tidak dapat ditampilkan tersebut. Nilai dari atribut alt adalah berupa teks yang didefinisikan oleh user.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar menggunakan tag "img".
</title>
</head>
<body>
<p>
Memasukkan gambar menggunakan tag "img":
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"
alt="logo Penelitian.id"
>
</body>
</html>
Pengaturan Lebar dan Panjang dari Gambar atau Image: lebar dan panjang dari atribut digunakan untuk menyesuaikan ukuran dari gambar terhadap laman web. Nilai atribut secara default dinyatakan dalam ukuran pixel.
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar mengunakan tag "img".
</title>
</head>
<body>
<p>
Memasukkan gambar mengunakan tag "img":
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"
alt="logo Penelitian.id"
width="300"
height="300"
>
</body>
</html>
Penambahan Gambar Animasi atau GIF: Gambar animasi dinyatakan dalam format atau ekstensi file .gif dan dapat ditambahkan menggunakan tag "img" ke laman html.
<!DOCTYPE html>
<html>
<h3>
Menambahkan gif dalam website.
</h3>
<body>
<img
src = "smiley.gif"
alt = "smiley"
style = "width:200px; height:200px;"
>
</body>
</html>
Penambahan Judul pada Gambar: Bersamaan dengan gambar yang ditampilkan, judul atau title juga dapat ditambahkan pada gambar untuk menyediakan informasi lebih lanjut yang berhubungan dengan gambar yang telah ditambahkan pada laman web. Untuk penambahan judul, maka atribut title harus digunakan pada tag img.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar menggunakan tag "img".
</title>
</head>
<body>
<p>
Memasukkan gambar menggunakan tag "img":
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"
alt="logo Penelitian.id"
width="200"
height="200"
title="logo Penelitian.id"
>
</body>
</html>
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar menggunakan tag "img".
</title>
</head>
<body>
<p>
Memasukkan gambar menggunakan tag "img":
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"
alt="logo Penelitian.id"
width="200"
height="200"
border="5"
>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar menggunakan tag "img".
</title>
</head>
<body>
<p>
Memasukkan gambar menggunakan tag "img":
</p>
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"
alt="logo Penelitian.id"
align="right"
>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>
Memasukkan gambar menggunakan tag "img".
</title>
</head>
<body>
<p>
Klik Gambar logo SMAN 8 Semarang :
</p>
<a
href="https://www.penelitian.id/">
<img
src=
"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg">
</a>
</body>
</html>
Setelah gambar tujuh diklik maka laman web akan menuju ke alamat link www.penelitian.id.
Menggunakan Gambar Sebagai Backround dari Web: gambar dapat juga dipergunakan sebagai background dalam laman web seperti diperlihatkan pada contoh berikut:
Contoh:
<html>
<body
style="background-image:url
(
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg'
)"
>
<h2>
Gambar sebagai Background
</h2>
<p>
Pada contoh ini telah ditentukan background untuk halaman web menggunakan gambar "logo SMAN 8 Semarang".
</p>
</body>
</html>
- Menambahkan Konten Visual: Penggunaan tag <img> memungkinkan pengembang web untuk menambahkan konten visual ke halaman web. Hal ini penting karena gambar atau ilustrasi dapat meningkatkan daya tarik halaman, menarik perhatian pengguna, dan membuat halaman web lebih menarik secara visual.
- Meningkatkan Pengalaman Pengguna: Dengan menampilkan gambar, tag <img> dapat meningkatkan pengalaman pengguna secara keseluruhan. Konten visual seperti ilustrasi, foto produk, atau grafik dapat membantu pengguna memahami informasi dengan lebih baik atau menarik minat.
- Peningkatan Keterbacaan: Gambar sering digunakan untuk memperjelas atau memperkaya teks. Penggunaan tag <img> membantu dalam mengkomunikasikan ide atau informasi dengan cara visual, yang dapat meningkatkan keterbacaan dan pemahaman konten oleh pengguna.
- SEO (Search Engine Optimization): Penggunaan tag <img> memungkinkan pengembang untuk menyertakan atribut alt yang menjelaskan konten gambar. Ini membantu mesin pencari memahami dan mengindeks konten gambar, meningkatkan kemungkinan gambar muncul dalam hasil pencarian dan meningkatkan SEO halaman web.
- Responsivitas dan Skalabilitas: Tag <img> memungkinkan gambar untuk diatur agar responsif terhadap berbagai ukuran layar atau perangkat. Ini dapat dilakukan dengan menggunakan atribut srcset atau teknik lainnya untuk menyajikan gambar yang sesuai dengan resolusi layar yang berbeda.
- Pemformatan yang Mudah: Dengan menggunakan tag <img>, pemformatan gambar menjadi lebih mudah. Pengembang dapat mengatur ukuran, posisi, dan tata letak gambar dengan mudah menggunakan atribut CSS atau properti inline dalam tag <img>.
- Keterjangkauan dan Kompatibilitas: Pemakaian tag <img> pada HTML memiliki dukungan yang luas pada sebagian besar browser dan perangkat. Ini membuatnya menjadi cara yang andal untuk menampilkan gambar tanpa khawatir tentang kompatibilitas lintas platform.
35 komentar untuk "Cara Menampilkan Gambar pada HTML Menggunakan Tag Image"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -
Apa fungsi tag IMG pada html?
BalasHapusTag IMG pada HTML digunakan untuk menyematkan gambar pada halaman website atau situs. Gambar tidak secara teknik dimasukkan ke dalam halaman website, melainkan ditautkan ke halaman website tersebut. Tag IMG membuat ruang penyimpanan yang digunakan sebagai referensi yang menentukan jalur ke lokasi gambar, dan juga menentukan atribut lainnya seperti alt dan judul gambar.
HapusPada HTML, pengembang dapat menyematkan gambar ke halaman website menggunakan tag IMG. Dengan menggunakan tag tersebut, maka akan diberikan url yang dapat terhubungan dengan halaman website. Pengembang juga dapat melakukan perancangan gambar seperti panjang gambar, lebar gambar, dan teks alternatif.
HapusApa fungsi teks alternatif atau teks alt pada tag IMG html?
BalasHapusTeks alternatif merupakan teks yang akan muncul jika gambar yang ditampilkan pada halaman website mengalami masalah pada proses menampilkannya.
HapusApa fungsi atribut background pada laman html?
BalasHapusFungsi atribut background pada laman html juga dapat digunakan untuk mengontrol latar belakang elemen pada laman html, khususnya badan (BODY) halaman dan latar belakang tabel. Perancang web dapat juga dapat menggunakan gambar untuk mengatur latar belakang halaman atau tabel HTML yang dibuat.
HapusApa yang dimaksud dengan background color pada website?
BalasHapusProperti background color pada website atau laman html adalah properti dari atribut background yang digunakan untuk mengatur warna latar belakang sebuah elemen. Latar belakang elemen sendiri adalah ukuran total suatu elemen pada laman html, termasuk juga padding dan batas atau border.
HapusApa yang dimaksud dengan bgcolor? apakah berbeda dengan background?
BalasHapusAtribut bgcolor HTML adalah atribut yang digunakan untuk mengatur warna latar belakang elemen HTML. BGCOLOr adalah salah satu atribut yang sudah tidak digunakan lagi, dan digantikan penggunaannya dengan CSS.
HapusSaya telah menyelesaikan latihan 5, dan gambar html tersebut telah muncul pada bagian layar background, namun yang yang muncul malah double, apakah praktik yang telah saya lakukan benar?
BalasHapusiya sudah benar, prihal gambar background yang muncul double atau lebih dari satu namun dengan bentuk gambar yang sama, hal ini terjadi karena ukuran gambar yang digunakan untuk menutupi latar belakang atau background terlalu kecil sehingga web browser membuatnya double, begitupun sebaliknya jika ukuran gambar terlalu besar, maka sebagian dari gambar yang ditampilkan akan terpotong.
HapusApa fungsi tag IMG pada html?
BalasHapusTag IMG digunakan untuk menyematkan gambar pada laman html. Gambar tidak secara teknis dimasukkan ke dalam halaman web, melainkan gambar tersebut ditautkan ke laman web. Tag IMG membuat ruang yang bisa mempertahankan gambar sehingga muncul dalam referensi laman.
HapusBagaimana cara mengatur peraataan gambar pada laman html?
BalasHapusAtribuat ALIGN IMG digunakan untuk mengatur kesejajaran gambar, yang berada dalam elemen (inline). Atribut ini digunakan untuk menentukan perataan gambar sesuai dengan elemen sekitarnya.
HapusApa yang dimaksud dengan SRC pada laman HTML?
BalasHapusSRC adalah kepanjangan dari SOURCE atau sumber daya atau lokasi atau alamat dari sebuah gambar (namun juga bisa selain itu). Tujuan penggunaan atribut SRT HTML adalah untuk Menentukan URL file atau sumber daya eksternal yang akan digunakan sebagai referensi pada laman HTML. Elemen yang mendukung penggunaan atribut SRC adalah FRAME, IFRAME, IMG, INPUT dan SCRIPT.
HapusApa yang dimaksud dengan alt teks?
BalasHapusAlternatif Text (atau alt) atau tag alt adalah atribut yang digunakan pada kode html untuk mendeskripsikan tampilan dan fungsi gambar pada laman html.
HapusAlternatif Text atau disebut juga dengan "tag alt", adalah salinan tulisan yang muncul sebagai pengganti gambar pada laman web jika gambar gaga dimuat pada layar pengguna. Teks ini membantu alat pembaca layar untuk mendeskripsikan gambar kepada pembaca dengan gangguan penglihatan dan memungkinkan mesin telusur untuk dapat merayapi dan memberi peringkat pada situs tersebut dengan lebih baik.
HapusAlt tag dapat muncul pada layar pengguna jika gambar tidak dapat ditampilkan. Atribut alt memberikan informasi alternatif selain gambar jika pengguna tidak dapat melihat gambar yang akan ditampilkan pada layar dengan suatu alasan tertentu seperti kesalahan kode src, atau koneksi internet lambat.
BalasHapusTeks alt adalah kata atau frasa yang dapat disisipkan sebagai atribut dalam laman html untuk memberi tahu user tentang sifat atau karakteristik dari konten gambar. Teks alt muncul pada kotak kosong yang biasanya berisi gambar.
BalasHapusBagaimana cara untuk menampilkan gambar pada laman html?
BalasHapusUntuk menampilkan gambar maka perancang dapat menggunakan tag IMG dengan atribut SRC seperti yang terdapat pada penggunaan atribut Anchor. Ketika akan menampilkan gambar sangat penting untuk melakukan pengaturan lebar dan tinggi gambar pada awal proses untuk menghindari masalah tata letak dan efek visual yang saling bertabrakan.
HapusKenapa gambar yang akan ditampilkan tidak muncul pada laman html yang telah dibuat?
BalasHapusTerdapat beberapa kemungkinan kenapa gambar tidak muncul pada laman html. Pertama, bisa jadi gambar yang dialamatkan pada laman html tidak terletak pada lokasi yang sama dengan yang ditentukan dalam tag IMG. kedua, File gambar rusak atau corrupt. File gambar tidak pernah benar-benar diunggah pada laman tersebut.
HapusBagaimana cara membetulkan gambar yang tidak muncul pada laman html?
BalasHapustahap 1: Coba lakukan penjelajahan pada browser dengan mode pribadi. Pelajari cara menggunakan mode pribadi pada tiap-tiap browser yang digunakan seperti Chrome, Internet Explorer, Firefox, Safari, dan lain sebagainya.
Hapustahap 2: Hapus chache & cookies pada browser yang digunakan. Pelajar cara menghapus chache dan cookies pada tiap-tiap browser yang digunakan seperti Chrome, Internet Explorer, Firefox, Safari, dan lain sebagainya.
tahap 3: Matikan toolbars dan extensi tambahan yang terdapat pada browser.
tahap 4: Aktifkan JavaScript.
Bagaimana cara mengubah ukuran gambar pada laman html?
BalasHapusUntuk dapat melakukan pengubahan ukuran pada tag IMG maka dapat dilakukan dengan menggunakan atribut height untuk mengatur tinggi ukuran gambar dan width untuk mengatur ukuran lebar gambar.
HapusAtribut width digunakan untuk menentukan ukuran lebar pada gambar dalam satuan pixel. Sedangkan height adalah atribut yang digunakan untuk menentukan ukuran tinggi pada gambar dalam satuan pixel. Jika ukuran tinggi dan lebar dari gambar telah diatur, maka ukuran gambar yang akan ditampilkan akan sesuai dengan ukuran yang telah diatur tersebut. Namun, jika tidak digunakan atribut ukuran lebar dan tinggi, maka browser tidak dapat mengetahui ukuran lebar dari gambar yang akan ditampilkan dan tidak dapat menyediakan ruang yang sesuai untuk ukuran gambar tersebut, atau gambar yang akan ditampilkan adalah ukuran sebenarnya dari gambar yang telah ditautkan pada laman html.
BalasHapusApa yang dimaksud dengan width dan height pada laman html?
BalasHapusTinggi dan lebar adalah ukuran yang memungkinkan untuk menunjukkan luas pada benda geometris. Tinggi dan lebar dalam hal ini adalah ukuran dimensi layar yang ditampilkan pada layar komputer dalam satuan pixel.
Hapus