Bahasa Pemrograman Berbasis Web I

127 127

PERTEMUAN KE-5 :

LINK HTML

5.1 PENGANTAR LINK

Kelebihan utama dari dokumen HTML adalah

kemampuannya untuk memberikan link dari satu teks dan atau

gambar menuju dokumen atau bagian lain dalam satu dokumen.

Browser web akan menyorot ( highlight ) teks atau gambar

yang diidentifikasi sebagai link dengan warna dan atau garis bawah

untuk menunjukkan bahwa itu adalah hypertext link atau biasa

dikenal dengan sebutan link saja.

Gambar 5.1 Hyperlink dari Dokumen HTML


128 128

Dokumen HTML menggunakan hyperlink ( anchor ) untuk

menghubungkan kepada dokumen lain dalam web.

5.2 BENTUK PENULISAN LINK

Dalam HTML penulisan tag untuk membuat sebuah link yaitu

menggunakan tag anchor. Tag anchor disimbolkan dengan <a>.

Didalam tag tersebut terdapat sebuah attribut, yaitu href. Href

digunakan untuk mendefinisikan lokasi link.

Bentuk penulisan tag anchor atau untuk membuat sebuah

link :

<a href= “Sumber tujuan”> deskripsi teks link </a>

Penjelasan :

A : menunjukkan bahwa tag tersebut adalah tag anchor

yang digunakan untuk membuat sebuah link.

Href : merupakan attribut dari tag anchor untuk

mendefiniskan lokasi link.

Sumber tujuan : sumber tujuan dapat berupa URL yang merupakan

alamat dari situs web atau menggunakan nama file

notepad, jika ingin dilemparkan atau menuju ke file

lainnya.

Deskripsi teks : Deskripsi teks yang menjadikan judul dari link


129 129

5.3 LINK ABSOLUT

Link absolut merupakan link yang digunakan untuk

menghubungkan atau mengkaitkan antara alamat website satu dengan

website lainnya.

Bentuk penulisan untuk membuat sebuah link absolut sebagai

berikut :

<a href=http://www.google.com> Pencarian Google </a>

Penerapan di dalam sebuah media editor teks seperti dibawah

ini :

<html>

<head>

<title> Membuat Link Absolut</title>

</head> <body>

<h1>Silahkan Anda pilih tujuan Surfing Anda disini : </h1><hr>

<a href=“http://www.google.com”> Pencarian Google </a><br>

<a href=“http://www.yahoo.com”> Pencarian Yahoo ! </a><br>

<a href=“http://www.facebook.com”> Sosial Facebook </a><br>

<a href=“http://www.tweeter.com”> Sosial Tweeter </a><br>

</body>

</html>

http://www.google.com/


http://www.yahoo.com/

http://www.facebook.com/

http://www.tweeter.com/


130 130

Hasil dari menjalankan kode program tersebut dalam sebuah

browser web :

Gambar 5.2 Hasil Tampilan contoh_link1.htm

5.4 LINK RELATIF

Link Relatif adalah sebuah link yang digunakan untuk

menghubungkan atau mengkaitkan antara halaman satu dengan

halaman lainnya dalam satu komputer.


berikut :

<a href=”contoh_link1.htm”> Contoh Link Absolut </a>


131 131

Penerapan di dalam sebuah media editor teks seperti dibawah

ini :

<html>

<head>

<title> Membuat Link Relatif</title>

</head>

<body>

<h1>Klik Link Relatif dibawah untuk menuju halaman lain :

</h1><hr>

<a href=“contoh_link1.htm”> Contoh Link Absolut </a><br>

<a href=“contoh_css_external.htm”> Contoh CSS External </a><br>

<a href=“contoh_css_internal.htm”> Contoh CSS Internal </a><br>

<a href=“contoh_multiple.htm”> Contoh CSS Multiple </a><br>

</body>

</html>

Hasil dari menjalankan kode program tersebut dalam sebuah

browser web :


132 132


5.5 LINK SELF

Link self adalah link yang digunakan untuk menghubungkan

atau mengkaitkan antar bagian dalam satu dokumen atau halaman

web. Hal ini digunakan apabila dokumen di dalam sebuah halaman

web HTML termuat panjang.

Bentuk penulisan untuk membuat sebuah link self antara lain :

<a name= “nama_inisial”>...bagian teks atau objek yang dituju </a>

.............................................dst.............................................

<a href= “#nama_inisial”> deskripsi teks link </a>

Contoh penerapan dalam dokumen HTML seperti pada kode

program contoh_link3.htm berikut ini :


133 133

<html>

<head>

<title> Membuat Link Relatif</title>

</head>

<body>

<h1>PENDAHULUAN</h1><hr>

<p align="justify">

Kerja praktik adalah bentuk kegiatan bagi mahasiswa jenjang strata

satu maupun diploma tiga yang bertujuan agar mahasiswa memiliki

kemampuan profesional untuk menyelesaikan masalah-masalah

bidang informatika yang ada dalam dunia kerja dengan bekal ilmu

yang telah diperoleh selama masa kuliah.

<p align="justify"><a name="kedua"></a>

Kerja praktik diarahkan pada organisasi/instansi/perusahaan yang

mendayagunakan komputer sebagai instrumen teknologi informasi,

sehingga mahasiswa dapat mengamati prosedur kerja dan

menganalisis permasalahan kemudian merancang sistem

pemrograman atau aplikasi yang sesuai.

<p align="justify">

Lingkup kerja praktik dapat berupa :

1. Analisis dan perancangan peranngkat lunak atau jaringan pada

suatu instansi.

2. Pembuatan perangkat lunak bantu 3. Network administration

<p align="justify">

Dalam penentuan lingkup, skala dan kedalaman materi Kerja Praktik,

perlu diperhatikan faktor kontribusi pada bidang ilmu dan ketepatan

waktu. Pada suatu sistem institusi yang sudah mapan mahasiswa kerja

praktik minimal harus berprofesi sebagai software programmer atau

network administrator/designer.

<p align="justify">

Penulisan laporan kerja praktik membutuhkan buku pedoman bagi

mahasiswa maupun dosen pembimbing dalam membimbing

mahasiswa bimbingannya sehingga dihasilkan suatu keseragaman

s


134 134

format laporan.

</p>

<hr><a href="#kedua">Ke paragraf Dua</a>

</body>

</html>

Dari kode program diatas, mohon diperhatikan baik – baik

yang telah diberikan tanda merah khusus. Pada bagian yang diberikan

tanda merah tersebut merupakan titik penting untuk membuat sebuah

link self.

Proses pembuatannya boleh dimulai dari tanda merah yang

pertama diatas atau dari yang bawah sama saja, asalkan pemberian

nama inisial antara yang di URL link sama dengan yang diberikan

pada anchor name, begitu pula sebaliknya.

Berikut ini adalah hasil yang mana sementara menampilkan

keseluruhan isi dari kode program diatas.


135 135

Gambar 5.4 Hasil Tampilan contoh_link3.htm utuh

Kemudian dihimpitkan ukurannya sehingga pada bagian

paragraf kedua tidak lagi nampak dan diposisikan berada dibagian

paling bawah, dimana terdapat sebuah link untuk menuju ke paragraf

dua seperti pada gambar dibawah ini :


136 136

Gambar 5.5 Hasil Tampilan contoh_link3.htm posisi terbawah

Setelah posisi berada di bagian paling bawah, silahkan di

tekan link untuk menuju “Ke Paragraf Dua” tersebut, maka akan

segera ditunjukkan bagian paragraf keduanya sesuai dengan yang

telah ditentukan dalam kode program, bahwa anchor name di taruh

dibagian awal paragraf kedua.


137 137


5.6 ATTRIBUT LINK

Dalam dokumen HTML, link memiliki atribut bawaan yaitu

digunakan untuk memodifikasi pewarnaan judul link pada saat aktif,

disentuh klik, maupun sesudah diklik. Masihkah ingat pada saat

memperoleh dasar – dasar HTML. Nah, pada attribut BODY

terdapatlah atribut yang berkaitan dengan link ini. Adapun attribut

tersebut dituliskan sebagai berikut :


138

<BODY alink=“Kode /Warna” vlink=“Kode /Warna”

link=“Kode /Warna” >

.........................................dst..................................

</BODY>

Penjelasan :

Alink : digunakan untuk menentukan warna link pada saat disentuh

klik mouse maka akan terjadi perubahan warna.

Vlink : digunakan untuk menentukan warna link pada saat link sudah

digunakan atau di klik mouse, sehingga warnanya akan

berubah sesuai yang diberikan.

Link : digunakan untuk memberikan warna link pada saat link

tersebut belum digunakan sama sekali.

Contoh untuk menerapkan sebuah attribut diatas dapat dicoba

sesuai dengan kode program contoh_link4.htm berikut ini :

<html>

<head>

<title> Penggunaan Attribut Link</title>

</head>

<body alink=“red” vlink=“black” link=“orange”>

<h1>Mencoba attribut link pada BODY (alink,vlink, dan link

) :</h1><hr>

<a href="http://www.google.com"> Pencarian Google

</a><br>

<a href="http://www.yahoo.com"> Pencarian Yahoo !


139 139

</a><br>

<a href="http://www.facebook.com"> Sosial Facebook

</a><br>

<a href="http://www.tweeter.com"> Sosial Tweeter

</a><br>

</body>

</html>

Sehingga hasil dari program tersebut bila telah dijalankan,

seperti berikut ini :


5.7 MEMBUKA LINK NEW WINDOW

Contoh_link5.htm berikut ini mendemonstrasikan bagaimana

membuat sebuah link pada saat diklik akan membuka lembar baru

