Format Teks

Konsep Hyperlink HTML

Materi Bisa Download DISINI

Kompetensi Dasar :

3.5 Menerapkan format kaitan pada halaman web

4.5 Membuat kode html untuk menampilkan format kaitan pada halaman web

Materi Pokok :

1. Konsep hyperlink dalam html

2. Tag-tag untuk hyperlink

Konsep Hyperlink HTML

Pengertian Hyperlink

Link atau sering disebut dengan Hyperlink Text adalah suatu metode yang Digunakan dalam HTML untuk membuat hubungan antar halaman yang Terdapat dalam satu situs web. Dalam keadaan default atau normal suatu link ditandai dengan teks berwarna biru yang memiliki garis bawah.

Dikatakan hypertext apabila dalam sebuah tambilan halaman website terdapat hyperlink. Situs dalam internet hampir seluruhnya menggunakan hyperlink. Hyperlink sifatnya ada dua yaitu :
1. berpindah dari satu halaman ke halaman lain.
2. berpindah letak dalam satu halaman saja.

Cara Kerja Link Dalam HTML

Hyperlink Ke Halaman Web

Untuk membuat suatu link, HTML menyediakan suatu tag khusus, yaitu tag <a>, yang berpasangan dengan </a> atau yang biasa disebut tag jangkar atau anchor tag. Setiap teks yang diapit oleh tag ini akan ditampilkan sebagai link. 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).

Contoh Program

Utama.html

html> <head><title>Membuat Link</title></head> <body> <pre> …… MAKMUR SEJAHTERA PRODUCTION…… Silahkan Klik Pilihan Anda : <a href =”alamat.html”>Address</a> <a href =”profile.html”>Profile</a> </pre> </body> <html>

Alamat.html

<html> <head><title>Membuat Link</title></head> <body> <pre> Address : Makmur Sejahtera Production Jl. Jambu 1 No.12 Bandung 40132 <a href="utama.html">kembali ke menu utama</a> </pre> </body> <html>

Profil.html

<html> <head><title>Membuat Link</title></head> <body> <pre> …… Makmur Sejahtera 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>

Link ke Situs Web Lain

Hyperlink tidak hanya untuk perpindahan dari dari satu halaman ke halaman-halaman web yang berada pada sistem yang sama, Hyperlink juga bisa digunakan untuk menuju ke halaman situs lain yang berada di internet.

Contoh Program

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

Membuat Link untuk halaman lokal (membuat bookmark)

Hyperlink 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.

Contoh Program

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

Warna pada Hyperlink

Tulisan Hyperlink dapat diberikan warna sesuai dengan keingainan dengan menggunakan perintah LINK, ALINK dan VLINK yang disisipkan pada perintah sebagai berikut : <BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”>

Contoh Program

<HTML> <HEAD> <TITLE> Hyperlink </TITLE> </HEAD> <BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”> Ini Bagian pertama dari Web saya. Silahkan membaca halaman kedua <CENTER> <A HREF=”halaman2.html”>Ke Halaman 2</A> </CENTER></BODY> </HTML>

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="gbr1.gif"></a>

Contoh Pemrograman

Utama.html

<html> <head><title>Membuat Link</title></head> <body> <pre> …… MAKMUR SEJAHTERA PRODUCTION…… Silahkan Klik Pilihan Anda : <a href =”alamat.html”><img src=”sunset.jpg” width=100 height=100></a> <a href =”profile.html”><img src=”winter.jpg” width=100 height=100></a> </pre> <html>

Profile.html

Target Hyperlink

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”. atribut target terdapat beberapa macam, yaitu :

a. _Blank Target ke windows baru

b. _self Target ke frame atau window yang sama

c. _parent Target ke frame yang lebih atas satu tingkat dalam window yang sama

d. _top Target ke frame yang paling atas dalam windows yang sama

Contoh Pemrograman

<html> <head><title>Membuat Link</title></head> <body> <pre> …… Alamat Website Pilihan : …… <a href=”www.8tanda.com” target=”_blank”>Astrologi</a> <a href =”www.sikuncung.com” target=”_self”>Galery Anak</a> <a href =”www.kezia.web.id” target=”_top”>Dongeng Anak</a> </pre> </body> <html>