Index of /Kuliah2013-2014/Desain&PemrogramanWeb/Day3-4

(1)

Bab 4 - Membuat Link

Web Design

Team Dosen

(2)

Dokumen HTML mempunyai kemampuan

untuk memberikan link dari satu teks dan /

atau gambar menuju ke dokumen atau

bagian lain dalam suatu dokumen

Browser web akan menyorot teks atau

ganbar yang diidentifikasikan sebagai link

dengan warna dan / atau garis bawah untuk

(3)

Tag Anchor

HTML menggunakan tag <a> yang disebut

sebagai tag anchor untuk membuat suatu link

kepada dokumen lain.

<a href="http://www.eepis-its.edu">Link ke

(4)

Link Relatif

Membuat link dari

satu page ke page

lainnya pada

computer yang sama

dapat dilakukan

<html>

<head>

<title>Link Relatif</title>

</head>

<body>

<a

href="biodata.html">Biodata</

dapat dilakukan

dengan menuliskan

langsung nama

filenya.

href="biodata.html">Biodata</

a></body>

</html>

(5)

Link Absolut

Membuat link ke

page web lain yang

berada pada web

site lain di internet

<html>

<head>

<title>link</title>

</head>

<body>

<a href="http://www.eepis-its.edu"

site lain di internet

dilakukan dengan

menuliskan nama

URL dan nama

filenya.

<a href="http://www.eepis-its.edu"

>Link ke www.eepis-its.edu</a>

</body>

(6)

Link ke bagian lain dalam dokumen

yang sama

Link jenis ini dipakai jika dokumennya terlalu

panjang, sehingga apabila ditampiklkan di

browser akan mengharuskan kita melakukan

scroll layer berulang-ulang. Untuk

memudahkannya, maka dibuat link antar

bagian di dalam dokumen HTML.

(7)

linkbagian.html

html> <head>

<title>Link dalam satu dokumen</title> </head>

<body>

<p>isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab 1,isi penjelasan bab </p>

<p>isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2, isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2,isi penjelasan bab 2</p>

<p>isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3, isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3,isi penjelasan bab 3.</p>

(8)

Keterangan :

<a name="isibab1">Bab1</a> :

Memberi nama bagian dalam dokumen

HTML.

<a href="#isibab1">1. Bab 1</a> :

mendefinisikan link isibab1, jika teks “1. Bab

1” diklik, maka halaman web akan

(9)

(10)

Membuat Link untuk window baru

Untuk membuat

link supaya

membuka window

baru dapat

<html>

<head>

<title>link new window</title>

</head>

<body>

membuka alamat website eepis

baru dapat

ditambahkan

atribut :

target=”_blank”.

membuka alamat website eepis

dengan membuka window baru : <a

href="http://www.eepis-its.edu"

target="_blank">www.eepis-its.edu</a>

</body>

</html>

(11)

Mailto

link untuk

menghubungkan ke

sebuah alamat email.

<html>

<head>

<title>Mailto</title>

</head>

<body>

kirim email ke humas PENS

: <a

href="mailto:[email protected]">[email protected]

</a>

</body>

</html>

(12)

Properties Dreamweaver untuk

membuat link HTML

Keterangan :

contoh : untuk membuat link ke website lain, pada

field link diisikan

http://www.eepis-its.edu

Keterangan :

(13)

(1)

Keterangan :

<a name="isibab1">Bab1</a> :

Memberi nama bagian dalam dokumen

HTML.

Politeknik Elektronika Negeri Surabaya

(PENS) 8

HTML.

<a href="#isibab1">1. Bab 1</a> :

mendefinisikan link isibab1, jika teks “1. Bab

1” diklik, maka halaman web akan

(2)

(3)

Membuat Link untuk window baru

Untuk membuat

link supaya

membuka window

baru dapat

<title>link new window</title> </head>

<body>

membuka alamat website eepis

Politeknik Elektronika Negeri Surabaya

(PENS) 10

baru dapat

ditambahkan

atribut :

target=”_blank”.

membuka alamat website eepis

dengan membuka window baru : <a href="http://www.eepis-its.edu"

target="_blank">www.eepis-its.edu</a>

</body> </html>

(4)

Mailto

link untuk

menghubungkan ke

sebuah alamat email.

<title>Mailto</title> </head>

<body>

kirim email ke humas PENS kirim email ke humas PENS : <a href="mailto:[email protected]">[email protected] </a> </body> </html>