BAB-10

PERINTAH-PERINTAH HTML
LINK

L ink adalah suatu metode dalam perancangan Website untuk menghubungkan

sebuah halaman dengan halaman lain, menghubungkan halaman ke gambar atau
ke Website orang lain. Sedangkan link bisa berupa teks, gambar, ikon (gambar kecil)
atau ikon animasi (gambar kecil bergerak-gerak).

Ketika pemakai Internet mengunjungi Website Anda, halaman (file) pertama yang
ditampilkan browser (Internet Explorer) adalah file index.html. Agar pengunjung dapat
membuka halaman (file) yang lain, maka Anda harus membuat link pada file index.html.
Jika tidak, maka pengunjung tidak dapat membuka halaman lainnya, yang dapat dibuka
hanya halaman pertama saja. Dan pada halaman yang lain, juga dapat dibuat link.
Contoh lengkap cara membuat Website dibahas pada bab yang berjudul “MERANCANG
WEBSITE”.

Anda dapat membuat link dengan perintah <A HREF atau <INPUT TYPE =”button”
diikuti dengan OnClick. Sedangkan atribut yang dapat digunakan dengan HREF adalah
sebagai berikut:

 ONCLICK Membuka link dengan klik.

 ONMOUSEOVER Membuka link dengan menyorot.
 ONMOUSEOUT Membuka link dengan menyorot, dan kembali ke halaman
semula apabila mouse dijauhkan dari link.

LINK DENGAN TEKS

Salah satu perintah HTML untuk membuat link adalah <A HREF. Sintak:

<A HREF="halaman atau URL">Nama Link</A>

Contoh 1: <A HREF="menerima_privat.html">Menerima Privat</A>  Link ke privat

Contoh 2: <A HREF="about_me.html">About Me</A>  Link ke file About Me
Contoh 3: <A HREF="gadis.jpg">Gambar Saya</A>  Link ke gambar
Contoh 4: <A HREF="index.html">KE AWAL</A>  Link ke file index.html
Contoh 5: <A HREF="http://www.yahoo.com">Link ke Yahoo</A> Link ke Yahoo

CONTOH HTML
Rancanglah 2 buah HTML seperti contoh di bawah ini:

File pertama berisi MENERIMA PRIVAT LES (GAMBAR 10-1) dan simpan dengan
nama menerima_privat.html. File kedua berisi TENTANG SAYA (GAMBAR 10-2), dan
simpan dengan nama about_me.html. Isi kedua halaman dapat Anda ubah sesuai
dengan keinginan Anda, dan nama file juga dapat diubah sesuai dengan isi halaman.
 GAMBAR 10-1
Nama file dalam CD: menerima_private.html

Setelah selesai, simpan dengan nama menerima_pribate.html, atau nama lain sesuai
dengan isi halaman. Kemudian rancang file kedua seperti contoh di bawah ini (berisi
TENTANG SAYA).

GAMBAR 10-2
Nama file dalam CD: about_me.html

Setelah selesai, simpan dengan nama about_me.html, atau nama lain sesuai dengan
isi halaman.

Selanjutnya rancanglah file utama seperti contoh di bawah ini agar pengunjung dapat
membuka file menerima_privat.html dan about_me.html. Sesuaikan nama file dengan
nama file yang Anda buat.
 GAMBAR 10-3
Nama file dalam CD: link_teks.html

Setelah selesai, simpan dengan nama link_teks.html, atau nama lain sesuai dengan
keinginan Anda, sebab ini masih latihan.

HASIL SETELAH HTML DIJALANKAN:

GAMBAR 10-4

