-->
› ›
[Belajar HTML #15] Gambar HTML - Atribut alt - width, height, style - Link Gambar

[Belajar HTML #15] Gambar HTML - Atribut alt - width, height, style - Link Gambar

By October 20, 2019 0 Komen

Gambar HTML

Gambar dapat meningkatkan desain dan tampilan halaman web.

Girl in a jacket



Sintaks Gambar HTML

Dalam HTML, gambar didefinisikan dengan <img> tag.

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

Atribut <src> menentukan URL (alamat web) dari gambar:

<img src="url">
Cobalah sendiri



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).

Nilai atribut alt harus menggambarkan gambar:

Contoh:

<img src="img_chania.jpg" alt="Flowers in Chania" width="460" height="345">
Cobalah sendiri

Jika browser tidak dapat menemukan gambar, itu akan menampilkan nilai atribut alt:

Contoh:

<img src="wrongname.gif" alt="Flowers in Chania">
Cobalah sendiri

Catatan: Atribut alt diperlukan. Halaman web tidak akan divalidasi dengan benar tanpa itu.




Ukuran Gambar - Lebar dan Tinggi

Anda dapat menggunakan style atribut untuk menentukan lebar dan tinggi gambar.

Contoh:

<img src="img_chania.jpg" alt="Flowers in Chania" style="width:500px;height:600px;">
Cobalah sendiri

Atau, Anda dapat menggunakan width dan height atribut:

Contoh:

<img src="img_chania.jpg" alt="Flowers in Chania"  alt="Girl in a jacket" width="500" height="600">
Cobalah sendiri

Atribut width dan height selalu mendefinisikan lebar dan tinggi gambar dalam piksel.

Catatan: Selalu tentukan lebar dan tinggi gambar. Jika lebar dan tinggi tidak ditentukan, halaman mungkin akan berkedip saat gambar dimuat.




width dan height, atau style?

Atribut width dan height, dan style yang valid dalam HTML.

Namun, kami sarankan menggunakan atribut style. Ini mencegah style sheet mengubah ukuran gambar:

Contoh:

<!DOCTYPE html>
<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="http://bit.ly/htmlicon" alt="HTML5 Icon" width="128" height="128">
<img src="http://bit.ly/htmlicon" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>
Cobalah sendiri



Gambar di Server Lain

Beberapa situs web menyimpan gambar mereka di server gambar.

Sebenarnya, Anda dapat mengakses gambar dari alamat web mana pun di dunia:

Contoh:

<img src="https://cdn.pixabay.com/photo/2017/02/05/00/19/web-design-2038872_960_720.jpg" alt="pixabay html5 dan css" style="width:200px;height:142px;">
Cobalah sendiri



Membuat Gambar sebagai Link

Untuk menggunakan gambar sebagai tautan, letakkan <img>ag di dalam <a> tag:

Contoh:

<a href="sulivanproject.com">
  <img src="http://bit.ly/321MsJ9" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
Cobalah sendiri

Catatan: border:0; ditambahkan untuk mencegah IE9 (dan sebelumnya) menampilkan batas di sekitar gambar (ketika gambar adalah tautan).




Pembaca Layar HTML

Pembaca layar adalah program perangkat lunak yang membaca kode HTML, mengonversi teks, dan memungkinkan pengguna untuk "mendengarkan" konten. Pembaca layar berguna untuk orang yang tunanetra atau ketidakmampuan belajar.




Ringkasan Bab

  • Gunakan <img>elemen HTML untuk mendefinisikan gambar
  • Gunakan srcatribut HTML untuk menentukan URL gambar
  • Gunakan altatribut HTML untuk menentukan teks alternatif untuk gambar, jika tidak dapat ditampilkan
  • Gunakan HTML widthdan heightatribut untuk menentukan ukuran gambar
  • Gunakan CSS widthdan heightproperti untuk menentukan ukuran gambar (sebagai alternatif)
  • Gunakan floatproperti CSS untuk membiarkan gambar melayang
  • Gunakan <map>elemen HTML untuk mendefinisikan peta gambar
  • Gunakan <area>elemen HTML untuk mendefinisikan area yang dapat diklik di peta-gambar
  • Gunakan atribut <img>elemen HTML usemapuntuk menunjuk ke peta-gambar
  • Gunakan <picture>elemen HTML untuk menampilkan gambar yang berbeda untuk perangkat yang berbeda

Berlangganan update artikel terbaru via email:

0 Response to "[Belajar HTML #15] Gambar HTML - Atribut alt - width, height, style - Link Gambar "

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel