#45 Cara membuat link mengunakan tag a pada html

Cara membuat link menggunakan tag a HTML 5

pada tutorial ini kita akan belajar cara membuat link html menggunakan tag a untuk menghubungkan satu halaman dengan halaman lain.

Deskripsi

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://thohirdev.com/images/logo-tutorial.png"></>Code language: HTML, XML (xml)

meskipun kode tersebut menggunakan elemen anchor tapi tidak banyak berguna karena belum menyertakan instruksi tambahan, untuk membuat link kita perlu atribut tambahan ke elemen anchor.

Baca juga : cara membuat komentar pada html

Atribut tag a

1. href

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

Link absolute

contoh url lengkap situs web seperti https://thohirdev.com termasuk link eksternal karena menuju ke halaman web lain.

<a href="https://thohirdev.com"> website </a>Code language: HTML, XML (xml)

Link relatif

url yang mengarah ke dokumen lain dalam situs web sama.

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

<a href="/contact"> contact </a>Code language: HTML, XML (xml)

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

<a href="/"> Beranda </a>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

membuat link menuju ke posisi tertentu menggunakan atribut id

<a href="#menujukeid">menuju ke atribut id</a>Code language: HTML, XML (xml)

untuk menuju ke posisi tertentu harus menambahkan atribut id, nilai id harus sama dengan nilai atribut href seperti berikut ini.

<div id="menujukeid">
     Jika klik link paling bawah akan menuju kesini
</div>Code language: HTML, XML (xml)

atribut href juga bisa untuk memanggil nomor telepon bahkan mengirim email

sintaks link cara memanggil nomor telepon

<a href="tel:089669566600">telpon thohir</a>Code language: HTML, XML (xml)

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:mas@thohirdev.com">Kirim email</a>Code language: HTML, XML (xml)

kita juga dapat menambahkan alamat untuk penerima cc atau bcc menggunakan sintaks berikut.

<a href="mailto:mas@thohirdev.com?cc=info@thohirdev.com&bcc=admin@thohirdev.com
">Kirim email</a>Code language: HTML, XML (xml)

kita juga bisa mengisi subjek dan isi email

<a href="mailto:mas@thohirdev.com?subject=contoh+subjek&body=pesan+teks
">Kirim email</a>Code language: HTML, XML (xml)

bahkan tag a bisa membuat link untuk memanggil fungsi javascript

<a href="javascript:alert('Anda telah memanggil javscript')">Jalankan javascript</a>Code language: HTML, XML (xml)

jika kita klik link tadi maka akan muncul tampilan alert seperti ini

Coba script berikut ini yang sudah kita pelajari

<!DOCTYPE html>
<html>
<head>
    <title> Cara membuat link menggunakan tag a HTML </title>
</head>
<body>
    <p>
        <a href="https://thohirdev.com"> website </a>
    </p>
    <p>
        <a href="/contact"> contact </a>
    </p>
    <p>
        <a href="/"> Beranda </a>
    </p>
    <p>
        <div id="menujukeid">
            Jika klik link paling bawah akan menuju kesini
        </div>
    </p>
    <p>
        <a href="tel:089669566600">telpon thohir</a>
    </p>
    <p>
        <a href="mailto:mas@thohirdev.com">Kirim email</a>
    </p>
    <p>
        <a href="mailto:mas@thohirdev.com?cc=info@thohirdev.com&bcc=admin@thohirdev.com">
            Kirim email cc dan bcc</a>
    </p>
    <p>
        <a href="mailto:mas@thohirdev.com?subject=contoh+subjek&body=pesan+teks
            ">Kirim email subjek dan pesan</a>
    </p>
    <p>
        <a href="javascript:alert('Anda telah memanggil javscript')">Jalankan javascript</a>
    </p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>
        <a href="#top">ke atas</a>
    </p>
    <p>
        <a href="#menujukeid">menuju ke atribut id</a>
    </p>
</body>
</html>Code language: HTML, XML (xml)

Jika kita coba klik link website maka akan menuju web thohirdev sedangkan ketika klik contact tampilannya blank karena tidak ada halaman contact di web tersebut. coba sendiri link lainnya jika ingin mencobanya 🙂

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

<a href="https://thohirdev.com" style="color:red"> website </a>Code language: HTML, XML (xml)

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

<a href="https://thohirdev.com" style="color:red;text-decoration:none;"> website </a>Code language: HTML, XML (xml)

