auhtor

Andre Rio 06 Jun 2021

#7 Belajar Membuat Hyperlink Pada HTML








Belajar Membuat Hyperlink Pada HTML - Pada materi sebelumnya kita sudah belajar cara membuat list pada HTML. Sekarang kita akan coba untuk membuat sebuah Hyperlink di HTML dan caranya juga cukup sederhana.




Hyperlink atau biasa di sebut “link” saja atau web link. Link adalah sebuah koneksi dari sebuah sumber web ke sumber lain.

Kegunaan dari Hyperlink ketika membuat sebuah text atau gambar jika di klik akan menuju ke halaman lainya atau di ahlikan ke halaman tertentu yang sudah di tetapkan dalam penulisan Hyperlink tersebut.

Contoh lain, pernakah kamu mengunjungi sebuah wesbsite yang dimana ketika kita mengklik sebuah text atau object yang dan akan di arahkan menuju sebuah halaman laninya klik di sini untuk mengunjungi website wibucode ya seperti itu.



Cara Mengunakanya


Penulisan Hyperlink mengunakan Tag <a> dan Tag penutup </a> di kenal dengan ancor (jangkar). Di sertakan juga dengan atribut href, dimana didalam href (hypertext reference) ini kita dapat memasukan alamat yang ingin di tujuh.

Contoh penulisan Hyperlink mengunakan <a href=""></a>

Di dalam atribut "" kita dapat memasukan halaman yang ingin di tuju, kita akan mengunakan link url website bebas mau mengunakan link apa saja contoh www.wibucode.com bisa juga mengunakan awalan “HTTP” atau “HTTPS” tergantung dari website tersebut mengunakan SSL atau tidak.


Code:

<a href="https://wibucode.com">wibucode.com</a>
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
  <a href="https://wibucode.com">wibucode.com</a>
 </body>
</html>


Hasilnya:

img

Perlu di ingat juga jika warna link nya ungu berarti kita sudah pernah mengunjungi link tersebut dan jika warnanya biru berarti kita belum pernah mengunjungi link tersebut.


Atau kita juga bisa menempatkanya di antara Tag html lain.

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
  <p>Klik <a href="https://wibucode.com">disini</a> untuk mengunjungi website wibucode </p>
 </body>
</html>


Hasilnya:

img


Jika kita ingin pada saat mengklik link tersebut akan membuka tab baru maka kita harus menambahkan atribut yang bernama <a target=""> </a> value nya ada _self untuk membuka di halaman yang sama dan _blank untuk membuka tab baru.

Code:

<a href="https://wibucode.com/" target="_blank">Membuka di tab baru</a>



Menghubungkan Antar Halaman


Ada 2 jenis alamat penulisan dalam Hyperlink yaitu “absolte” dan “alternatif” sebagai berikut.


1.Absolte yaitu penulisan alamat file yang di sertai dengan alamat website.

Code:

<a href="https://wibucode.com/categories"></a>
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
  <p>Ini merupakan alamat absolte silahkan klik <a href="https://wibucode.com/categories">disini</a> </p>
 </body>
</html>


Jadi kita dapat mengakses sebuah halaman pada website contoh https://wibucode.com/categories

Hasilnya:

img


2.Alternatif merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi yang sama, jadi sebelum memanggil file tidak perlu menggunakan nama dari websitenya. contohnya saya akan memanggil file halaman2.html yang berada dalam projek saya (satu folder dengan halama yang sekarang saya buat).

Silahkan buat 2 file yang bernama halaman1.html dan halaman2.html sebagai berikut.

img


Code:

Halaman1

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
  <h2>Ini adalah Halaman 1</h2>
  <p>Silahkan klik <a href="halaman2.html">disini</a> untuk menuju halaman2</p>
 </body>
</html>


Halaman2

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
  <h2>Ini adalah Halaman 2</h2>
  <p>Silahkan klik <a href="halaman1.html">disini</a> untuk menuju halaman1</p>
 </body>
</html>


Hasilnya:

img

Ketika kita mengklik link tersebut maka akan menuju ke halaman2


img



Tapi bagaimana jika kita menyimpanya di dalam sebuah folder?

Buat folder baru bebas, di sini saya memberinama folder tersebut “admin” kemudian pindahkan file halaman1.html ke folder “admin” tersebut.

img


Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
   <h2>Ini adalah Halaman 1</h2>
   <p>Silahkan klik <a href="admin/halaman2.html">disini</a> untuk menuju halaman2</p>
 </body>
</html>


Hasilnya:

img

Tapi kok tampilanya masih sama ya? Cek bagian patch url /Desktop/belajar-html/ sekarang berubah menjadi “admin/halaman2.html”.


Kemudian jika kita mengklik link kembali ke halaman1.html akan terjadi eror seperti berikut.

img


Sebab file yang ingin kita akses itu tidak ada karena kita masih berada folder “admin” jadi jika menuliskan <a href="halaman1.html"></a> dia akan mencari di folder yang sama dan file halaman1.html tidak berada di 1 folder yang sama tapi berada di 1 folder di atasnya.

Untuk itu kita harus tambahkan ../ ini artinya naik 1 folder di atasnya lalu cari file halaman1.html.


Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
   <h2>Ini adalah Halaman 2</h2>
   <p>Silahkan klik <a href="../halaman1.html">disini</a> untuk menuju halaman1</p>
 </body>
</html>

Nah seharusnya sudah tidak eror pada saat mengklik ke halaman1.


Bagaimana jika kita membuat folder baru yang isinya file halaman1.html sebagai berikut.

Saya beri nama folder tersebut “user” sebagai contoh lalu pindahkan file halaman1.html ke dalam folder “user” tersebut.

img


Agar tidak eror seperti tadi kita harus naik dulu 1 folder lalu masuk lagi ke folder tambahkan ../admin untuk halaman1 dan halaman2 tambahkan ../user sebagai berikut.

Code:

Halaman1

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
   <h2>Ini adalah Halaman 1</h2>
   <p>Silahkan klik <a href="../admin/halaman2.html">disini</a> untuk menuju halaman2</p>
 </body>
</html>


Halaman2

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
   <h2>Ini adalah Halaman 2</h2>
   <p>Silahkan klik <a href="../user/halaman1.html">disini</a> untuk menuju halaman1</p>
 </body>
</html>



Page Anchor


Atau biasa di sebut dengan bagian tertentu dari sebua halaman. Jadi bukan hanya kita masuk ke sebuah halaman tapi kita pindahnya ke bagian tertentu dari sebuah halaman.

Silahkan buat file baru di sini saya akan beri nama halaman3.html yang nantinya akan kita gunakan.

img


Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
 	<h1>Ini adalah Halaman 3</h1>

    <h2>Bagian 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <br> <br> <br> <br> <br> <br> <br> <br>

    <h2>Bagian 2</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  	<br> <br> <br> <br> <br> <br> <br> <br>


    <h2>Bagian 3</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


  	<br> <br> <br> <br> <br> <br> <br> <br>
    
    
 </body>
</html>


Kemudian kita buat Tag <ul> </ul> dimana di dalamanya terdapat 3 buah list item, yang nantinya bisa di klik akan berpindah ke bagian lainya.

Code:

<ul>
 <li> <a href="">Ke Bagian 1</a></li>
 <li> <a href="">Ke Bagian 2</a></li>
 <li> <a href="">Ke Bagian 3</a></li>
</ul>
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
 	<h1>Ini adalah Halaman 3</h1>

 	<ul>
 	 <li> <a href="">Ke Bagian 1</a></li>
 	 <li> <a href="">Ke Bagian 2</a></li>
 	 <li> <a href="">Ke Bagian 3</a></li>
 	</ul>

    <h2>Bagian 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <br> <br> <br> <br> <br> <br> <br> <br>

    <h2>Bagian 2</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  	<br> <br> <br> <br> <br> <br> <br> <br>


    <h2>Bagian 3</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


  	<br> <br> <br> <br> <br> <br> <br> <br>
    
    
 </body>
</html>


Untuk setiap bagian kita harus mebuat sebuah ``id` contoh:

Code:

<h2 id="bagian1" >Bagian 1</h2>
<h2 id="bagian2" >Bagian 2</h2>
<h2 id="bagian3" >Bagian 3</h2>


Sekarang kita sudah punya penanda nya jadi tinggal kita panggil ke dalam Tag <li></li>tadi dan juga menambahkan penanda id # sebagai contoh:


<ul>
 <li> <a href="#bagian1">Ke Bagian 1</a></li>
 <li> <a href="#bagian2">Ke Bagian 2</a></li>
 <li> <a href="#bagian3">Ke Bagian 3</a></li>
</ul>
<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Hyperlink Pada Html</title>
 </head> 
 <body>
 	<h1>Ini adalah Halaman 3</h1>

 	<ul>
 	 <ul>
	   <li> <a href="#bagian1">Ke Bagian 1</a></li>
	   <li> <a href="#bagian2">Ke Bagian 2</a></li>
	   <li> <a href="#bagian3">Ke Bagian 3</a></li>
	</ul>
 	</ul>

    <h2 id="bagian1" >Bagian 1</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <br> <br> <br> <br> <br> <br> <br> <br>

    <h2 id="bagian2">Bagian 2</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

  	<br> <br> <br> <br> <br> <br> <br> <br>


    <h2 id="bagian3">Bagian 3</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


  	<br> <br> <br> <br> <br> <br> <br> <br>
    
    
 </body>
</html>


Hasilnya:

img




Nah itu saja bagaimana cara membuat hyperlink pada HTML dan selamat mencoba…






🚀 Komentar




Banner