Assalamu’alaikum Warahmatullahi Wabarakatuh..
Maaf buat kalian yang nunggu postingan tentang kelanjutan Belajar HTML dari Dasar, di karenakan say juga sih sebenernya masih sama-sama belajar tentang HTML, ini sekedar menambah wawasan dan berbagi pengalaman yang mudah-mudahan bermanfaat, AAMIIN.
OK !! biar gak terlalu banyak menyita waktu berharga anda yuk simak pembahasan materi tentang Tautan/Links HTML di postingan ini.
TAUTAN/LINKS HTML
Merupakan sebuah Element yang akan menunjukan sebuah hubungan antara dokumen HTML yang bersangkutan dengan sumber file yang di simpan di luar dokumen HTML tersebut (eksternal HTML).
Dengan menggunakan tautan HTML/ Hyperlink anda dapat mengklik tautan dan melompat menuju dokumen lain dengan cepat, Tautan dokumen yang akan di akses nanti tidak hanya berisi tentang tulisan/teks saja melainkan elemen HTML lain juga bahkan Gambar sekalipun.
Elemen Links/ <link> biasanya di tulis di dalam elemen <head>....</head> tanpa tag penutup atau di sebut end tag. Elemen <link> merupakan elemen kosong tanpa konten apapun dan hanya berisikan tentang attribute daja.
Tag <link> ini biasanya digunakan untuk merujuk atau memanggil file CSS yng bereksitensi ( .css ) yang isinya merupakan aturan-aturan tentang kode CSS, sehingga kode tersubut dapat di aplikasikan ke dalam HTML untuk merubah tampilan Web yang menarik sesuai kode CSS yang anda tulis di file CSS tersebut.
Tag <link> ini merupakan tag yang sederhana namun kegunaannya sangat luar biasa,, kenapa luarbiasa karane tag <link> ini bisa kita tulis lebih dari satu kali. Tapi kekurangannya apabila anda membuata tag <link> ini terlalu banyak maka akan mempengaruhi kecepatan Loading Web anda ketika di akses oleh pelanggan anda, menurut saya pribadi sih alangkah baiknya kita memanfaatkan tag <link> ini sesuai kebutuhan saja, agar penampilan Web yang anda buat tidak terlalu Ramai dan banyak Gayanya tapi Kualitas isinya NOL besar sehingga akan mempengaruhi pelanggan/pengunjung situs web anda nanti, lebih baik tampilannya Sederhana saja tapi Kwalitas isinya luar biasa dan membuat pengunjung betah di situs Web anda sehingga para pelanggan yang sudah lama tetap setia mengakses Web anda.
Sintaksis tautan HTML di tentukan dengan <a> Tag : <a href="url">link Tulisan</a>
Contoh 1:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/New Folder/css/Style.css">
</head>
<body>
(Isi Halaman)
</body>
</html>
Atribut herf merupakan atribut yang menentukan alamat yang akan di tuju ( /New Folder/css/Style.css ) sedangkan rel="stylesheet" merupakan file yang menunjukan bahwa file yang dituju adalah file stylesheet (CSS).
Contoh 2 :
<!DOCTYPE html>
<html>
<head>
<title>Tautan HTML</title>
</head>
<body>
<h2>Tautan HTML</h2>
<p><a href="https://computerperkasa.blogspot.com/">Kunjungi Blog Kami</a></p>
</body>
</html>
Dalam Contoh 1 Tautan HTML nya menunjukan bahwa file dokumennya berada di dalam folder yang di buat, sedangkan Di Contoh 2 menunjukan bahwa tag atau tautan HTML nya menggunaka URL absolut ( alamat Web lengkap ).
WARNA TAUTAN HTML
Secara default tautan yang akan muncul di semua Browser di antaranya
- Tautan belum di kunjungi akan digarisbawahi dan berwarna biru
- Tautan yang di kunjungi akan digarisbawahi dan berwarna Kuning
- Sedangkan tautan yang aktif digarisbawahi dan berwarna Hitam.
Cara mengubah warna default bisa dilakukan dengan menggunakan CSS.
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: Blue;
background-color: transparent;
text-decoration: none;}
a:visited {
color: red;
background-color: transparent;
text-decoration: none;}
a:hover {
color: yellow;
background-color: transparent;
text-decoration: underline;}
a:active {
color: Black;
background-color: transparent;
text-decoration: underline;}
</style>
</head>
<body>
<h2>Warna Tautan</h2>
<p>Anda dapat mengubah warna tautan</p>
<a href="https://computerperkasa.blogspot.com/" target="_blank">Belajar HTML dasar</a>
</body>
</html>
Atribut Target merupakan ceode HTML yang menentukan di mana dokumen terkait akan dibuka.
Atribut target ini bisa menggunakan dari salah satu nilasi sebagai berikut :
- _blank a/ Tautan yang membuka dokumen di Jendela atau Tab baru.
- _self a/ Tautan yang membuka dokumen di Jendela/Tab yang sama saat tautan tersebut di klik ( ini adalah default).
- _parent a/ Tautan yang akan membuka dokumen dengan terhubung ke dalam bingkai induk.
- _top a/ Tautan yang membuka dokumen di seluru Jendela.
- framename a/ Tautan yang membuka dokumen dengan terhubung ke dalam bingkai bernama.
<!DOCTYPE html>
<html>
<body>
<h2>Target Attribute</h2>
<a href="https://computerperkasa.blogspot.com/" target="_blank">Kunjungi blog kami</a>
<p>Jika Anda menetapkan atribut target ke "_blank", tautan akan terbuka di jendela atau tab browser baru.</p>
</body>
</html>
Contoh jika halaman Web anda terkunci dalam bingkai anda bisa menggunakan tag target="_top" untuk keluar dari bingkai :
<!DOCTYPE html>
<html>
<body>
<p>Terkunci dalam Binkai? <a href="https://computerperkasa.blogspot.com/" target="_top">Klik Disini!</a></p>
</body>
</html>
GAMBAR SEBAGAI TAUTAN HTML
Gambar di jadikan sebagai tautan merupakas sebuah hal yang umum.
Contoh :
<!DOCTYPE html>
<html>
<body>
<h2>Tautan Gambar</h2>
<p>Gambar adalah tautan dan bisa di klik</p>
<a href="https://computerperkasa.blogspot.com/">
<img src="https://www.gambaricoun.com/contoh-gambar.jpg" alt="Belajar HTML dasar" style="width:42px;height:42px;border:0">
</a>
<p>Kami telah menambahkan "border: 0" untuk mencegah IE9 (dan sebelumnya) menampilkan perbatasan di sekitar gambar..</p>
</body>
</html>
Selamat mencoba dan semoga bermanfaat.
This comment has been removed by a blog administrator.
ReplyDeleteinsyaaloh kedepannya,, ini juga saya sambil belajar dulu tentang html,, makasih udah mampir gan,,
DeleteThis comment has been removed by a blog administrator.
ReplyDeletewkwkwk :D insyaaloh gak bakalan pecah bang,, yang penting kuatkan iman dan perbanyak belajar :D makasih udah mampir..
Delete