Sabtu, 22 Oktober 2011

Dasar-Dasar HTML Part 6

7.2 Hyperlink ke Halaman Web
Dikatakan hypertext apabila dalam sebuah tambilan halaman website terdapat hyperlink. Situs dalam internet hampir seluruhnya menggunakan hyperlink. Hyperlink sifatnya ada dua yaitu : pertama, berpindah dari satu halaman ke halaman lain dan yang kedua, dapat berpindah tetapi hanya dalam satu halaman saja. Tag yang digunakan untuk membuat hyperlink adalah pasangan tag <A>…</A> atau yang biasa disebut tag jangkar atau anchor tag. Bentuk paling sederhana penggunaan tag jangkar adalah sebagai berikut :
<a href = “url”>Label Link</a>. URL(Uniform resource Locator) dapat berupa alamat suatu dokumen web, gambar, ataupun menyatakan suatu protokol lain (misalnya FTP).

Untuk lebih jelasnya dapat dilihat pada contoh berikut ini :
Simpan Program 1, berikut dengan nama file “alamat.html”

Alamat.html
<html>
<head><title>Membuat Link</title></head>
<body>
<pre>
Address : Green Kost Production
    Jl. Jambu 1 No.12 Gedung Meneng
                Bandar Lampung 35145
<a href="utama.html">kembali ke menu utama</a>
</pre>
</body>
<html>

Simpan Program 2, berikut dengan nama file “Profile.html

Profile.html
<html>
<head><title>Membuat Link</title></head>
<body>
<pre>
           ……. Green Kost Production …….
Merupakan Unit Usaha yang bergerak di bidang
Video Shooting, yang dapat melayani :
-          Pembuatan Dokumentasi dalam bentuk Video
-          Video Klip
-          Duplikasi VCD & DVD skala kecil/besar (Legal), dll.

<a href="utama.html">kembali ke menu utama</a>
</pre>
</body>
<html>




Simpan Program 3 sebagai file utama, berikut dengan nama file “utama.html

Utama.html
<html>
<head><title>Membuat Link</title></head>
<body>
<pre>
           ……. Green Kost Production …….
Silahkan Klik Pilihan Anda :
<a href =”alamat.html”>Address</a>
<a href =”profile.html”>Profile</a>
</pre>
</body>
<html>

7.3 Link ke Situs Web Lain
Hyperlink tidak hanya untuk perpindahan dari dari satu halaman ke halaman-halamn web yang berada pada sistem yang sama seperti yang telah kita praktekan pada latihan sebelumnya. Hyperlink juga bisa digunakan untuk menuju ke halaman situs lain yang berada di internet. Untuk lebih jelasnya perhatikan kode program berikut ini :

Weblink.html
<html>
<head><title>Membuat Link</title></head>
<body>
<pre>
           ……. Alamat Website Pilihan : …….
Silahkan Klik Pilihan Anda :
<a href =”www.8tanda.com”>Situs Astrologi</a>
<a href =”www.sikuncung.com”>Galery Anak</a>
<a href =”www.kezia.web.id”>Koleksi Dongeng Untuk Anak</a>
</pre>
</body>
<html>



7.4 Warna Hyperlink
Teks atau Label yang menjadi hyperlink atau penghubung ke halaman yang web lain secara otomatis akan diberi warna tertentu (biasanya biru) bergaris bawah. Namun warna tersebut sebenarnya dapat diubah sesuai dengan keinginan kita. Caranya dengan menggunakan atribut LINK yang terdapat pada tag body. Untuk jelasnya dapat dilihat pada latihan berikut :

warnaLink.html
<html>
<head>
<title>Membuat warna Link</title></head>
<body link=”green”>
<pre>
           ……. Alamat Website Pilihan : …….
Silahkan Klik Pilihan Anda :
<a href =”www.8tanda.com”>Situs Astrologi</a>
<a href =”www.sikuncung.com”>Galery Anak</a>
<a href =”www.kezia.web.id”>Koleksi Dongeng Untuk Anak</a>
</pre>
</body>
<html>

