Langsung ke konten utama

HTML Tag Img

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.

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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

 

alt="GeeksforGeeks logo">

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag IMG

GeeksforGeeks logo

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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Yang jaghoo yang loghoo">

</body>

 

</html>

Output:

Menambahkan gambar menggunakan tag img

Yang jaghoo yang loghoo

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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="makan nasi kucing" 

width="300" 

height="300">

</body>

 

</html>

Output:

Menambahkan gambar menggunakan tag IMG

makan nasi kucing



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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Elfan Mauludi"

width="200"

height="200"

title="Logo Elfan Mauludi">

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag img:

Logo Elfan Mauludi

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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Elfan"

width="200"

height="200"

border="5">

</body>

 

</html>

Output:

Menambahkan gambar menggunakan tag IMG

Logo Elfan

enam, Perataan image: Secara defaultimage 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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Blog"

align="right">

</body>

 

</html>

Output:

Penambahan gambar menggunakan tag IMG

Logo Blog




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>

 

<

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

 

<img 

src=

"https://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s56-c/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

alt="Logo Blog">

 

</a>

 

</body>

 

</html>

Output:

Penambahan gambar menggunakan tag IMG

Logo Blog

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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/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>

Komentar

  1. Apa yang dimaksud dengan tag img pada html?

    BalasHapus
    Balasan
    1. 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. Bagaimana cara menggunakan tag img pada dokumen html?

    BalasHapus
    Balasan
    1. 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. Apa fungsi atribut src pada tag img pada dokumen html?

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

      Hapus

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D