Anatomi Link Pada HTML
A.
ANATOMI LINK
Link adalah suatu obyek yang dapat berupa teks atau gambar yang
dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian yang lain
pada halaman yang sama, atau menuju ke halaman (file) yang berbeda. Default
suatu link biasannya ditandai dengan teks warna biru dengan garis bawah, dan
jika pointer mouse ditujukan ke link tersebet, maka akan berubah menjadi
telunjuk tangan.
Peranan link dalam halaman web sangat besar dan selalu dibutuhkan untuk
memudahkan pengguna web dalam berinteraksi dengan halaman-halaman web yang ada.
Link dalam HTML ditandai dengan tag <A> (Anchor) yang terdiri dari
atribut HREF yang digunakan untuk menuliskan lokasi tujuan (file) dari link dan
variable NAME yang digunakan untuk menyimpan nama variable kunci sebagai lokasi
(bagian) yang akan dituju oleh link.
Sintak link adalah sebagai berikut: <a href=”url”>nama
link</a>
Link dapat dibuat pada suatu teks atau gambar dengan cara
meletakkan teks atau gambar tersebut diantara tag pembuka <A HREF> dan tag
penutup </A>.
Contoh penulisan kode link adalah sebagai berikut:
….
<A HREF=”tugas.html”NAME=”>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.j[g></A>
….
Pada bagian href
digunakan untuk referensi file tujuan, sehingga pada contoh di atas
dapat ditulis href=”tuga.html”.
Jika pada file tugas.html terdapat banyak bab dan penempatan
link digunakan untuk berpindah antara bab, maka pada tiap link diberi nama
variable setelah tag name dan pada href disebutkan bagian bab yang dituju,
sehingga penulisannya menjadi:
<A Href=”tugas.html#bagian2”>.
1. Mengenal jenis Link
Kelebihan
utama dari dokumen HTML adalah kemampuannya untuk memberikan link dari satu teks
atau gambar ,menuju ke dokumen atau bagian lain dalam sutu dokumen html. Browser
Web yang akan menyorot (“heighlight”) teks atau gambar yang diidentifikasikan
sebagai link dengan warna dan garis bawah untuk menunjukan bahwa itu adalah
hyperlink atau link.
a. Link Relatif
Link relative
merupakan link yang fungsinya untuk berpindah antar halaman web computer yang
sama. Jika dua halaman web berbeda pada sutu direktori yang sama, maka dapat
dituliskan nama file halaman yang dituju, Contohnnya:
<A
HREF=”halaman2.html”>Lnjut</A>
b. Link Absolut
Link absolut
adalah link yang fungsinya untuk berpindah antara halaman website yang satu
dengan website yang lain di internet. Contohnnya:
<A HREF=http://www.rusdi94.blogspot.com> Kunjungi blog saya</A>
B.
FORMAT LINK ANTAR ISI PADA
SUATU HALAMAN WEB
1. Pengertian
Format
link
antar isi pada suatu halaman web biasa disebut juga dengan link dalam
suatu
halaman, berbeda dengan hyperlink pada umunnya yang biasa digunakan
untuk
menghubungkan suatu tulisan dengan tulisan lain yang berbeda pada halam
yang
berbeda atau blog yang berbeda, Link ini lebih banyak digunakan untuk
halaman yang sama. Misalnya membuat tautan link yang mengarah ke atas,
ke tengah, dan
kebawah.
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 memberi link antar bagian, dengan
menjadi setiap bagian tersebut dengan memberinya nama. Sehingga dalam dokumen
akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk
menuju ke bagian-bagian tersebut.
2. Perinsip Dasar Pengguna
Prinsip
dasarnya adalah kita menandai terlebih dahulu suatu bagian dengan memberi tanda tag anchor misalnya <a
nama=”atas”>, kemudian pada bagian yang lain kita buat link untuk
memanggilnya dengan kode <a href=”#atas”>.
Sintaknya
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 halamn ini untuk mempermudah navigasi
pengunjung website.
3. Cara Membuat Link Satu
halaman
a. Menentukan nama target
Pilih bagain
artikel yang ingin dijadikan sebagai target link, bias berupa sebuah paragraph,
subjudul, kalia, atau kata yang kita inginkan. Kemudian dibuat nama atau id
pada kata yang dipilih tersebut dengan satu nama variable, dalam pemberian nama
variable tersebut tanpa menggunakan spas, karena spasi pada browser akan
berubah menjadi “%20%”
Contoh 1:
<div
id=”bab3”> BABIII</div>
Contoh 2:
<a
name=”bab4”>BAB IV </a>
b. Mmebuat link ke target
*<a
href=”bab3”> Ke Bab III </a>
*<a
href=”bab4”>Ke Bab IV</a>
4. Link ke File
Ada beberapa
cara penulisan sintak link untuk menuju ke suatu halaman tertentu(file). Berikut
ini adalah cara penulisan link yang menuju ke halan yang berbeda:
*Jika file
yang dituju berbeda pada folder/directory yang sama dengan file link, maka cukup
dituliskan nama filenya, misalnya:
<a href=”produk.html”>Daftar
Pproduk</a>
*Jika file
yang dituju berbeda pada subfolder didalamnnya, maka dituliskan nama foldernya,
misalnya:
<a
href=”galery/macamnya.html”>Galery Produk</a>
*Jika file
yang dituu berbeda pada folder diatas folder yang ditemopati oleh file link,
maka penulisannya seperti berikut:
<a
href=”../tentang.html”>About me</a>
*Jika file
yang dituju berbeda dua tingkat diatas folder link, maka dituliskan dua kali
titik seperti berikut ini:
<a href=”../../tentang.html”>About
me</a>
Berdasarkan
lokasi tujuannya, link daoat dibedakan menjadi 4 macam yaitu:
a. Link yang menuju bagian
tertentu pada halam yang sama
<a href=”bab2”name=”bab1”>Lihat
bab2</a>
b. Link yang menuju ke
halaman yang lain dalam web yang sama
<a
href=”gallery.html”>galeri foto</a>
c. Link yang menuju ke
halaman yang lain dalam web yang berbeda
<a
href=”http://www.rusdi94.blogspot.com/tentang.html”> Tutorial Web</a>
d. Link yang menuju bagian
tertentu pada halaman web yang berbeda
<a href=”http://www.rusdi94.blogspot.com/home.html#ling”>Linknya</a>
C.
FORMAT LINK ANTAR HALAMAN
WEB UNTUK MEMBENTUK SITEMAP
Link merupakan cara untuk membuka atau memanggil halam web
atau file tertentu.
Link merupakan tag yang sangat penting dalam penggunaan HTML,
karena dengan adanya link yang akan membedakan antara dokomen HTML dengan
dokomen teks biasa.
Setiap halam, file, direktori, dan lokasi di internet selalu
memiliki alamat URL-nya(Uniform Resource locator) sendiri-sendiri yang menuju
pada server web di internet.
Hampir semua link menggunakan teks sebagai penghubungnya. Teks
yang berbeda di antara tag <A> dan </A> akan ditampilkan 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 link pertama
kali tampil. ALINK digunakan untuk memberikan warna pada link saat mouse diklik
dan VLINK digunakan untuk memberikan warna pada link yang sudah dikunjungi.
Sintaknya 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
style=”text-decoration:none”>Ke Yahoo</a>
Contoh
hasilnya adalah sebagai berikut:
Link Pertama
Link Ke dua
Link Ke Tiga
*Link
Antar Halaman W eb Untuk Membentuk Sitemap
Link
dapat dibuat pada gambar maupun 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”usepmap=”#mapku=”#mapku”>
<map
name”mapku”>
<area
shape=”rect” cords=”100,200,200”>
<area
shape=”circle” cords=”50,50,30”>
<area
shape=”poly” cords=”300,300,400,400,500,500,600,600”>
</map>
…
Rect
digunakan untuk membuat area map berbentuk segi empat dengan titik awal 100,100
dan titik akhirn200,200.
Circle
digunakan untuk membuat area map berbentuk lingkaran dengan tiik tengah 50,50
dan diameter 30.
Poly
digunakan untuk membuat area map berbentuk polygon dengan titik pertama
300,300, titik kedua 400,400, titik ketiga 500,500, titi keempat 600,600 dan
dapat ditambahkan titik berikutnnya.
D.
FORMAT TARGET LINK, EMAIL,
DAN TELEPON
1. Format Target Link
Jika suatu
link diklik maka browser akan menampilkan halaman yang ditujui oleh link
tersebut. Ada dua macam penampilan oleh browser dalam memunculkan halam tujuan
tersebut.
Pertama,
ditampilakan pada jendela yang sama sehingga halaman tempat link itu ditutup
dan digantikan oleh halaman yang dituu dan ini merupakan cara pemunculan
default.
Kedua, ditampilkan pada jendela yang baru, sehingga
akan muncul jendela yang baru untuk menampilkan halaman yang ditujui.
Dalam
pembuatan link ini, harus ditambahkan atribut TARGET=”_blank”>
Berikut ini
adalah beberapa target yang dapat diisikan pada link:
*_blank : halaman yang dipanggi akam muncul pada jendela
baru.
*_top :halaman yang dipanggil akan mengisi penuh
jendela yang sama, meskipun tadinya ada frame.
*_self : halam yang dipanggil akan mengisi tempat
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 tempat link yang bersangkutan.
2. Link Email
Link dapat
digunakan untuk mengirim kealamat emil, jika link ini dklik akan membuka
jendela pengiriman email dari program email yang terinstall pada computer
(misalnya Microsoft Outlook).
Pada kotak
tujuan email (To:) akan tercantum alamat email tujuan.
Contoh:
Link yang
langsung menuju k alamat e-mail.
Kirim
email</a>
3. Link Telepon
Link dapat
digunakan untuk melakukan panggilan telepon, jika link ini diklik akan
melakukan panggilan telepon pada nomer tjuan. Ppenulisan kodenya adalah sebagai
berikut:
…
<a href
=”tel://085290410466”)> klik disini untuk menghubungi saya </a>
…
4. Link SMS
Link ini dapat
digunakan untuk melakukan pengiriman pesan SMS pada nomor tujuan, jika link ini
akan melakukan pengiriman SMS pada nomor tujuan . penulisan kodenya adalah
sebagai berikut :
…
<a
href=”sms:085290410466&body=pendaftaran”>SMS ke saya:</a>
…
5. Link download
Link ini
digunakan untuk pengambilan file dari server atau yang dikenal dengan istilah
download adalah link yang ditujukan kepada file-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 ini
semacam diklik, maka akan muncul kotak dialog yang menyatakan apakah akan
menyimpan (save) file itu dalam harddisk atau membukannya dengan program
aplikasinya yang sesuai.
Penulisan
kodenya adalah sebagi berikut:
…
<a
href=”Modul_web.doc”>Download</a>
…
Komentar
Posting Komentar