Selasa, 09-Agu-2022

Membuat Link HTML

0 BYAdmin

Sebelumnya kita telah mempelajari mengenai list. Salah satu yang dibahas adalah mengenai unordered list. Telah dijelaskan sebelumnya bahwa unordered list pun digunakan dalam pembuatan menu navigasi yang mana navigasi ini berisi link. Link halaman berfungsi untuk menghubungkan satu halaman dengan halaman lainnya. Atau bisa juga berisi URL menuju website ataupun halaman website lain. 

Fungsi link sendiri kurang lebih diantaranya :

  • Untuk menghubungkan antar halaman
  • Untuk menghubungkan ke bagian lain namun masih di satu halaman
  • Untuk menghubungkan ke halaman website lain
  • Untuk menghubungkan ke alamat email

 

Menghubungkan Antar Halaman

Dasar dari link atau tag <a> (anchor) adalah link/hubungan antara satu halaman dengan halaman lainnnya. Misalnya seperti ini contohnya, misalkan Anda saat ini sedang berada di dalam halaman berita, kemudian Anda ingin masuk ke dalam halaman kontak. Maka dengan tag <a> lah jembatannya. Jadi teknisnya nanti ada menu "Kontak" di navigasi dalam halaman berita yang apabila diklik akan berpindah ke halaman kontak. Istilah kerennya meredirect Anda dari halaman saat ini berada yakni halaman berita menuju ke halaman kontak. 

Baiklah kita langsung saja ke prakteknya. Persiapkan terlebih dahulu editor teks kesayangan Anda, seperti biasa saya menggunakan notepad++. Kemudian silahkan tuliskan atau copy paste saja susunan kode seperti di bawah ini.

<html>
  <head>
    <title>Belajar Tag Link / Anchor</title>
  </head>
  <body>
	<h1>Belajar Tag Anchor menghubungkan dengan halaman lain</h1>
	<p>
		Silahkan <a href="halaman-lain.html">klik ini</a> 
		untuk pindah ke halaman lain</p>
	</p>
  </body>
</html>

Setelah itu Anda bisa menyimpannya, berikan nama dengan ekstensi .html, misalnya index.html. Kemudian selanjutnya Anda persiapkan lagi di dalam text editor notepad++ sebuah halaman baru, lalu isikan seperti ini :

<html>
  <head>
    <title>Belajar Tag Link / Anchor</title>
  </head>
  <body>
	<h1>Ini Adalah Halaman Lain</h1>
	<p>
		Silahkan <a href="index.html">klik ini</a> 
		untuk pindah ke halaman sebelumnya</p>
	</p>
  </body>
</html>

Lalu simpan dengan nama halaman-lain.html. Oke ya? Setelah itu silahkan halaman index.html di akses menggunakan browser. Hasilnya nanti kurang lebih seperti ini :

belajar html

Dan apabila di klik linknya, akan pindah ke halaman lain

belajar html

 

Menghubungkan Bagian Lain Masih Di Satu Halaman

Selain menghubungkan bagian lain antar halaman, Tag <a> pun bisa menghubungkan masih dalam satu halaman namun pada bagian lain, misalkan menghubungkan di halaman yang sama namun di bagian bawah atau tengah atau apa misalnya yang mana itu semua di wakili oleh satu atribut di tag <a>. Menggunakan atribut name. Begini contoh penggunaannya. 


<html>
  <head>
    <title>Belajar Tag Link / Anchor</title>
  </head>
  <body>
	<h1>Ini Bagian Atas Website : </h1>
	<p>Silahkan klik <a href="#bawah">Ke Bawah</a> untuk menuju bawah halaman</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>	
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<p>&nbsp;</p>
	<h1>Ini adalah bagian bawah halaman</h1>
	<a name="bawah">Bagian bawah halaman</a>
  </body>
</html>

 

Menghubungkan Ke Halaman Website Lain

Anda pun bisa menghubungkan halaman website dengan halaman website lain, misalkan dalam satu postingan Anda mereferensikan website lain. Seperti misalnya untuk mendownload semua ebook ilmuwebsite.com silahkan kunjungi halaman berikut, Kurang lebih seperti ini :


 <html>
  <head>
    <title>Belajar Tag Link / Anchor</title>
  </head>
  <body>
	<h1>Download Ebook Ilmuwebsite</h1>
	<p>Untuk download semua ebook ilmuwebsite.com silahkan klik link di bawah ini </p>
	
	<p><a href="http://store.ilmuwebsite.com/artikel/gratisan/koleksi-ebook-ilmuwebsite-webdev-internet-marketing-free">Ebook Gratisan Berkualitas</a></p>
  </body>
</html>

 

Menghubungkan Ke Alamat Email 

Nah tidak hanya mengkonekkan, atau menghubungkan halaman website menuju halaman di website lain, Anda juga bisa menggunakan tag <a> untuk membuka aplikasi pengirim email seperti outlook atau thunderbird. Dahulu sebelum ada tombol share to facebook atau twitter atau google plus atau yang lainnya, peselancar lumrahnya memberitahukan seorang koleganya perihal ada halaman menarik yang harus di baca, dengan cara mengirim email, menggunakan aplikasi pengirim seperti outlook dan semisalnya.

Contoh penggunaannya adalah seperti ini :


<html>
  <head>
    <title>Belajar Tag Link / Anchor</title>
  </head>
  <body>
	<p>
	Ini adalah link email, jika di klik akan memunculkan aplikasi pengirim email 
	<a href="mailto:ilmuwebsiteid@gmail.com?Subject=Halo%20Admin" target="_top">Kirim Email</a>
	</p>
  </body>
</html>