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>.
<A
HREF="http://www.stekom.ac.id">STEKOM 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:muthohir@stekom.ac.id".
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 macammacam 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 ....
1.
Nama
2.
Tempat/tanggal lahir
3.
Nama orang tua
a.
Ayah
b.
Ibu
4.
Pendidikan
i.
Sekolah dasar
ii.
Sekolah menengah pertama
iii.
Sekolah menengah atas
iv.
Perguruan tinggi
5.
Pekerjaan 6. Alamat
§ Rumah
§ Kantor
7.
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 codenya, 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.
Tidak ada komentar:
Posting Komentar