Assalamu'alaikum poinreaders,
Pada materi kali ini saya akan membahas tentang "Tag Pada HTML Part 5 : Images Tag". Images Tag merupakan penampung (container) bagi sebuah file berupa gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan kedalam sebuah file HTML, akan tetapi hanya merujukkan file sumber gambar tersebut berada. Untuk lebih jelasnya, yuk langsung saja simak ulasannya...
Pada materi kali ini saya akan membahas tentang "Tag Pada HTML Part 5 : Images Tag". Images Tag merupakan penampung (container) bagi sebuah file berupa gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan kedalam sebuah file HTML, akan tetapi hanya merujukkan file sumber gambar tersebut berada. Untuk lebih jelasnya, yuk langsung saja simak ulasannya...
Fungsi :
Digunakan untuk menyisipkan gambar.Format Penulisan :
<img>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| align | top bottom middle left rigth |
optional | Menentukan penyelarasan gambar sesuai dengan elemen sekitarnya. |
| alt | text | optional | Menentukan teks alternatif untuk gambar. |
| border | pixels | optional | Menentukan lebar perbatasan sekitar gambar. |
| crossorigin | anonymous use-credentials |
optional | Memungkinkan gambar dari situs pihak ketiga yang mengijinkan akses cross-origin untuk digunakan dengan kanvas. |
| height | pixels | optional | Menentukan tinggi dari suatu gambar. |
| hspace | pixels | optional | Menentukan ruang kosong di sisi kiri dan kanan dari suatu gambar. |
| ismap | ismap | optional | Menentukan gambar sebagai bagian dari "server-side image-map". |
| longdesc | URL | optional | Menentukan URL untuk penjelasan lebih rinci dari suatu gambar. |
| src | URL | wajib | Menentukan URL gambar. |
| usemap | #mapname | optional | Menentukan gambar sebaggai bagian dari "client-side image-map". |
| vspace | pixels | optional | Menentukan ruang kosong di atas dan bawah dari suatu gambar. |
| width | pixels | optional | Menentukan lebar gambar. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag img</title>
</head>
<body>
<img src="img/pointopoin.png" alt="Logo Pointopoin">
</body>
</html>
2. <map>
Fungsi :
Mendefinisikan "client-side image-map".Format Penulisan :
<map>...</map>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| name | mapname | wajib | Menentukan nama "image-map". |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag map</title>
</head>
<body>
<img src="img/map.jpg" alt="Contoh Map" usemap="#contohmap">
<map name="contohmap">
<area shape="rect" coords="127,179,265,266" href="map/area1.html" alt="Area 1">
<area shape="circle" coords="455,222,50" href="map/area2.html" alt="Area 2">
</map>
</body>
</html>
3. <area>
Fungsi :
Mendefinisikan sebuah area inside sebuah "image-map".Format Penulisan :
<area>...</area>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| alt | text | optional | Menentukan teks alternatif untuk tag area. Atribut ini diperlukan jika terdapat atribut href. |
| coords | coordinates | wajib | Menentukan koordinat tag area. |
| download | filename | optional | Menentukan bahwa target akan di-download ketika pengguna mengklik hyperlink. |
| href | URL | optional | Menentukan target hyperlink untuk tag area. |
| hreflang | language_code | optional | Menentukan bahasa target URL. |
| media | media query | optional | Menentukan media query yang digunakan pada dokumen yang dirujuk oleh link tersebut. |
| nohref | value | optional | Menentukan bahwa area tidak terkait dengan link. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag |
optional | Menentukan hubungan antara dokumen saat ini dengan target URL. |
| shape | default rect circle poly |
optional | Menentukan bentuk daerah. |
| target | _blank _parent _self _top framename |
optional | Menentukan bagaimana cara membuka halaman yang dirujuk dari link tersebut. |
| type | media_type | optional | Menentukan jenis media dari target URL. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag area</title>
</head>
<body>
<img src="img/map.jpg" alt="Contoh Map" usemap="#contohmap">
<map name="contohmap">
<area shape="rect" coords="127,179,265,266" href="map/area1.html" alt="Area 1">
<area shape="circle" coords="455,222,50" href="map/area2.html" alt="Area 2">
</map>
</body>
</html>
4. <canvas>
Fungsi :
Digunakan untuk menggambar grafik melalui scripting (JavaScript).Format Penulisan :
<canvas>...</canvas>
Atribut :
| Atribut | value | Keterangan | Deskripsi |
|---|---|---|---|
| height | pixels | optional | Menentukan tinggi kanvas. |
| width | pixels | optional | Menentukan lebar kanvas. |
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag canvas</title>
</head>
<body>
<canvas id="contoh_canvas"></canvas>
<script>
var canvas = document.getElementById("contoh_canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#00FF00";
ctx.fillRect(0, 0, 150, 150);
</script>
</body>
</html>
5. <figcaption>
Fungsi :
Mendefinisikan sebuah caption untuk tag <figure>.Format Penulisan :
<figcaption>...</figcaption>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag figcaption</title>
</head>
<body>
<figure>
<img src="img/pointopoin.png" alt="Logo Pointopoin">
<figcaption>Gambar 1. Logo pointopoin.com</figcaption>
</figure>
</body>
</html>
6. <figure>
Fungsi :
Menentukan konten tersendiri (self-contained).Format Penulisan :
<figure>...</figure>
Contoh Penulisan :
<!DOCTYPE HTML>
<html>
<head>
<title>Tag figure</title>
</head>
<body>
<figure>
<img src="img/pointopoin.png" alt="Logo Pointopoin">
</figure>
</body>
</html>
Semoga materi yang saya sampaikan kali ini dapat bermanfaat bagi sobat poinreaders, jangan lupa follow akun sosial kami agar sobat poinreaders bisa mendapatkan materi terupdate tentang pemrograman lainnya.