MODUL 9 BEKERJA DENGAN LINK

Pada modul ini, Praktikan akan mengetahui dan memahami tentang fungsi dan cara menggunakan fitur LINK yaitu metoda untuk menghubungkan halaman web dengan data lainnya.

Link atau dalam bahasa Indonesia disebut dengan tautan adalah tulisan atau gambaryang apabila di klik akan menuju halaman tertentu sesuai dengan yang ditentukan oleh pembuat link. Link inilah yang membuat sebuah website kaya akan informasi, karena dapat dihubungan dengan website atau halaman web lainnya.

Tag <a>

Tag <a> merupakan satu-satunya tag yang digunakan untuk keperluan link ini. Tag <a> digunakan untuk menandakan awal pembuatan link dan diakhiri dengan </a>. Tag ini mempunyai 3 atribut utama, yaitu : href, name dan target. Perhatikan sintak form berikut :

<a href=ephi.web.id name=ephi target=_blank>www.ephi,.web.id</a>

Keterangan :

  • href, berisi alamat tujuan dari link, dapat berupa : o Alamat web lengkap : www.ephi.web.id

o  Alamat halaman web tertentu : www.ephi.web.id/foto/logo.jpg

o  Alamat tertentu dihalaman web yang sama : #atas

o  Alamat email : mailto:ephi.lintau@gmail.com

  • Name/id, merupakan identitas dari link.
  • Target, merupakan target/tujuan jika link di klik. Dapat bernilai :
  • _blank : akan membuka halaman browser yang baru.
  • _self : akan aktif pada halaman web saat ini/frame aktif.
  • _parent : akan tampil pada frame parent, terkait nantinya dengan tag frameset.
  • _top : akan tampil secara penuh tanpa frame.

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

  1. Latihan 1 : Absolut Link, menggunakan alamat lengkap website tertentu

Hasilnya :

Jika www.ephi.web.id di klik, maka akan diarah ke halaman web ephi.web.id

2. Latihan 2 : Lokal Link, menghubungkan dengan halaman website yang sama

Hasilnya :

3. Latihan 3 : Link dengan target

Hasilnya : jika link diatas di klik, maka akan terbuka halaman browser yang baru, karena menggunakan target=_blank.

4.

Hasilnya :

Jika file gambarnya berada pada folder yang sama dengan file html Anda, maka cukup panggil dengan nama filenya saja, misal <img src=ephi.jpg>.

5. Latihan 5 : Link pada halaman yang sama.

Jika anda mempunyai halaman web yang panjang, maka Anda dapat membuat link antar bagian dari halaman web tersebut. Misalnya pada sebuah halaman web ada sub judul a, sub judul b, sub judul c dan seterusnya. Maka Anda dapat membuat link untuk berpindah antar sub judul, dengan catatan setiap sub judul Anda beri nama terlebih dahulu dengan cara : <a name=sub_a></a>,<a name=sub_b></a><a name=sub_c></a>. Maka untuk linknya dapat dibuat seperti berikut :

Klik link berikut untuk <a href=”#sub_c”>Menuju Sub C </a> Jika dipanggil dai halaman web yang lain, maka <a href=namafile.html#sub_c>Sub C</a>

6. Latihan 6 : Link ke email

Hasilnya :

7. Latihan 7 : Link & Map

Hasilnya :

Silahkan anda cari link yang terdapat pada foto tersebut. Selamat mencariā€¦ Silahkan coba latihan berikut dan ambil kesimpulan :

1
2
3
4

REFERENSI LANJUTAN :

  1. http://htmlcssguides.com/hyperlink-html
  2. http://www.w3schools.com/html/html_links.asp
  3. http://www.tutorialspoint.com/html/html_image_links.htm