Cara Membuat Hyperlink Pada Halaman Website
Mei 19, 2019
Edit
Cara Membuat Hyperlink Pada Halaman Website
Hallo semuanya, Selamat datang di Blog saya, Apa kabar semua ? Saya harap teman – teman semua pada sehat ya, Pada kesempatan kali ini saya akan membahas mengenai bagaimana caranya membuat Hyperlink pada halaman Website ya.
Saya akan membahas dulu definisi dari Hyperlink pada halam website ini, Hyperlink ini sendiri merupakan suatu cara untuk mengoneksikan atau menghubungkan satu bagian dengan bagian lainnya didalam program ataupun halaman website dalam beberapa file.
Dalam artian lain, Menurut saya Hyperlink ini merupakan suatu teks yang akan mengarahkan pada tampilan atau halaman website lain apabila kita mengklik teks tersebut.
Hyperlink ini merupakan sebuah fungsi dari Hyper Text Markup Languague ( HTML ) yang mana tujuannya adalah untuk mempermudah pembaca dalam menjelajahi informasi – informasi yang terdapat pada halaman website.
Hyperlink yang terdapat pada website ini biasanya berwarna biru dan apabila kita mengarahkan kursor kita pada teks atau link tersebut maka otomatis link tersebut akan terlihat seperti garis bawah ( underline ) dan juga wana teks akan berubah menjadi biru menua, Serta kursor kita akan otomatis berubah menjadi logo / gambar tangan yang mengarah pada link atau teks tersebut.
Terdapat3 buah jenis dari Hyperlink, yaitu :
1. Absolute Address
Absolute Address ini biasanya harus menggunakan koneksi internet untuk menjelajahinya karena digunakan untuk membuat alamat URL situss – situs tertentu.
2. Relatif Address
Definisinya hampir sama dengan absolute address, bedanya pada jenis kedu ini adalah alamat yang bersifat relatif ataupun berubah ubah.
3. Link Section
Link section ini merupakan jenis dari hyperlink yang sangat sering digunakan dalam perbisnisan perusahaan.
Setelah kita menganali apa yang dimaksud dengan Hyperlink ini, Marilah kita masuk pada pembahasan utama kita yaitu bagiamana sih cara membuat hyperlink pada halaman website kita ?
Langsung saja kita masuk pada kodingannya pada text editor. Disini saya menggunakan text editor Sublime text 3. Berikut akan saya contohkan bagaimana caranya membuat hyperlink dengan contoh simple atau biasa dengan paragram lorem yang otomatis yaaa...
Langkah – Langkah Pembuatan Hyperlink :
1. Silahkan Siapkan Sebuah Folder yang nantinya sebagai penampung dari file atau class yang akan kita buat kodingannya.
2. Setelah anda mebuat folder tempat penampungan filenya silahkan yang pertama anda buat file yang bernama halaman1.html dan silahkan anda masukkan kode yang telah saya letakkan dibawah berikut :
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink - Halaman 1</title>
</head>
<body>
<p> Silahkan Masuk <a href="halaman2.html" target="_blank"> disini </a> Untuk Mengetahui Informasi Lebih Lanjut.</p>
<a href="halaman3.html#bagian1">Ke Halaman 3 Bagian 1</a>
<a href="halaman3.html#bagian2">Ke Halaman 3 Bagian 2</a>
<a href="halaman3.html#bagian3">Ke Halaman 3 Bagian 3</a>
</body>
</html>
3. File yang diatas itu merupakan file utama yang akan kita jadikan sebagai tempat penempatan hyperlink nantinya, Setelah itu silahkan anda buat file atau class baru yang bernama halaman2.html, Kemudian silahkan anda salin dan pastekan kodingan yang telah saya buat dibawah ini pada file anda tadi.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink - Halaman 2</title>
</head>
<body>
<h1>Ini Adalah Halaman Lorem</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<a href="halaman1.html">Kembali Ke Halaman 1</a>
</body>
</html>
4. Setelah itu silahkan anda buat lagi file atau class baru yang namanya adalah halaman3.html, Ini merupakan halaman arahan link dari halaman1 tadi, Setelah anda membuat file yang saya suruh silahkan anda copy dan pastekan kodingan yang telah saya buat dibawah pada file anda tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink - Halaman 3</title>
</head>
<body>
<h1>Ini Adalah Halaman 3</h1>
<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>
<h2 id="bagian1">Bagian 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian2">Bagian 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<h2 id="bagian3">Bagian 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
Kodingan yang tadi jangan lupa disave yaa,Maka Hyperlink yang kita buat sekarang telah jadi.
Berikut Hasil Tampilannya :
Silahkan anda perbagus Paragrafnya menjadi paragraf yang baik yaaa, karena disini saya Cuma mencontohkan bagaimana caranya membuat hyperlink saja, Jadi kreasikan lah paragraf nya menjadi paragraf yang baik.
Silahkan anda ikuti blog ini jika anda suka dengan artikel yang saya buat.
Wassalam.