Anda di halaman 1dari 14

Membuat Link

Untuk membuat link atau hyperlink, dapat menggunakan tag : <a href> </a>

Berikut beberapa contoh script penggunaan link :


<body> <a href=help.htm>halaman help </a><br> </body>

Ketika teks halaman web diklik, maka akan menuju ke file help.htm Secara default, link pada halaman web diberi garis bawah dan umumnya berwarna biru. Ada beberapa atribut untuk mengatur warna link dan juga pengaturan lainnya. Atributatribut ini diletakkan dalam tab <body>. Berikut atribut yang digunakan untuk mengatur link : No. 1. 2. Atribut link alink Fungsi Menentukan warna link Menentukan warna link ketika diklik dan halaman link belum terbuka 3. vlink Menentukan warna link jika link tersebut sudah pernah dibuka

Atribut-atribut yang digunakan dalam tag link <a> antara lain : No. 1. Atribut tabindex Fungsi Menentukan urutan link pada halaman web dengan memanfaatkan tombol tab
Sumiyatun, S.Kom [Pengenalan WEB Link]

Page 1

2.

target

Menampilkan halaman link dengan membuka jendela browser yang baru. Nilai yang ada untuk target yaitu blank

Contoh 1:

File pertama dengan nama hal_x.html


<HTML> <HEAD> <TITLE>Halaman X</TITLE> </HEAD> <BODY> <H1>Halaman X</H1> </BODY> </HTML>

File kedua dengan nama hal_y.html


<HTML> <HEAD> <TITLE>Halaman Y</TITLE> </HEAD> <BODY> <H1>Halaman Y</H1> </BODY> </HTML> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 2

File ketiga dengan nama hal_utama.htm


<HTML> <HEAD> <TITLE>Halaman Utama</TITLE> </HEAD> <BODY> <H1>Halaman Utama</H1> Silakan klik pada link-link berikut:<BR> <A HREF = "hal_x.html">Halaman X</A><BR> <A HREF = "hal_y.html">Halaman Y</A><BR> </BODY> </HTML>

Tampilan pada web browser

Pada saat diklik link Halaman X maka browser akan memanggil file hal_x.html sehingga akan ditampilkan halaman seperti berikut :

Sumiyatun, S.Kom [Pengenalan WEB Link]

Page 3

Hyperlink tidak terbatas pada halaman halaman web yang berada pada sistem yang sama seperti contoh diatas tetapi bisa juga dihubungkan ke situs web yang lain yang berada pada sembarang Web Server Contoh 2 : link ke halaman web lain
<HTML> <HEAD> <TITLE>Vendor Komputer</TITLE> </HEAD> <BODY> <CENTER> <H1>Vendor Komputer</H1> <BR> <A HREF = "http://www.ibm.com/">IBM</A><BR> <A HREF = "http://www.fujitsu.com/">Fujitsu</A><BR> <A HREF = "http://www.dell.com/">Dell</A><BR> </CENTER> </BODY> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 4

</HTML>

Bila sistem terhubung dengan internet maka saat di klik salah satu link nya maka akan terhubung ke halaman web dari vendor yang bersangkutan.

Menentukan Warna Hyperlink


Caranya yaitu dengan menggunakan atribut LINKyang terdapat pada tag <BODY> Contoh :
<HTML> <HEAD> <TITLE>Vendor Komputer</TITLE> </HEAD> <BODY LINK = black> <CENTER> <H1>Vendor Komputer</H1> <BR> <A HREF = "http://www.ibm.com/">IBM</A><BR> <A HREF = "http://www.fujitsu.com/">Fujitsu</A><BR> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 5

<A HREF = "http://www.dell.com/">Dell</A><BR> </CENTER> </BODY> </HTML>

Contoh penggunaan atribut ALINK dan VLINK


<HTML> <HEAD> <TITLE>Halaman Utama</TITLE> </HEAD> <BODY LINK = "black" ALINK ="green" VLINK ="pink"> <H1>Halaman Utama</H1> Silakan klik pada link-link berikut:<BR> <A HREF = "hal_x.html">Halaman X</A><BR> <A HREF = "hal_y.html">Halaman Y</A><BR> </BODY> </HTML>

Pada contoh di atas link akan berwarna hitam sekiranya belum pernah di klik, berwarna hijau ketika di klik dan halaman yang di link belum dibuka, dan berwarna pink jika halaman yang di link sudah pernah dibuka.

Penggunaan tabindex
Kegunaannya untuk menentukan urutan link sekiranya pemakai menggunakan tombol tab untuk berpindah dari satu link ke link yang lain. Nilai untuk setiap tabindex berupa angka yang harus bersifat unik (tidak ada yang kembar).
Sumiyatun, S.Kom [Pengenalan WEB Link] Page 6

Contoh penggunaan TabIndex


