Langsung ke konten utama

HTML Image

Gambar
waktu publikasi
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.

Penambahan gambar pada sebuah laman web:
Tag "img" digunakan untuk menambahkan gambar pada laman web. Tag "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:
  • satu, 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.
  • dua, 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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/s113/964d6513-5fb5-479e-b018-c0af234fddca.jpg"

 

alt="logo ElfanMauludi"

>

 

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag "img":

logo SMAN 8 Semarang

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

 

alt="logo ElfanMauludi" 

width="300" 

height="300"

>

 

</body>

 

</html>

Output:

Memasukkan gambar mengunakan tag "img":

logo SMAN 8 Semarang

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

 

alt="logo ElfanMauludi" 

width="200" 

height="200" 

title="logo ElfanMauludi"

>

 

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag "img":

logo SMAN 8 Semarang

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

 

alt="logo ElfanMauludi" 

width="200" 

height="200" 

border="5"

>

 

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag "img":

logo SMAN 8 Semarang

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

 

alt="logo ElfanMauludi" 

align="right"

>

 

</body>

 

</html>

Output:

Memasukkan gambar menggunakan tag "img":

logo SMAN 8 Semarang








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>

 

<a 

href="https://www.elfanmauludi.id/">

<img 

src=

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

</a>

 

</body>

</html>

Output:

Klik Gambar logo SMAN 8 Semarang :



Setelah gambar tujuh diklik maka laman web akan menuju ke alamat link elfanmauludi.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://3.bp.blogspot.com/-xt7aSJ_ULTc/YKiLDQwvGDI/AAAAAAAANvg/sGe_rRQpkBI1JlAQ_p3zT0skNK8PhpT4ACK4BGAYYCw/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>

Oleh
Labels:
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

Komentar

  1. AnonimSabtu, 22 Mei 2021 11.03.00 WIB

    Apa fungsi tag IMG pada html?

    BalasHapus
    Balasan
    1. AnonimSabtu, 22 Mei 2021 11.03.00 WIB

      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. AnonimSabtu, 22 Mei 2021 11.05.00 WIB

      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. AnonimSabtu, 22 Mei 2021 11.06.00 WIB

    Apa fungsi teks alternatif atau teks alt pada tag IMG html?

    BalasHapus
    Balasan
    1. AnonimSabtu, 22 Mei 2021 11.06.00 WIB

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

      Hapus

Posting Komentar

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