Belajar HTML #07 | Membuat Link Pada HTML
Belajar Bareng Minarsih - Edisi Ngoding
31 Agustus 2022
Mengenal Link Pada Html
Apa jadinya web tanpa ada link?
Masa pengunjung harus mengetik sendiri alamat URL dari web yang ingin dia buka.
Oleh karena itu, kita membutuhkan link.
Nah, pada tutorial ini..
kita akan belajar cara membuat link di HTML.
Hyperlink atau link sering digunakan untuk menghubungkan suatu halaman website ke halaman yang lain. Elemen yang menjadi link nantinya dapat diklik, yang mana selanjutnya akan mengarahkan kita ke halaman yang sudah ditentukan.
Berikut penulisan Hyperlink pada HTML:
<a href="https://minarsih.com/">klik disini</a>
Link sendiri ditulis dengan tag <a> atau yang kita kenal dengan anchor (jangkar). <a> ini selalu diikiti oleh atribut href, didalam atribut href(Hypertext Reference) ini lah yang akan diisikan alamat yang dituju ketika text atau gambar diklik.
Mari Kita Mencoba Membuat Link di HTML
Contoh kode untuk membuat link pada HTML:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="about.html">Tentang Saya</a>
</p>
</body>
</html>
Hasilnya: 
Link yang dibuat akan ditampilkan secara default berwarna biru dan bergaris bawah. Standar ini berlaku di semua browser.
Mari kita coba klik linknya.
Kok Erorr ?
Karena link yang kita buat ini akan membuka halaman about.html, tapi kita belum membuat filenya atau belum ada. Oleh karena itu error.
Untuk menangani masalah di atas maka kita harus buat file dengan nama sesuai yang diberikan pada atribut href. yaitu about.html dan harus disimpan dalam satu folder. 
Berikut Hasilnya:
Yap!
Halaman index.html dan about.html berhasil terhubung.
Mengenal Jenis-jenis Link Pada HTML
Kenapa kok alamat URL pada atribut href ditulis dengan nama file?
Bukannya harus alamat URL lengkap yang pakai "http atau https"
Hal ini karena pada contoh kasus di atas halaman about.html merupakan internal link, terlebih lagi file about.html masih dalam satu folder dengan file index.html.
Untuk lebih jelasnya, mari kita pelajari jenis-jenis link dalam HTML.
Dalam HTML yang namanya link terbagi atas dua jenis yaitu internal link dan eksternal link.
1. Internal Link adalah link yang menuju ke domain atau halaman web itu sendiri.
Contohnya, pada saat ini kita buka halaman index.html dan kemudian berpindah ke halaman about.hmtl yang masih tetap berada dalam satu website.
2. Eksternal Link adalah link yang menuju domain lain.
Contohnya, kita ingin berbagi halaman tutorial html dari website ini ke facebook, yang mana saat link berbagi di klik maka akan mengarahkan kita ke facebook.
Intinya:
Selama link itu membuka web lain, maka ia adalah external. Tapi kalau tetap membuka web itu sendiri maka itu internal.
Nah sekarang kita coba membuatnya di HTML:
Contoh Internal Link :
1. Buatlah file baru beri nama index.html.
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="index.html" >Home</a> ||
<a href="about.html" >About</a> ||
<a href="Contact.html" >Contact</a>
</p>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda.Semua
link di atas adalah internal link.
</p>
<hr>
<div>Copyright © 2022 by Minarsih TECH</div>
</body>
</html>
2. Kemudian buat file baru lagi beri nama about.html, lalu isi dengan kode seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Halaman About</title>
</head>
<body>
<p>Ini Adalah halaman about yang berisi tentang saya</p>
<p>
<a href="index.html">Kembali</a>
</p>
</body>
</html>
3. Kemudian buat file baru lagi beri nama contact.html, lalu isi dengan kode seperti berikut.
<!DOCTYPE html>
<html>
<head>
<title>Halaman Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<p>
<a href="index.html" >Home</a> ||
<a href="about.html" >About</a> ||
<a href="Contact.html" >Contact</a>
</p>
<p>
No. Telp: 087543219<br>
Email: saya@gmail.com
Alamat: Mojokerto
</p>
<p>
<a href="index.html">Kembali</a>
</p>
</body>
</html>
Pastikan semua file ini disimpan dalam satu folder seperti contoh yang diatas.
Jika sudah, coba jalankan: 
Contoh Eksternal Link
Cara membuat eksternal link sebenarnya sama saja seperti internal link. Perbedaanya terletak pada alamt URL yang diberikan.
Untuk itu coba buka kembali file contact.html dan edit isi di dalamnya menjadi seperti ini:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Contact</title>
</head>
<body>
<h1>Contact Us</h1>
<p>
<a href="index.html" >Home</a> ||
<a href="about.html" >About</a> ||
<a href="Contact.html" >Contact</a>
</p>
<p>
No. Telp: 087543219<br>
Email: saya@gmail.com
Alamat: Mojokerto
</p>
<p>
<a href="https://minarsih.com/">Website Minarsih TECH</a>
</p>
<p>
<a href="index.html">Kembali</a>
</p>
</body>
</html>
Sebagai contoh ini adalah eksternal link yang menuju website Minarsih TECH.
Hasilnya; 
Sudah paham kan,tentang perbedaan internal link dan eksternal link?
Hal ini bisa dilakukan dengan penggunaan fungsi atribut target.
Apa itu atribut target?
Untuk mengetahui lebih jelasnya simak pembahasan selanjutnya.
Atribut-atribut untuk link
Selain atribut href terdapat juga beberapa atribut yang sering ditambahkan pada link, seperti: target, title, rel, style, dan lain-lain.
Atribut Target
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang biasanya digunakan:
Atribut Title
Atribut ini berfungsi untuk membuat tooltips. Tooltips merupakan informasi tambahan yang akan ditampilkan saat pointer menyentuh link.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="index.html" title="Menuju ke halaman Home">Home</a> ||
<a href="about.html" title="Menuju ke halaman About">About</a> ||
<a href="Contact.html" title="Menuju ke halaman Contact">Contact</a>
</p>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda.Semua
link di atas adalah internal link.
</p>
<hr>
<div>Copyright © 2022 by Minarsih TECH</div>
</body>
</html>
Hasilnya: 
Tidak hanya pada link saja, tooltip juga dapat ditampilkan pada beberapa elemen lain seperti paragraf, heading, dan lain sebagainya asalkan elemen-elemen tersebut diberi atribut title.
Apa lagi Fungsi dari Link ?
Fungsi link tidak hanya digunakan untuk menghubungkan antar halaman website saja. Lebih dari itu link memiliki fungsi lain yang nantinya akan berguna saat kita membuat suatu website.
Membuat Link Buntu
Link buntu adalah link yang tidak akan membuka apa-pun. Ia biasanya digunakan sebagai placeholder atau sampel saja.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="#" >Home</a> ||
<a href="#" >About</a> ||
<a href="#" >Contact</a>
</p>
</body>
</html>
Berikut Hasilnya: 
Sebenarnya tanda pagar ini merupakan anchor atau jangkar. Kegunaan anchor ini akan membawa kita ke lokasi tertentu dalam dokumen HTML tersebut.Namun bila hanya didefinisikan tanda pagar saja, maka ia tidak akan mengarahkan kita kemana-mana.
Membuat Link Anchor
Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Contoh Link Anchor</h1>
<p>Ini adalah contoh link anchor. Coba klik link ini:
<a href="#bawah">Meluncur ke bawah</a> maka kamu
akan dibawa ke bagian penutup dari dokumen ini.
</p>
<h2>Apa itu Jangkar?</h2>
<p>
Anchor dalam bahasa indonesia artinya jangkar. Saya yakin
kamu pasti pernah melihat jangkar. Fungsi jangkar untuk
menahan kapal agar tidak hanyut. Tapi dalam HTML, fungsinya
untuk membuat link yang bisa membawa kita meluncur ke tujuan
jangkar itu.
</p>
<p>
Link anchor adalah link yang menuju ke suatu elemen tertentu. Cara kerjanya seperti saat kita mengaitkan jangkar, lalu ditarik ke sana. Karena itu, dia dinama anchor.
Cara membuat link anchor adalah dengan mengisi alamat URL dengan tanda pagar (#), lalu diisi dengan nama id dari elemen yang akan dituju.
</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>
<h2 id="bawah">Akhir Kata..</h2>
<p>
<a href="#top">Kembali ke Atas!</a>
</p>
</body>
</html>
Hasilnya: 
Membuat LInk Pada Gambar
Link tidak hanya bisa dikaitkan dengan teks, tapi ia juga dapat dikaitkan dengan gambar.
Cara membuatnya sangat mudah, kita hanya pelu membungkus tag <img> dengan tag <a>. Dan pastikan file gambar dalam satu folder juga.
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="index.html" title="Menuju ke halaman Home">Home</a> ||
<a href="about.html" title="Menuju ke halaman About">About</a> ||
<a href="Contact.html" title="Menuju ke halaman Contact">Contact</a>
</p>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda.Semua
link di atas adalah internal link.
</p>
<a href="https://minarsih.com/"><img src="group1.png" width="100px" height="100px"></a
<hr>
<div>Copyright © 2022 by Minarsih TECH</div>
</body>
</html>
Hasilnya: 
Mengubah Warna Link Pada HTML
Warna default link adalah biru, ini bisa kita ubah dengan style CSS. Warna bisa kita berikan untuk teks dan latar belakang (background).
Caranya:
Tambahkan atribut Style kemudian isi dengan style css untuk mengubah warna, yakni color (untuk teks) dan background- color (untuk latar).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Membuat Link Pada HTML</title>
</head>
<body>
<h1>Welcome To Page</h1>
<p>
<a href="index.html" title="Menuju ke halaman Home" style="color: yellow;">Home</a> ||
<a href="about.html" title="Menuju ke halaman About" style="color: red; background-color:#97ef;">About</a> ||
<a href="Contact.html" title="Menuju ke halaman Contact" style="color: green">Contact</a>
</p>
<p>
Selamat datang di websiteku. Coba klik menu di atas,
maka kamu akan membuka halaman yang berbeda.Semua
link di atas adalah internal link.
</p>
<hr>
<div>Copyright © 2022 by Minarsih TECH</div>
</body>
</html>
Hasilnya: 
Waah selain menghubungkan halaman, ternyata ada begitu banyak fungsi lain dari link.
Intinya:
Kamu hanya perlu mengingat cara membuat link dan jenis-jenisnya. Karena ini adalah basic yang akan terus terpakai dalam membuat web.
Artikel Lainnya Dengan Kategori Terkait :
1. 5 HTML Tags For Accessibility
2. Belajar HTML #01 | Apa Itu HTML ? Pengertian HTML Lengkap Untuk Pemula
3. Belajar HTML #02 | Cara Sederhana Membuat Code HTML
4. Belajar HTML #03 | Membuat Heading di HTML
5. Belajar HTML #04 | Format Text di HTML
6. Belajar HTML #05 | Membuat Paragraf di HTML
7. Belajar HTML #06 | Membuat Tabel Pada HTML
8. Belajar HTML #07 | Membuat Link Pada HTML
9. Belajar HTML #08 | Cara Membuat List Di HTML
10. Belajar HTML #09 | Cara Membuat Box Shadow CSS dan HTML Praktis Tanpa ribet (efek bayangan CSS)
11. Belajar HTML #10 | Cara Menampilkan Gambar Pada Halaman Website Menggunakan HTML
12. Belajar HTML #11 | Cara Menampilkan Video Pada Halaman Website Menggunakan HTML
13. Belajar HTML #12 | Cara Membuat Form Pada HTML
14. Belajar HTML #13 | Belajar Membuat Layout Pada HTML
15. Belajar HTML #14 | Belajar Menghubungkan HTML dengan CSS
16. Belajar HTML #15 | Cara Menambahkan Audio ke Halaman Website Menggunakan HTML.
17. Belajar HTML #16 | Cara Menambahkan Garis Horizontal di HTML
18. Belajar HTML #17 | Cara Menambahkan Komentar di HTML
19. Belajar HTML #18 | Tutorial Cara Membuat Checkbox dan Radio Button di HTML
20. Buat Desain Web Responsif CSS
21. Cara Membuat Accordions Dengan HTML & CSS
22. Cara Membuat Favicon Dengan HTML
26. Input HTML Yang Perlu Diketahui
27. Memahami Pentingnya Semantic HTML dalam Struktur Website
28. Membuat Form HTML dengan Input Sugestion
29. Penggunaan Atribut Elemen Anchor dalam HTML
31. Tag HTML yang Jarang Diketahui
