Pernahkah sobat menemukan jenis link seperti ini
ketika sobat berselancar di dunia internet.? Jika sobat pernah menemukannya, berarti sobat termasuk orang yang beruntung. Lalu,
apa hubungannya sama keberuntungan.? #pikirAjaSendiri ^_^
Link seperti ini banyak digunakan dalam satu
halaman artikel.
Kalau sobat pernah baca artikel di wikipedia maupun di bloger, pasti sobat bakal menemukan banyak
sekali link. Dimana, ketika sobat klik link tersebut, sobat akan dibawa ke bagian
paling bawah atau halaman berikutnya.
1. Untuk membuat link yang akan menuju halaman berikutnya, sobat bisa gunakan kode <a href="alamat/URL halaman yang di tuju">Nama Halaman</a> disimpan dibawah <body>.
Maka kode HTMLnya :
<html>
<head>
<title> Membuat Link </title>
</head>
<body>
<h2>Belajar Membuat Link</h2>
Ini adalah link pertama yang saya buat. Klik <a href="http://sharecodingwebsite.blogspot.co.id">Disini </a> untuk menuju ke halaman website sharecodingwebsite.blogspot.com.
</body>
</html>
Kemudian sobat simpan di folder sobat dengan format .html atau .htm
Hasilnya :
Belajar Membuat Link
Ini adalah link pertama yang saya buat. Klik Disini untuk menuju ke halaman website sharecodingwebsite.blogspot.com.2. Untuk membuat link yang akan menuju bagian tertentu atau bagian link yg sobat klik seperti link yang ada di Wikipedia, sobat tinggal tambahkan suatu atribut bernama id. Apa itu id?
Atribut id adalah atribut yang bisa sobat letakkan di tag apapun di HTML (contohnya seperti tag a, tag div, dll).
Atribut id bisa dikatakan sebagai identitas dari tag tersebut.
Karena atribut id merupakan
identitas suatu tag, maka didalam satu halaman HTML, TIDAK boleh ada nama
atribut id yang sama. Namun, sobat juga perlu tahu, kalau ternyata TIDAK semua
tag harus mempunyai atribut id. Jadi sobat bisa menambahkan atibut id ke tag
tertentu yang sobat inginkan.
Untuk membuat link menuju bagian
tertentu dalam satu halaman HTML, setidaknya kamu membutuhkan 2 cara penulisan
atribut id. Pertama adalah cara penulisan atribut id pada link tujuan
(misal link tujuanya berupa gambar, teks, dll), kedua adalah cara penulisan
pada link awal (contoh simpelnya seperti tulisan “klik disini”). Semoga sobat tidak bingung ya ^^
- Cara penulisan atribut id pada link tujuan
Untuk menulis atribut id pada link
tujuan, kamu bisa menggunakan format dibawah ini:
id=”namaAtribut(terserah sobat)”
Keterangan:
=>Pada contoh diatas, nama
atribut id’nya bisa sobat letakkan di bagian namaAtribut
=>Ada ketentuan dalam membuat nama atribut id, yaitu tidak boleh menggunakan spasi. Jadi untuk memudahkannya, sobat bisa memanfaatkan tanda underscore(_), huruf kapital pada awal kata selanjutnya, dll.
Contoh: id=”gambar_Ikan”, id=”gambarIkan”, dll.
=>Ada ketentuan dalam membuat nama atribut id, yaitu tidak boleh menggunakan spasi. Jadi untuk memudahkannya, sobat bisa memanfaatkan tanda underscore(_), huruf kapital pada awal kata selanjutnya, dll.
Contoh: id=”gambar_Ikan”, id=”gambarIkan”, dll.
=>Atribut merupakan sesuatu yang
TIDAK CaseSensitif, jadi penulisan target dengan TARGET akan
menghasilkan sesuatu yang sama. Hal ini berlaku juga untuk isi atributnya
=>Atribut id ini akan kita pasang
di SELAIN tag a
- Cara penulisan atribut id pada link awal
Link awal ini WAJIB kita taruh di
tag a, atau lebih tepatnya diletakkan didalam atribut href. Untuk
lebih jelasnya, lihat format dibawah ini:
href=”#namaAtribut”
Keterangan:
=>Untuk menulis link awal, HARUS
diawali dengan tanda pagar (#), dan diikuti dengan nama id yang kita
buat di link tujuan.
=>Isi dari #namaAtribut
harus sama persis dengan nama atribut yang dibuat pada link tujuan.
Perhatikan huruf kecil besarnya juga.
Untuk lebih jelasnya sobat gunakan kode seperti dibawah ini :
Untuk teks:
<a NAME="NAMA">Topik Nama </a>
<a href="#NAMA">Menuju Ketopik Nama</a>
Untuk gambar :
<a href="#NamaId">Topik Nama</a>
<img src="NamaFile.jpg" id="NamaId">
(perlu di ingat untuk format gambarnya ada yang .JPG .JPEG .GIF .PNG )
Contoh :
Sebelumnya saya telah menambahkan kode pada artikel ini
<a name="#BelajarMembuatLink">Belajar Membuat Link</a>
<a name="#PengertianAtributId">Pengertian Atribut Id</a>
<a name="#CaraMenulisAtributId">Cara Menulis Atribut Id</a>
<img src="link.jpg" id="MembuatLink">
<html>
<head>
<title>Membuat Link</title>
</head>
<body>
Disini saya menggunakan artikel saya sendiri sebagai contoh nya
<ol>
<li><a href="#BelajarMembuatLink">Belajar Membuat Link </a>
<li><a href="#PengertianAtributId">Pengertian Atribut Id </a>
<li><a href="#CaraMenulisAtributId"> Cara Menulis Atribut Id </a>
<li><a href="#MembuatLink">Membuat Link (Gambar)</a>
</ol>
</body>
</html>
Hasilnya :
0 Response to "Belajar Membuat Link Atau Tautan Dengan Kode HTML"
Post a Comment