Web Desain
W – W – W
Sooo … luasnya internet (www), tentunya akan sulit mencari sesuatu di situ. Untungnya, semua punya alamat. Setiap halaman HTML mempunyai alamatnya sendiri-sendiri. Bahkan sebuah gambar (grafik) untuk halaman Web juga punya alamat sendiri.
Saat kamu meng-click hyperlink (link) pada suatu halaman Web, untuk ‘melompat’ ke halaman lain, yang terjadi adalah kamu memerintahkan brower untuk memanggil sebuah dokumen baru pada alamat link tersebut.
URL
Uniform Resource Locators (URLs) di pake untuk menentukan tempat dokumen di server. Untuk dapat menampilkan suatu dokumen maka komputer client dibutuhkan sebuah URL. Berikut ini adalah format penulisan suatu URL (yang dalam prakteknya, nggak harus ditulis selangkap ini):
protocol://machine.domain.name:port/path/document
-– contoh dalam prakteknya —
http://www.geocities.com/visiweb/index.html
— atau cukup dengan —
www.geocities.com/visiweb/index.html
Saat ini protokol yang paling banyak di gunakan dalam Web adalah HTTP. Makanya, banyak browser gunakan HTTP ini sebagai protokol default waktu kamu tidak secara spesifik menyebutan protokol saat memanggil suatu dokumen Web.
Ada protokol lain yang juga bisa kamu pilih selain HTTP, tapi kali ini saya nggak pingin menjelaskan semuanya …. eeemmmm, cukup “http” dan “mailto” saja dulu.
Praktisnya, http digunakan untuk mengakses suatu dokumen di web server sedangkan mailto di gunakan untuk mengirim sebuah ’surat’ ke alamat e-mail tertentu.
Hyperlink
Hyperlinks pada halaman Web sebenarnya tidak lebih dari sebuah URL. Praktisnya hyperlink (sering disebut dengan link saja) adalah text atau gambar tertentu di dokumen HTML yang kalau diklik, akan membawa kita ke sebuah halaman Web yang lain. Kalau text atau gambar yang berisi link tersebut disoroti dengan mouse, maka kursor biasanya berubah jadi simbol tangan.
Tapi … gimana donk cara buat link dengan code-code HTML ?!?! Mudah, gunakan saja tag <a> … </a> (ancor).
Misalnya kita pigin halaman Web terdapat suatu link ke yahoo.com maka cara penulisan tag-nya akan terlihat begini, <a href=”http://www.yahoo.com”>klik di sini untuk ke situs yahoo dot kom</a>.
listing_17.html
<html>
<head>
<title>Kirim e-mail ke Fuad Harahap</title>
</head>
<body>
<h2>Contoh Link ke Situs Laninnya</h2>
<hr>
<p>
<a href=”http://www.yahoo.com”>klik tulisan ini untuk link ke YaHöO</a></p>
<p>
— atau bisa juga klick pada gambar di bawah —–
<p>
<a href=”http://www.yahoo.com”><img src=”logo_yahoo.gif” border=”0″></a>
</body>
</html>
Mailto
Jika di perhatikan biasanya pada akhir halaman tertentu ada tulisan yang kurang lebih begini “click disini untuk hubungungi web master” atau bisa juga “anda punya komentar, silahkan dilick disini”. Itu artinya kalo kita pingin hubugi web master, atau kirim komentar lewat e-mail, maka cukup di-click pada tulisan itu saja. K-lo pingin bisa seperti itu, coba simak listing_18 dibawah ini.
listing_18.html
<html>
<head>
<title>Kirim e-mail ke Fuad Harahap</title>
</head>
Pingin hubungi saya ?!?!
Atau pingin ngasih komentar !?!?!
<p>
<body>
</body>
</html>
Tag Ancor <a>
Tag <a> (anchor) adalah tag untuk membuat link antar halaman yang terpisah atau bisa juga ke area yang khusus pada satu halaman web (catatan; lihat juga bookmark).
Tag <a> memiliki beberapa atribut di yaitu href, name serta target.
|
Atribut href |
: |
Hypertext Reference, atribut ini harus dipakai kalau kita membuat suatu link. Contoh : <a href=”http://www.geocities.com/visiweb”>ke visiweb</a> – atau k-lo tempat ‘click’ link-nya pake gambar –<a href=”http://www.geocities.com/visiweb”><img src= “logovisiweb.gif”></a> – untuk kirim e-mail –<a href=”mailto:fooinfo@www.yahoo.com”>suratin aku ya..</a> |
| Atribut name | : |
Ini biasaya di gunakan kalo kamu ingin membuat suatu bookmark, jadi gunakan atribut ini jika ingin memberi nama dari suatu ancor. Contoh : <a name=”daftar_isi”>DAFTAR ISI</a> |
| Atribut target | : |
Sesuai dengan namanya, atribut ini digunakan untuk meng-spesifikasikan kemana dokumen yang kita panggil tersebut akan di tampilkan. Apakah ke suatu ‘window’ baru, ke window yang sama, atau ke suatu bagian dari frame. Nilai yang valid untuk atribut ini adalah; _blank, _top, _parent, _self atau juga nama “frame”, k-lo kamu pake frameset. Contoh : <a href=”http://www.astaga.com target=”_blank”>Ke Astaga</a> |
Bookmark
Eemmm, sudah ‘ngertikan bagaimana cara membuat link? Kalo suatu link di-klik, maka browser akan membawa kita ke halaman web yang baru.
Sampe disini … link-link tersebut selalu membuka halaman web baru dan menampilkan bagian atas atau awal halaman.
Ada 2 (dua) masalah baru yang belum terpecahkan … Pertama, bagaimana caranya jika kita ingin membuat link yang menuju ke bagian tertentu di halaman web yang sama?
Kedua, menuju halaman web yang baru, dan misalnya langsung menuju bagian tengah halaman atau juga langsung pada paragrap tertentu. Kata kunci untuk memecahkan ke-dua problem tersebut adalah “Bookmark”.
Dalam kehidupan sehari-hari, kita sebenarnya telah akrab dengan bookmark. Untuk menandai halaman tertentu dari sebuah novel picisan, biasanya kita melipat bagian ujungnya. Lipatan tersebut berfungsi untuk menandai halaman tertentu di dalam novel tersebut. Well, ini adalah salah satu contoh bookmark.
Di dalam desain Web, bookmark merupakan bagian tertentu di dalam halaman Web (bisa berupa teks, gambar atau yang lainnya) yang diberi tanda tertentu. Lalu jika sebuah link di-klik, maka browser akan membawa kita ke “bagian tertentu” tersebut. Sebagai catatan tambahan, kamu boleh membuat satu atau lebih bookmark pada sebuah halaman web.
Untuk membuat bookmark, ada dua tag yang harus kita definisikan, yaitu:
1. Tag untuk link —untuk menuju ke bookmark—, dan
2. Tag untuk bookmark —tempat yang di tuju—
Selain itu kita juga harus membuat nama bookmark. Nama bookmark ini boleh apa saja, terserah kita.
Berikut adalah cara penggunaan tag-nya:
1. Tag untuk link: <a href=”#nama_bookmark”>……</a>
2. Tag untuk bookmark: <a name=”nama_bookmark”>……</a>
|
Perhatikan bahwa di dalam tag link, nama_bookmark diawali dengan tanda #. Sedangkan di dalam tag bookmark, tanda # tidak dibutuhkan. Pada link, tanda titik-titik (…..) dengan teks atau gambar yang berisi link. Sedangkan titik-titik (…..) pada bookmark dapat diisi dengan teks atau gambar dari bookmark tersebut. |
Perhatikan bahwa di dalam tag link, nama_bookmark diawali dengan tanda #. Sedangkan di dalam tag bookmark, tanda # tidak dibutuhkan.
Sedangkan yang titik-titik (…..) dapat diisi dengan teks atau apa saja yang berisi link atau bookmark tersebut.
Di bawah ini di tunjukan bagaimana menggunakan ‘bookmark’. Terdapat 4 buah bookmark pada contoh di bawah ini.
listing_19.html
<html>
<head>
<title>Penerapan bookmark</title>
</head>
<body>
</body>
</html>
My Last Coment