underline pada link tersebut sudah hilang

2. hreflang

hreflang adalah atribut yang berguna untuk memberitahu mesin pencari dalam menentukan bahasa situs web yang akan tampil. contohnya sebagai berikut.

<a href="https://thohirdev.com" hreflang="en">thohirdev</a>Code language: HTML, XML (xml)

contoh tersebut menunjukan bahwa halaman web https://thohirdev.com menggunakan bahasa inggris , jika bahasanya 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/thohirdevcom" 
rel="author">Muhammad Thohir</a>Code language: HTML, XML (xml)

Ada beberapa nilai atribut yang berbeda untuk menggambarkan hubungan antara link saat ini dan tujuan link.

rel=”nofollow” : gunakan nilai atribut ini jika kita menautkan ke link tujuan yang tidak ingin memberi reputasi pada situs web tertentu.

misalnya, jika kita ingin menautkan ke situs berisi spam sebagai contoh link web yang mempunyai rate buruk atau link yang bisa menyebabkan spam seperti link yang berada dikolom komentar, kita gunakan nilai ini agar mesin pencari mengabaikan nilai SEO

perbedaan link nofollow dan dofollow , nofollow singkatnya membuat Google tidak mengikuti link atau url yang disematkan sedangkan dofollow justru memberikan sinyal ke Google untuk mengikuti link tersebut. atribut dofollow tidak perlu di tambahkan karena secara default link sudah termasuk dofollow
rel=”alternate” : jika situs kita memiliki lebih dari satu versi, seperti terjemahan kedalam bahasa yang berbeda. Gunakan nilai ini untuk mengidentifikasi link sebagai versi alternatif dari laman sat ini.
rel=”bookmark” : Nilai ini untuk mengidentifikasi url yang permanen dan dapat untuk bookmark halaman.
rel=”help” : Identifikasi link yang menautkan sebagai link bantuan untuk halaman saat ini.
rel=”license”: Gunakan atribut ini saat menautkan ke lisensi hak cipta.
rel=”next”: Jika dokumen saat ini ada dalam rangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen berikutnya dalam rangkaian tersebut.
rel=”prev”: Jika dokumen saat ini ada dalam rangkaian dokumen, gunakan nilai ini saat menautkan ke dokumen sebelumnya dalam rangkaian tersebut.
rel=”noreferrer”: Jika Anda ingin menautkan ke situs web eksternal tetapi menghindari memberi tahu situs web tujuan siapa perujuknya.

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://thohirdev.com" target="_self">web thohirdev</a>Code language: HTML, XML (xml)

_blank : membuka link pada jendela atau tab baru

<a href="https://thohirdev.com" target="_blank">web thohirdev</a>Code language: HTML, XML (xml)

_top: menuju bagian paling atas pada halaman

<a href="https://thohirdev.com" target="_top">web thohirdev</a>Code language: HTML, XML (xml)

_parent : membuka link pada frame induk

<a href="https://thohirdev.com" target="_parent">web thohirdev</a>Code language: HTML, XML (xml)

framename : membuka link dalam bingkai bernama tertentu. ( sudah usang pada html5 dan tidak menyarankan untuk digunakan ), target framename memerlukan nama iframe untuk menuju ke frame tersebut.

<a href="https://thohirdev.com" target="framethohirdev">web thohirdev</a>
<iframe name="framethohirdev" width="600" height="400"></iframe>Code language: HTML, XML (xml)

5. title

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

<!DOCTYPE html>
<html>
<head>
    <title> Cara menggunakan atribut title pada tag anchor </title>
</head>
<body>
    <p>
        <a href="https://thohirdev.com" title="gerakan cursor diatas link ini"> website </a>
    </p>
</body>
</html>Code language: HTML, XML (xml)

coba script tersebut dengan menekan tombol biru coba script dan coba gerakan kursor ke link tersebut maka akan muncul keterangan dari teks yang ada pada atribut title

6. download

download adalah atribut yang 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://thohirdev.com/file.exe" download="File aplikasi">download aplikasi</a>Code language: HTML, XML (xml)

Pencarian di thohirdev:

cara membuat link html
image link html, kode link html, html link code
cara membuat link html notepad
membuat link html pindah halaman
cara membuat link pada frame html

byMuhammad Thohir S.Kom

Posted29 August 2020

Html