BAB V Link atau Kaitan

Sekarang kita akan belajar membuat link yang merupakan ciri khas dari dokumen web. Link adalah sebuah teks atau gambar yang bila di-klik akan membawa anda ke bagian lain dari dokumen web. Sebuah link biasanya ditandai dengan teks warna biru bergaris bawah atau pointer mouse yang berubah menjadi telunjuk tangan. Untuk membuat sebuah teks atau gambar menjadi sebuah link, kita lakukan dengan mengapitnya dengan tag pembuka <A HREF> dan tag penutup </A>. Jadi rumusnya kira-kira sebagai berikut: 

<A HREF="lokasi_tujuan">link</A>.

Contoh link yang menuju ke situs lain: USM Website. Inilah kode sumbernya:

<A HREF="http://www.usm.ac.id">USM Website</A>

Berdasarkan lokasi tujuannya, link dapat dibedakan atas: 

1. Link yang menuju ke homepage (halaman pertama) dari sebuah situs
2. Link yang menuju ke halaman yang lain dalam situs yang sama
3. Link yang menuju ke halaman yang lain dalam situs yang lain
4. Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang sama. 
5. Link yang menuju ke bagian tertentu (bookmark) dalam halaman yang berbeda
6. Link yang mengarah ke sebuah file yang dapat ditampilkan dalam browser, misalnya file image (gambar) atau animasi seperti GIF, JPG, BMP dan sebagainya. 
7. Link yang mengarah ke sebuah file tertentu yang tidak bisa ditampilkan atau dijalankan dalam browser misalnya: file program (EXE), file kompresi (ZIP), file audio (seperti MP3, RM), file video, dan lain-lain. Bila link semacam ini diklik, akan muncul kotak dialog yang menanyakan apakah anda akan menyimpan (save) file itu dalam hardisk atau menjalankannya dengan program yang sesuai. Proses pengambilan dan penyimpanan file semacam inilah yang dinamakan download. 
8. Link yang mengarah ke alamat email. Bila link ini diklik akan membuka jendela pengiriman email dari program email yang terinstall pada komputer user (misalnya Microsoft Outlook). Pada kotak tujuan email (To:) sudah tercantum alamat email tujuan.

Untuk setiap jenis link di atas, yang penting untuk diketahui adalah cara penulisan alamat atau lokasi (URL) dari situs atau file yang dituju oleh link itu. Lokasi ini ditulis diantara tanda kutip sesudah atribut href=. Ketentuannya sebagai berikut:

1. Link yang menuju ke homepage (halaman pertama) dari situs lain, cukup dituliskan alamat URL dari website tersebut, misalnya: href="http://www.situs.com". 

2.    Link yang menuju ke halaman lain dalam situs lain, maka harus kita tuliskan alamat URL dan lokasi filenya.

Misalnya : href="http://www.situs.com/sini/situ.htm".

3.    Link yang menuju ke halaman lain dalam situs yang sama, maka cukup dituliskan lokasi filenya, tanpa menuliskan alamat URL situs itu. Dalam hal ini ada beberapa kemungkinan:

a)    Bila file tersebut berlokasi pada folder yang sama dengan file dari link tersebut maka cukup dituliskan nama filenya, misalnya: href="freeware1.htm". 

b)    Bila file yang dituju itu berada dalam folder yang lain di bawah folder yang ditempati oleh link tersebut, maka harus dituliskan nama foldernya. Misalnya: href="javascript/js001.htm".

c)    Sedangkan bila file yang dituju itu berada dalam folder yang lain di atas folder yang ditempati oleh file dari link tersebut maka dituliskan seperti berikut: href="../rainbow.gif".

d)    Bila file tersebut letaknya dua tingkat di atas maka dituliskan dua kali titik dua seperti ini: href="../../rainbow.gif" dan seterusnya.

4. Untuk membuat link yang menuju ke bagian tertentu dari sebuah halaman web, sebelumnya kita harus memberi nama pada tempat/lokasi yang akan dituju itu dengan mencantumkan tag <a name="bagian"></a> pada baris yang akan dituju itu. Setelah itu barulah kita bisa membuat link yang menuju ke bagian tersebut. Dalam hal ini ada dua kemungkinan.

