MATERI BAB 5

MENERAPKAN FORMAT KAITAN PADA HALAMAN WEB

A. ANATOMI LINK
Link adalah suatu objek yang dapat berupa teks atau gambar yang dipakai dalam kode, HTML untuk
menuju dari suatu bagian ke bagian yang lain pada halaman yang sama, atau menuju ke halaman (file)
yang berbeda. Default suatu link biasnya ditandai dengan teks warna biru dengan garis bawah, dan
jika pointer mouse ditujukan ke link tersebut, maka akan berubah menjadi telunjuk tangan, Peran link
dalam halaman web sanagt besar dan selalu dibutuhkan untuk memudahakan untuk memudahkan
pengguna web dalam berintraksi dengan halaman-halaman web yang ada. Link dalam HTML ditandai
dengan tag <A> (Anchor) yang terdiri dari atribut HREE yang digunakan untuk menuliskan lokasi tujuan
(file) dari link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci sebagai
lokasi (bagian) `yang akan dituju` oleh link.
Sintaks link adalah sebagai berikut: <a href=”url”> nama link</a>
Link dapat dibuat pada suatu teks atau gambar dengan cara melatakkan teks atau gambar tersebut di
antara tag pembuka < A HREF> dan tag penutup </A>. Contoh penulisan kode link adalah sebagai
berikut :
......
<A HREF=”tugas.html” NAME=”#bagian1”> Ke BAB 2 </A>
<A HREF=”tugas.html#bagian1” NAME=”#bagian2”>Ke BAB 1</A>
Link menggunakan gambar :
<A HREF=”tugas.html” NAME=”#bagian1”>
<img src=”logo.jpg> </A>
......
Pada bagian href digunakan untuk referensi file tujuan, sehingga pada contoh di atas dapat ditulis
dituju href=”tugas.html”>.
Jika pada file tugas.html terdapat banyak bab dan penempatan link digunakan untuk berpindah antar
bab, maka pada tiap link diberi nama variabel setelah tag name dan pada href disebutkan bagian bab
yang, sehingga penulisannya menjadi :
Href=”tugas.html1#bagian2”.

1. Mengenal Jenis Link

Kelebihan utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu
teks atau gambar menuju ke dokumen atau bagian lain dalam suatu dokumen html. Browser Web
akan meyorot (“highleght”) teks atau gambar yang didefinisikan sebagai link dengan warna dan
garis bawah untuk menunjukkan bahwa itu adalah hyperlink atau link.
a. Link Relatif
Link relatif merupakan link yang fungsinya untuk berpindah antar halaman web komputer
yang sama. Jika dua halaman web berada pada satu direktori yang sama, maka dapat
dituliskan nama file halaman yang dituju. Contohnya :
<a href =”halaman2.html”>Lanjut</A>
b. Link Absolut
Link absolut adalah link yang fungsinya untuk berpindah antara halaman website yang satu
dengan website yang lain di internet. Contohnya :
<a href =https://ilmukomputer1313.blogspot.co.id>Kunjungi blog saya</A>
B. FORMAT LINK ANTAR ISI PADA SUATU HALAMAN WEB
1. Pengertian
Format link antar isi pada suatu halaman web biasa disebut juga dengan link dalam satu halaman,
berbeda dengan hyperlink pada umumnya yang biasa digunakan untuk menghubungkan suatu
tulisan dengan tulisan lain yang berada pada halaman yang berbeda atau blog yang berbeda, link
itu lebih banyak digunakan untuk halaman yang sama. Misalnya membuat tautan link yang
mengarah ke atas, ke tengah, dan ke bawah.
Link ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dalam browser
web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran
dokumen dapat dimudahkan dengan membuat link atar bagian, dengan menandai setiap bagian
tersebut dengan memberinya nama. Sehingga dalam dokumen akhir ada bagian yang bernama,
dan di bagian lainnya dapat diletakkan link untuk menuju ke bagian-bagian tersebut.

2. Prinsip Dasar Penggunaan

Prinsip dasarnya adalah kita menandai terlebih dahulu suatu bagian dengan memberi tanda tag
anchor misalnya <a name=”atas”>, kemudian pada bagian yang lain kita buat link untuk
memangginya dengan kode <a href=”#atas”>.
Sintaksnya adalah sebagai berikut :

<a name=”atas”>ATAS</a> <-- objek tujuan

