Membuat link pada gambar di html
Yang dimaksud link pada gambar adalah jika gambar diklik akan menuju kehalam lain.
Contoh penggunaan link pada gambar :
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial link pada gambar </title>
</head>
<body>
<a href="https://tutorialflashaplikasiandroid.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81ShJrpFEBSWaeoRdxUL6pBtc4MpyTVY9HMdmG6acWLgUBpurPcq2aPdxA6f7bVXOllpoTgQV_I6olRuyk_VjHD7WI6Thf-tfTeCpa8NV4WWzGc6jrZfksuZM8Crgg7TBARDx5U4IWdI/s964/tut6logo.png">
</a>
</body>
</html>Membuat Link dengan titik koordinat pada gambar
Menentukan titik-titik koordinat pada gambar, dimana titik tersebut dapat diklik untuk menuju suatu halaman.
Gambar ditentukan oleh tag <img> dan titik link ditentukan oleh tag <map> dengan <area> untuk area yang dapat diklik’
Ada 3 area atau bentuk yang bisa ditempatkan pada gambar
1. Bentuk persegi panjang dengan kode shape=”rectangle”
2. Bentuk poligon kode shape=”polygon”
3. Bentuk lingkaran ditulis dengan kode shape=”circle”
Cara menempatkan titik koordinat pada gambar.
Ketik kode berikut pada HTMLPad.
<!DOCTYPE html>
<html>
<head>
<title> Tutorial menempatkan titik koordinat pada Gambar </title>
</head>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh81ShJrpFEBSWaeoRdxUL6pBtc4MpyTVY9HMdmG6acWLgUBpurPcq2aPdxA6f7bVXOllpoTgQV_I6olRuyk_VjHD7WI6Thf-tfTeCpa8NV4WWzGc6jrZfksuZM8Crgg7TBARDx5U4IWdI/s340/tut6logo.png" usemap="#titik-koord">
<map name="titik-koord">
<area title="segiempat" href="https://tutorialflashaplikasiandroid.blogspot.com/?s=html" coords="30,60,90,100" shape="rectangle">
<area title="lingkaran" href="https://tutorialflashaplikasiandroid.blogspot.com/?s=css" coords="300,200,40" shape="circle">
</body>
</html> Jika kursor diposisikan pada titi koordinat tersebut diatas, akan muncul tooltips yang berisi keterangan, segiempat, lingkaran, dan poligon.
Jika titik-titik koordinat tersebut diklik, akan menuju alamat website yang tertera pada koding tersebut
Ada beberapa atribut pada tag <area>
1. title : nama dari gambar, ketika menyorot mouse pada area gambar yang sudah ditentukan, akan membuat tulisan diatas gambar html
2. href : link yang akan dituju ketika klik gambar tersebut.
3. shape : bentuk titik koordinat pada gambar
4. coords : menentukan titik koordinat dalam sebuah gambar.
Pada contoh koordinat segiempat diatas titik koordinat tertulis coords=”30,60,90,100″.
Segiempat yang terbentuk merupakan area klik berpengaruh.
Untuk mendapatkan gambaran yang jelas, coba jalankan kode diatas. Lalu posisikan kursor pada area-area dalam koordinat tersebut, kursor akan bereaksi ketika berada pada sekitar titik koordinat yang ditentukan.
Favicon pada html
Favicon adalah gambar kecil atau ikon sebagai simbol yang diberikan pada sebuah situs.
Ikon ini sering kita jumpai pada tab browser seperti contoh gambar dibawah ini
Favicon berguna untuk membedakan situs yang satu dengan lainnya. Untuk menambahkan favicon ke situs website memerlukan gambar yang akan digunakan sebagai favicon.
Gambar yang digunakan biasanya berukuran 16 x 16 pixels atau 32×32 pixels. format gambar harus menggunakan salah satu dari PNG, JPG, GIF atau ICO.
Secara umum format .ico banyak digunakan dalam website
Kode biasanya ditempatkan dibagian atas di antara tag <head></head>, hanya satu format gambar yang digunakan untuk membuat favicon
<head>
<title> cara membuat favicon html </title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
</head>Published: Seno Adjie.
0 Komentar