a)    Bila tempat yang dituju itu terdapat dalam halaman yang sama dengan link tersebut maka cukup dituliskan nama lokasi yang dituju itu. Misalnya: href=#bagian.

b)    Bila tempat yang dituju itu terletak pada halaman yang lain maka harus dituliskan nama file dari halaman itu baru nama tempatnya. Misalnya: href="lain.htm#bagian". 

5. Link yang mengarah ke sebuah file yang bukan file HTML misalnya file program, audio, image, dan lain-lain cara penulisannya sama saja caranya dengan file HTML seperti pada point 1, 2 dan 3 di atas. 

6.    Link yang berisi alamat email dituliskan seperti berikut:

href="mailto:row_bee@yahoo.com".

Telah kita ketahui bahwa bila sebuah link diklik maka browser akan menampilkan halaman yang dituju oleh link tersebut. Cara browser memunculkan halaman tujuan ini ada dua macam.

1. Ditampilkan pada jendela yang sama. Artinya, halaman tempat link itu akan digantikan oleh halaman yang dituju oleh link tersebut. Ini merupakan cara pemunculan default.
2. Ditampilkan pada jendela yang lain. Artinya, akan muncul jendela baru yang menampilkan halaman yang dituju. Untuk membuat link semacam ini, kita harus menambahkan atribut TARGET="_blank" dalam tag <A HREF>. Contoh: <a href="webpage.htm" target="_blank">.

Sekian pelajaran tentang link. Agar anda lebih mengerti cara pembuatan macam-macam link tersebut, selanjutnya anda akan berlatih membuat beberapa halaman web dengan sejumlah link di dalamnya.  

LATIHAN

Untuk mempermantap keterampilan anda dalam membuat link sekaligus mengulang semua pelajaran yang telah lalu, kita akan mencoba membuat halaman web. Anggaplah ini adalah proyek pembuatan web anda yang pertama.  

Bukalah program Notepad anda. Klik menu File lalu Save. Pada kotak dialog yang muncul masuklah ke folder My Documents lalu folder My Webs. Cara masuknya, klik ganda (klik dua kali dengan cepat) folder yang bersangkutan. Setelah anda berada dalam folder My Webs, buatlah folder baru dengan cara mengklik ikon create new folder yang berada pada ikon ketiga. Maka akan muncul folder New Folder, silakan anda ganti namanya misalnya web1. Setelah itu pada kotak Save As Type, ganti isinya dengan All File. Lalu isi kotak File Name dengan nama yang anda sukai misalnya home.htm. Klik Save.

Pada file dengan nama home.htm ini, buatlah halaman web dengan judul (title) Halaman Pertama. Kemudian isilah halaman tersebut sedemikian rupa sehingga dalam browser tampak seperti ini:

HAL. 1 | HAL. 2 | HAL. 3 Selamat Datang di Proyek Pertama ! Judul di atas merupakan header level kedua yang diletakkan di tengah. Dalam proyek pertama ini saya akan berlatih membuat halaman web yang sangat-sangat sederhana. Halaman web ini akan saya isi dengan beberapa format penulisan halaman web yang telah saya pelajari. Dengan demikian saya bisa memperlancar dan mempermantap keterampilan saya membuat halaman web. Amin...! Ini Header Level Ketiga Masih ingat, kan cara membuat paragraf? Suatu paragraf bisa tidak diberi tag penutup. Yang penting anda ingat, bila akan membuat lagi paragraf baru, tulis tag pembuka paragraf. Sedangkan untuk membuat baris, ada tag tersendiri. Dalam paragraf ini anda akan mengulangi pelajaran membuat baris, seperti di bawah ini: Klik di sini untuk melihat Daftar Definisi. Untuk melihat Kesan dan Pesan, klik di sini.  Ini paragraf baru. Perlu anda ketahui bahwa halaman web yang tampak dalam browser merupakan beberapa baris kalimat, bila dibuat dalam kode HTML, bisa saja ditulis dalam satu baris saja. Yang penting untuk setiap baris baru harus diawali dengan tag <BR>. Ngerti maksudnya? Kembali Keatas | Selanjutnya