<HTML> <HEAD> <TITLE>Vendor Komputer</TITLE> </HEAD> <BODY LINK = "black" ALINK ="green" VLINK ="pink"> <CENTER> <H1>Vendor Komputer</H1> <BR> <A HREF = "http://www.ibm.com/" tabindex ="1">IBM</A><BR> <A HREF = "http://www.fujitsu.com/" tabindex="3">Fujitsu</A><BR> <A HREF = "http://www.dell.com/" tabindex="2">Dell</A><BR> </CENTER> </BODY> </HTML>

Menggunakan Bookmark
Jika suatu halaman web sangat panjang, adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang mengacu ke area tertentu pada halaman itu sendiri. Hal seperti itu diimplementasikan dengan menggunakan bookmark, pemakai tidak perlu membolak balik halaman halaman secara manual untuk mendapatkan bagian tertentu dalam halaman tersebut.
Sumiyatun, S.Kom [Pengenalan WEB Link] Page 7

Contoh :

<HTML> <HEAD> <TITLE>Bookmark</TITLE> </HEAD> <BODY> <CENTER> <H1>BUKU</H1> <B>Daftar Isi:</B><BR> Prolog<BR> <A HREF = "#bab1">Bab 1</A></BR> <A HREF = "#bab2">Bab 2</A></BR> <A HREF = "#bab3">Bab 3</A></BR> <A HREF = "#epilog">Epilog</A></BR> <HR>

<A NAME = "bab1"> <H2>BAB 1</H2> Ini merupakan isi dari bab 1<BR> ....<BR> ....<BR> ....<BR> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 8

<HR>

<A NAME = "bab2"> <H2>BAB 2</H2> Ini merupakan isi dari bab 2<BR> ....<BR> ....<BR> ....<BR> <HR>

<A NAME = "bab3"> <H2>BAB 3</H2> Ini merupakan isi dari bab 3<BR> ....<BR> ....<BR> ....<BR> <HR>

<A NAME = "epilog"> <H2>EPILOG</H2> Ini merupakan isi dari penutup<BR> ....<BR> ....<BR> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 9

....<BR> <HR>

</CENTER> </BODY> </HTML>

Tampilan pada browser adalah seperti berikut :

Pada saat diklik pada Bab1 maka akan ditampilkan bagian Banb 1 seperti gambar berikut :

Sumiyatun, S.Kom [Pengenalan WEB Link]

Page 10

URL Absolut dan Relatif


Umumnya URL absolut memiliki ciri ciri diawali dengan http:// , ftp:// atau / URL relatif adalah URL yang menyebutkan nama berkas secara langsung Misalnya abc.html atau dengan tanda .. Kelebihan URL absolut adalah dalam hal pemuatannya yang sangat cepat dibandingkan dengan URL relatif. Namun URL relatif memiliki kelebihan yaitu memungkinkan anda bisa mengubah direktori kerja untuk program program HTML ataupun berkas berkas lainnya tanpa mengubah program- program HTML sama sekali.

LINK dengan Gambar


Sebuah gambar dapat dapat dijadikan sebagai link ke halaman lain. Caranya adalah dengan menggunakan tag <IMG> di antara pasangan tag <A> dan </A>
Contoh : <html> <head> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 11

<title>Link dengan gambar</title> </head> <body> klik gambar berikut <a href = "link.html"> <img src = "image.jpg"></a> untuk melihat halaman pada link.html </body> </html>

Tampilan pada halaman web browser

Pada saat image di klik maka akan menuju ke halaman link.htlm

Link ke protokol lain


Beberapa contoh penulisan yang perlu diberikan dalam atribut HREF untuk berhubungan dengan berbagai protokol URL Layanan Contoh

Sumiyatun, S.Kom [Pengenalan WEB Link]

Page 12

http :// ftp :// File :/// News:// mailto : telnet:

Web Server FTP Berkas FTP Newsgroup UseNet e-mail telnet

http://www.ibm.com ftp ://ftp.domain.com/public File:///html/bab-2/sampel.html News://news.erols.com/vrml mailto:attuna_jogja@yahoo.com telnet:abc.xyz.com

Contoh :
<html> <head> <title>contoh e - mail</title> </head> <body> klik <a href = "mailto:attuna_jogja@yahoo.com"> attuna_jogja@yahoo.com</a> untuk memberikan komentar dan saran </body> </html>

Tampilan pada web browser adalah seperti berikut :

Sumiyatun, S.Kom [Pengenalan WEB Link]

Page 13

Membuka jendela baru


Kadangkala dikehendaki agar kalau suatu link diklik maka jendela baru akan ditampilkan untuk menampung halaman yang di link. Hal ini bisa dikerjakan dengan menambahkan kode : TARGET = _blank pada tag <A> Contoh :
<HTML> <HEAD> <TITLE>Halaman Utama</TITLE> </HEAD> <BODY LINK = "black" ALINK ="green" VLINK ="pink"> <H1>Halaman Utama</H1> Silakan klik pada link-link berikut:<BR> <A HREF = "hal_x.html" target ="_blank">Halaman X</A><BR> <A HREF = "hal_y.html" target ="_blank">Halaman Y</A><BR> </BODY> </HTML> Sumiyatun, S.Kom [Pengenalan WEB Link] Page 14