Bab 12

Mengatur Link

ABIMANYU PUTRA RAMADHAN

Tecnical Director Programer Smart Online School
" Sekolah Khusus Netter Indonesia "
 Daftar Isi Bab 12

1 Membangun link antar halaman.................................................................355

1.1 Membuat halaman baru ................................................................................. 355
1.2 Membuat link ................................................................................................ 356
1.3 Memodifikasi link .......................................................................................... 361
2 Membuat link ke dunia luar ........................................................................362
1.4 Link ke electronic mail................................................................................... 362
1.5 Link ke internet atau intranet.......................................................................... 363
3 Link internal (bookmark) ............................................................................364
1.6 Bookmark satu halaman................................................................................. 364
1.7 Bookmark halaman lain ................................................................................. 368
4 Berpindah di sepanjang Link ......................................................................370
5 Diagram link ..................................................................................................370
6 Memeriksa masalah link ..............................................................................372
1.8 Verifikasi ...................................................................................................... 373
1.9 Perbaikan ..................................................................................................... 374

354
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
1 Membangun link antar halaman
Akhirnya kita tiba pada bagian hyperlink. Anda telah menguasai pembuatan situs
web, dan pembuatan halaman-halaman web, dan sekarang adalah saatnya untuk
menghubungkan halaman-halaman tersebut.
Sebelum membuat link, Anda harus memiliki minilam dua halaman (*.htm atau
*.asp). Jika belum ada, marilah kita membuat halaman baru.

1.1 Membuat halaman baru

Seperti telah dibahas pada bab 2, bahwa proses membuat halaman baru pada
prinsipnya mirip dengan pembuatan dokumen pada Microsoft Word.
1. Kali ini gunakan saja Page Template, aktifkan File → New Page or site. Lalu
pada task pane klik ganda Pages templates. Muncul kotak dialog Pages
Templates, pilih icon template halaman, misal Narrow,Right-aligned Body.

Gambar 12.1 Icon template Narrow,Right-aligned Body

2. Klik OK, hasilnya seperti berikut:

Gambar 12.2 Hasil template Narrow,Right-aligned Body

355
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 3. Kemudian editlah teks yang ada di sebelah kanan, misalnya menjadi seperti
berikut:
Kekuatan …
Kekuatan adalah kemampuan seseorang untuk tetap bertahan dan berusaha terus dalam keadaan
tertentu yang menyakitkan.
Hadiah bagi yang berkekuatan besar adalah prestasi, kepandaian, kemuliaan, pujian, kuasa dan
sebagainya ….

4. Hasil pengeditan tampak seperti Gambar 12.3.

Gambar 12.3 Hasil pengeditan

5. Kemudian simpanlah halaman, misalnya sebagai kekuatan.htm. Caranya, dari
menu File klik Save, tampil kotak dialog Save As seperti Gambar 12. 4. Lalu
tuliskan kekuatan.htm dan klik OK. Tampil kotak dialog konfirmasi
pemasangan gambar.
6. Klik OK.

1.2 Membuat link

Ada dua cara untuk membuat link ke halaman-halaman lain di dalam web Anda.
Anda dapat membuat link ke halaman yang sudah ada, atau membuat link ke
halaman baru pada saat bersamaan. Kita akan mulai dengan cara yang pertama.
Andaikan Anda sudah memiliki beberapa halaman, dan ingin saling
menghubungkannya. Misalnya, Anda ingin menghubungkan halaman utama
(index.htm atau default.htm), ke halaman lain. Beginilah caranya:

356
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
1. Pilih teks untuk menempatkan link, yaitu teks yang dapat diklik pemakai untuk
mengaktifkan link tersebut.

Gambar 12.4 Kata Kekuatan terpilih

2. Klik tombol Insert Hyperlink ( ), atau pilih Insert _Hyperlink. Kotak

dialog Insert Hyperlink tampil, seperti Gambar 12.5.

Gambar 12.5 Menghubungkan ke halaman yang kita inginkan

3. Untuk menghubungkan ke salah satu halaman yang terbuka, klik halaman yang
Anda inginkan, misalnya Kekuatan.htm lalu klik OK. Perhatikan hasilnya. Kata
“Kekuatan” tersebut kini berubah warna dan memiliki garis bawah.

357
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.6 Hasil link halaman
Untuk mencoba hasilnya, klik tab Preview lalu klik kata Kekuatan, maka halaman
Kekuata.htm akan ditampilkan. Lihat Gambar 12.7.

Gambar 12.7 Halaman asal dan halaman tujuan link

Metode kedua adalah membuat halaman baru pada saat membuat link. Beginilah
caranya:

358
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
1. Pilihlah teks yang ingin Anda jadikan link, misalnya kata “Doa” , Gambar 12.8.

Gambar 12.8 Kata Doa terpilih sebagai kata link

2. Klik tombol Insert Hyperlink atau klik perintah Insert _ Hypperlink. Kotak
dialog Insert Hyperlink terbuka.

Gambar 12.9 Icon Create New Document pada kotak dialog Insert Hyperlink
3. Klik icon Create New Document, Anda akan melihat informasi seperti pada
Gambar 12.10.

359
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.10 Pengisian informasi baru
4. Pada kotak isian Name of new document tuliskan nama halaman baru,
misalnya Doa.
5. Klik OK. Hasilnya berupa halaman yang langsung dibuka dan siap diedit.

Gambar 12.11 Halaman baru siap diedit

6. Kemudian tuliskan teks, misalnya seperti berikut ini:
DOA
Untuk tetap hidup, manusia perlu makan. Tubuh kita perlu gizi, jiwa kita perlu motivasi dan
roh kita mutlak perlu doa.
Doa adalah nafas iman, yang menjaga manusia dari terkaman dosa dan kebinasaan abadi
7. Lalu formatlah teks untuk mempercantik halaman, kalau perlu sisipkan gambar,
sisipkan WordArt dan terapkan theme. Contoh hasilnya seperti Gambar 12.12.

360
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.12 Hasil pengeditan
8. Kemudian simpanlah halaman, dari menu File klik Save. Tampil kotak dialog
Save As. Isikan nama yang Anda inginkan pada kotak isian Address, misalnya
doa.htm.
9. Kemudian cobalah hasilnya pada tab Preview atau View _ Preview in
Browser, bila komputer Anda terhubung ke web server.
Link akan diwarnai dan digarisbawahi, dan ketika pada tampilan browser Anda
menunjuk link itu maka pointer mouse akan berubah menjadi sebuah icon tangan
kecil.
Anda dapat mengubah warna link tersebut dengan menggunakan kotak dialog Page
Properties.

1.3 Memodifikasi link

Anda bisa memodifikasi sebuah link, caranya:
1. Klik ganda teks yang menjadi link, kata terpilih.
2. Klik kanan kata tersebut lalu klik perintah Hyperlink Properties. Tampil kotak
dialog Edit Hyperlink.

361
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.13 Kotak dialog Edit Hyperlink
3. Unttuk mengganti halaman yang dikait, klik nama halaman baru yang Anda
inginkan, atau langsung tuliskan pada kotak Address.
4. Untuk menghapus link, hapuslah nama halaman yang ada pada kotak isian
Address.
5. Klik OK.
Anda akan melihat bahwa teks tersebut telah berubah kembali menjadi normal, yaitu
tidak lagi berwarna lain dan tidak digarisbawahi.

2 Membuat link ke dunia luar

Kita bisa membuat kaitan ke manapun yang kita inginkan, ke halaman lain, ke
dokumen pesan melalui e-mail, ke Internet, ke Intranet, bahkan ke bagian lain pada
halaman kita sendiri.

1.4 Link ke electronic mail

Kita bisa membuat link ke e-mail, dengan cara:
1. Klik ganda teks, teks tersebut akan terpilih.
2. Klik kanan kata tersebut lalu klik perintah Hyperlink Properties. Tampil kotak
dialog Edit Hyperlink.

