Belajar HTML (09): Membuat Link

Okeee… Setelah sebelumnya kita membuat tabel, selanjutnya kita bahas tentang bagaimana membuat link atau tautan dalam halaman web.

Apa itu link?

Link adalah tautan yang sering juga disebut dengan hyperlink. Gunanya sebagai sarana untuk melompat atau mengakses halaman web yang lain, baik secara internal atau eksternal. Biasanya secara umum link akan berupa sebuah objek baik itu teks atau gambar di mana ketika diletakkan kursor mouse di atasnya maka kursor akan berubah menjadi gambar telunjuk.

Ciri umum dari link yang berbentuk teks adalah warnanya biru, ada garis bawah, kursor mouse akan mejadi telunjuk jika diletakkan di atas link. Selain itu jika link pernak diklik warnanya akan berubah menjadi ungu.

Link tidak selalu berupa teks, tetapi bisa juga berupa gambar atau objek-objek lain dalam halaman. tetapi konsepnya tetap sama yaitu untuk melompat atau mengakses halaman lain.

Tag a

Untuk bisa menggunakan atau membuat link, kita perlu menggunakan tag <a> dan </a> pada halaman HTML. Adapun atribut yang digunakan adalah href="tujuan". Lengkapnya adalah <a href="tujuan">klik di sini</a>. Tujuan diisi dengan nama file halaman web lain yang akan dibuka.

Untuk lebih jelasnya, silahkan ketik kode berikut untuk halaman pertama, simpan dengan nama file 20-html-link-pertama.html.

<!DOCTYPE html>
<html>
<head>
   <title>Link Pertama</title>
</head>
<body>
   <p>Contoh <b>link</b> <font color="#ff5555">halaman pertama</font></p>
   <a href="21-html-link-kedua.html">buka halaman kedua<a>
</body>
</html>

Kemudian silahkan ketik dan simpan kode untuk halaman kedua dengan nama file 21-html-link-kedua.html.

<!DOCTYPE html>
<html>
<head>
   <title>Link Kedua</title>
</head>
<body>
   <p>Contoh <b>link</b> <font color="#009900">halaman kedua</font></p>
   <a href="20-html-link-pertama.html">kembali ke halaman pertama<a>
</body>
</html>

Selanjutnya silahkan diakses halaman pertama, lalu klik link berupa teks “buka halaman kedua” dan lihat hasilnya. Coba juga untuk kembali ke halaman pertama.

Contoh Link

Link Internal

Disebut juga link lokal, maksudnya adalah halaman yang akan dibuka atau diakses berada pada lokasi host/server yang sama. Contoh di atas adalah link lokal atau internal.

Ada 1 lagi contoh link lokal. Kalau sebelumnya link lokal tetapi membuka halaman lain, kali ini kita akan coba buat link lokal tetapi tidak membuka halaman lain. Maksudnya? Link lokal ini akan membuka bagian tertentu dari halaman itu sendiri, tidak membuka halaman lain.

Untuk membuatnya perlu ditambahkan tag penanda untuk bagian yang akan dibuka pada halaman tersebut. Misalnya ada bagian atas, tengah dan bawah. Setiap bagian tadi perlu diberi penanda menggunakan atribut name="nama_bagian", di mana nama_bagian nanti diisi bebas, sebagai contoh kita beri nama atas, tengah dan bawah. Kemudian untuk mengakses bagian-bagian tersebut, pada tujuan link langsung menggunakan nama_bagian didahului tanda pagar (#). Contohnya #bawah. Penulisan penandanya seperti ini <a name="bawah"></a> tanpa teks.

Selanjutnya →

Halaman : 1 2

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

2 Responses

  1. 16 Juli 2017

    […] kemarin kita bahas tentang bagaimana cara membuat link, kali ini kita bahas tentang cara menambahkan gambar ke dalam halaman web. Gambar ini nanti juga […]

  2. 25 September 2017

    […] Kali ini kita bicara tentang bagaimana membuat toolbar. Bahan bacaan yang terkait dengan tulisan ini adalah tentang icon, cara membuat link. […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *