Ads by Yasya El Hakim
Gambar pada HTML

Gambar pada HTML dapat meningkatkan kualitas tampilan pada suatu halaman Web.

Pada HTML, kalian bisa memasang gambar dengan menggunakan tag <img>.
Tag <img> merupakan salah satu Empty Tag, hanya terdiri dari atribut saja, dan tidak memiliki Closing/End Tag.
Atribut src dapat kalian gunakan untuk menentukan URL gambar:
<img src="URL">

Atribut alt

Atribut alt dapat kalian gunakan untuk menampilkan teks alternatif pada gambar, jika gambar tersebut rusak atau tidak dapat diakses, kalian bisa melihat teks dari atribut tersebut.

Nilai dari atribut alt harus menjelaskan tentang gambar tersebut.

Contoh

<img src="elc_logo.jpg" alt="Logo EL Creative"> 

Jika Browser tidak dapat menemukan gambar, maka atribut alt akan terlihat.

Catatan: Atribut alt sangatlah dibutuhkan. Sebuah halaman web tidak akan valid jika kalian tidak menggunakan atribut tersebut pada gambar.

Ukuran Gambar (Widht dan Height)

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

Contoh

<img src="elc_logo.jpg" alt="Logo EL Creative" style="width:60px; height:60px;">

Alternatifnya, kalian bisa menggunakan atribut width dan height:
<img src="elc_logo.jpg" alt="Logo EL Creative" width="60" height="60px">

Menggunakan Atribut Width, Height, atau Style?

Atribut width, height, dan style dapat kalian gunakan.
Tetapi, kami menyarankan agar kalian menggunakan atribut style. Dengan menggunakan atribut tersebut, kalian dapat mencegah perubahan ukuran yang berasal dari CSS.

Gambar di dalam Folder

Kalian dapat menyimpan gambar pada folder lain. Kalian bisa menggunakan atribut src untuk menetapkan lokasi gambar.

Contoh

<img src="/gambar/elc_logo.jpg" alt="Logo EL Creative" style="width:60px; height:60px;"> 

Gambar dari Sumber Lain

Kebanyakan Website menyimpan gambar dari sumber lain.
Sebenarnya, kalian dapat mengakses gambar dari sumber manapun.

Contoh

<img src="https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s1600/HTML.jpg" alt="HTML5">

Kalian dapat membaca lebih lanjut tentang File Path pada bagian selanjutnya.

Gambar Animasi

Kalian dapat menggunakan gambar animasi dalam format GIF:

Contoh

<img src="animasi.gif" alt="Gambar Animasi" style="width:48px; height:48px;"> 

Gambar sebagai Link

Sangatlah umum untuk menggunakan gambar sebagai Link.

Contoh

<a href="https://elcreativeacademy.blogspot.com/">
<img src="https://1.bp.blogspot.com/-2T7bcPgd26o/XWoKitlsB7I/AAAAAAAAGbU/LpxigxrHGSwp7RxjG5gYfB_UsEQEwiazgCLcBGAs/s1600/apple-icon-120x120.png" alt="Tutorial HTML" style="width:42px;height:42px;border:0;">
</a> 

Catatan: Kami menambahkan border:0; untuk mencegah Browser (seperti Internet Explorer 9 kebawah) dalam menambilkan garis disekitar gambar. (Ketika menggunakan gambar sebagai link).

Floating pada Gambar

Kalian dapat menggunakan property float untuk mengatur tata letak gambar (kiri atau kanan).

Contoh

<p>
<img src="https://1.bp.blogspot.com/-W-KFFXruV2A/XWoIlpM4exI/AAAAAAAAGaE/Llq_6UxbiaMDQeyDMcRtOBYukzyIhPlxwCLcBGAs/s1600/android-icon-48x48.png" alt="EL Creaitve Logo" style="float:right;width:48px;height:48px;">
Gambar akan berada di sebelah kanan teks.
</p>

<p>
<img src="https://1.bp.blogspot.com/-W-KFFXruV2A/XWoIlpM4exI/AAAAAAAAGaE/Llq_6UxbiaMDQeyDMcRtOBYukzyIhPlxwCLcBGAs/s1600/android-icon-48x48.png" alt="EL Creaitve Logo" style="float:left;width:48px;height:48px;">
Gambar akan berada di sebelah kiri teks.
</p> 
See the Pen 51. HTML Gambar float by Yasya El Hakim (@elhakimyasya) on CodePen.