362
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.14 Icon e-mail address
3. Klik icon e-mail Address (lihat Gabar di atas) yang akan membuka pilihan baru
seperti Gambar 12.13.

Gambar 12.15 Pengisian data e-mail

4. Lalu tuliskan alamat e-mail tujuan pada kotak isian e-mail address.
5. Isikan topik berita pada kotak isian Subject.
6. Kalau perlu tuliskan alamat-alamat alternatif pada kotak isian recently used e-
mail address.
7. Kemudian klik OK.

1.5 Link ke internet atau intranet

Anda mungkin ingin mengkait dengan suatu halaman di World Wide Web, Internet
atau yang ada pada jaringan Intranet perusahaan.
Untuk melakukan hal itu, pada kotak dialog edit Hyperlink Anda harus klik tombol

World Wide Web ( ). Yang akan menampilkan browser untuk digunakan

mencari objek di WWW.

363
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.16 Browser aktif
Anda harus memberitahukan FrontPage mengenai halaman apa (atau obyek lainnya)
yang ingin Anda kait dengan menuliskan address-nya, misal:
http://www.zenith.co.id/tip/trik.htm
Bukalah halaman yang ingin Anda kait. Untuk membantu pencarian, gunakan
tombol history list, bookmarks, atau Favorites list.
URL halaman yang sedang ditampilkan pada browser akan ditempat-kan di kotak
Address pada kotak dialog Edit Hyperlink. Klik OK, maka Anda telah membuat
link halaman dengan URL tersebut.

3 Link internal (bookmark)

Anda mungkin telah melihat halaman-halaman dengan link yang dapat membawa
Anda dari satu bagian halaman ke bagian lain yang masih di dalam halaman tersebut.

1.6 Bookmark satu halaman

Hal itu dwujudkan dengan bookmark (para pembuat web sering menyebutnya
target). Membuat sebuah link seperti ini prosesnya hanya dua, yaitu:
1. Pertama Anda harus membuat bookmark atau target.
2. Kemudian Anda harus membuat link ke target tersebut.

364
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
Untuk membuat sebuah bookmark, langkah yang diperlukan adalah:
1. Tempatkan cursor pada bagian awal baris yang ingin Anda sisipi dengan
bookmark.

Gambar 12.17 Penenmapat kursor pada awal baris tujuan

2. Kemudian aktifkan Insert _Bookmark. Kotak dialog Bookmark muncul (lihat
Gambar 12.18).

Gambar 12.18 Kotak dialog Bookmark

3. Ketikkan sebuah nama untuk bookmark itu pada kotak teks Bookmark Name,
misalnya Syukur.

365
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 4. Kemudian klik OK. Muncul icon bookmark.

Gambar 12.19 Tanda bookmark tampil

Dan Anda telah membuat sebuah bookmark, yaitu sebuah teks dengan garisbawah
biru putus-putus. Lihat Gambar 12.19 di atas.
Selain menggunakan kotak dialog Bookmark, Anda juga dapat menggunaka cara
seperti pada pengolah kata, yaitu:
1. Buka kotak dialog Bookmark
2. Klik sebuah masukan.
3. Klik tombol Goto untuk menuju ke baris tujuan.
Anda telah membuat bookmark. Sekarang bagaimana meng-hubungkannya? Anda
telah melihat bagaimana membuat link ke halaman lain, langkah pengkaitan
bookmark ini sangat mirip dengan hal tersebut, yaitu:
1. Pilihlah teks tempat link bookmark. Misalnya seperti Gambar 12.20.

366
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.20 Teks “Bersyukur” terpilih
2. Klik tombol Insert Hyperlink atau pilih Insert _ Hyperlink. Kotak dialog Insert
Hyperlink terbuka.
3. Klik icon Place in this document. Daftar Bookmark terbuka, lalu pilihlah
Syukur (Gambar 12.24).

Gambar 12.21 Pemilihan Bookmark

