Hyperlink merupakan teks atau gambar yang dapat di klik untuk menuju halaman lain. Hyperlink dapat berupa tautan ke halaman web, file, atau bagian tertentu di dalam halaman yang sama. Cara penulisan hyperlink menggunakan tag <a> dengan atribut href untuk mendefinisikan alamat tujuan.

1. AMIROH, S.Kom
SMKN 3 JOMBANG

2. PENGERTIAN Link / Hyperlink
(Anchor)
 Hyperlink adalah teks atau gambar yang apabila
diklik akan menuju suatu alamat atau halaman
tertentu.
 Alamat tersebut dapat berupa gambar, video,
audio, file program, dokumen, atau halaman
web lain
 Teks atau gambar yang mengandung hyperlink
biasanya memiliki tampilan yang berbeda
dengan teks yang lain.

3. Ciri Hyperlink
 Pointer mouse akan berubah menjadi tanda
jari jika diarahkan pada teks atau gambar yang
merupakan hyperlink.
 By default, teks yang mengandung hyperlink
akan berwarna biru.
 Apabila diklik, teks tersebut berwarna merah
 Dan setelah diklik akan berubah warna
menjadi ungu
 Warna tersebut dapat diubah sesuai dengan
keinginan kita

4. Penulisan Hyperlink
URL ini ditulis diantara tanda kutip sesudah atribut
href
<a name="#Acuan">Kata yang dituju</a>
Link = Alamat URL atau nama file dan/atau acuan yang dituju
Acuan = Kata sembarang sebagai penanda (bookmark)

5. Contoh :

6. Cara Penulisan
Syntax Hyperlink

7. Cara Penulisan [1]
Berdasarkan lokasi tujuannya, link dapat dibedakan
atas:
 Link yang menuju ke homepage (halaman
pertama) dari sebuah situs. Cukup dituliskan
alamat URL dari website tersebut
Syntax:
<a href="http://amiroh.web.id">Blogku</a>
 Link yang menuju ke halaman yang lain dalam
situs yang sama.
 Syntax:
<a href="http://amiroh.web.id/yuk-ngeblog-pake-moodle/ ">
Yuk Ngeblog</a>

8.  Link yang menuju ke halaman yang lain dalam
situs yang lain. Maka harus kita tuliskan alamat
URL dan lokasi filenya.
<a href=“http://www.situs.com/sini/situ.html”>
 Link yang menuju ke bagian tertentu (bookmark)
dalam halaman yang sama. Ada beberapa
ketentuan:
Cara Penulisan [2]

9. a) Bila file tersebut berlokasi pada folder yang sama
dengan file dari link tersebut maka cukup dituliskan
nama filenya, misalnya: href="freeware1.html".
b) Bila file yang dituju itu berada dalam folder yang lain di
bawah folder yang ditempati oleh link tersebut, maka
harus dituliskan nama foldernya.
Misalnya: href="javascript/js001.html".
c) Sedangkan bila file yang dituju itu berada dalam folder
yang lain di atas folder yang ditempati oleh file dari link
tersebut maka dituliskan seperti berikut:
href="/rainbow.gif".
Cara Penulisan [3]

10. Cara Penulisan [4]
 Untuk membuat link yang menuju ke bagian
tertentu dari sebuah halaman web, sebelumnya kita
harus memberi nama pada tempat/lokasi yang akan
dituju itu dengan mencantumkan tag:
a) Bila tempat yang dituju itu terdapat dalam
halaman yang sama dengan link tersebut maka
cukup dituliskan nama lokasi yang dituju itu.
Misalnya: href=#bagian.
b) Bila tempat yang dituju itu terletak pada halaman
yang lain maka harus dituliskan nama file dari
halaman itu baru nama tempatnya. Misalnya:
href="lain.htm#bagian".

11. CARA PENULISAN [4]
 Link yang mengarah ke sebuah file yang
bukan file HTML misalnya file program,
audio, image, dan lain-lain cara
penulisannya sama saja caranya dengan file
HTML seperti pada point 1, 2 dan 3 di atas.
 Link yang berisi alamat email dituliskan
seperti berikut:
<a href="mailto:badsector@yahoo.com">

12. TARGET LINK

13. TARGET LINK
 Merupakan cara sebuah browser menampilkan
link tujuan.
 Cara penulisan:

14. HTML Bookmark Links

15. Bookmark Links
 Merupakan link yang
menuju ke bagian
tertentu dalam
sebuah halaman
HTML
 Contohnya seperti
Situs Wikipedia.com

16. Cara Penulisan:
a) Tandai awal paragraph link yang dituju dengan
cara berikut:
<a name=“NamaBookmark" >Judul Bookmark</a>
b) Tambahkan Link yang menuju ke paragraph
tersebut:
<a href="#NamaBookmark">Goto Bookmark</a>
Note: Jika linknya menuju ke bookmark pada
halaman lain, maka cara penulisan sbb:
<a href="http://website.com/alargepage.html#bookmark1">
Goto bookmark1
</a>

17. Referensi
 http://www.codertools.com/html_guide
/html_named_anchors_bookmark_links.a
spx
 http://www.w3schools.com/html/html_l
inks.asp