BAB 014 - Image

Image dapat meningkatkan desain dan tampilan halaman web.

<img> adalah tag kosong, berisi atribut saja, dan tidak memiliki tag penutup.

Atribut src menentukan url (alamat web) dari gambar:

<img src="url">

 

 

Atribut alt

Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar).

Atribut ini jarang digunakan.

Nilai altatribut harus menggambarkan gambar:

Contoh


Cobalah utak-atik contoh diatas

 

 

Atribut width & height

width = lebar, height = tinggi

Contoh :


Cobalah utak-atik contoh diatas

 

 

Image di Folder Lain

Jika tidak ditentukan, peramban mengharapkan untuk menemukan gambar dalam folder yang sama dengan halaman web.

Namun, itu biasa untuk menyimpan gambar dalam sub-folder. Anda kemudian harus memasukkan nama folder dalam atribut src

Contoh :

<img src="/img/melati.jpg">

<img src="./img/melati.jpg">

<img src="../img/melati.jpg">

Perhatikan awalan [/] [.] [..]

Iika semisalkan kita berada pada folder https://yesnetijen.web.id/html/tutor/latihan.php

/img/melati.jpg -> berarti https://yesnetijen.web.id/img/melati.jpg

./img/melati.jpg -> berarti https://yesnetijen.web.id/html/tutor/img/melati.jpg

../img/melati.jpg -> berarti https://yesnetijen.web.id/html/img/melati.jpg

 

 

Image di Server Lain

Beberapa situs web menyimpan gambar mereka di server gambar. Sebenarnya, kita dapat mengakses gambar dari alamat web mana pun di dunia:

Contoh :

<img src="https://www.cloud.com/images/melati.jpg">

 


Image Animasi

HTML memungkinkan GIF animasi:

Contoh :

<img src="mickey.gif">





Image sebagai Link

Untuk menggunakan gambar sebagai link, letakkan <img> di dalam <a>.

Contoh :


Cobalah utak-atik contoh diatas
<a href="disney.php">
<img src="mickey.gif">
</a>

 

 

Image Mengambang

Gunakan float properti CSS untuk membiarkan gambar melayang ke kanan atau ke kiri teks

Contoh :


Cobalah utak-atik contoh diatas

 

 

Image latar belakang

Untuk menambahkan gambar latar belakang pada elemen HTML, gunakan properti CSS background-image.

Contoh :

Untuk menambahkan gambar latar belakang pada halaman web, tentukan properti gambar latar belakang pada elemen BODY:

<body style="background-image:url('melati.jpg');">

<h2>Background Image</h2>

</body>

 

Untuk menambahkan gambar latar belakang pada paragraf, tentukan properti gambar latar belakang pada elemen P:

<body>

<p style="background-image:url('melati.jpg');">
...
</p>

</body>

 


Sebelumnya
BAB 013 - Hyperlink
  Berikutnya
BAB 015 - Styles CSS

 

(0) Komentar

Beri komentar





Hanya komentar yang sudah di-approve admin yang tampil.

KESIMPULAN : Image dapat meningkatkan desain dan tampilan halaman web. <img> adalah tag kosong, berisi atribut saja, dan tidak memiliki tag penutup. Atribut src menentukan url (alamat web) dari gambar: <img src="url">     Atribut alt Atribut alt menyediakan teks alternatif untuk gambar, jika pengguna untuk beberapa alasan tidak bisa melihatnya (karena koneksi yang lambat, kesalahan dalam atribut src, atau jika pengguna menggunakan pembaca layar). Atribut ini jarang digunakan. Nilai altatribut harus menggambarkan gambar: Contoh Cobalah utak-atik contoh diatas     Atribut width & height width = lebar, height = tinggi Contoh : Cobalah utak-atik contoh diatas     Image di Folder Lain Jika tidak ditentukan, peramban mengharapkan untuk menemukan gambar dalam folder yang sama dengan halaman web. Namun, itu biasa untuk menyimpan gambar dalam sub-folder. Anda kemudian harus memasukkan nama folder dalam atribut src Contoh : <img src="/img/melati.jpg"> <img src="./img/melati.jpg"> <img src="../img/melati.jpg"> Perhatikan awalan [/] [.] [..] Iika semisalkan kita berada pada folder https://yesnetijen.web.id/html/tutor/latihan.php /img/melati.jpg -> berarti https://yesnetijen.web.id/img/melati.jpg ./img/melati.jpg -> berarti https://yesnetijen.web.id/html/tutor/img/melati.jpg ../img/melati.jpg -> berarti https://yesnetijen.web.id/html/img/melati.jpg     Image di Server Lain Beberapa situs web menyimpan gambar mereka di server gambar. Sebenarnya, kita dapat mengakses gambar dari alamat web mana pun di dunia: Contoh : <img src="https://www.cloud.com/images/melati.jpg">   Image Animasi HTML memungkinkan GIF animasi: Contoh : <img src="mickey.gif"> Image sebagai Link Untuk menggunakan gambar sebagai link, letakkan <img> di dalam <a>. Contoh : Cobalah utak-atik contoh diatas <a href="disney.php"> <img src="mickey.gif"> </a>     Image Mengambang Gunakan float properti CSS untuk membiarkan gambar melayang ke kanan atau ke kiri teks Contoh : Cobalah utak-atik contoh diatas     Image latar belakang Untuk menambahkan gambar latar belakang pada elemen HTML, gunakan properti CSS background-image. Contoh : Untuk menambahkan gambar latar belakang pada halaman web, tentukan properti gambar latar belakang pada elemen BODY: <body style="background-image:url('melati.jpg');"> <h2>Background Image</h2> </body>   Untuk menambahkan gambar latar belakang pada paragraf, tentukan properti gambar latar belakang pada elemen P: <body> <p style="background-image:url('melati.jpg');"> ... </p> </body>  

 

 

Step By Step Belajar HTML 5

 

 

Artikel Lainnya :