Hal
yang sering kalian temui dalam sebuah website adalah link. Link tersebut akan
membuat konten atau elemen HTML4 dapat di klik dan akan mengarahkan/membawa kalian
ke halaman web lainnya. Biasanya suatu link ditampilkan berwarna biru dan
bergaris bawah (selama belum diberi style).
1.1 Link
standar
Link atau biasa disebut dengan anchor
(pengait) dapat dibuat dengan menambahkan tag <a> pada teks yang ingin
kita buat menjadi link.
Klik <a>disini</a> untuk
mendownload
Namun kalian tidak akan melihat
perubahan pada teks “disini” karena kita belum “mengaitkannya” ke halaman web
lain. Untuk itu kita akan menggunakan attribut href untuk menyimpan alamat web
yang akan dituju ketika link di klik (penulisan lokasi sama halnya dengan
attribut src pada tag img).
1. Klik <a href=”http://www.alamat-tujuan.com”>disini</a>
untuk mendownload
Sebagai latihan kita akan membuat
file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan
sebelumnya.
1. Buatlah
file baru dengan nama latihan2.html, simpanlah di folder yang sama dengan
latihan-latihan sebelumnya.
2. Ketikkan
kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Link Html</title>
</head>
<body>
<h1>membuat link di html</h1>
<a href="///C:/Users/Altf4/Desktop/codein/belajar_html/gambar.html">gambar</a>
</br>
<a href="///C:/Users/Altf4/Desktop/codein/belajar_html/lathihan2.html">kembali</a>
</body>
</html>
<style type="text/css">
3. Buka
kembali file latihan2.html, dan tambahkan sebuah link yang akan mengait ke file
latihan2.html tepat sebelum penutup tag body ( </body> ).
4. kemudian
bukalah file latihan3.html pada browser.
Dan kalian dapat mengklik linknya satu persatu.
Jika kalian perhatikan pada kode yang terdapat dalam latihan2.html,
ada beberapa tag yang belum saya jelaskan, yaitu tag <h1> dan <br>.
Tag
<br> digunakan untuk memindahkan teks kebaris baru, sehingga teks yang
dipisahkan dengan tag ini akan ditampilkan di baris yang berbeda. Jika anda
menghapus tag <br> ini, maka teks akan ditampikan satu baris.
Untuk
membuat link yang mengacu ke halaman web lain, pastikan kalian menyertakan
http:// pada atribut href link tersebut.
<a
href=”http://www.google.com”> Buka Google </a>
Jika
kalia tidak menyertakan http:// maka link tersebut tidak akan bekerja
sebagaimana mestinya. Setiap link yang diklik akan ditampilkan di window/tab
yang sama, bagaimana jika kalian ingin membuka link tersebut di tab/window
baru? Tambahkan atribut target=“_blank”.
1.2 link email
Kalian juga dapat membuat link email,
link ini berisi alamat email yang ketika diklik, aplikasi untuk mengirim email
akan otomatis terbuka dan tujuan email secara otomatis terisi dengan alamat
yang telah ditentukan.
Untuk membuat link email, anda tinggal
menambahkan mailto:alamat@email di dalam atribut href.
<a
href=”mailto:nama_email@gmail.com”>Kirim Email</a>
Selain tipe
link-link di atas, masih banyak lagi tipe link lainnya, seperti link No. Telp,
Aplikasi dan lainnya.
Demikian lah tutorial kali ini -Codein-
0 komentar:
Post a Comment