Belajar HTML Part #7 - Membuat Link Pada HTML
Mas Hary
---
Crewnesia - Link atau hyperlink merupakan sebuah element HTML yang berfungsi untuk menguhubungkan suatu halaman web ke halaman web lainnya.Untuk membuat sebuah link kalian bisa menggunakan tag <a>, yang merupakan singkatan dari anchor setiap tag <a> memiliki atribut href. fungsi dari href ini untuk mengarahkan atau mengalihkan link ke alamat tujuan yang terletak di value.
Contoh :<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML #7 - Membuat Link Pada HTML</title>
</head>
<body>
<p>Saya Sedang Belajar HTML Di <a href="https://crewnesia.my.id">Crewnesia</a></p>
</body>
</html>Hasilnya :
Pada contoh di atas kita menuliskan alamat link secara lengkap dengan "https://www". Penulisan tersebut bisa kita sebut sebagai eksternal link., yang berarti bahwa kita mengalihkan link ke alamat lain yang berada di internet, atau lebih dikenal sebagai alamat absolut.
Jenis - Jenis Link Pada HTML
- Internal Link
Internal Link adalah link yang menuju atau mengalihkan domain atau halaman web itu sendiri.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML #7 - Membuat Link Pada HTML</title>
</head>
<body>
<p>Saya Sedang Belajar HTML Di <a href="https://crewnesia.my.id/p/about.html">About Crewnesia</a></p>
</body>
</html>Pada contoh di atas terdapat teks berwarna kuning itu menyatakan bahwa link tersebut mengalihkan ke halaman about Crewnesia.
- Eksternal Link
Ekseternal Link adalah link yang menuju atau mengalihkan domain atau halaman web lain.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML #7 - Membuat Link Pada HTML</title>
</head>
<body>
<p>Saya Sedang Belajar HTML Di <a href="https://www.facebook.com">Facebook</a></p>
</body>
</html>
Pada contoh di atas terdapat teks berwarna merah, menyatakan bahwa link tersebut mengalihkan ke halaman web facebook.
Atribut-atribut untuk link
Selain atribut href terdapat berbagai atribut yang sering biasanya digunakan untuk membuat link, seperti :
- Atribut Target
Atribut ini berfungsi untuk menentukan target saat membuka link tersebut, ada beberapa target yang bisa digunakan yaitu;
- _blank berfungsi untuk membuka link pada jendela atau tab baru.
- _self berfungsi untuk membuka link pada halaman itu sendiri.
- _top berfungsi untuk menuju bagian atas pada halaman.
- _parent berfungsi untuk membuka link pada frame induk .
- nama-frame berfungsi untuk membuka link pada <iframe> dengan nama tertentu.
- Atribut title
Atribut ini berfungsi untuk membuat tooltips. tooltips adalah informasi tambahan yang akan tampil saat link disentuh oleh pointer atau saat kita menahan tap di hp.
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML #7 - Membuat Link Pada HTML</title>
</head>
<body>
<p>Untuk Info lebih lanjut bisa lihat <a href="https://crewnesia.my.id/p/about.html" title="About Crewnesia">Disini</a></p>
</body>
</html>
Hasilnya akan Seperti Ini
- Mengubah Warna Link Di HTML
warna default link adalah biru, ini bisa kita merubahnya dengan cara menambahkan atribut style. Dengan atribut style kita bisa merubah warna text dan latar belakang (background).
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML #7 - Membuat Link Pada HTML</title>
</head>
<body>
<h1>Selamat Datang Di Crewnesia</h1>
<p>
<a href="index.html" style="color: green">Home</a>
<a href="about.html" style="color: red">About Us</a> |
<a href="contact.html" style="color: blue">Contact Me</a> |
</p>
<hr>
<p>Selamat datang di crewnesia, silahkan klik About Us untuk info lebih lanjut mengenai Crewnesia. Untuk menghubungi kami silahkan klik Contact Me.</p>
<hr>
<div>© 2021 by Crewnesia</div>
</body>
</html>
Hasilnya :
Silahkan pelajari materi selanjutnya.
Posting Komentar
Posting Komentar