4. Klik OK. Hasilnya, kata bersyukur akan berwarna terang dan mempunyai garis
bawah, mirip dengan tanda hyperlink.
Hanya itulah yang perlu dilakukan untuk membuat sebuah link dari satu bagian
halaman ke bagian lainnya. Selanjutnya Anda bisa mencoba link yang dibangun
dengan bookmark tersebut.
Hasilnya tampak seperti Gambar 12.22.

367
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.22 Tampilan asal dan tampilan tujuan (bookmark)

1.7 Bookmark halaman lain

Bagaimana dengan membuat link dari satu halaman ke halaman lainnya, tetapi yang
dihubungkan adalah sebuah bookmark pada halaman tujuan, bukan ke dokumennya
itu sendiri? Itu mudah, walaupun ada yang hal-hal yang perlu diwaspadai:
Jika halaman tujuan dalam keadaan terbuka di FrontPage, Anda tinggal memilih
halaman yang Anda inginkan lalu memilih bookmark dari kotak daftar Bookmark.
Jika halaman itu dalam keadaan tertutup, FronPage tidak dapat menyediakan daftar
Bookmark dalam bidang Current FrontPage Web. Anda dapat mengetikkan nama
bookmark ke kotak teks Bookmark (jika Anda hafal nama halaman dan nama
bookmark-nya) atau membuka halaman tersebut lalu memilih icon halaman yang
Anda inginkan.
FrontPage juga tidak dapat menyediakan daftar bookmark jika Anda ingin
menyambung ke World Wide Web. Akan tetapi, dalam beberapa kasus Anda bisa
saja menemukan bahwa URL yang Anda peroleh dari browser telah berisi sebuah
bookmark. Jika ada sebuah nama file di dalam URL yang diikuti dengan tanda pagar
(#) lalu diikuti beberapa teks, maka itulah bookmark misalnya:
index.html#Kelompok Diskusi
Jika Anda mengetahui nama bookmark yang ingin Anda gunakan, Anda dapat
menuliskan dengan susunan
namahalaman #namabookmark
Contohnya:
1. Bukalah halam yang akan dipasang link.

368
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
2. Klik ganda teks yang akan dipasang link bookmark, misalnya seperti
Gambar 12. 23 sebelah kiri.

Gambar 12.23 Halaman asal dan halaman tujuan dengan bookmark

(Kekuatan.htm#Syukur)
3. Klik tombol Isert Hyperlink, munul kotak dialog Insert Hyperlink.
4. Pada kotak isian Address tuliskan nama halaman lalu diikuti tanda # dan
nama bookmark, dalam contoh ini Kekuatan.htm#Syukur. Lihat Gambar7.24
di bawah ini:

Gambar 12.24 Address bookmark

5. Klik OK. Kata syukur akan berubah menjadi teks hyperlink.
6. Selanjutnya Anda bisa mencoba hasilnya.

369
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
4 Berpindah di sepanjang Link
Pada sebuah browser Anda dapat membuka halaman tertentu dengan meng-klik
sebuah link yang mengacu pada halaman tersebut. Namun Anda tidak dapat
menggunakan cara tersebut pada FrontPage. Kenapa? Sebab halaman pada
FrontPage adalah dalam kondisi pengeditan. Cara membuka halaman dari link-nya
harus dengan menekan tombol CTRL lalu klik link tersebut.
Jika Anda mengklik sebuah link ke bookmark dalam halaman yang sama, baris di
mana bookmark berada akan bergerak ke atas agar bisa tampak.
Dan jika Anda mengklik sebuah link yang menghubungkan ke halaman lain diluar
web Anda, FrontPage akan mencoba untuk memanggil halaman tersebut, baik itu di
harddisk atau di World Wide Web. Dengan kondisi pengeditan, sebenarnya kita
dapat juga leluasa bergerak di dalam World Wide Web, hal ini berkat pertolongan
tombol CTRL.
Pada waktu Anda menelusuri link dengan cara-cara di atas, sebenarnya Anda telah
menggunakan FrontPage sebagai sebuah browser.

5 Diagram link
Untuk menampikan diagram link, klik icon Hyperlink (lihat Gambar 12.25) atau
View _ Hyperlink.
Klik tanda positif untuk menampilkan icon-icon tujuan link. Setalah icon-icon tujuan
link tampil, tanda berubah menjadi negatip.

370
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.25 Diagram hyperlink
Icon yang tampil tidak hanya halaman, namun juga icon gambar atau yang lainnnya.
Untuk memilih jenis icon, klik kanan garis link, muncul menu pop up.

Gambar 12.26 Pop up menu

Lalu dari menu yang ada klik pilihan yang disediakan, di antaranya:
• Show Page Titles, untuk menampilkan nama halaman sebelum disimpan
dengan nama baru.
• Hyperlink to Pictures, untuk menampilkan icon gambar.
• Repeated Hyperlinks , untuk menampilkan seluruh link yang halaman asal
dan tujuannya sama.
• Web Settings…, untuk menampilkan kotak dialog Web Settings.

371
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.27 Kotak dialog Web Settings
Untuk menampilkan halaman, klik ganda icon halaman yang Anda inginkan.

6 Memeriksa masalah link

Kita akan membuat FrontPage agar memeriksa semua link yang ada pada situs web,
dengan tujuan supaya link-link tersebut dapat bekerja dengan baik.
Mislanya ada link terputus di dalam situs Anda, seperti Gambar 12.28. Kita akan
membahas cara pebaikan link yang terputus ini.

Gambar 12.28 Link terputus

372
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Langkah pertama adalah pemeriksaan situs, apakah sudah benar semua atau ada
kesalahan. Untuk ini kita perlu melakukan verifikasi.
Setelah diketahui ada masalah, kita haru melakukan perbaikan.

1.8 Verifikasi
Metode pertama yang harus kita lakukan ini memerlukan langkah sebagai berikut:
1. Simpanlah semua halaman yang sedang terbuka.
2. Aktifkan View _Reports _Problems_Broken Hyperlinks . Muncul report
yang menampilkan file -file dengan link yang terputus.

Gambar 12.29 Report link terputus

3. Untuk memeriksa validitas link, klik tombol Verify Hyperlink ( ), muncul

kotak dialog Verify Hyperlink.

Gambar 12.30 Kotak dialog Verify Hyperlink

373
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 4. Klik Start, proses verifikasi dimulai.

1.9 Perbaikan
Kalau Anda mendapatkan laporan bahwa ada link yang terputus, maka tindakan
yang harus kita lakukan adalah memperbaikinya. Langkah perbaikan tersebut adalah:
1. Simpanlah semua halaman yang sedang terbuka.
2. Aktifkan View _Reports _ Problems _ Broken Hyperlinks. Muncul report
yang menampilkan file -file dengan link yang terputus.
3. Untuk memperbaiki link terputus itu, klik ganda file yang terputus tersebut.
Muncul kotak dialog Edit Hyperlink.

Gambar 12.31 Kotak dialog Edit Hyperlink

4. Kalau Anda ingin mengedit halaman asal link, klik tombol Edit Page. Halaman
asal akan ditampilkan, dan Anda bisa mengeditnya, misalnya mengubah teks
link.
5. Kalau Anda mengetahui URL halaman tujuan yang benar, tuliskan saja pada
kotak isian Replace hyperlink with. Tombol Replace akan aktif, klik tombol
ini. Proses perbaikan dimulai.
6. Anda bisa juga menggunakan tombol Browse untuk mencari halaman tujuan
tersebut. Kotak dialog Edit Hyperlink akan terbuka.

374
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.32 Kotak dialog Edit Hyperlink
7. Gunakan kotak dialog tersebut untuk menentukan halaman tujuan link. Setelah
Anda menemukan halaman tujuan yang benar, address-nya akan ditulis ke kotak
isian Replace hyperlink with. Lalu klik Replace. Proses perbaikan dimulai.
8. Setelah selsai perbaikan hasilnya adalah seperti Gambar 12.33 dan 12.34.

Gambar 12.33 Report kosong

375
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "
 Gambar 12.34 Link tidak ada yang putus

376
http://www.SmartOnlineSchool.com
" Sekolah Khusus Netter Indonesia "