Artikel Terbaru

4 Tahap Menciptakan Elemen Menggunakan Method createElement() DOM

Pada dokumen html, method document.createElement() adalah method yang digunakan untuk menciptakan elemen html. Elemen ini ditentukan menggunakan elementName yang diciptakan sebelumnya, atau dari elemen html yang tidak diketahui, yang diciptakan jika elementName tidak ditentukan atau tidak dikenali.

9 Contoh Penggunaan Tag IMG untuk Menampilkan Gambar pada HTML

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, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

Catatan: setiap iklan yang ditayangkan pada blog ini bersumber dari google adsense. Dengan jenis iklan yang dipilih adalah, sebagai berikut.

POIN 1, Iklan yang ditampilkan hanya boleh berbahasa indonesia atau berbahasa inggris. Tidak menerima jenis iklan dalam bahasa yang lain selain yang telah disebutkan karena blog ini dibuat untuk para pengunjung dari negara atau orang yang berbahasa Indonesia.

POIN 2, Setiap gambar yang ditampilkan pada iklan sifatnya tidak mengganggu para pengunjung yang melihat blog, atau tidak boleh menampilkan gambar yang bersifat menjijikkan atau merangsang rasa mual.

POIN 3, Jenis iklan yang dipasang bukan merupakan iklan spam, atau berisi dan mengarahkan pengunjung ke alamat yang berbahaya atau bersifat penipuan.

POIN 4, Segala bentuk iklan tunduk dan patuh pada ketentuan dari pihak Adsense google dan pemilik blog.

POIN 5, Segala jenis iklan yang tidak bertentangan dengan poin 1-4 yang dijelaskan sebelumnya, maka iklan tersebut dapat ditampilkan pada blog.

POIN 6, Jika ada pihak ketika yang ingin memasang iklan pada blog ini secara langsung, maka dapat menghubungi pemilik blog melalui kontak 0882 3218 8316.



~ Ikatlah Ilmu dengan Memostingkannya ~

Hot Artikel

Enkapsulasi pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C

3 Jenis Utama Looping pada Java

Perbedaan Antara int main() dan int main(void) pada Bahasa C

Penjelasan Singkat tentang Konsep Asosiasi, Komposisi, dan Agregasi pada Java