Apabila Anda mengklik link Menerima Privat Les, maka file menerima_privat.html
akan dibuka dan ditampilkan pada jendela yang lain. Dan apabila Anda mengklik link
Tentang Saya, maka file about_me.html akan dibuka dan ditampilkan pada jendela
yang lain. Dan apabila Anda mengklik link Link ke Yahoo, maka Website Yahoo akan
dibuka (tetapi hasil link ini hanya dapat Anda lihat setelah Website dimasukkan ke dalam
Internet (server).
Tandanya sebuah teks adalah link, teks tersebut diberi garis-bawah dan diberi gambar
tangan ketika teks tersebut disorot. Itulah ciri-ciri sebuah link. Dan jika Anda menyorot
sebuah gambar dan gambar tangan muncul ketika Anda menyorot gambar, itu juga
adalah sebuah link. Klik saja untuk melihat apa isi link tersebut.

Dengan cara yang sama, tambahkan link pada halaman menerima_privat.html dan
about_me.html untuk kembali ke halaman utama (link_teks.html). Dalam contoh ini,
perintah untuk kembali halaman utama adalah sebagai berikut (sesuaikan dengan nama
file yang Anda buat):

<A HREF="link_teks.html">KEMBALI KE AWAL</A>

LINK DENGAN SOROT

Berikut ini adalah contoh link dengan sorot (link tak perlu diklik, tetapi cukup disorot saja
dengan mouse):

CONTOH HTML
Agar HTML ini dapat dijalankan, sebelumnya buat sebuah file yang akan di-link. Dalam
contoh ini nama file yang akan di-link adalah about_me.html. Ganti nama file sesuai
dengan nama file yang Anda buat.

GAMBAR 10-5
Nama file dalam CD: window_open1.html

HASIL SETELAH HTML DIJALANKAN:

Di layar muncul sebuah link dengan nama ABOUT ME. Jika link tersebut disorot, maka
file about_me.html akan dibuka dan dimunculkan di layar dalam jendela yang terpisah
(GAMBAR 10-6). Itulah contoh link dengan sorot.
 GAMBAR 10-6

LINK DENGAN GAMBAR

Berikut ini adalah contoh membuat link dengan gambar.

GAMBAR 10-7
Nama file dalam CD: link_gambar.html

HASIL SETELAH HTML DIJALANKAN:

 GAMBAR 10-8

Jika Anda menggerakkan mouse ke atas gambar, maka akan keluar gambar tangan
(grabber hand) dan sebuah pesan di atas task bar. Kliklah gambar tersebut, maka link
yang Anda masukkan ke dalam gambar akan dijalankan secara otomatis (GAMBAR 10-
9). Link bisa berupa halaman (file), Website orang lain, dan lain-lain. Jika link berupa
halaman seperti dalam contoh ini, maka halaman tersebut (file about_me.html) harus
Anda buat terlebih dahulu. Lihat kembali pelajaran sebelumnya.

GAMBAR 10-9

LINK DENGAN TOMBOL

Berikut ini adalah contoh membuat link dengan tombol.

 GAMBAR 10-10
Nama file dalam CD: link_tombol.html

HASIL SETELAH HTML DIJALANKAN:

GAMBAR 10-11: Link berupa tombol

Selanjutnya buatlah halaman (file) untuk KELAS-KELAS TERSEDIA dan simpan dengan
nama kelas_tersedia.html. Kemudian buat file untuk HUBUNGI KAMI, dan simpan
dengan nama hubungi_kami.html. Kemudian TENTANG KAMI dan simpan dengan
nama tentang_kami.html. Jalankan kembali HTML dan lihatlah hasilnya…
 GAMBAR 10-12
Contoh halaman untuk KELAS-KELAS TERSEDIA

Perintah <INPUT TYPE="button" dan onClick adalah link berupa tombol untuk kembali
ke halaman utama (dalam contoh ini kembali ke halaman link_tombol.html). Jika
dijalankan, maka Anda akan mendapatkan hasil seperti di bawah ini.

GAMBAR 10-13
Untuk kembali ke awal (halaman link_tombol), kliklah
tombol KEMBALI KE AWAL

LINK DENGAN IKON

Membuat link dengan ikon (gambar kecil) atau ikon animasi (gambar kecil bergerak-
gerak), sama caranya dengan gambar. Sebagai contoh kita akan membuat link pada file
 GAMBAR 10-14
Nama file dalam CD: kelas_tersedia.html

Setelah selesai, simpan dengan nama kelas_tersedia.html. Perintah <A

HREF="link_tombol.html"> dan <IMG SRC="tombol_home.gif" adalah perintah untuk
membuat link dengan ikon atau gambar. Sedangkan link_tombol.html adalah file yang
akan di-link (file utama), dan tombol_home.gif adalah nama ikon animasi.

HASIL SETELAH HTML DIJALANKAN:

GAMBAR 10-15

Untuk kembali ke halaman utama (link_tombol.html), kliklah ikon animasi tersebut.

Maka Anda akan dibawa kembali ke halaman utama (GAMBAR 10-16).
 GAMBAR 10-16

Dengan cara yang sama, demikianlah membuat link pada file HUBUNGI KAMI dan
TENTANG KAMI untuk kembali ke halaman utama. Dalam contoh ini, file HUBUNGI
KAMI dan TENTANG KAMI belum dibuat.

===ooOoo===