Cara Membuat Berbagai Macam HyperLink HTML Di Web

Zona Internetku No Comment November 26, 2018

Cara Membuat Berbagai Macam HyperLink HTML Di Web. HyperLink merupakan kata yang berasal dari kata Hyper yang didapat dari kepanjangan HTML, sedangkan Link merupakan sebuah tujuan dari kode HTML yang akan di muat. Jadi jika tombol link diklik maka akan memuat halaman yang telah ditentukan oleh atribut href.
HyperLink dibuat dengan kode tag <a> yang artinya anchor dan kode <a> juga memiliki atribut href yang berarti hypertext reference yang berfungsi untuk memuat tujuan yang ada, baik itu untuk menuju url website, email, dan lainnya.

Berikut ini adalah contoh dasar dari penggunaan tag kode <a> pada html untuk membuat sebuah link di website, silahkan kalian buka text editor kalian seperti notepad++ ataupun sublime text, kemudian simpan kode berikut ini dengan format .html dan buka dengan browser kalian

<html>
<head>
<title>Belajar Membuat Link</title>
</head>
<body>
<p>
Saya belajar membuat link di situs <a href="https://zonainternetku.blogspot.com" target="_blank">Zona Internetku</a>
</p>
</body>
</html>

dari kode di atas maka hasil output yang akan ditampilkan adalah elemen teks yang muncul yaitu Zona Internetku, sedangkan url tujuannya yaitu situs https://zonainternetku.blogspot.com

Baca juga :
Mengatur Posisi Paragraf Dengan HTML Dan CSS
Mengatur Heading Dan Format Text Web Menggunakan HTML
Tutorial Membuat Tabel Di Web Dengan HTML

Alamat Link Relatif Dan Absolut

Dalam pembuatan link pada html kita dapat menggunakan metode relatif ataupun absolute
Relatif yakni membuat link dengan lokasi penyimpanan folder yang sama
Contohnya adalah kalian memiliki 3 file html yang bernama home.html menu.html dan konten.html kemudian kalian simpan semua file html tersebut menjadi satu ke dalam folder yang bernama fileku.html

<a href="konten.html">Lihat Konten</a>

contoh lainnya adalah saat saya membuat halaman kontak untuk website saya di zonainternetku.blogspot.com maka saya tidak perlu memasukkan alamat website saya, jadi saya hanya perlu memasukkan nama file halaman website kontak saya tadi

<a href="/p/contact.html">Contact Me</a>

untuk memanggil halaman lainnya kalian juga bisa melakukan hal yang sama

Sedangkan untuk alamat absolut yaitu link yang dibuat dengan mengikutsertakan alamat dasar alias ditulis secara lengkap

<a href="https://zonainternetku.blogspot.com/p/contact.html">Contact Zona Internetku</a>

Cara Membuat Berbagai Macam Link Menggunakan Kode HTML Di Website

1. Membuat Link Dengan Membuka Tab Baru
Pada saat kalian membuat sebuah link di web, maka secara otomatis lik tersebut akan memuat tujuannya dan berpindah ke lokasi lainnya. Untuk itu kalian bisa membuat link tanpa harus menimpa halaman sebelumnya dan secara otomatis membuka halaman baru dengan menambahkan atribut target seperti ini

<a href="http://www.google.com" target="_blank">Visit Google.com!</a>

2. Menggunakan Gambar Sebagai Link
Pada dasarnya gambar adalah sebuah file multimedia yang bisa di inputkan ke dalam website dengan menggunakan html, tapi kita juga bisa menyisipkan sebuah link didalamnya sehingga apabila gambar tersebut diklik maka akan berpindah ke url yang dituju tadi

<p>Membuat link gambar
<a href="https://www.google.com/">
<img src="home.png" alt="link tutorial" width="32" height="32"></a></p>

3. Menggunakan Link Untuk Mengirim Email
Kita juga dapat membuat link pada email kita sehingga memudahkan seseorang untuk mengirimi kita pesan melalui email hanya dengan cara mengklik hyperlink email kita

<a href="mailto:someone@example.com?Subject=Say%20Hello&body=Katakan%20Hello%20Untuk%20Menyapa">Kirimi Saya Pesan</a>

4. Membuka Bagian Dari Dokumen Di Halaman Yang Sama (Dalam Satu Halaman)
Kita juga dapat membuat hyperlink untuk memanggil atribut class dan id pada kode html untuk langsung menuju ke objek yang telah dipilih, jadi kita tidak perlu lagi untuk berpindah dari halaman satu ke halaman lainnya

<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C12">Langsung Ke Chapter 12</a>
</p>

<br>Chapter 1</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 2</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 3</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 4</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 5</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 6</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 7</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 8</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 9</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 10</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 11</br>
<p>Chapter ini adalah berisi...</p>
<br id="C12">Chapter 12</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 13</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 14</br>
<p>Chapter ini adalah berisi...</p>
<br>Chapter 15</br>
<p>Chapter ini adalah berisi...</p>
</body>
</html>

Baca juga :
Macam - Macam Tag HTML Beserta Fungsi Dan Contohnya
Belajar Cara Menggunakan Dasar Css Untuk Web Desain

Demikian tutorial untuk Cara Membuat Berbagai Macam HyperLink Memakai HTML Di Web yang dapat saya share kepada kalian dan semangat terus untuk mencoba

Promo Menarik