Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Menampilkan Gambar HTML Menggunakan Tag IMG

Dipublikasikan Oleh: elfanmauludi 6 komentar
Pada awal pengembangannya website hanya terdiri dari kumpulan-kumpulan teks, yang membuat tampilan dari website tersebut terlihat membosankan dan tidak menarik. Kemudian, setelah pengembangan lebih lanjut maka html sekarang dapat menampilkan atau menautkan gambar pada halaman website.


Sebelum memahami lebih dalam materi tentang Menampilkan Gambar HTML Menggunakan Tag IMG, terlebih dahulu pelajari materi tentang: Memiringkan Huruf pada HTML Menggunakan Tag Italic Style, Penggunaan Tag HTML dan Fungsinya, dan Mengatur Heading HTML Menggunakan Tag Hgroup.

Penambahan gambar pada website: tag IMG digunakan untuk menambahkan gambar pada website. Tag img merupakan empty tag atau tag kosong yang hanya terdiri dari atribut dan tidak memiliki tag menutup atau closing tag.

Sintak: <img src="url" alt="some_text">

Atribut:
satu, src: merupakan singkatan dari source yang memberitahukan browser posisi untuk menemukan image untuk ditampilkan pada dokumen html. URL dari image menyediakan titik lokasi dimana gambar tersebut disimpan.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Menambahkan 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/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

 

alt="BonsforBons logo">

</body>

 

</html>


dua, alt: Jika image tidak bisa ditampilkan pada halaman website, maka atribut alt akan bertindak sebagai deskripsi alternatif untuk gambar tersebut. Nilai dari atribut alt didefinsikan sebagai teks.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Alt

</title>

</head>

 

<body>

<p>

Menambahkan gambar menggunakan tag img

</p>

 

<img 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Yang jaghoo yang loghoo">

</body>

 

</html>


tiga, Pengaturan width dan height pada image: Atribut width dan height digunakan untuk menentukan panjang dan lebar dari image. Nilai atribut dari kedua atribut tersebut ditentukan dalam satu pixel secara default.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Pengaturan width dan height

</title>

</head>

 

<body>

<p>

Menambahkan gambar menggunakan tag IMG

</p>

 

<img 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="makan nasi kucing" 

width="300" 

height="300">

</body>

 

</html>


empat, Penambahan title pada image: Bersamaan dengan image yang ditampilkan pada website, juga bisa ditambahkan judul atau title pada gambar tersebut yang dapat menyediakan informasi lebih jauh yang berkaitan dengan gambar yang ditampilkan. Untuk dapat menambahkan judul, maka digunakan atribut title pada image.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

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/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Elfan Mauludi"

width="200"

height="200"

title="Logo Elfan Mauludi">

</body>

 

</html>


lima, Pengaturan border image: Secara default, setiap image memiliki border yang mengelilinginya. Dengan menggunakan atribut border, maka ketebalan dari border gambar dapat diubah sesuai kemapuan dari user. Ketebalan dengan nilai 0 berarti tidak terdapat border apapun yang mengelilingi gambar tersebut.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Pengaturan gambar border

</title>

</head>

 

<body>

<p>

Menambahkan gambar menggunakan tag IMG

</p>

 

<img 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Elfan"

width="200"

height="200"

border="5">

</body>

 

</html>


enam, Perataan image: Secara default, image memiliki nilai perataan pada posisi kiri dari halaman website, tetapi posisinya dapat diubah pada posisi tengah ataupun kanan dengan menggunakan atribut align.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Perataan Gambar

</title>

</head>

 

<body>

<p>

Penambahan gambar menggunakan tag IMG

</p>

 

<img 

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Blog"

align="right">

</body>

 

</html>


tujuh, Menambahkan image sebagai link: image juga dapat berfungsi sebagai link jika ditambahkan sebuah URL pada image tersebut. Hal tersebut dapat dilakukan dengan menggukana tag a pada tag img.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Penambahan gambar sebagai link

</title>

</head>

 

<body>

<p>

Penambahan gambar menggunakan tag IMG

</p>

 

<a 

href="https://elfanmauludi-tik.blogspot.com/">

 

<img 

src=

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Blog">

 

</a>

 

</body>

 

</html>


delapan, Penambahan gambar dengan animasi: gambar animasi dengan format .gif juga dapat ditambahkan pada tag img.

Contoh:

<!DOCTYPE html>

<html>

 

<h3>

Penambahan file gif

</h3>

 

<body>

<img 

src="smiley.gif"

alt="smiley"

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

</body>

 

</html>


sembilan, Menggunakan image sebagai background: image dapat digunakan sebagai background pada website. Untuk melakukan hal tersebut maka digunakan properti image-background pada style CSS.

