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.

Baca Juga:

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>


Artikel ini didedikasikan kepada: 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 -
- Big things start from small things -