<a href=”#atas”>ke Atas</a <-- link menuju ke tujuan

Perhatikan tanda pagar (#) di atas, untuk objek tujuan tidak memakai tanda pagar, akan tetapi
untuk link yang menuju ke tujuan harus memakai tanda pagar.
Link yang menuju ke suatu bagian tertentu sangat berguna terutama untuk halaman web dengan
postingan yang sangat panjang, sehingga link dengan target dalam satu halaman ini untuk
mempermudah navigasi pengunjung website.

3. Cara Membuat Link dalam Satu halaman

a. Menentukan nama terget
Pilih bagian artikel yang ingin dijadikan sebagai target link, bisa berupa sebuah paragraf,
subjudul, kalimat, atau kata yang kita inginkan. Kemudian dibuat name atau id pada kata yang
dipilih tersebut dengan satu nama variabel, dalam pemberian nama variabel tersebut tanpa
menggunakan spasi, karena spasi pada browser akan berubah menjadi “%20%

Contoh 1 :
<div id=”bab3”> BAB III </div>

Contoh 2 :
<a name=”bab4”> BAB IV </a>

b. Membuat link ke target

Buatlah kalimat atau kata yang ingin dijadikan sebagai link yang akan ditunjukan ke target
link, misalnya sebagai berikut :
* <a href=”#bab3”>Ke Bab III </a>
* <a href=”#bab4”>Ke Bab IV </a>
 4. Link ke File
Ada beberapa cara penulisan sintaks link untuk menuju ke suatu halaman tertentu (file). Berikut
ini adalah cara penulisan link yang menuju ke halaman yang berbeda.
 jika file yang dituju berada pada folder/directory yang sama dengan file link, maka cukup
dituliskan nama filenya, misalnya : <a href=”produk.html”>Daftar Produk</a>
 jika file yang dituju berada pada subfolder di dalamnya, maka dituliskan nama foldernya.
misalnya: <a href=”galery/macam.html”>Galery Produk</a>
 Jika file yang dituju berada pada folder di atas folder yang ditemapati oleh file link, maka
penulisannya seperti berikut: <a href=”../tentang.html”>About me</a>
 Jika file yang dituju berada dua tingkat di atas folder link, maka dituliskan dua kali titik seperti
berikut ini: <a href=”../../tentang.html”>About me</a>

Berdasarkan lokasi tujuannya, link dapat dibedakan menjadi 4 macam, yaitu:

a). Link yang menuju ke bagian tertentu pada halaman yang sama
<a href=”#bab2” name=”bab1”>Lihat Bab 2</a>
b). Link yang menuju ke halaman yang lain dalam web yang sama
<a href=”galery.html”>Galeri Foto</a>
c). Link yang menuju ke halaman yang lain dalam web yang berbeda
<a href=”http://www.rusydi94.blogspot.com/tentang.html”>Tutorial Web</a>
d). Link yang menuju ke bagian tertentu pada halaman web yang berbeda
<a href=”http://www.rahul94.blogspot.com/home.html#ling”>Linknya</a>

C. FORMAT LINK ANTAR HALAMAN WEB UNTUK MEMBENTUK SITEMAP

Link merupakan cara untuk membuka atau memanggil halaman web atau file tertentu. Link
merupakan tag yang sangat penting dalam penggunaan HTML, karena dengan adanya link yang akan
membedakan antara dokumen HTML dengan dokumen teks biasa.

Setiap halaman, file, direktori, dan lokasi di internet selalu memiliki alamat URL-nya (Uniform
Resourece Locator) sendiri-sendiri yang menuju pada server web di internet.

Hampir semua link menggunakan teks sebagai penghubungnya. Teks yang berada di antara tag <A>
dan </A> akan menampilkan dengan garis bawah dengan warna standar biru.
Sebenarnya warna ini dapat diubah sesuai dengan keinginan pembuat web dengan menambahkan
atribut LINK, ALINK, dan VLINK dalam tag <BODY>.

Atribut LINK digunakan untuk memberi warna pada link saat mouse diklik dan VLINK digunakan untuk
memberikan warna pada link yang sudah dikunjungi. Sintaksnya adalah sebagai berikut:
<BODY LINK=”green” ALINK=”red” VLINK=”pink”>

Selain mengatur warna pada link, kita juga dapat menghilangkan garis bawah pada suatu link dengan
membuat sintak seperti berikut ini :
<A HREF=http://www.yahoo.com stye=”text-decoration:none”>Ke Yahoo</a>

 Link Antar Halaman Web Untuk Membentuk Sitemap

