Link dan Navigasi
1. ANCHOR
a. Kita dapat
membuat link kebagian dari sebuah halaman sendiri yang lebih dikenal dengan
istilah anchor. Anchor biasanya digunakan untuk halaman web yang memiliki isi
yang banyak,sehingga halaman bisa sangat panjang dan membutuhkan waktu yang
lama untuk sampai kehalaman bawah. Hal yang harus diperhatikan dalam mebuat
anchor pada bagian halaman adalah :
i.
Halaman harus panjang
ii.
Tambahkan atribut id
pada elemen <a> bagian yang dituju. Misalnya : <a id=”bawah”>bagian
bawah </a>
iii.
Tambahkan tanda “#” pada atribut href teks yang berisi
link. Misalnya : <a href =”#bawah”> kebawah</a>
Contoh
:
<html>
<head>
<title>Example
Cafe - comunity cafe in Newquay,Cornwal,UK</title>
</head>
<body>
<h1>EXAMPLE
CAFE</h1>
<div>
<a
href="index.html">HOME</a>
MENU
<a
href="recipes.html">RECIPES</a>
<a
href="contact.html">CONTACT</a>
</div>
<p><a
href="#starters">Starters</a> | <a
href="#mains">Main
Courses</a> | <a
href="#desserts">Desserts</a></p>
<h1>Menu</h1>
<h2><a
id="starters">Starters</a></h2>
<ul>
<li>Honey
Soy Chicken Kebabs</li>
<li>Seafood
Salad</li>
</ul>
<p><small><a
href=#"top"Back to top</a></small></p>
<h2><a
id="mains">Mains courses</a></h2>
<ul>
<li>Beef
Tournados with Mustard and Dill
Sauce</li>
<li>Roast
Chicken Salad</li>
<p><small><a
href=#"top"Back to top</a></small></p>
<h2><a
id="#desserts">Desserts</a></h2>
<ul>
<h1>Pecan
Pie(<a href="vege">v</a>)</li>
<li>Selection
of Fine Cheeses from Around the
World</li>
</ul>
<p><small><a
href=#"top">Back to top</a></small></p>
</body>
</html>
2. INTERNAL
LINK
a. Internal
link adalah istilah yang digunakan jika halaman yang dituju berada pada situs
yang sama. Misalnya : kembali ke halaman
<a href=”index.php”>depan</a>
Contoh :
<html>
<head>
<title>A basic link to
another page</title>
</head>
<body>
<p>return to the <a
href="index.html">index page</a>.</p>
</body>
</html>
3. EKSTERNAL
LINK
a. Eksternal
link adalah istilah yang digunakan jika halaman yang dituju bukan merupakan
bagian dari situs,melainkan halaman situs lain. Misal : silahkan lihat script lemgkapnya
Contoh :
<html>
<head>
<title>A link with a title
attribute - hover over the link to see the tooltip appear </title>
</head>
<body>
<p><a href
="http://www.google.com/" title="searceh the web with
google">google</a> is a very popular search engine.</p>
</body>
</html>
4.
LINK EMAIL
Link email dimana link tersebut kalau diklik menuju
suatu alamat email. Email link adalah link yang berisi alamat email bukan
alamat dokumen HTML atau alamat web tertentu. Contohnya sebagai berikut :
<html>
<head>
<title>A
link to send an email</title>
</head>
<body>
<p><a
href="mailto:name@example.com">name@example.com</a></p>
</body>
</html>
<html>
<head>
<title>A
link with a title attribute-hover over the link to see the tooltip
appear</title>
</head>
<body>
<p><a
href="http://www.Google.com/" title="Search the web with
Google">Google</a> is a very popular search engine.</p>
</body>
</html>
Tidak ada komentar:
Posting Komentar