Bagaimana langkah-langkah membuat link html?

Dalam tutorial ini kita akan belajar cara membuat link html menggunakan tag a untuk menghubungkan satu halaman ke halaman lainnya

Keterangan

Tag atau jangkar adalah tag yang mendefinisikan hyperlink untuk menunjukkan link ke halaman lain

cara menulis sintaks jangkar

<a> link yang tidak bisa di klik </a>
<a><img src="https://thohirdev.com/images/logo-tutorial.png"></>
Code language: HTML, XML (xml)

walaupun kodenya menggunakan elemen anchor tetapi tidak terlalu berguna karena belum menyertakan petunjuk tambahan, untuk membuat link kita membutuhkan atribut tambahan pada elemen anchor

Baca juga. cara membuat komentar di html

Tag atribut a

1. href

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

Tautan absolut

contoh url lengkap situs web seperti https. //thohirdev. com menyertakan tautan eksternal karena mengarah ke halaman web lain

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

Tautan relatif

url yang mengarah ke dokumen lain di situs web yang sama

Tautan ini merupakan tautan internal karena masih berada di situs web yang sama, misalnya /kontak menunjuk ke halaman kontak

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



Code language: HTML, XML (xml)

jika kita ingin masuk ke halaman depan web, kita dapat menggunakan sintaks berikut

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

Tautan mengarah ke dokumen indeks. html atau index. php jika menggunakan php

buat link untuk menuju ke bagian atas halaman web ketika posisinya berada di bagian bawah halaman web

<a href="#top">ke atas</a>
Code language: HTML, XML (xml)

buat tautan 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 sebagai berikut

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

Atribut href juga dapat digunakan untuk memanggil nomor telepon dan bahkan mengirim email

tautan sintaks cara memanggil nomor telepon

<a href="tel:089669566600">telpon thohir</a>



Code language: HTML, XML (xml)

jika nilai atribut href adalah tel. ketika Anda mengklik tautan, Anda akan memanggil nomor tersebut

tautan sintaks cara mengirim email

jika nilai atribut href mailto. kemudian akan membuka alamat email ketika diklik

<a href="mailto:[email protected]">Kirim email</a>
Code language: HTML, XML (xml)

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

<a href="mailto:[email protected][email protected]&[email protected]
">Kirim email</a>
Code language: HTML, XML (xml)

kita juga bisa mengisi subjek dan isi email

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

bahkan tag a dapat membuat tautan untuk memanggil fungsi javascript

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

Coba script berikut yang sudah kita pelajari

Coba Skrip

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

Warna tautan default adalah biru, cara mengubah warna tautan di html dengan menggunakan gaya CSS

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

cara menghilangkan garis bawah pada link html dengan dekorasi teks css. tidak ada;

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

2. hreflang

hreflang adalah atribut yang berguna untuk memberi tahu mesin pencari dalam menentukan bahasa situs web yang akan ditampilkan. misalnya sebagai berikut

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

Contoh menunjukkan bahwa halaman web https. //thohirdev. com menggunakan bahasa inggris, jika bahasanya bahasa indonesia maka ganti kode bahasanya dengan id

3. rel

rel adalah atribut yang berfungsi untuk menggambarkan hubungan dari dokumen saat ini dengan dokumen target

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

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

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

• rel=”jangan ikuti”. gunakan nilai atribut ini jika kita menautkan ke tautan tujuan yang tidak ingin memberikan reputasi ke situs web tertentu
  
  misal kita ingin link ke situs yang mengandung spam, misal link web yang ratenya jelek atau link yang bisa menimbulkan spam seperti link di kolom 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 padahal dofollow justru memberikan sinyal kepada google untuk mengikuti link tersebut. Atribut dofollow tidak perlu ditambahkan karena secara default link sudah menyertakan dofollow
  
  
• rel=”alternatif”. jika situs kami memiliki lebih dari satu versi, seperti terjemahan ke berbagai bahasa. Gunakan nilai ini untuk mengidentifikasi tautan sebagai versi alternatif dari halaman sat ini
  
• rel="bookmark". Nilai ini mengidentifikasi url permanen dan dapat digunakan untuk menandai halaman
  
• rel="bantuan". Identifikasi tautan penghubung sebagai tautan bantuan untuk halaman saat ini
  
• rel=”lisensi”. Gunakan atribut ini saat menautkan ke lisensi hak cipta
  
• rel="selanjutnya". Jika dokumen saat ini berada dalam rantai dokumen, gunakan nilai ini saat menautkan ke dokumen berikutnya dalam rantai
  
• rel="sebelumnya". Jika dokumen saat ini berada dalam rantai dokumen, gunakan nilai ini saat menautkan ke dokumen sebelumnya dalam rantai
  
• rel=”noreferrer”. Jika Anda ingin menautkan ke situs web eksternal tetapi hindari memberi tahu situs web tujuan siapa perujuknya
  

4. target

target adalah atribut yang berfungsi untuk menentukan target saat membuka link. tidak ada atribut target

• _diri sendiri. buka tautan di halaman itu sendiri (target default dan biasanya tidak perlu menambahkannya)

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

• _kosong. buka tautan di jendela atau tab baru

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

• _atas. ke bagian atas halaman

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

• _induk. buka tautan di bingkai utama

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

• framename. membuka tautan dalam bingkai bernama tertentu. (usang di html5 dan tidak disarankan untuk digunakan), nama bingkai target memerlukan nama iframe untuk masuk ke bingkai

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

5. judul

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

Coba Skrip

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

coba scriptnya dengan menekan tombol biru coba scriptnya dan coba pindahkan kursor ke link maka akan muncul keterangan teks di atribut title

6. unduh

unduh adalah atribut yang berfungsi memberi tahu browser bahwa tautannya adalah file

Langkah demi langkah membuat tautan dalam HTML?