Contoh:

<!DOCTYPE html>

<html>

 

<body 

style="background-image:url

('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuMOv86EzJB-YO3vIoHkM88nYRMr_T11MNPQLkIjm77HNXqyLy_lSHDI9qWqOr1Ep6l1YWVIZpiAeHbmmiehKZ9fICM-IRgJK7ExOspK1CM28fyntRxBTEsaosGixKTp0zEHthBmdTrVo/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg')">

 

<h2>

Gambar sebagai Background

</h2>

 

<p>

Pada contoh ini ditentukan background untuk webpage menggunakan image. 

</p>

</body>

 

</html>



Tag dalam HTML yang digunakan untuk menampilkan gambar adalah elemen penting yang sering dijumpai dalam pengembangan situs web. Gambar memiliki peran yang sangat signifikan dalam memperindah tampilan dan memberikan informasi visual yang lebih jelas kepada pengguna. Dalam struktur HTML, gambar ditampilkan menggunakan sebuah elemen khusus yang berfungsi untuk menyisipkan berkas gambar ke dalam halaman web.

Untuk memahami lebih jauh mengenai cara kerja elemen gambar dalam HTML, perlu dipahami bahwa setiap elemen pada dokumen HTML memiliki peran dan fungsi tersendiri. Dalam hal ini, tag yang digunakan untuk menampilkan gambar memiliki atribut-atribut tertentu yang harus disertakan agar gambar dapat muncul sesuai dengan yang diinginkan. Salah satu atribut yang wajib ada adalah lokasi atau alamat berkas gambar yang ingin ditampilkan. Alamat tersebut bisa berupa alamat lokal atau alamat yang merujuk pada sumber eksternal, misalnya alamat gambar yang diambil dari internet.

Penentuan ukuran gambar juga menjadi bagian yang tidak kalah penting. Ukuran gambar dapat disesuaikan dengan menggunakan atribut khusus yang disertakan dalam tag gambar. Hal ini memudahkan pengembang dalam menyesuaikan gambar dengan tata letak halaman yang telah dirancang. Gambar bisa diperbesar atau diperkecil sesuai dengan kebutuhan, sehingga tidak mengganggu desain secara keseluruhan.

Selain ukuran, ada juga atribut lain yang sering digunakan untuk memberikan keterangan pada gambar. Keterangan ini biasanya tidak tampak secara langsung pada halaman, namun akan muncul jika gambar tidak dapat ditampilkan, misalnya karena masalah koneksi atau berkas gambar yang tidak ditemukan. Keterangan tersebut memberikan informasi tambahan kepada pengguna mengenai apa yang seharusnya terlihat pada gambar tersebut. Hal ini juga bermanfaat bagi mesin pencari untuk memahami konteks dari gambar yang digunakan dalam halaman web.

Keberadaan elemen gambar dalam sebuah halaman web tidak hanya memberikan unsur estetika, tetapi juga membantu menyampaikan informasi yang tidak bisa dijelaskan hanya dengan teks. Misalnya, untuk menjelaskan sebuah produk, gambar sering kali lebih efektif dibandingkan dengan deskripsi panjang yang hanya berbentuk teks. Oleh karena itu, pengelolaan gambar dalam HTML menjadi aspek yang sangat penting untuk diperhatikan.

Selain itu, elemen gambar dapat dipadukan dengan elemen-elemen lain dalam HTML, seperti elemen tautan. Dengan menggabungkan gambar dan tautan, sebuah gambar bisa berfungsi sebagai tombol atau pengarah ke halaman lain. Hal ini sangat berguna dalam pengembangan antarmuka pengguna yang interaktif, dimana gambar dapat berperan sebagai elemen navigasi.

Meski gambar dapat memberikan banyak manfaat, ada beberapa hal yang perlu diperhatikan dalam penggunaannya. Salah satu yang sering menjadi perhatian adalah kecepatan pemuatan halaman. Gambar dengan ukuran berkas yang besar dapat memperlambat pemuatan halaman, terutama jika pengguna mengakses halaman tersebut melalui koneksi internet yang lambat. Oleh karena itu, penting untuk mengoptimalkan ukuran dan format gambar sebelum menyisipkannya ke dalam halaman web. Pengoptimalan ini dapat dilakukan dengan cara mengompres gambar atau menggunakan format gambar yang lebih efisien, sehingga tidak membebani waktu pemuatan halaman.