Sekarang kita akan membuat halaman web selanjutnya dengan judul Halaman Kedua dengan tampilan dalam browser sebagai berikut:

HAL. 1 | HAL. 2 | HAL. 3 Mengutak-atik Font Dalam halaman ini, kita menggunakan warna background kuning dengan font Comic Sans ukuran 2 warna biru sebagai font default. Masih ingat, kan cara pengaturannya?   Daftar Definisi Internet Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia. HTTP Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP. URL Singkatan dari Uniform Resource Locator adalah standar pegalamatan sebuah file di Internet yang dirancang khusus untuk digunakan dengan browser WWW seperti Netscape, Internet Explorer, Opera, dan lain-lain. Bila anda ingin mencari terjemahan kata-kata Inggris ke Indonesia atau Indonesia ke Inggris, pergilah ke situs KamusWeb.  Kembali Keatas | Selanjutnya

Simpanlah halaman di atas dengan nama misalnya: kuning.htm. Kemudian buatlah satu halaman web lagi dengan titel Halaman Ketiga seperti berikut:

HAL. 1 | HAL. 2 | HAL. 3 Inilah Biodataku .... Nama Tempat/tanggal lahir  Nama orang tua Ayah Ibu Pendidikan Sekolah dasar Sekolah menengah pertama Sekolah menengah atas Perguruan tinggi Pekerjaan Alamat Rumah Kantor  Hobi Pesan dan Kesan Membuat website sebenarnya gampang-gampang susah. Gampang karena kita tinggal mengganti kalimat-kalimat yang diletakkan diantara tag-tag. Kalau mau lebih mudah lagi, ambil saja halaman web yang sudah jadi (pilih yang paling sederhana). Buka source code-nya, kemudian edit lah isinya sesuai keinginan anda. Susahnya bila ingin membuat halaman web yang rumit dan dinamis. Untuk itu kita perlu belajar lebih banyak dan lebih giat lagi ....! Kembali Keatas

Simpanlah halaman ketiga di atas dengan nama misalnya: biodata.htm. Sekarang kita telah mempunyai tiga buah file HTML yaitu home.htm, kuning.htm dan biodata.htm. Tugas kita selanjutnya adalah memasukkan link-link ke dalam setiap halaman web tersebut. 

Dalam setiap halaman, di bagian atasnya terdapat link-link berikut: HAL. 1, HAL. 2 dan HAL. 3. Masing-masing link menuju ke file home.htm, kuning.htm dan biodata.htm.

<P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A>

Juga dalam setiap halaman, terdapat link Kembali Keatas dan Selanjutnya. Teks Kembali Keatas merupakan link yang membawa kita ke bagian paling atas dari setiap halaman. Untuk itu sebelumnya kita harus memberi nama pada baris tulisan HAL. 1 | HAL. 2 | HAL. 3 yang merupakan baris teratas dari setiap halaman. 

<HTML><HEAD><TITLE>Halaman Pertama</TITLE></HEAD> <A NAME="atas"></A><P ALIGN="RIGHT"><A HREF="home.htm">HAL. 1</A> | <A HREF="kuning.htm">HAL. 2</A> | <A HREF="biodata.htm">HAL. 3</A>

Setelah itu barulah kita membuat link Kembali Keatas dengan kode sebagai berikut:

<A HREF="#atas">Kembali Keatas</A>

Sedang teks Selanjutnya dijadikan link yang menuju ke file sesudahnya. Yakni dari file home.htm menuju ke kuning.htm dan dari file kuning.htm menuju ke biodata.htm. Contoh dalam file home.htm:

<A HREF="#atas">Kembali Keatas</A> | <A HREF="kuning.htm">Selanjutnya</A>

Dalam halaman pertama terdapat dua link lagi di bagian tengah yaitu link yang menuju ke Daftar Definisi yang ada di halaman kedua dan link yang menuju ke Kesan dan Pesan yang ada di halaman ketiga. Karena itu kita harus mencantumkan nama terlebih dahulu pada baris Daftar Definisi di halaman kedua (file kuning.htm) dan pada baris Kesan dan Pesan di halaman ketiga (file biodata.htm) seperti contoh berikut: 

<A NAME="defin"></A><H3>Daftar Definisi</H3>

