HYPERLINK
A.
Elemen Hyperlink
untuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
Elemen Hyperlinkuntuk membuat hyperlink dengan teks, harus menambahkan tag anchor HTML dengan format sebagai berikut.
B.
Link Absolut
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
adalah sebuah metode menyediakan link ke alamat situs lainnya. Contohnya :
--membuat link ke alamat situs tertentu.
<html>
<head>
<title>membka situs google dengan link</title>
</head>
<body>
<a href=”http://www.google.com”>klik disini untuk membuka situs google</a>
</body>
</html>
(dengan catatan komputer pengguna harus terkoneksi dengan internet)
C.
Link Relatif
merupakan metode link ke halaman web lain dalam satu mesin komputer
merupakan metode link ke halaman web lain dalam satu mesin komputer
·
Mengakses
halaman web lain dalam 1 folder
1.
Buat
folder utama dengan nama “Lat_Link”
2.
Buat
file “apasaja.html” dan simpan pada folder yg dibuat diatas
3.
Buat
link ke halaman lain dalam 1 folder dengan kode HTML berikut.
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
<html>
<head>
<title>membuka link halaman 1 folder</title>
</head>
<body>
<a href=login.html”>klik disini untuk membuka login.html</a>
</body>
</html>
4.
Buat
file “login.html” dan simpan pada folder yg sama sbg tujan link.
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
</html>
<head>
<title>ini halaman login.html</title>
</head>
<body>
<h1>ini adalah halaman login</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
·
Mengakses
halaman web lain dalam 1 folder utama, tetapi berbeda subfolder.
1.
Pastikan
berada dalam folder “Lat_Link” kemudian buatlah sbfolder pada folder trsb dngn
nama “subfolder”
2.
Buatlah
file dengan nama “apasaja.html” dan simpan pada folder yg tadi sbg halaman web
berisi link teks
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link</h1>
<a href=”subfolder/apasaja.html”>halaman web di subfolder/apasaja.html</a>
</body>
</html>
3.
Buat
file apasaja.html dan simpan pada folder “subfolder” sebagai file tujuan link.
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html sebagai tujuan link</h1>
<a href=”../apasaja.html”>kembali ke apasaja.html</a>
</body>
</html>
·
Mengakses
halaman web lain dalam lokasi yang lain
1.
Pastikan
berada pd folder “Lat_Link” kemudian buatlah subfolder pd folder tersebut
dengan nama “subfolder”
2.
Buat
file dengan nama apasaja.html dan simpan pada folder “Lat_Link” sebagai halaman
web berisi link teks menuju file C:\apasaja.html
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link menuju c:\apasaja.html</h1>
<a href=”c:\apasaja.html”>halaman web di c:\apasaja.html</a>
</body>
</html>
3.
Selanjutnya
buat file apasaja.html di drive c:\
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
</body>
</html>
D.
Link Bagian Halaman
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
untuk membuat link pada tiap bagian halaman web dengan menggunakan parameter sbb.
--
<a href=”#bagiandokumen”>bagian dokumen html ke-n</a>
standar kode # menunjukkan tujuan link masih dalam dokumen yg sama. Untuk membuat link tujuan dapat didefinisikan link tujuan dengan kode
--
<a name=”bagiandokumen”>
E.
Membuka Jendela Baru
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
untuk menampilkan halaman tujuan link baru tanpa harus menutup halaman web awal dengan membuka jendela baru, dapat menggunakan parameter target=”_blank”
Contoh
:
·
Halaman
awal link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman link untuk membuka jendela baru menuju apasaja.html</h1>
<a href=”apasaja.html” target= blank”>jendela baru apasaja.html</a>
</body>
</html>
·
Halaman
tujuan link
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah halaman apasaja.html</h1>
<a href=”apasaja.html”>kembali</a>
</body>
</html>
F.
Link Tanpa Garis Bawah
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
menggunakan standar atribut HTML style=”text-decoration:none” pada elemen <a href=””>
Contoh
:
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tanpa garis bawah</h1>
<a href=”apasaja.html” style=”text-decoration:none”>buka apasaja.html</a>
</body>
</html>
G.
Link dengan Gambar
langkah-langkahnya :
langkah-langkahnya :
1.
Pastikan
berada pada folder “Lat_Link” yg telah dibuat sebelumnya
2.
Ambilah
sebuah gambar dengan ekstensi .jpeg
3.
Copy
file gambar tsb ke dalam folder “Lat_Link”
4.
Ubah
nama file gambar tsb mnjd link.jpg
5.
Buat
file apasaja.html dan file apasaja.html
Contoh :
·
Link
dengan Gambar
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>hyperlink dengan gambar</title>
</head>
<body>
<h3>ini adalah link dengan gambar</h3>
<table width=”200” border=”1” cellspacing=”0” cellpadding=”0”>
<tr>
<td><a href=”apasaja.html”><img src=”link.jpg” width=”200” height=”150” border=”0”></a></td>
</tr>
</table>
</body>
</html>
·
Tujuan
gambar hyperlink
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
<html>
<head>
<title>hyperlink</title>
</head>
<body>
<h1>ini adalah link tujuan gambar</h1>
</body>
</html>
H.
Mapping Gambar
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
bentuk-bentuk mapping gambar ada 3 macam, yaitu :
1. Bentk
rectangle
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
memiliki bentuk persegi dengan tiap sudut ditentukan berdasarkan koordinatnya.
contoh penggunaannya :
---
<area shape=”rect” coords=”116,60,175,121” href=”apasaja.html”>
2. Bentuk
circle
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
untuk membuat mapping gambar berupa bangun ruang lingkaran, ada 3 koordinat yg harus ditentukan yaitu coords=”x,y,radius”
contoh penggunaanya :
---
<area shape=”circle” coords=”48,49,39” href=”apasaja.html”>
3. Bentuk
Poly
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
bentuk mapping poly tidak ditentukan jumlah titik koordinat yang dibuat
contoh penggunaannya :
---
<area shape=”poly” coords=”300, 35, 350, 73, 432, 98, 372, 39, 329, 18” href=”apasaja.html”>
I.
Link dengan Objek Flash
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
dengan objek multimedia flash juga dapat membuat hyperlink. Contohnya dalam membuat link dengan teks flash menggunakan plugin <object>
contoh penggunaan link dengan teks flash :
<html>
<head>
<title>link
dengan objek teks flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”223” height=”34”>
<param name=”movie” value=”text1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.f”>
<param name=”bgcolor” value=”#00FF66”>
<param name=”scale” value=”exactfit”>
<embed scr=”text1.swf” base=”.” Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash
type=”application/-shockwave-flash” scale=”exactfit” width=”223” height=”34”
bgcolor=”#00FF66”></embed>
</object>
</body>
</html>
contoh
penggunaan link dengan tombol flash :
<html>
<head>
<title>link
dengan objek teks flash</title>
</head>
<body>
<object
classid=”clsid:D27CDB6E-AE6D-11cf-98B8-444553540000” codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 width=”100” height=”22”>
<param name=”movie” value=”button1.swf”>
<param name=”quality” value=”high”>
<param name=”base” value=”.”>
<embed scr=”button1.swf” base=”.” Quality=”high” pluginspage=http://www.macromedia.com/shockwave/download/index.cgi?p1_Prod_Version=ShockwaveFlash
type=”application/-shockwave-flash”
width=”100” height=”22” bgcolor=”></embed>
</object>
</body>
</html>
TERIMAKASIH JJJ
