BAB-9 MEMBUAT LINK HTML - UNIKOM Kuliah Online

(1)

Merancang Halaman Website dengan Script HTML 75

BAB-9

MEMBUAT LINK HTML

9.1. Link HTML

Kelebihan utama dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks dan/atau gambar menuju ke dokumen lain dalam suatu dokumen. Browser web akan menyorot (highlight) teks atau gambar yang diidentifikasikan sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah Hyperteks Link (sering diperpenek dengan Hyperlink atau Link saja).

Dokumen HTML, menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain dalam web.

9.2. Tag Anchor

HTML menggunakan tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Sintaks dari penghubungan dalam HTML adalah dengan menggunakan tag <a>. Atribut yang digunakan pada tag <a> terdiri dari :

Atribut Argumen Keterangan

href URL / halaman web Diisi dengan nama halaman web atau nama URL yang akan di-Link-kan.

name #namabagian Digunakan untuk link dalam satu dokumen web.

Anchor berikut menunjuk ke website Facebook :

<a href=”http://www.facebook.com”>Link ke Facebook</a>

Ada 3 (tiga) jenis Link : a. Link Relatif b. Link Absolut

c. Link dalam dokumen yang sama.

9.3. Link Relatif

(2)

Dibuat apabila Anda membuat suatu link pada page Anda ke page lain pada komputer yang sama, tidak perlu menggunakan alamat Internet yang lengkap. Contoh penulisan Link Relatif, adalah sebagai berikut :

<a href=”about me.html”>Link ke About Me</a>

9.4. Link Absolut

Dibuat apabila Anda membuat link ke Web lain yang berada pada Website lain di Internet.

Dalam hal ini harus menuliskan alamat Internet secara lengkap. Berikut contohnya :

<a href=”http://www.facebook.com”>Link ke Facebook</a>

9.5. Link ke Bagian Lain dalam Dokumen

Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila ditampil- kan dalam browser web akan me mengharuskan kita melakukan scroll layar berulang-ulang.

Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa tempat di dalam dokumen akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju bagian-bagian tersebt.

Contoh memberi nama suatu bagian dalam dokumen :

 Letakkan kursor pada baris atau teks yang menjadi awal dari bagian tersebut.

 Sisipkan nama bagian tersebut dengan peritah :

<a name=”namabagian”>

Misal namabagian yaitu atas, sehingga menjadi : <a name=”atas”>

Cara membuat link-nya sama seperti link relatif dan link absolut, namun dalam hal ini nama dokumen dalam link diganti dengan nama bagian dokumen dengan sebelum nama tersebut ditambah dengan #.

Berikut adalah contoh memberi link ke bagian lain dalam dokumen :

<a href=”#bab4”>Lihat Bab-4</a>

Maka pada dokumen yang terdapat pada halaman Bab-4, Anda berikan perintah berikut :

<a name=”bab4”>

<a href=”#atas”>Kembali ke atas</a>

(3)

PRAKTEK MODUL-9 :

1. Buka file MODUL-8

2. Berikan perintah berikut untuk link ke About Me, sebelum teks About Me yaitu :

<a href="about me.html">About Me</a>

<a href="education.html">Education</a>

<a href="interest.html">Interest</a>

3. Lakukan perintah yang sama untuk link ke alamat yang lainnya, seperti :

<a href="http://www.facebook.com">Facebook</a>

<a href="http://www.twitter.com">Twitter</a>

<a href="http://www.youtube.com">YouTube</a>

<a href="http://www.yahoo.com">Yahoo</a>

<a href="http://www.google.co.id">Google</a>

4. Lakukan perintah yang sama untuk link ke alamat yang lainnya, misalnya link ke :

<a href="http://ilmu-komputer.net">Article</a>

<a href="http://www.detiknews.com">Hot News</a>

<a href="http://www.infokomputer.com">Computer</a>

<a href="http://www.detiksport.com">Sport</a>

5. Buat minimal 3 (tiga) buah file baru antara lain :

a. About Me, yang berisi data tentang Pribadi Anda, berikut ini contoh isi About Me :

Catatan : Buat link Back menuju ke file MODUL-8.HTML

(4)

b. Education, yang berisi data tentang Pendidikan Anda

c. Interest, yang berisi data tentang Bakat, Minat dan Kemampuan Anda.