Hyperlink atau sering di singkat dengan link penjelasan serta
contoh-contohnya dapat di lihat di Belajar HTML tentang Hyperlink HTML. Sedikit koreksi dari contoh link dengan gambar yang kita
buat disana yaitu:
<a
href="http://www.yahoo.com" title="Hai... klik gambar ini maka
anda akan dibawa ke Yahoo.com"><img src="contoh.jpg"
border="0" width="147" height="31"
align="left" alt="yahoo"></a>
Atribut border dan align merupakan deprecated atribut jika di gunakan di dalam tag <img> jadi kita dapat
menggantinya dengan atribut style dengan properti border untuk atribut border
dan properti float untuk atribut align.
<a
href="http://www.yahoo.com" title="Hai... klik gambar ini maka
anda akan dibawa ke Yahoo.com"><img src="yahoo.gif"
style="border:none;float:left" width="147"
height="31" alt="yahoo"/></a>
Hasil:
Lorem ipsum dolor sit amet, nulla
gravida fusce, sem id. Lectus justo condimentum. Arcu fringilla velit. Pretium
elit id, scelerisque penatibus fermentum, adipiscing dui. Habitasse ut. Ac in,
semper aliquam ligula, quisque class tellus.
Hyperlink yang akan kita pelajari
dalam tutorial ini sebagai tambahan dari pelajaran HTML sebelumnya antara lain:
Thumbnail link. Thumbnail link digunakan untuk gambar yang berukuran
besar. Caranya dengan membuat duplikat dari gambar tersebut dengan ukuran yang
jauh lebih kecil yang disebut dengan thumbnail. Jadi gambar ukuran besar
tersebut baru ditampilkan setelah kita mengklik gambar tumbnail tersebut.
<a
href="lokasi gambar original"><img src="lokasi gambar
thumbnail"></a>
Contoh:
<a
href="images/besar-1160X700px.jpg"><img
src="images/kecil-150X100px.jpg" style="border:none"
width="150" height="100" title="Klik untuk melihat
gambar original" alt="contoh tumbnail" /></a>
Hasil:
Membuat link di dalam satu halaman
website.
Pada tulisan ini tepatnya pada
bagian atas setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:
<a
name="top"></a>
Dengan tag tersebut kita dapat
membuat link ke lokasi tersebut dengan membuat link seperti berikut ini:
Klik
link berikut untuk <a href="#top">Kembali ke atas</a>
Hasil:
Klik link berikut untuk Kembali ke atas
Dengan cara diatas kita juga bisa
membuat link ke suatu halaman website dan langsung melompat ke topik tertentu
di dalam satu halaman.
Link
berikut akan membawa anda ke halaman Belajar HTML dengan topik <a
href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink
HTML</a>.
Hasil:
Contoh diatas dapat dibuat dengan
menambahkan tag berikut sebelum titel Hyperlink HTML di dalam halaman tujuan
seperti contoh diatas adalah halaman Belajar HTML:
<a
name="hyperlink-html"></a>
Atau bisa juga dengan menambahkan
atribut "id" di dalam tag titel. Seperti contoh diatas, titel
Hyperlink HTML tersebut berada di dalam tag <h3> jadi kita bisa
menuliskan:
<h3
id="hyperlink-html">Hyperlink HTML</h3>
Untuk membuat link ke lokasi
tersebut kita harus membuat link ke halaman utamanya dulu baru kemudian di
ikuti dengan nama atau id dengan format: "#nama-link".
<a
href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink
HTML</a>
Hasil:
Membuat Email Link.
<a
href="mailto:alamat email">link teks</a>
Contoh:
Jika
ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a>
ke bagian pelayanan.
Hasil:
0 komentar:
Posting Komentar