Tips: Untuk mempelajari lebih tentang Float, kalian dapat membaca artikel selanjutnya.

Tag Map

Tag <map> merupakan image-map. Sebuah image-map dapat kalian gunakan untuk mengatur area yang dapat di klik.
Pada gambar dibawah ini, arahkan kursor pada logo HTML, teks Hyperlink Markup Language, dan teks EL Creative Academy maka kursor akan berubah:
<img src="https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s1600/HTML.jpg" alt="Workplace" usemap="#mapgambar">

<map name="mapgambar">
<area target="_blank" alt="HTML" title="HTML" href="https://elcreativeacademy.blogspot.com/search/label/HTML" coords="530,331,371,158" shape="rect">
<area target="_blank" alt="Hypertext Markup Language" title="Hypertext Markup Language" href="https://elcreativeacademy.blogspot.com/search/label/HTML" coords="196,402,712,441" shape="rect">
<area target="_blank" alt="EL Creative Academy" title="EL Creative Academy" href="https://elcreativeacademy.blogspot.com/" coords="335,453,571,476" shape="rect">
</map>
See the Pen 52. HTML image-map by Yasya El Hakim (@elhakimyasya) on CodePen.

Atribut name pada tag <map> terhubung dengan tag <img> dengan menggunakan map.
Elemen <map> terdiri dari jumlah tag <area>,  yang dapat menentukan area yang dapat di klik.

Gambar Background

Untuk menambahkan Background Gambar pada elemen HTML, kalian dapat menggunakan property CSS yaitu background-image:

Contoh

Untuk menambahkan gambar Background pada halaman Web, tentukan property background-image pada elemen body:
<body style="background-image:url('https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s1600/HTML.jpg');">
<h2>Background Image</h2>
</body> 

Untuk menambahkan gambar background pada paragraf, tambahkan property background-image pada elemen p:
<body>
<p style="background-image:url('https://1.bp.blogspot.com/-RIXF_vDsPns/XXNlLo2pG3I/AAAAAAAAGgw/8VOfyFtcIhcwRBAPepnbyQgQdyLIjleLwCPcBGAYYCw/s1600/HTML.jpg');">
..
</p>
</body> 

Untuk mempelajari lebih lanjut tentang gambar, kalian dapat melihat bagian selanjutnya.

Elemen <picture>

Pada HTML5, kalian dapat menggunakan elemen <picture> untuk dapat digunakan secara fleksibel ketika menentukkan sumber gambar.

Elemen <picture> terdiri dari beberapa elemen <source>, setiap elemen tersebut tertuju pada gambar yang berbeda beda. Dengan menggunakan elemen ini, Browser dapat memilih gambar mana yang cocok untuk ditampilkan pada suatu perangkat.

Setiap elemen <source> dapat menetukkan gambar yang cocok.

Browser akan menggunakan elemen <source> yang pertama dengan menyamakan nilai atribut, dan mengabaikan elemen <source> dibawahnya.

Catatan: Kalian dapat membaca lebih lengkapnya disini.

Ringkasan

  • Gunakan elemen <img> untuk menentukan gambar.
  • Gunakan atribut src untuk menentukan URL gambar.
  • Gunakan atribut alt untuk menentukan teks alternatif gambar jika gambar tidak dapat ditampilkan.
  • Gunakan atribut width dan height untuk menentukan ukuran gambar.
  • Gunakan peroperty CSS width dan height untuk menentukan ukuran gambar (Alternatif).
  • Gunakan property float untuk menentukan Float pada gambar.
  • Gunakan elemen <map> untuk menentukan map pada gambar.
  • Gunakan elemen <area> untuk menentukan area gambar yang dapat di klik.
  • Gunakan elemen <img> dengan atribut usemap untuk menentukan tujuan image-map.
  • Gunakan elemen <picture> untuk menampilkan gambar berbeda pada perangkat yang berbeda.

Catatan: Proses Loading mungkin agak sedikit gambar. Semakin besar ukuran gambar, maka akan semakin lama prosesnya.

Sebelumnya: Tutorial Lengkap HTML: Link pada HTML - Bagian 14
Selanjutnya: Tutorial Lengkap HTML: Tabel pada HTML - Bagian 16
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya