Bab 2

Link dan Navigasi

Materi

 Link atau Hyperlink

 Link dan Anchor
 Link Image

Tujuan :

1. Mahasiswa mengetahui Pengenalan Link Hyperlink

2. Mahasiswa mengetahui Link Anchor
3. Mahasiswa mengetahui Link Image

Hal yang membedakan halaman web dengan teks biasa adalah link atau hyperlink yang
menghubungkan antara satu halaman dengan halaman lain. Link dibuat dengan
memberikan element <a> yang merupakan singkatan dari anchor. Berikut adalah contoh
dari link yang menghubungkan web kita dengan web google :

<a href=http://www.google.co.id>klik disini</a> untuk masuk ke situs google.

Tag pembuka pada contoh diatas membawa sebuah atribut yaitu href. Atribut
tersebut digunakan untuk menunjukkan alamat dari dokumen yang dituju.

2.1. Link ke bagian tertentu dalam dokumen Satu Halaman

Kita dapat membuat link ke bagian dari sebuah halaman itu 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 ke halaman bawah. Hal yang harus diperhatikan dalam
membuat anchor pada bagian halaman adalah :

1
Pemrograman HTML, CSS dan Javascript Page | 2

a. Halaman harus panjang.

b. Tambahkan atribut id pada element <a> bagian yang dituju.
Misal : <a id=”bawah”>bagian bawah</a>
c. Tambahkan tanda “#” pada atribut href teks yang berisi link.
Misal : <a href=”#bawah”>ke bawah </a>

2.2. Internal Link

Internal link adalah istilah yang digunakan jika halaman yang dituju berada pada
situs yang sama. Misal :
kembali ke halaman <a href=”index.php”>depan</a>

2.3. Eksternal Link

Eksternal link adalah istilah yang digunakan jika halaman yang dituju bukan
merupakan bagian dari situs, melainkan halaman milik situs lain. Misal : silahkan lihat
script lengkapnya
<a href=”http://www.ilmukomputer.com”>disini</a>

2.4. Link ke Email

Selain link yang dibuat untuk menuju ke halaman web tertentu, kita juga bisa
membuat link email, dimana link tersebut kalau di klik menuju ke suatu alamat
email. E-mail link adalah link yang berisi alamat e-mail, bukan alamat dokumen HTML
atau halaman web tertentu. Cara membuat link email mudah adalah :

<a href=”mailto:alamat_email”>teks atau objek </a>

Berikut adalah sebuah contoh e-mail link:

<a href=”mailto:loepoes@ymail.com”>Kirim e-mail ke loepoes</a>

Jika kata “ Kirim e-mail ke loepoes” di klik, maka akan terbuka sebuah window
e-mail baru. Alamat email loepoes@ymail akan tercantum disana secara otomatis.

Kita juga dapat membuat agar isian Subject: pun terisi otomatis. Caranya, Kita
tinggal menambahkan tag berikut ini setelah alamat emailnya:

?subject=teks

Contoh:

<a href=”mailto:loepoes@ymail.com?subject=Salam Kenal”>

Kirim e-mail ke loepoes</a>

Pemrograman HTML, CSS dan Javascript Page | 3

Hati-hati ketika mencantumkan alamat email pada halaman web, sebab alamat
email akan ditemukan sebagai spammer, karena itu harus dilindungi dengan memakai
kode javascript atau ditampilkan dalam bentuk teks lain, image atau gambar. Kalau mau
tetap ditulis alamat emailnya, harus ditulis dengan cara yang agak berbeda, contoh :
loepoes[at]ymail.com

Biasanya link yang di klik akan membuka jendela browser yang sama. Jika kita
menginginkan link terbuka pada halaman baru, kita dapat menambahkan atribut
target=”_blank”.
<a href=http://www.google.co.id/ target=”_blank”>klik disini</a> untuk ke google.

Contoh di atas menunjukkan bahwa sebuah elemen dapat membawa beberapa

atribut, dengan syarat atribut yang dibawa tidak boleh sama.

2.5. Link Absolute dan Relatif

Absolute Link menggunakan full path termasuk berisi protocol dan alamat
server contoh : <a href=”http://www.myweb.com/foto.html”>foto </a>
Relative Link adalah url target tidak detail, relative terhadap dokumen yang memanggil
target tersebut. Untuk memanggil di dalam direktori ( maju 1 direktori) tinggal
disebutkan nama direktorinya. Untuk mundul 1 direktori, gunakan tanda “..”
Contoh
Struktur Folder

Di direktori dir1 terdapat file : filedir1.html, di direktori dir2 terdapat file : filedir2.html
Di direktori dir3 terdapat 2 buah file yaitu teslink.html dan dirsama.html, di direktori
dir4 terdapat file : filedir4.html, File yang dijalankan adalah file teslink.html yang
terletak di dalam direktori dir3
Contoh perintah html
<html>
<body>
Tes :<br/>
<a href="dirsama.html">Di Direktori yang sama</a>
<br/>
<a href="dir4/filedir4.html">Maju 1 direktori</a><br/>
Pemrograman HTML, CSS dan Javascript Page | 4

<a href="../filedir2.html">Mundur 1 direktori</a><br/>

<a href="../../filedir1.html">Mundur 2 direktori</a><br/>
</body>
</html>

Hasilnya

2.6. Link Image (gambar)

Elemen yang digunakan untuk menampilkan gambar (image) adalaha <img>.
Dalam meletakkan gambar dengan menggunakan element <img>, setidaknya
menggunakan 2 atribut yaitu: src untuk menunjukkan sumber gambar dan alt untuk
memberikan deskripsi pada gambar. Contoh :
<img src=”logoatb.gif” alt=”logo ATB”>

Jika gambar yang kita masukkan memiliki ukuran yang besar, hendaknya kita
membatasi ukuran gambar tersebut dengan menambahkan atribut height untuk tinggi
dan width untuk lebar. Contoh :
<img src=”logoatb.gif” alt=”logo ATB” height=”120” width=”120” >

Beberapa atribut lain yang biasa digunakan untuk gambar adalah :

atribut Fungsi
align Mengatur perataan gambar. Terdapat 5 perataan yaitu top,
middle, bottom, left, dan right.
border Untuk memberikan bingkai pada gambar dengan ketebalan
tertentu
hspace dan vspace Untuk mengatur lebar ruang kosong disekitar gambar
name Untuk memberikan nama gambar
Pemrograman HTML, CSS dan Javascript Page | 5

Gambar sebagai Link

Kita dapat membuat sebuah gambar menjadi sebuah link. Caranya adalah
elemen <img> kita letakkan di dalam elemen <a>. lihat contoh :
<a href=http://www.amiktunasbangsa.ac.id alt=”situs amik tunas bangsa”>
<img src=”logoatb.gif” heigth=”50” width= “50”></a>

Latihan Link dan Navigation

Nama File : latihan2_1.html

<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>
Hasilnya

Nama File : latihan2_2.html

<html>
<head>
<title>A basic link to an external web site</title>
</head>

<body>
<p>Why not visit the <a href="http://www.wrox.com/">Wrox Web
site</a>?</p>
</body>
</html>

Nama File : latihan2_3.html

<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>
Pemrograman HTML, CSS dan Javascript Page | 6

Nama File : latihan2_4.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>

Kerjakan Latihan di Bawah ini

Nama file : menu.html

<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 these 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>
Pemrograman HTML, CSS dan Javascript Page | 7

</body>
</html>

Nama file : menu.html

<html>
<head>
<title>Example Cafe - community 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">Main courses</a></h2>

<ul>
<li>Beef Tournados with Mustard and Dill Sauce</li>
<li>Roast Chicken Salad</li>
</ul>
<p><small><a href="#top">Back to top</a></small></p>

<h2><a id="desserts">Desserts</a></h2>
<ul>
<li>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>

Nama file : recipes.html

<html >
<head>
<title>Example Cafe recipes - Worlds Best Scrambled Eggs</title>
</head>
<body>
<h1>Example Cafe</h1>
Pemrograman HTML, CSS dan Javascript Page | 8

<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^st 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 fl 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>

Nama file : contact.html

<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>

<body>

<h1>EXAMPLE CAFE</h1>
<div>
<a href="index.html">HOME</a>
<a href="menu.html">MENU</a>
<a href="recipes.html">RECIPES</a>
Pemrograman HTML, CSS dan Javascript Page | 9

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>

Buat Menu dan link Untuk Gambar dibawah ini yang di cetak tebal