Link atau Hyperlink adalah elemen HTML yang menghubungkan satu halaman web dengan halaman web lainnya
Elemen ini dapat diklik. dan nanti akan membuka halaman lain sesuai dengan alamat URL yang diberikan
Tidak hanya untuk link halaman, link juga memiliki fungsi lain seperti scroll top, download file, menjalankan fungsi javascript, dll
Nanti kita akan membahas hal ini lebih mendalam
Sehat. sekarang, bagaimana cara membuat tautan di HTML?
Silakan lanjutkan membaca
Cara Membuat Link di HTML
Tautan dalam HTML dapat dibuat dengan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>4, maka tag ini harus memiliki atribut <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>5 untuk menentukan alamat URL tujuan dari tautan tersebut
Bentuk sederhananya seperti ini
Contoh. <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_6
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>
Hasil
Tautan akan ditampilkan dengan warna biru dan bergaris bawah. Ini adalah gaya standar setiap browser
Tentu saja, ini bisa kita ubah sesuai selera
Nanti kita bahas caranya
Sekarang coba klik link tersebut
Lihat. Mengapa itu salah?
Tautan yang kami buat akan membuka halaman <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_7, tetapi kami belum membuat file ini atau belum ada. Karena itu, itu pasti kesalahan
Untuk mengatasinya, kita harus membuat file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>7 dan menyimpannya dalam folder dengan file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>6
Isi file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_7 seperti ini
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>_
Nah, sekarang mari kita coba lagi
Ya
Halaman <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>6 dan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>7 berhasil terhubung
Tapi tunggu dulu
Mengapa alamat URL pada atribut <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>5 ditulis dengan nama file?
<a href="about.html">About us</a>
Bukankah seharusnya alamat URL lengkap yang menggunakan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>4 bla bla?
Hal ini dikarenakan link yang kami buat adalah internal link dan juga file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>7 masih dalam folder yang sama dengan file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>6. Jadi anda bisa langsung menulis nama filenya, tanpa harus dilengkapi dengan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>4
Untuk lebih jelasnya mari kita pelajari jenis-jenis link pada HTML
Jenis link dalam HTML
Berdasarkan alamat URL tujuan, tautan HTML dibagi menjadi dua kelompok
Tautan Dalam. adalah tautan yang mengarah ke domain atau halaman web itu sendiri;
Tautan eksternal. adalah tautan ke domain lain
Tautan internal biasanya digunakan untuk menghubungkan satu halaman ke halaman lain di situs web atau domain
Sedangkan untuk external link, digunakan untuk membuka website atau domain lain. Contohnya seperti. buka halaman facebook, buka chat whatsapp, buka youtube, dan sebagainya
Intinya adalah
Selama tautan tersebut membuka situs web lain, maka itu bersifat eksternal. Tetapi jika Anda masih membuka web itu sendiri maka itu adalah internal
Agar lebih jelas, mari kita coba membuatnya dalam HTML
1. Contoh tautan internal
Buat file baru bernama <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>_8 lalu isi dengan kode berikut
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>
Kemudian buat file baru bernama <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>9 dengan konten berikut
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>
Terakhir, buat file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_7 dengan konten berikut
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>
Pastikan semua file ini disimpan dalam satu folder
Setelah itu, coba buka <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>8 dengan browser
Jadi hasilnya
2. Contoh Tautan Eksternal
Cara membuat external link sebenarnya sama dengan internal link. Perbedaannya terletak pada alamat URL yang diberikan
Sebagai contoh. Ini adalah tautan eksternal yang menuju ke halaman Facebook
<a href="//www.facebook.com/petanikode">Facebook Patani Kode</a>
Hasil
Facebook Patani Kode
Jadi ketika link di klik maka kita akan membuka halaman https. // www. facebook. com/petanicode
Contoh lain
Tautan CTA (ajakan bertindak) untuk whatsapp
<a href="//api.whatsapp.com/send?phone=6287111&text=Hi">Chat dengan Saya</a>
Hasil
Ngobrol denganku
Pada link tersebut, kami memberikan alamat URL WhatsApp dan nantinya akan membuka halaman tersebut. Ini juga bisa disebut external link, karena akan membuka halaman whatsapp
Oh iya disana kami memberikan parameter berupa nomor telepon dan juga teks
Nah, biar lengkap. kami akan mencoba menambahkan tautan eksternal ke file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>9
Silahkan buka file <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About us</h1> <p> Ini adalah website yang dibuat dengan link. Kamu bisa membuka halaman dengan mudah. Tinggal klik-klik saja! </p> <p> <a href="link.html">Kembali ke halaman link</a> </p> </body> </html>_9 kemudian ubah kodenya menjadi seperti ini
//www.petanikode.com/contact.html0
Hasil
Tes buka tautan Facebook
Tes buka tautan whatsapp
Sudah paham tentang external link?
Oke, sekarang lanjutkan belajar atribut
Atribut untuk Tautan
Selain atribut <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>5, ada juga beberapa atribut yang sering ditambahkan pada link, seperti. <a href="about.html">About us</a>5, <a href="about.html">About us</a>6, <a href="about.html">About us</a>7, <a href="about.html">About us</a>8, dll.
Menggunakan Atribut <a href="about.html">About us</a>5
Atribut ini berfungsi untuk menentukan target dari pembukaan link. Ada beberapa target yang umum digunakan
- <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>0 akan membuka tautan di jendela atau tab baru;
- <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>1 akan membuka tautan di halaman itu sendiri (target default);
- <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>_2 menuju bagian atas halaman;
- <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>_3 membuka tautan di bingkai utama;
- <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>_4 akan membuka tautan di <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>5 dengan nama tertentu;
Contoh
//www.petanikode.com/contact.html1
Hasil
Saat link diklik, browser akan membuka tab baru. Ini karena kita memberikan atribut target dengan nilai <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>0
Selanjutnya, kami akan mencoba menampilkan tautan dalam bingkai
Buat file baru bernama <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Selamat Datang</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <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 © 2020 by Petani Kode</div> </body> </html>7, lalu isikan kodenya seperti ini
//www.petanikode.com/contact.html2
Hasil
Menggunakan Atribut <a href="about.html">About us</a>6
Atribut ini berfungsi untuk membuat tooltips. Tooltips adalah informasi tambahan yang akan muncul saat link disentuh pointer atau saat kita menahan tap pada ponsel
Contoh
//www.petanikode.com/contact.html3
Hasil
Demo Langsung
Untuk lebih jelasnya silahkan dibuka. Tentang kami
Cara Mengubah Warna Tautan di HTML
Warna default link adalah biru, kita bisa mengubahnya dengan gaya CSS. Warna yang bisa kita berikan untuk teks dan latar belakang (background)
Jalan
Tambahkan atribut <a href="about.html">About us</a>_8 lalu isi dengan css style untuk merubah warnanya yaitu <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>0 (untuk text) dan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>1 (untuk background)
Contoh
//www.petanikode.com/contact.html4
Hasil
Fungsi Menarik Lainnya dari Link
Seperti yang saya katakan sebelumnya. tautan tidak hanya digunakan untuk menghubungkan halaman web
Itu juga dapat digunakan untuk beberapa fungsi tertentu seperti
Membuat Tautan Mati
Tautan mati adalah tautan yang tidak akan membuka apa pun. Biasanya digunakan sebagai placeholder atau sampel saja
Cara membuatnya
Tambahkan lindung nilai atau lindung nilai dan tanda seru ke atribut <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>5
Contoh
//www.petanikode.com/contact.html5
Hasil
Perhatian
Pada contoh, kita mengisi URL dengan tanda kurung. Arti dari tanda pagar pada URL sebenarnya adalah sebuah jangkar.
Anchor ini nantinya akan membawa kita ke lokasi tertentu di dalam dokumen HTML. Kalau hanya diisi pagar, maka tidak akan kemana-mana
Membuat Anchor Link
Tautan jangkar adalah tautan yang mengarah ke elemen tertentu. Cara kerjanya seperti ketika kita mengaitkan jangkar, lalu menariknya ke sana. Karena itu, dia disebut sebagai jangkar
Cara membuat anchor link adalah dengan mengisi alamat URL dengan tanda pagar (<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>3), kemudian isikan nama <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>4 dari elemen yang akan diarahkan
Contoh
//www.petanikode.com/contact.html6
Hasil
Jika kami perhatikan, di sana kami menggunakan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>5 sebagai URL
//www.petanikode.com/contact.html7
Sedangkan elemen yang memiliki <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>_6, tidak ada dalam HTML yang kita tulis
Mengapa anchor link ini bisa naik?
Hal ini dikarenakan browser sudah paham, jika ada anchor link yang mengarah ke <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>5 maka akan dibawa ke bagian atas dokumen
Membuat Tautan untuk Memanggil Fungsi Javascript
Tautan juga dapat digunakan untuk memanggil fungsi Javascript
Panggilan fungsi Javascript biasanya dilakukan dengan atribut acara seperti <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>8, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>Contact</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Kamu bisa menghubungi saya melalui nomer WA: 0871111111 atau juga alamat email: [email protected] </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>9, <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>0, dan seterusnya
Contoh
//www.petanikode.com/contact.html8
Hasil
Bahkan, hampir semua elemen dapat menjalankan fungsi Javascript dengan atribut event
Nah, khusus untuk link. Ia juga dapat menjalankan fungsi Javascript melalui atribut atau URL <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>5
Contoh
//www.petanikode.com/contact.html_9
Hasilnya akan sama dengan contoh sebelumnya
Membuat Tautan dengan Gambar
Menjadikan gambar sebagai link terkadang sering dilakukan di web. Cara membuatnya sangat sederhana, kita hanya perlu membungkus tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>2 dengan tag <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>4
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>0
Hasil
Semua area gambar akan menjadi link dan jika kita klik, kita akan dibawa ke halaman yang akan dituju oleh link tersebut
Buat tautan untuk mengunduh file
Tautan terkadang juga digunakan sebagai tautan untuk mengunduh file
Cara membuatnya sangat mudah, kita hanya perlu memasukkan alamat URL dari file yang akan didownload
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_1
Hasil
Pada contoh di atas, kita langsung menuliskan nama file. Ini karena HTML <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>4 berada di folder yang sama dengan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>5
Lalu, bagaimana jika file tersebut ada di tempat lain?
Mudah. hanya mengubah URL
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_2
Buat Tautan untuk Mengirim Email
Tautan terkadang juga digunakan untuk mengirim email
Cara membuatnya
Ubah URL tujuan tautan dengan <!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <h1>About</h1> <p> <a href="index.html" >Home</a> | <a href="contact.html" >Contact</a> | <a href="about.html" >About</a> </p> <hr> <p> Ini adalah halaman about dari website saya. Jadi ini adalah contoh cara membuat link internal di HTML. </p> <hr> <div>Copyright © 2020 by Petani Kode</div> </body> </html>6, diikuti dengan alamat email yang akan menerima email
Contoh
<!DOCTYPE html> <html lang="en"> <head> <title>Tutorial Link di HTML</title> </head> <body> <p>Untuk lebih lengkapnya, silahkan buka: <a href="about.html">About us</a> </p> </body> </html>_3
Hasil
Jika Anda membukanya di Google Chrome, maka itu akan membuka Gmail. Namun jika dibuka di Firefox, maka akan memilih aplikasi email yang tersedia di komputer
Apa berikutnya?
Wow. selain menghubungkan halaman, ternyata banyak sekali fungsi link lainnya
Intinya adalah
Anda hanya perlu mengingat cara membuat tautan dan jenisnya. Karena ini adalah basic yang akan terus digunakan dalam membuat web