Bekerja dengan Link di HTML

Link atau Hyperlink adalah elemen html yang berfungsi menghubungkan suatu halaman web ke halaman web yang lain. Elemen yang menjadi link nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan.

a. Elemen a (Tag <a>)

Elemen Anchor (tag <a>) menunjukkan awalan hingga akhir dari suatu hypertext link. Artinya text biasa yang ditulis antara tag <a> dan tag </a> biasanya akan berwarna biru dan bergaris bawah. Teks berwarna biru yang terdapat pada halaman web tersebut web tersebut link. Bentuk sederhananya sebagai berikut:

    <a href="about.html">About us</a> 

    Keterangan :

    a = tag untuk membuat link 

    href = atribut untuk menentukan alamat URL tujuan dari link

    about.html = alamat URL tujuan yang akan dibuka saat link di klik

    About us = Teks label untuk link

    </a> =tag penutup

Tag <a> mempunyai atribut khusus yaitu href. Atribut ini digunakan untuk mendefinisikan alamat URL yang nantinya akan dituju. Kepanjangan dari href adalah Hypertext Reference Atribut pada tag <a>

Contoh pada Website

b. Elemen Link (tag <link>)

Elemen link pada dokumen HTML merupakan penghubung antara dokumern HTML yang bersangkutan dengan sebuah dile eksternal. Biasanya digunakan untuk menghubungkan dokumern html degan file CSS. Pada dokumern html elemen link ditulis dengan tag dan terletak di dalam tag. Tag ditulis tanpa penutup tag hanya berisi attribute dan value saja.

Elemen link mencangkup global attribute dan event atribut. Attribute dari tag sendiri bermacam-macam berikut attribute yang sering digunakan untuk elemen link.

Selain digunakan untuk menghubungkan dokumern html dengan file CSS, Tag <link> juga bisa digunakan untuk membuat icon (faticon) disebelah kiri title pada adress bar.

Jenis-jenis Link pada HTML

Berdasarkan alamat URL yang dituju, link pada html menjadi dua kelompok:

    1. Internal Link : adalah link yang menuju ke domain atau halaman web itu sendiri

Contoh:

    2. External Link : adalah link yang menuju domain lain.

Internal link biasanya digunakan untuk menghubungkan halaman yang satu dengan yang lainnya dalam satu website atau domain. Sementara untuk eksternal link, digunakan untuk membuka web atau domain lain. Misalnya seperti : membuka halaman facebook, membuka chat whatapp, membuka youtube, dan sebagainya.

 Atribut-atribut untuk Link 

    1. Menggunakan Atribut Target

Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan: 

        a. _blank akan membuka link pada jendela atau tab baru 

       b. _self akan membuka link pada halaman itu sendiri (default target); Biasanya digunakan untuk membuka link pada tab web browser yang sama. Value ini adalah nilai default, jika kita tidak memberi atribut target maka link akan dibuka pada tab yang sama atau tab yang sedang digunakan saat ini.

        c. _top menuju bagian paling atas pada halaman

        d.  _parent membuka ink pada frame induk

        e.  name-fframe akan membuka link pada <iframe> dengan nama tertentu

    2. Menggunakan Attribute rel

Attribute rel berfungsi untuk menentukan hubungan halaman yang menjadi tujuan dari link tersebut. Berikut ini value yang penting untuk diketahui dan paling sering digunakan:

        a. rel="nofollow" menunjukkan bahwa link tersebut tidak kita dukung atau tidak memiliki hubungan dengan website kita. Nofollow mwmbri info kepada search engine seperti Goole bahwa link tersebut tidak perlu diikuti. Dalam SEO ini dilakukan jika kita tidak ingin menambahkan poin plus kepada website tersebut dimata Google.

       b.  rel="sponsored" menunjukkan bahwa link tersebut adalah link sponsor. Value ini adalah value baru dari Google yang diperkenankan pada akhir tahun 2019.

       c.  rel="ugc" menunjukkan bahwa link tersebut adalah link yang dibuat oleh user. Ini sangat cocok untuk website yang berbentuk forum dimana konten dibuat oleh user.

        d.  rel="noreferrer" digunakan untuk melarang web browser mengirimkan header referrer.

    - rel="noopener" digunakan untuk mencegah penggunaan windows opener. Ini digunakan untuk meningkatkan keamanan website. noopener dan noreferrer sebaiknya digunakan saat membuat link tearget_blank atau link yang dibuka pada tab baru. 

    3.  Menggunakan Atribut title

Attribute ini berfungsi untuk membuat tooltips.Tooltipa adalah informasi tambahan yang akan tampil saat link disentuh  pointer atau saat kita menahan tap di hp. 

* Cara Mengubah Warna Link di HTML

Warna default link adalah biru, ini bisa kita ubah dengan syle CSS. Warna bisa kita berikan untuk teks dan latar belakang (background). Caranya dengan menambahkan atribut style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background-color (untuk latar).

Contoh: 

* Fungsi Menarik Lainnya dari Link

    1) Membantu Link Buntu 

    Link buntu adalah link yang tidak akan membuka apapun. Ia biasanya digunakan sebagai placeholder atau sampel saja. Cara membuatnya: Tambahkan tanda pagar atau tanda seru pada atribut href.

    2) Membuat Link Anchor

    Link Anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkat, lalu ditarik ke sana. Karena itu, dia dinamai anchor.

Contoh: 

    3) Membuat Link untuk Memanggil Fungsi Javascript

    Link dapat juga digunakan untuk dungsi Javascript. Pemanggil fungsi Javascript biasanya dilakukan dengan atribut even seperti onclick, onmouserover, onmouseout dan sebagainya. 

    4) Membuat Link dengan Gambar

    Membuat gambar sebagai link kadang sering dilakukan dalam web. Cara membuatnya sangat mudah, kita hanya perlu membungkus tag <img> dengan tag <a>.

    5) Membuat Link untuk Download File 

    Link kadang juga digunakan sebagai link untuk download file. Cara membuatnya sangat mudah, kita hanya perlu memasukan alamat URL dari file yang akan didownload.

    6. Membuat Link untuk Mengirim Email

    Link kadang juga digunakan untuk mengirim email. Cara membuatnya:Ubah URL tujuan dari link dengan mailto, lalu diikuti dengan alamat email yang akan menerima email.