Selain menggunakan link untuk pemberian warna, terdapat dua atribut lagi yang digunakan untuk memberikan warna pada hyperlink, yaitu :
·                                                                 ALINK : Berguna untuk menentukan link aktif, yaitu link yang telah diklik
pemakai, tetapi halaman belum selesai dibuka.
·         VLINK : Berguna untuk menentuka warna link yang halaman web
Terkaitnya atau yang dilink telah dikunjungi.

Penggunaan atribut link, alink dan vlink dapat dilihat pada penggalan program berikut ini :
<body link=”green” alink=”red” vlink=”pink”>

Pada contoh di atas link akan berwarna hijau sekiranya belum pernah diklik, berwarna merah ketika diklik dan halaman belum dibuka, dan berwarna pink jika halaman sudah pernah dibuka.

7.5 Menggunakan Bookmark
Terkadang dalam membuat sebuah halaman dapat berisi informasi yang sangat panjang. Jika suatu halaman web terlalu panjang, untuk menggulung scrool yang panjang dapat menjadi masalah tersendiri bagi seseorang. Untuk mengatasi hal ini adakalanya halaman tersebut dilengkapi dengan sejumlah hyperlink yang menuju ke bagian tertentu pada halaman itu sendiri. Hyperlink seperti diimplementasikan melalui bentuk bookmark. Dengan menggunakan bookmark, pemakai tidak perlu membolak-balik halaman secara manual maupun menggulung scrool bar untuk mendapatkan informasi yang terletak dibagian tertentu dalam halaman tersebut. Untuk lebih jelasnya perhatikan pada contoh berikut ini :

Bookmark.html
<html>
<head>
<title>Membuat Link</title>
<body>
<center>
<h1> Realita Kehidupan </h1><br><br>
<b>Daftar Isi :</b><br>
<a href =”#bag1”>Bagian Pertama</a>
<a href =”#bag2”> Bagian Kedua</a>
<a href =”#bag3”> Bagian ketiga</a>
<a href =”#penutup”> Baagian Penutup</a>
<hr><hr>
<a name=”#bag1”>
<h3>Bagia Pertama</h3>
Bagian ini merupakan isi cerita pada bagian pertama ….
……… <br>
……… <br>
……… <br>
……… <br>
……… <br>
<hr>
<a name=”#bag2”>
<h3>Bagian Kedua</h3>
Bagian ini merupakan isi cerita pada bagian kedua ….
……… <br>
……… <br>
……… <br>
……… <br>
……… <br>
<hr>
<a name=”#bag3”>
<h3>Bagian Ketiga</h3>
Bagian ini merupakan isi cerita pada bagian ketiga ….
……… <br>
……… <br>
……… <br>
……… <br>
……… <br>
<hr>
<a name=”#penutup”>
<h3>Bagian Penutup</h3>
Bagian ini merupakan isi cerita pada bagian Penutup ….
……… <br>
……… <br>
……… <br>
……… <br>
……… <br>
<hr>
</center>
</body>
<html>

7.6 Link dengan Gambar
Link tidak hanya dapat berupa teks tetapi untuk mengganti teks tersebut kita dapat menggunakan gambar. Sebuah gambar dapat dijadikan sebagai link ke halaman lain. Caranya adalah dengan memberikan tag <img> di antara pasangan tag <a> dan </a>, bentuk penulisannya adalah :
<a href=”alamat.html”><img src="C:/gambar/dian/db.gif" </a></a>
7.7 Membuka Jendela Baru
Variasi lain dari model hyperlink salah satunya adalah apabila kita mengklik suatu link, dokumen utama tidak akan menghilang melainkan akan terbuka jendela lain yang menampilkan informasi suatu halaman. Hal ini bisa dikerjakan dengan menambahkan kode : “  target = “_blank ”. Penggunaan atribut target dapat dilihat pada contoh berikut ini :

Target.html
<html>
<head>
<title>target</title>
</head>
<body>
<h1>Menu Utama</h1>
Silahkan Klik :<br>
<a href=”hal1.html” target = “_blank”>halaman 1</a><br>
<a href=”hal2.html” target = “_blank”>halaman 2</a><br>
</body>
</html>

0 komentar:

Posting Komentar