A.
ANATOMI LINK
Peran
link dalam halaman web sanagt besar dan selalu dibutuhkan untuk memudahakan
untuk memudahkan pengguna web dalam berintraksi dengan halaman-halaman web yang
ada. Link dalam HTML ditandai dengan tag <A> (Anchor) yang terdiri dari atribut HREE yang digunakan untuk
menuliskan lokasi tujuan (file) dari
link dan variabel NAME yang digunakan untuk menyimpan nama variabel kunci
sebagai lokasi (bagian) `yang akan dituju` oleh link.
Sintaks
link adalah sebagai berikut: <a
href=”url”> nama link</a>
Link
dapat dibuat pada suatu teks atau gambar dengan cara melatakkan teks atau
gambar tersebut di antara tag pembuka < A HREF> dan tag penutup
</A>.
Contoh
penulisan kode link adalah sebagai berikut :
......
<A HREF=”tugas.html”
NAME=”#bagian1”> Ke BAB 2 </A>
<A
HREF=”tugas.html#bagian1” NAME=”#bagian2”>
Ke BAB 1</A>
Link menggunakan gambar :
<A HREF=”tugas.html”
NAME=”#bagian1”>
<img src=”logo.jpg>
</A>
......
Pada bagian href digunakan untuk referensi file tujuan, sehingga pada
contoh di atas dapat ditulis href=”tugas.html”>.
Jika pada file tugas.html terdapat banyak bab dan penempatan link
digunakan untuk berpindah antar bab, maka pada tiap link diberi nama variabel
setelah tag name dan pada href
disebutkan bagian bab yang dituju, sehingga penulisannya menjadi :
Href=”tugas.html1#bagian2”.
1. Mengenal Jenis Link
Keleebihan utama dari dokumen HTML
adalah kemampuannya untuk memberikan link dari satu teks atau gambar menuju ke
dokumen atau bagian lain dalam suatu dokumen html. Browser Web akan meyorot (“highleght”) teks atau gambar yang
didefinisikan sebagai link dengan warna dan garis bawah untuk menunjukkan bahwa
itu adalah hyperlink atau link.
a. Link Relatif
Link relatif merupakan link yang
fungsinya untuk berpindah antar halaman web komputer yang sama. Jika dua
halaman web berada pada satu direktori yang sama, maka dapat dituliskan nama file halaman yang dituju.
Contohnya :
<a href
=”halaman2.html”>Lanjut</A>
b. Link Absolut
Link absolut adalah link yang fungsinya
untuk berpindah antara halaman website yang satu dengan website yang lain
di internet. Contohnya :
<a href =https://ilmukomputer1313.blogspot.co.id>Kunjungi
blog saya</A>
B.
FORMAT LINK ANATAR ISI PADA SUATU HALAMAN WEB
1. Pengertian
Format link antar isi pada suatu halaman
web biasa disebut juga dengan link dalam satu halaman, berbeda dengan hyperlink
pada umumnya yang biasa digunakan untuk menghubungkan suatu tulisan dengan
tulisan lain yang berada pada halaman yang berbeda atau blog yang berbeda, link itu lebih banyak digunakan untuk
halaman yang sama. Misalnya membuat tautan link yang mengarah ke atas, ke
tengah, dan ke bawah.
Link ini dibuat untuk dokumen yang
panjang sekali, sehingga apabila ditampilkan dalam browser web akan
mengharuskan kita melakukan scroll layar berulang-ulang.
Navigasi untuk penelusuran dokumen dapat
dimudahkan dengan membuat link atar bagian, dengan menandai setiap bagian
tersebut dengan memberinya nama. Sehingga dalam dokumen akhir ada bagian yang
bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke
bagian-bagian tersebut.
2. Prinsip Dasar Penggunaan
Prinsip dasarnya adalah kita menandai
terlebih dahulu suatu bagian dengan memberi tanda tag anchor misalnya <a
name=”atas”>, kemudian pada bagian yang lain kita buat link untuk
memangginya dengan kode <a
href=”#atas”>.
Sintaksnya adalah sebagai berikut :
<a name=”atas”>ATAS</a> <-- objek tujuan
<a href=”#atas”>ke Atas</a <-- link menuju ke tujuan
Perhatikan tanda pagar (#) di atas,
untuk objek tujuan tidak memakai tanda pagar, akan tetapi untuk link yang
menuju ke tujuan harus memakai tanda pagar.
Link yang menuju ke suatu bagian
tertentu sangat berguna terutama untuk halaman web dengan postingan yang sangat
panjang, sehingga link dengan target dalam satu halaman ini untuk mempermudah
navigasi pengunjung website.
3. Cara Membuat Link dalam Satu
halaman
a. Menentukan nama terget
Pilih bagian artikel yang ingin
dijadikan sebagai target link, bisa berupa sebuah paragraf,
subjudul, kalimat, atau kata yang kita inginkan. Kemudian dibuat name atau id pada kata yang dipilih
tersebut dengan satu nama variabel, dalam pemberian nama variabel tersebut
tanpa menggunakan spasi, karena spasi pada browser akan berubah menjadi “%20%
Contoh 1 :
<div
id=”bab3”> BAB III </div>
Contoh 2 :
<a
name=”bab4”> BAB IV </a>
b. Membuat link ke target
Buatlah kalimat atau kata yang ingin
dijadikan sebagai link yang akan
ditunjukan ke target link, misalnya sebagai berikut :
* <a
href=”#bab3”>Ke Bab III </a>
*
<a href=”#bab4”>Ke Bab IV </a>
4. Link ke File
Ada beberapa cara penulisan sintaks link
untuk menuju ke suatu halaman tertentu (file).
Berikut ini adalah cara penulisan link yang menuju ke halaman yang berbeda.
* jika file yang dituju berada pada
folder/directory yang sama dengan file link, maka cukup dituliskan nama
filenya, misalnya :
<a href=”produk.html”>Daftar Produk</a>
* jika file yang dituju berada pada subfolder
di dalamnya, maka dituliskan nama foldernya. misalnya:
<a href=”galery/macam.html”>Galery Produk</a>
* Jika file yang dituju berada pada folder di atas folder yang
ditemapati oleh file link, maka penulisannya seperti berikut:
<a href=”../tentang.html”>About me</a>
* Jika file yang dituju berada dua tingkat di atas folder link,
maka dituliskan dua kali titik seperti berikut ini:
<a
href=”../../tentang.html”>About
me</a>
Berdasarkan
lokasi tujuannya, link dapat dibedakan menjadi 4 macam, yaitu:
a.
Link yang menuju ke bagian
tertentu pada halaman yang sama <a
href=”#bab2” name=”bab1”>Lihat
Bab 2</a>
b.
Link yang menuju ke halaman yang
lain dalam web yang sama <a href=”galery.html”>Galeri Foto</a>
c.
Link yang menuju ke halaman yang
lain dalam web yang berbeda <a href=”http://www.rusydi94.blogspot.com/tentang.html”>Tutorial Web</a>
d.
Link yang menuju ke bagian
tertentu pada halaman web yang berbeda <a
href=”http://www.rahul94.blogspot.com/home.html#ling”>Linknya</a>
C. FORMAT LINK ANTAR HALAMAN WEB
UNTUK MEMBENTUK SITEMAP
Link merupakan cara untuk membuka
atau memanggil halaman web atau file tertentu. Link merupakan tag yang sangat
penting dalam penggunaan HTML, karena dengan adanya link yang akan membedakan
antara dokumen HTML dengan dokumen teks biasa.
Setiap halaman, file, direktori, dan
lokasi di internet selalu memiliki alamat URL-nya (Uniform Resourece Locator) sendiri-sendiri yang menuju pada server
web di internet.
Hampir semua link menggunakan teks
sebagai penghubungnya. Teks yang berada di antara tag <A> dan </A>
akan menampilkan dengan garis bawah dengan warna standar biru.
Sebenarnya warna ini dapat diubah
sesuai dengan keinginan pembuat web dengan menambahkan atribut LINK, ALINK, dan
VLINK dalam tag <BODY>. Atribut LINK digunakan untuk memberi warna pada
link saat mouse diklik dan VLINK digunakan untuk memberikan warna pada link
yang sudah dikunjungi. Sintaksnya adalah sebagai berikut:
<BODY LINK=”green” ALINK=”red” VLINK=”pink”>
Selain mengatur warna pada link, kita
juga dapat menghilangkan garis bawah pada suatu link dengan membuat sintak
seperti berikut ini :
<A HREF=http://www.yahoo.com stye=”text-decoration:none”>Ke Yahoo</a>
* Link Antar Halaman Web Untuk Membentuk Sitemap
Link dapat dibuat gambar manapun teks seperti yang telah dijelaskan
pada pelajaran sebelumnya. Untuk membuat
link yang menggunakan gambar peta, dapat dilihat pada contoh berikut ini:
....
<img src=”map.jpg”
usemap=”#mapku”>
<map name=”mapku”>
<area shape=”rect”
coords=”100,100,200,200”>
<area shape=”circle”
coords=”50,50,30”>
<area shape=”poly”
coords=”300,300,400,400,500,500,600,600”>
</map>
.....
.....
Rect digunakan untuk membuat area map berbentuk segi empat dengan titik
awal 100,100dan titik akhir 200,200.
Circle digunakan untuk membuat area map berbentuk lingkaran dengan titik
tengah 50,50 dan diameter 30.
Poly digunakan untuk membuat area map berbentuk polygon dengan titik
pertama 300,300, titik kedua 400,400, titk ketiga 500,500, titik keempat,
600,600 dan dapat ditambahkan titik berikutnya.
D. FORMAT TARGET LINK, EMAIL,
DAN TELEPON
1. Format Target Link
Jika suatu link diklik maka browser akan menampilkan halaman yang
dituju oleh link tersebut. Ada dua macam penampilan oleh browser dalam
memunculkan halaman tujuan tersebut.
Pertama, ditampilkan pada jendela yang sama sehingga halaman temapt
link itu ditutup dan digantikan oleh halaman yang dituju dan ini merupakan cara
pemunculan default.
Kedua, ditampilkan pada jendela yang baru, sehingga akan muncul jendela
yang baru untuk menampilkan halaman yang dituju.
Dalam pembuatan link ini, harus ditambahkan atribut TARGET=”_blank”
dalam tag <a herf>, sehingga penulisannya adalah sebagai berikut:
<a href=”halaman.html” target=”_blank”>
Berikut ini adalah beberapa target yang dapat diisikan pada link:
·
_blank : halaman yang dipanggil akan muncul pada jendela
baru.
·
_top : halaman yang dipanggil akan mengisi penuh
jendela yang sama, mesikipun tadinya
ada frame.
·
_self : halaman yang dipanggil akan mengisi temapt
yang sama, bila link tersebut dalam sebuah frame maka halaman yang dipanggil
akan mengisi frame tersebut.
·
_parent : halaman yang dipanggil akan mengisi FRAMESET satu
tingkat lebih tinggi dari FRAME temapt link yang bersangkutan.
2. Link Email
Link dapat digunakan untuk mengirim ke alamat email, jika link ini
diklik akan membuka jendela pengiriman email dari program email yang terinstall
pada komputer (misalnya Microsoft Outlook).
Pada kota tujuan email (ToJ akan tercantum alamat email tujuan.
Contoh:
Link yang langsung menuju ke alamat e-mail.
<a href=”mailto:budi.prihhastomo13@gmail.com?subject=judulnya?”>
Kiri email</a>
3. Link telepon
Link dapat digunakan untuk melakukan panggilan telepon, jika link ini
diklik akan melakukan panggilan telepon pada nomor tujuan. Penulisan kodenya
adalah sebagai berikut:
....
<a href=”tel://085290410466”>Klik
disini untuk menghubungi saya</a>
....
4. Link SMS
Link dapat digunakan untuk melakukan pengiriman pesan SMS pada nomor
tujuan, jika link ini diklik akan melakukan pengiriman SMS pada nomor tujuan.
Penulisan kodenya adlah sebagai berikut :
.....
<a href=”sms:085290410466&body=Pendaftaran”>SMS
ke saya:</a>
.....
5. Link Download
Link yang digunakan untuk pengambilan file dari server atau yang lebih
dikenal dengan istilah download adalah link yang ditunjukan kepada fiel-file
yang bukan file web, yaitu file yang tidak bisa ditampilkan oleh browser
misalnya: file aplikasi dengan ekstensi EXE, file kompresi (ZIP), file audio
(MP3), file dokumen seperti DOC, XLS, dan lainnya.
Bila link semacam ini diklik, maka akan mucul kotak dialog yang menanyakan
apakah anda meyimpan (save) file itu dalam harddisk atau membukanya dengan
program aplikasi yang sesuai.
Penulisan kodenya adalah sebagai berikut :
....
<a href=”Modul”_web.doc”>Download</a>
....