Untuk halaman ketiga:

<A NAME="kesan"></A><H3>Kesan dan Pesan</H3>

Setelah itu barulah kita bisa memberi link pada kalimat berikut di halaman pertama:

<BR><A HREF="#defin">Klik di sini</A>untuk melihat <B>Daftar Definisi</B>. <BR>Untuk melihat<B>Kesan dan Pesan</B>, <A HREF="#kesan">klik di sini</A>.

Di halaman kedua (file kuning.htm) terdapat contoh link yang menuju ke situs yang lain. Buatlah link tersebut bila di-klik akan membuka jendela browser baru untuk menampilkannya. Begini jadinya:

<A HREF="http://www.kamus.web.id" TARGET="_blank">Kamus Web</A>

Bila anda telah selesai memasukkan seluruh link-link tersebut, bukalah browser anda, kemudian cobalah meng-klik semua link-link yang terdapat dalam ketiga halaman web itu.

Sampai pelajaran ini, anda sebetulnya sudah dapat membuat website sendiri. Kami sangat menyarankan anda mencoba membuat website sederhana dengan bekal pengetahuan yang telah anda pelajari.

ow:0;m��fi
h�TؽR:yes;mso-yfti-lastrow:yes'>

<HTML><BODY>

Ini adalah paragraf normal

<BLOCKQUOTE>

<P>Ini paragraf yang agak masuk ke dalam.

<P align="justify">Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa <b>semua baris</b> dalam paragraf ini letaknya agak masuk ke dalam. <i>Sama rata sama jauhnya</i>. 

</BLOCKQUOTE>

<P>Nah, paragraf ini kembali normal, karena tag <i>blockquote</i> sudah berlalu alias sudah ditutup di atas. Ngerti, kan?

</HTML></BODY>

Beginilah tampilannya dalam browser:

Ini adalah paragraf normal Ini paragraf yang agak masuk ke dalam. Ini juga contoh paragraf yang agak masuk ke dalam. Dengan kalimat yang agak panjang, kita lihat bahwa semua baris dalam paragraf ini letaknya agak masuk ke dalam. Sama rata sama jauhnya. Nah, paragraf ini kembali normal, karena tag blockquote sudah berlalu alias sudah ditutup di atas. Ngerti, kan?

Ketiga, membuat paragraf dalam susunan daftar definisi (definition list). Daftar definisi ialah susunan paragraf yang berselang-seling antara paragraf normal yang merupakan kalimat yang hendak dijelaskan dengan paragraf yang agak masuk ke dalam yang merupakan penjelasan atau definisi dari kalimat di atasnya. Untuk lebih jelasnya, berikut ini contoh daftar definisi:

Daftar Istilah Penting: Internet Singkatan dari interconnection network atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia. HTTP Singkatan dari Hypertext Transfer Protocol adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP. Karena cuma demo, cukup dua definisi sajalah.

Untuk membuat daftar definisi semacam di atas digunakan tiga macam tag yaitu <DL> yang menandai dimulai atau diakhirinya daftar definisi, <DT> yang menandai paragraf normal (yang dijelaskan) dan <DD> yang menandai paragraf yang agak masuk ke dalam (yang menjelaskan paragraf di atasnya).

Untuk contoh di atas beginilah kode sumbernya:

<HTML><BODY> <p align="center"><b>Daftar Istilah Penting:</b> <DL> <DT><B>Internet</b> <DD>Singkatan dari <i>interconnection network</i> atau hubungan antar jaringan. Internet ialah jaringan komputer global dan merupakan jaringan komputer yang terbesar di dunia karena mampu menghubungkan seluruh komputer yang ada di dunia.  <DT><b>HTTP</B> <DD>Singkatan dari <i>Hypertext Transfer Protocol</i> adalah salah satu protokol bahasa yang digunakan untuk berkomunikasi antar server komputer dalam internet. Protokol bahasa yang lain dalam internet misalnya: Telnet, News, Gropher, FTP. </DL> Karena cuma demo, cukup dua definisi sajalah. Nah, paragraf ini kembali normal. </HTML></BODY>

Sekarang, cobalah berlatih membuat daftar definisi sendiri!