Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menampilkan Gambar pada HTML Menggunakan Tag Image

Pada awal pengembangannya, HTML hanya digunakan untuk untuk menampilkan teks sehingga membuat tampilan dari web terlihat membosankan dan tidak menarik untuk dibaca. Namun, hal tersebut tidaklah lama ketika kemampuan baru pada laman web untuk menambahkan gambar telah tersedia untuk digunakan oleh para user. Berikut ini adalah cara menambahkan gambar pada laman web.

Sebelum mempelajari materi tentang Cara Menampilkan Gambar pada HTML Menggunakan Tag Image, terlebih dahulu pelajari materi tentang: Cara Membuat Drag and Drop pada HTML, 255 Kumpulan Karakter yang Sering Digunakan pada HTML, dan Membuat Garis Menggunakan Tag HR pada HTML.

Penambahan Gambar Pada Sebuah Halaman Web

Tag "img" digunakan untuk menambahkan gambar pada laman webTag "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">

Atribut:
  • 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.

Contoh:

<!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.

Contoh:

<!DOCTYPE html>

<html>

 

<h3>

Menambahkan gif dalam website.

</h3>

 

<body>

 

<img 

src = "smiley.gif" 

alt = "smiley"

style = "width:200px; height:200px;"

>

 

</body>

 

</html>

Output:


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>


Baca Juga:

Mengatur Garis Pembatas pada Gambar: Secara default, setiap gambar memiliki garis pembatas yang mengelilinginya. Dengan menggunakan atribut border, ketebalan dari garis batas gambar dapat diubah sesuai dengan keinginan. Jika nilai ketebalan dari gambar adalah 0 maka gambar tidak memiliki garis pembatas disekitarnya.

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>


Mengatur Posisi Gambar: Secara default (otomatis), posisi dari gambar berada disisi kiri dari laman web, tetapi posisi tersebut dapat diubah ke arah tengah ataupun kanan dengan menggunakan atribut align.

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" 

align="right"

>

 

</body>

 

</html>


Penambahan Gambar Sebagai Alamat URL: Gambar yang ditambahkan pada alamat web dapat juga berguna sebagai URL yang menuju ke alamat lain. Hal ini dapat dilakukan dengan menggunakan tag "image" di dalam tag "a".

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Memasukkan gambar menggunakan tag "img".

</title>

</head>

 

<body>

 

<p>

Klik Gambar logo SMAN 8 Semarang :

</p>

 

<

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>


Tag <img> adalah elemen yang digunakan dalam HTML untuk menampilkan gambar di halaman web. Meskipun terlihat sederhana, penggunaan tag <img> memiliki beberapa kelebihan yang penting dalam pengembangan web. Mari bahas beberapa keunggulan dari penggunaan tag ini:
  • 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.

Tag <img> adalah elemen yang penting dalam menampilkan gambar di halaman web. Namun, penting untuk memperhatikan ukuran file gambar untuk mengoptimalkan kecepatan pengunduhan halaman. Selain itu, menggunakan atribut alt untuk deskripsi gambar juga penting untuk aksesibilitas web bagi pengguna yang mengandalkan teknologi pembaca layar.

Dengan pemanfaatan yang tepat, tag <img> dapat memperkaya konten dan memperkuat pesan yang disampaikan dalam halaman web, meningkatkan daya tarik visual, serta memperbaiki pengalaman pengguna secara keseluruhan.

Referensi Tambahan:

Artikel ini didedikasikan kepada: Victor Ryan Tuapattinaja, Violla Farentika, Yuni Diah Astuti, Achmad Cholis Najib, dan Adzraa Faradila Avilia Natasya Setiawan.

35 komentar untuk "Cara Menampilkan Gambar pada HTML Menggunakan Tag Image"

  1. Apa fungsi tag IMG pada html?

    BalasHapus
    Balasan
    1. Tag 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.

      Hapus
    2. Pada 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.

      Hapus
  2. Apa fungsi teks alternatif atau teks alt pada tag IMG html?

    BalasHapus
    Balasan
    1. Teks alternatif merupakan teks yang akan muncul jika gambar yang ditampilkan pada halaman website mengalami masalah pada proses menampilkannya.

      Hapus
  3. Apa fungsi atribut background pada laman html?

    BalasHapus
    Balasan
    1. Fungsi 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.

      Hapus
  4. Apa yang dimaksud dengan background color pada website?

    BalasHapus
    Balasan
    1. Properti 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.

      Hapus
  5. Apa yang dimaksud dengan bgcolor? apakah berbeda dengan background?

    BalasHapus
    Balasan
    1. Atribut 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.

      Hapus
  6. Saya 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?

    BalasHapus
    Balasan
    1. iya 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.

      Hapus
  7. Apa fungsi tag IMG pada html?

    BalasHapus
    Balasan
    1. Tag 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.

      Hapus
  8. Bagaimana cara mengatur peraataan gambar pada laman html?

    BalasHapus
    Balasan
    1. Atribuat ALIGN IMG digunakan untuk mengatur kesejajaran gambar, yang berada dalam elemen (inline). Atribut ini digunakan untuk menentukan perataan gambar sesuai dengan elemen sekitarnya.

      Hapus
  9. Apa yang dimaksud dengan SRC pada laman HTML?

    BalasHapus
    Balasan
    1. SRC 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.

      Hapus
  10. Apa yang dimaksud dengan alt teks?

    BalasHapus
    Balasan
    1. Alternatif Text (atau alt) atau tag alt adalah atribut yang digunakan pada kode html untuk mendeskripsikan tampilan dan fungsi gambar pada laman html.

      Hapus
    2. Alternatif 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.

      Hapus
  11. Alt 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.

    BalasHapus
  12. Teks 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.

    BalasHapus
  13. Bagaimana cara untuk menampilkan gambar pada laman html?

    BalasHapus
    Balasan
    1. Untuk 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.

      Hapus
  14. Kenapa gambar yang akan ditampilkan tidak muncul pada laman html yang telah dibuat?

    BalasHapus
    Balasan
    1. Terdapat 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.

      Hapus
  15. Bagaimana cara membetulkan gambar yang tidak muncul pada laman html?

    BalasHapus
    Balasan
    1. tahap 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.

      tahap 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.

      Hapus
  16. Bagaimana cara mengubah ukuran gambar pada laman html?

    BalasHapus
    Balasan
    1. Untuk 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.

      Hapus
  17. Atribut 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.

    BalasHapus
  18. Apa yang dimaksud dengan width dan height pada laman html?

    BalasHapus
    Balasan
    1. Tinggi 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

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 -