Tutorial #6 | Link dengan tag a

Membuat link mengunakan tag <a> pada html

Tag <a> atau anchor adalah tag yang mendefinisikan sebuah hyperlink untuk menunjukkan link ke halaman lain.

Cara penulisan sintaks anchor

<a> link yang tidak bisa di klik </a><a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLbUCaM3OvHxAORoFlP3jQn6TL2ibTG-NPMdUe4wpZpg2mIzFBWRGA4dVJqv06VoIzxElL81U_IMNKTSXxTnMLZ2UKrk0YsD6lxjEtC2UidPR-gPE-U7qarhy3puA5c1UdFrMxmfmU1CU/s320/logo5.png"></>

Agar link bisa di klik kita perlu atribut tambahan ke elemen anchor.

Atribut tag <a>

1. href

href adalah atribut yang berfungsi untuk menentukan alamat tujuan, url pada atribut href dibagi menjadi 2 url, yaitu sebagai berikut.

Link absolute

Contoh url lengkap situs web seperti https://tutorialflashaplikasiandroid.blogspot.com termasuk link eksternal karena menuju ke halaman web lain.

<a href="https://tutorialflashaplikasiandroid.blogspot.com"> klik disini </a>

Link relatif

Untuk mengarah ke dokumen lain dalam situs web sama dapat menggunakan url.

Link ini termasuk link internal karena masih berada pada website yang sama, misalnya /contact menunjuk ke halaman contact.

<a href="/contact"> contact </a>

Jika kita ingin ke halaman depan web bisa menggunakan penulisan sintaks berikut.

<a href="/"> Home </a>

Link tersebut mengarahkan ke dokumen index.html atau index.php jika menggunakan file php.

Membuat link untuk menuju ke paling atas halaman web saat posisi berada paling bawah halaman web

<a href="#top">ke atas</a>

Sintak link cara memanggil nomor telepon

<a href="tel:0853667923..">nomor telpon saya</a>

Jika nilai atribut href berupa tel: saat klik link tersebut maka akan menghubungi nomor tersebut.

Sintaks link cara mengirim email

jika nilai atribut href mailto: maka akan membuka alamat email saat klik:

<a href="mailto:starsdev.com">Kirim email</a>

Dapat juga ditambahkan alamat untuk penerima cc atau bcc menggunakan sintaks berikut.

<a href="mailto:starsdev.com?cc=palbes.com&bcc=admin@starsdev.com">Kirim email</a>

Menambahkan subjek dan isi email

<a href="starsdev.com?subject=contoh+subjek&body=pesan+teks">Kirim email</a>

Membuat link untuk memanggil fungsi javascript

<a href="javascript:alert('Memanggil javscript')">Jalankan javascript</a>

Jika Anda mengklik link yang muncul, maka akan muncul tampilan alert seperti berikut.

 

Link berwarna biru adalah warna default, cara merubah warna link pada html dengan menggunakan style CSS

<a href="https://tutorialflashaplikasiandroid.blogspot.com" style="color:red"> website </a>

Cara menghilangkan underline pada link html tersebut dengan css text-decoration:none;

<a href="https://tutorialflashaplikasiandroid.blogspot.com" style="color:red;text-decoration:none;"> website </a>

2. hreflang

hreflang adalah atribut yang digunakan untuk menentukan bahasa situs web yang akan tampil.

<a href="https://tutorialflashaplikasiandroid.blogspot.com" hreflang="en">starsdev</a>

contoh tersebut menunjukan bahwa halaman web https://tutorialflashaplikasiandroid.blogspot.com menggunakan bahasa inggris, jika ingin mengganti menjadi bahasa Indonesia maka kode bahasa ganti dengan id.

3. rel

rel adalah atribut yang berfungsi untuk mendeskripsikan hubungan dari dokumen saat ini dengan dokumen tujuan.

Misalnya, kita dapat menggunakan untuk mengidentifikasi alamat tujuan sebagai sumber tentang penulis dokumen.

tutorial ini di tulis oleh <a href="https://www.instagram.com/ngotak" rel="author">pak Gen</a>

4. target

target adalah atribut yang berfungsi untuk menentukan target pada saat membuka link. ada nenerapa ilai atribut target:

· _self : membuka link pada halaman itu sendiri (default target dan biasanya tidak perlu menambahkannya)

<a href="https://tutorialflashaplikasiandroid.blogspot.com" target="_self">web pakGen</a>

· _blank : membuka link pada jendela atau tab baru

<a href="https://tutorialflashaplikasiandroid.blogspot.com" target="_blank">web pakGen</a>

· _top: menuju bagian paling atas pada halaman

<a href="https://tutorialflashaplikasiandroid.blogspot.com" target="_top">web Seno</a>

· _parent : membuka link pada frame induk

<a href="https://tutorialflashaplikasiandroid.blogspot.com" target="_parent">web Seno</a>

5. title

title adalah atribut yang berfungsi sama seperti tooltips, yaitu memberikan informasi tambahan yang akan tampil saat kursor bergerak menyentuh link.

Ketik kode berikut pada HTMLPad

<!DOCTYPE html>
<html>
<head>
    <title> Tutorial atribut title pada tag anchor </title>
</head>

<body>
    <p>
        <a href="https://tutorialflashaplikasiandroid.blogspot.com" title="posisikan kursor diatas link ini"> klik disini</a>
    </p>
</body>

</html>

Posisikan kursor pada teks “klik disini”, akan muncul tooltips dengan keterangan.

6. download

Atribut download berfungsi untuk memberi tahu browser bahwa link tersebut merupakan sebuah file.

Nilai yang diberikan ke atribut download adalah nama dari file tersebut.

<a href="https://senoadjie.com/file.exe" download="File Game">download game</a>

 

Published: Seno Adjie.