Membuat link html Dalam Satu Halaman

Yang sering anda temui dalam sebuah website adalah link. Link ini akan membuat konten atau elemen HTML dapat di klik dan akan mengarahkan/membawa anda ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan bergaris bawah (selama belum diberi style).

Link Standar

Link atau biasa disebut dengan anchor (pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin kita buat menjadi link.

   
Klik <a>disini</a> untuk mendownload

Namun anda tidak akan melihat perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan attribut src pada tag img).

 
Klik <a href="http://www.link-yang-dituju.com">disini</a> untuk mendownload

Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan sebelumnya.

1. Buatlah file baru dengan nama coba1.html, simpanlah di folder yang sama dengan latihan-latihan sebelumnya.

Buatlah file baru dengan nama coba1.html, simpanlah di folder yang sama dengan latihan-latihan sebelumnya.

2. Ketikkan kode berikut pada file latihan3.html

   
<!DOCTYPE HTML>
<HTML>
<head>
<title>Melink kan file</title>
</head>
<body>
<h1>Selamat datang di website saya</h1>
<a href="coba1.html">Coba 1</a><br>
<a href="coba2.html">Coba 2</a>
</body>
</HTML>

3. Buka kembali file coba1.html dan coba2.html, dan tambahkan sebuah link yang akan mengait ke file coba3.html tepat sebelum penutup tag body ( </body> ).

 
<a href="coba3.html">Kembalike halaman utama <a></body></HTML>

4. Save pekerjaan anda, dan bukalah file coba3.html pada browser. Anda dapat mengklik linknya satu persatu.

Dan jika diklik akan berpindah halaman, jika anda klik Coba 1 maka akan pindah ke halaman coba 1

Klik Kembalike halaman utama untuk kembali ke halaman utama atau Coba 3

Jika anda perhatikan pada kode yang terdapat dalam latihan3.html, ada beberapa tag yang belum saya jelaskan, yaitu tag <h1> dan <br> digunakan untuk memindahkan teks kebaris baru, sehingga teks yang dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda menghapus tag ini, maka teks akan ditampikan satu baris.

Untuk membuat link yang mengacu ke halaman web lain, pastikan anda menyertakan http:// pada atribut href link tersebut.

 
<a href="https://www.zamalpost.site"> Zamal Post </a>

Jika anda tidak menyertakan http:// atau https:// maka link tersebut tidak akan bekerja sebagaimana mestinya. Setiap link yang diklik akan ditampilkan di window/tab yang sama, bagaimana jika anda ingin membuka link tersebut di tab/window baru? Tambahkan atribut target=“_blank”.

 
<a href="https://www.zamalpost.site"  target="_blank">Zamal Post </a>