BAB
2
LINK DAN NAVIGASI
Hal
yang membedakan halaman web dengan teks
biasa adalah link atau hyperlink yang menghubungkan natara satu halaman dnegan
halaman lain
Berikut adalah
contoh dari link yang menghubungkan web
kita dengan web google
2.1 ANCHOR
Kita
dapat membuat link ke bagian dari sebuah halaman itu sendiri yang lebih di kenal dengan istilah anchor.Hal yang harus di perhatikan dalam
membuat anchor Pada bagian halaman adalah:
1.
Halaman harus panjang
2.
Tambahkan antribut id pada elemen<a> bagian yang di
tunju
3.
Tambahkan tanda “#” pada antribut href teks yang berisi
link.
Misalnya:<a href=”#bawah”>kebawah</a>
2.2 INTERNAL LINK
Kembali ke halaman <a
href=”index.php”>dengan</a>
2.3 EKSTERNAL LINK
Silahkan
lihat script lengkapnya
2.4 LINK KE EMAIL
Email link adalah link yang berisi alamat
imeal.bukan alamat dokumen HTML atau
halaman web tertentu .cara membuat link e-mail mudah adalah
<a
href=”mailto:alamat _email “>teks atau objek</a>
2.5
LINK ABSOLUTEB DAN RELATIF
ABSOLUTE
LINK meng8unakan fuul path(alamat
lengkap) termasuk protokoldan alamat
server
Contoh:<a
href=:http//www.myweb.com/face.html”>foto</a>
RELATIV
LINK adalah URL target yang tidak detail relative terhadap dokumenyang memanggil
target tersebut
Contoh
perintah html
<html>
<body>
Tes:<br/>
<a href=”dirsma.html”>Di Direktori yang sama
</a>
</br>
<a
href=”dir4/filedir4.html”>Maju 1
Direktori</a><br/>
<a
href=”…../filedir2.html”>mundur 1
Direktori</a><br/>
<a
href=”…/../filedir1.html”>mundur 2
Direktori</a><br/>
</body>
</html
2.6
LINK IMAGE(GAMBAR)
Elemen
yang digunakan untuk , menampilkan gambar (image) adlah <img>dalam
meletakan gambar dengan mengunakan elemen <img>.
Beberapa
atribut lain yang biasa di gunakan adalah
Atribut fungsi
Atribut mengatur peralatan gambar.terdapat 5
peralatan,yaitu top
,middle,bottom,left,dan
right.
Border untuk
memberikanbingkai pada gambar dengan ketebalan tersebut
Hspace
dan vspace untuk mengatur lembar
ruang kosong disekitar gambar
Name untuk memberikan
nama gambar
GAMBAR
SEBAGAI LINK
Kita
dapat membuat sebuah link,caranya adalah elemen<img> kitaletakkan di
dalam elemen <a>.lihat contoh:
Alt=”amik
parbina nusantara”>
<img
src=”logotb.girl”gif height=”50” width=”5 0”></a>
<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>
Latihan 1
<html>
<head>
<title>example cafe - community cafe in newquay, cornwal, UK </title>
<meta http-equiv="content-type" content ="text/html;charset=iso-8859-1" />
</head>
<h1>EXAMPLE CAFE </h1>
<div>
<a href="index.html">HOME</a>
<a href="menu.html">MENU</a>
<a href="recipes.html">RECIPES</a>
CONTACT
</div>
<h2>contact</h2>
<p><address>12 sea view, newquay, cornwall, UK</address></p>
<p><a
href="http://maps.google.com/maps?q=newquay">find us on google maps</a></p>
<p><a href="mailto:info@examplecafe.com">email example cafe</a></p>
</body>
</html>
OUTPUTNYA:
Latihan 2
<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>
OUTPUTNYA:
LATIHAN 3
<html>
<head>
<title>A basic link to an eksternal web site </title>
</head>
<body>
<p>why not visit the<a href="http://www.wrox.com/">wrox web site</a>?</p>
</body>
</html>
OUTPUTNYA:
LATIHAN 4
<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>
OUTPUTNYA:
LATIHAN 5
<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>
OUTPUTNYA:
LATIHAN 6
<html>
<head>
<title>example cafe - community cafe in newquay,cornwall, uk </title>
</head>
<body>
<h1> EXAMPLE CAFE</h1>
<div>
home
<a href ="menu.html">MENU</a>
<a href ="recipes.html">RECIPES</a>
<a href ="contact.html">CONTACT</a>
</div>
<h2>A community cafe serving home cooked, organic food</h2>
<p>with stunning views of the ocean, example cafe offers the perfect environment to unwind and recharge the batteries.</p>
<p> our menu offers a wide range of breakfasts,brunches and lunches, including a range of vegetarian options</p>
<p>whether you sip on a fresh, hot coffee or a cooling smoothie, you never need to feel rushed relax with friends or just watch the world go by.</p>
<h2>this weekend's special brunch</h2>
<p>this weekend, our season of special brunches continues with scrambled egg on an english muffin. not for the feint hearted, the secred, to thase eggs is that they are made with half cream and cooked in butter, with no more than four eggs in the pan at a time.</p>
</body>
</html>
OUTPUTNYA:
LATIHAN 7
<html>
<body>
tes :<br/>
<a href="dirsama.html">di direktori yang sama<a/>
<br/>
<a href="dir4/filedir4.html">maju 1
direktori </a><br/>
<a href="../filedir2.html">mundur 1
direktori </a><br/>
<a href="../../filedir1.html">mundur 2
direktori </a><br/>
</body>
</html>
OUTPUTNYA:
LATIHAN 8
<html>
<head>
<title>example cafe recipes - worlds best scrambled eggs </title>
</head>
<body>
<h1>EXAMPLE CAFE </h1>
<div>
<a href="index.html">HOME</a>
<a href="menu.html">MENU</a>
RECIPES
<a href="contact.html">CONTACT</a>
</div>
<h1>recipes - world's best scrambled eggs </h1>
<p> I adapted this recipe from a book called
sydney food by bill grainger. ever since tasting these
eggs on my 1<sup>st</sup> visit to bill's restaurant in kings cross, sydney, I have been after the recipe . I have since transformed it into what
I really believe are the <em>best</em> scrambled eggs I have ever tasted.</p>
<h2>ingredients</h2>
<p>the following ingredients make one serving:</p>
<ul>
<li>2 eggs</li>
<li>1 tablespoon of butter (10g)</li>
<li>1/3 cup of cream <i> (2 3/4 f1 ounces) </i></li>
</ul>
<h2>instructions</h2>
<ol>
<li>whisk eggs, cream, and salt in a bowl.</li>
<li> melt the butter in a non-stick pan over a high heat <i> (taking care not
to burn the butter)</i>.</li>
<li>pour egg mixture into pan and wait until it starts setting around the
edge of the pan (around 20 seconds). </li>
</ol>
<p>you should only make a <strong>maximum</strong>of two servings per frying pan.</p>
</body>
</html>
OUTPUTNYA:
SEKIAN BAB 2 HTML SAYA
KIRANYA BERMANFAAT BAGI SEMUA NYA
THANK'S :)
Tidak ada komentar:
Posting Komentar