Dalam perkembangan teknologi web, berbagai format gambar telah diperkenalkan untuk mendukung pengalaman pengguna yang lebih baik. Setiap format gambar memiliki karakteristik dan kegunaan tersendiri. Misalnya, beberapa format lebih cocok untuk gambar dengan banyak warna, sementara format lain lebih efisien untuk gambar dengan sedikit warna atau gambar yang transparan. Memilih format gambar yang tepat sesuai dengan kebutuhan desain halaman adalah bagian dari keahlian yang diperlukan dalam pengembangan web.

Penting juga untuk mempertimbangkan aksesibilitas saat menggunakan gambar dalam halaman web. Bagi pengguna yang mengalami keterbatasan penglihatan, keberadaan gambar mungkin tidak terlalu berarti jika tidak dilengkapi dengan deskripsi teks yang memadai. Oleh karena itu, selain menampilkan gambar, menambahkan keterangan yang jelas dan informatif pada gambar menjadi hal yang harus diprioritaskan. Keterangan ini juga membantu perangkat lunak pembaca layar dalam menjelaskan konten gambar kepada pengguna dengan kebutuhan khusus.

Dengan perkembangan teknologi web yang semakin pesat, kini gambar dalam halaman web dapat diberi efek interaktif, seperti gambar yang berubah ukuran ketika disentuh atau gambar yang tampilannya berubah berdasarkan tindakan pengguna. Efek-efek semacam ini memberikan pengalaman yang lebih menarik dan dinamis bagi pengguna, terutama dalam situs web yang membutuhkan interaksi lebih banyak, seperti toko daring atau aplikasi berbasis web.

Gambar yang digunakan dalam halaman web juga harus memiliki hak cipta yang jelas. Mengambil gambar dari sumber yang tidak memiliki lisensi yang sah bisa menyebabkan masalah hukum. Oleh karena itu, penting untuk selalu memastikan bahwa gambar yang digunakan memiliki izin untuk disebarluaskan atau diambil dari sumber-sumber yang memberikan lisensi bebas untuk penggunaan komersial maupun non-komersial. 

Sebagai bagian dari praktik yang baik dalam pengembangan web, penyisipan gambar dalam HTML harus dilakukan secara terstruktur dan sesuai dengan kebutuhan desain. Terlalu banyak gambar atau gambar dengan ukuran yang tidak proporsional dapat merusak estetika halaman dan membuatnya sulit diakses. Sebaliknya, gambar yang ditempatkan dengan baik dan dioptimalkan dengan benar akan meningkatkan kualitas halaman secara keseluruhan dan memberikan pengalaman yang lebih baik bagi pengguna.

Secara keseluruhan, elemen gambar dalam HTML adalah komponen yang esensial dalam pengembangan web modern. Penggunaan yang tepat dapat membuat situs web lebih menarik dan informatif. Gambar dapat memberikan konteks visual yang tidak bisa dijelaskan dengan kata-kata, menjadikannya bagian penting dalam komunikasi visual di dunia maya. Oleh karena itu, memahami cara kerja dan praktik terbaik dalam menampilkan gambar pada halaman web menjadi salah satu keterampilan dasar yang harus dikuasai dalam dunia pengembangan web.

Artikel ini akan dibaca oleh: Aprilia Muadibah, Arien Melania Ramadhany, Atika Nabilah, Chofifah Nur Mustaghfiroh, dan Devi Sinta Dewi.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

6 komentar untuk "Menampilkan Gambar HTML Menggunakan Tag IMG"

  1. AnonimMinggu, 20 Juni 2021 pukul 10.25.00 WIB

    Apa yang dimaksud dengan tag img pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 10.25.00 WIB

      Tag img pada html digunakan untuk menyematkan gambar pada halaman website. Img atau image secara teknis tidak dimasukkan ke dalam halaman website, melainkan ditautkan ke halaman website tersebut. Tag img membuat ruang penyimpanan untuk gambar yang telah direferensikan tersebut.

      Hapus
  2. AnonimMinggu, 20 Juni 2021 pukul 10.26.00 WIB

    Bagaimana cara menggunakan tag img pada dokumen html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 10.27.00 WIB

      1. Gunakan elemen img pada html untuk mendefinisikan gambar.
      2. Gunakan atribut src pada html untuk mendefinisikan url dari gambar.
      3. Gunakan atribut alt pada html untuk mendefinisikan teks alternatif pada gambar, jika gambar tersebut tidak bisa ditampilkan.

      Hapus
  3. AnonimMinggu, 20 Juni 2021 pukul 10.29.00 WIB

    Apa fungsi atribut src pada tag img pada dokumen html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 20 Juni 2021 pukul 10.29.00 WIB

      Atribut src pada tag img html digunakan untuk menentukan lokasi atau URL dari gambar eksternal.

      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 -