Link dapat dibuat gambar manapun teks seperti yang telah dijelaskan pada pelajaran
sebelumnya. Untuk membuat link yang menggunakan gambar peta, dapat dilihat pada contoh
berikut ini:
....
<img src=”map.jpg” usemap=”#mapku”>
<map name=”mapku”>
 <area shape=”rect” coords=”100,100,200,200”>
<area shape=”circle” coords=”50,50,30”>
<area shape=”poly” coords=”300,300,400,400,500,500,600,600”>
</map>
.....

Rect digunakan untuk membuat area map berbentuk segi empat dengan titik awal 100,100dan
titik akhir 200,200.
Circle digunakan untuk membuat area map berbentuk lingkaran dengan titik tengah 50,50 dan
diameter 30.
Poly digunakan untuk membuat area map berbentuk polygon dengan titik pertama 300,300, titik
kedua 400,400, titk ketiga 500,500, titik keempat, 600,600 dan dapat ditambahkan titik
berikutnya.

D. FORMAT TARGET LINK, EMAIL, DAN TELEPON

1. Format Target Link
Jika suatu link diklik maka browser akan menampilkan halaman yang dituju oleh link tersebut. Ada
dua macam penampilan oleh browser dalam memunculkan halaman tujuan tersebut.
Pertama, ditampilkan pada jendela yang sama sehingga halaman temapt link itu ditutup dan
digantikan oleh halaman yang dituju dan ini merupakan cara pemunculan default.

Kedua, ditampilkan pada jendela yang baru, sehingga akan muncul jendela yang baru untuk
menampilkan halaman yang dituju. Dalam pembuatan link ini, harus ditambahkan atribut
TARGET=”_blank” dalam tag <a herf>, sehingga penulisannya adalah sebagai berikut:
<a href=”halaman.html” target=”_blank”>

Berikut ini adalah beberapa target yang dapat diisikan pada link:
 _blank : halaman yang dipanggil akan muncul pada jendela baru.
 _top : halaman yang dipanggil akan mengisi penuh jendela yang sama, mesikipun
tadinya ada frame.
 _self : halaman yang dipanggil akan mengisi temapt yang sama, bila link tersebut dalam
sebuah frame maka halaman yang dipanggil akan mengisi frame tersebut.
 _parent : halaman yang dipanggil akan mengisi FRAMESET satu tingkat lebih tinggi dari
FRAME temapt link yang bersangkutan.

2. Link Email
Link dapat digunakan untuk mengirim ke alamat email, jika link ini diklik akan membuka jendela
pengiriman email dari program email yang terinstall pada komputer (misalnya Microsoft Outlook).
Pada kota tujuan email (ToJ akan tercantum alamat email tujuan. Contoh:
Link yang langsung menuju ke alamat e-mail.
<a href=”mailto:budi.prihhastomo13@gmail.com?subject=judulnya?”>Kiri email</a>

3. Link telepon
Link dapat digunakan untuk melakukan panggilan telepon, jika link ini diklik akan melakukan
panggilan telepon pada nomor tujuan. Penulisan kodenya adalah sebagai berikut:
....
<a href=”tel://085290410466”>Klik disini untuk menghubungi saya</a>

....
4. Link SMS
Link dapat digunakan untuk melakukan pengiriman pesan SMS pada nomor tujuan, jika link ini
diklik akan melakukan pengiriman SMS pada nomor tujuan. Penulisan kodenya adlah sebagai
berikut :
.....
<a href=”sms:085290410466&body=Pendaftaran”>SMS ke saya:</a>
.....

5. Link Download
Link yang digunakan untuk pengambilan file dari server atau yang lebih dikenal dengan istilah
download adalah link yang ditunjukan kepada fiel-file yang bukan file web, yaitu file yang tidak
bisa ditampilkan oleh browser misalnya: file aplikasi dengan ekstensi EXE, file kompresi (ZIP), file
audio (MP3), file dokumen seperti DOC, XLS, dan lainnya.
Bila link semacam ini diklik, maka akan mucul kotak dialog yang menanyakan apakah anda
meyimpan (save) file itu dalam harddisk atau membukanya dengan program aplikasi yang sesuai.
Penulisan kodenya adalah sebagai berikut :
....
<a href=”Modul”_web.doc”>Download</a>
....