pada browser web.


140 140

Bentuk penulisannya adalah menggunakan :

<a href=“URL” target=“_blank”> deskripsi teks judul link</a>

Berikut ini contoh kode programnya :

<html>

<head>


</head>


<h1>Mencoba attribut link pada BODY (alink,vlink, dan link )

:</h1><hr>

<a href=“http://www.google.com” target=“_blank”> Pencarian

Google </a><br>

<a href="http://www.yahoo.com" target=“_blank”> Pencarian

Yahoo ! </a><br>

<a href="http://www.facebook.com" target=“_blank”> Sosial

Facebook </a><br>

<a href="http://www.tweeter.com" target=“_blank”> Sosial

Tweeter </a><br>

</body>

</html>


141 141

Hasil dari menjalankan kode program contoh_link5.htm

seperti gambar dibawah ini :


Setelah diklik salah satu link tersebut, maka akan membuka

lembaran baru seperti pada gambar berikut :

Gambar 5.9 Hasil Tampilan contoh_link5.htm setelah diklik

5.8 MENGHAPUS GARIS PADA LINK


142 142

Contoh ini akan menunjukkan bagaimana cara menghapus

sebuah garis bawah yang terdapat pada saat setiap kali membuat

sebuah link.

<html>

<head>


</head>


<h1>Mencoba attribut link pada BODY (alink,vlink, dan link )

:</h1><hr>

<a href=“http://www.google.com” target=“_blank” style=“text-

decoration:none”> Pencarian Google </a><br>

<a href="http://www.yahoo.com" target=“_blank” style=“text-

decoration:none”> Pencarian Yahoo ! </a><br>

<a href="http://www.facebook.com" target=“_blank” style=“text-

decoration:none”> Sosial Facebook </a><br>

<a href="http://www.tweeter.com" target=“_blank” style=“text-

decoration:none”> Sosial Tweeter </a><br>

</body>

</html>

Hasil tampilan dari kode contoh kode program tersebut

adalah :


143 143

Gambar 5.10 Hasil Tampilan Contoh Link Tanpa Garis

5.9 MEMBUAT LINK KIRIM MAIL

Contoh ini mendemonstarikan bagaimana membuat sebuah

link yang dapat mengirimkan sebuah pesan elektronik ( email ).

Berikut ini bentuk penulisan dan contoh dari kode programnya :

<a href=“mailto:alamat_email”> Deskripsi teks judul link</a>

Penerapan dalam kode program pada media editor text :

<html>

<head>

<title> Penggunaan MAIL TO</title>

</head>


<h1>Mencoba Kirim Email :</h1><hr>


144 144

<a href=“mailto:[email protected]” style=“text-

decoration:none”> Kirim Pesan </a>

</body>

</html>

Hasil Tampilan dari kode program diatas :

Gambar 5.11 Hasil Tampilan contoh_mailto.htm

Kemudian pada saat diklik link Kirim Pesan, maka akan muncul

seperti pada tampilan berikut :


145 145

Gambar 5.12 Hasil Tampilan Kirim Email

5.10 RANGKUMAN

Definisi link adalah salah satu tag dari dokumen HTML yang

digunakan untuk mengkaitkan atau menghubungkan antara halaman

satu atau web dengan halaman atau web lainnya.

Bentuk penulisan tag anchor atau untuk membuat sebuah

link :

<a href= “Sumber tujuan”> deskripsi teks link </a>

Penjelasan :


146 146

A : menunjukkan bahwa tag tersebut adalah tag anchor

yang digunakan untuk membuat sebuah link.

Href : merupakan attribut dari tag anchor untuk

mendefiniskan lokasi link.

Sumber tujuan : sumber tujuan dapat berupa URL yang merupakan

alamat dari situs web atau menggunakan nama file

notepad, jika ingin dilemparkan atau menuju ke file

lainnya.

Deskripsi teks : Deskripsi teks yang menjadikan judul dari link

Link terdiri dari tiga jenis, yaitu link absolut, link relatif, dan

link self.

Link absolut digunakan untuk menghubungkan atau

mengkaitkan antara alamat website satu dengan website lainnya.


berikut :

<a href=http://www.google.com> Pencarian Google </a>

Link Relatif digunakan untuk menghubungkan atau

mengkaitkan antara halaman satu dengan halaman lainnya dalam satu

komputer.



147 147


berikut :

<a href=”contoh_link1.htm”> Contoh Link Absolut </a>

Link self digunakan untuk menghubungkan atau mengkaitkan

antar bagian dalam satu dokumen atau halaman web. Hal ini

digunakan apabila dokumen di dalam sebuah halaman web HTML

termuat panjang.

Bentuk penulisan untuk membuat sebuah link self antara lain :

<a name= “nama_inisial”>...bagian teks atau objek yang dituju </a>

.............................................dst.............................................

<a href= “#nama_inisial”> deskripsi teks link </a>

link html

Documents