Professional Documents
Culture Documents
PERTEMUAN IV
GAMBAR DAN LINK
I. GAMBAR
Yang harus diketahui sebelum menambahkan gambar dalam dokumen HTML adalah :
File gambar lambat untuk di download.
Beberapa search engine seperti Alta Vista dan Excite tidak bisa menampilkan file gambar
Tidak ada browser grafik/gambar
Gambar tidak selalu dikenal secara international
Warna gambar mungkin tidak ditampilkan seperti aslinya
A. Format gambar
Saat ini sebagian masyarakat WEB menjadikan format GIF dan JPEG sebagai format standar
untuk menampilkan gambar dalam WEB.
B. WARNA
GIF ( Graphic Interchange Format ) : menghasilkan gambar sampai dengan 256 warna. Warna
sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang
sederhana tetapi tidak cukup baik untuk menyimpan gambar fotografik.
JPEG ( Joint Photographic Expert Group ) : menghasilkan 16,7 juta warna. Dengan warna
sebanyak ini, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto.
C. Pemadatan Ukuran Gambar
GIF memadatkan datanya dengan menggunakan metode lossless compression. Metode
lossless compression bekerja dengan mencari pola-pola berulang dalam suatu gambar.
Lossless compression pada GIF membuang informasi dalam jumlah yang sedikit, yaitu hanya
warna-warni dengan pola yang sama. Jika file GIF ditampilkan, waktu yang digunakan tidak
lama, karena file hasil pemadatan dengan file yang diuraikan merupakan dua buah file yang
hampir sama. Gambar file PNG juga menggunakan lossless compression, sehingga bisa
menjadi alternatif pengganti file GIF.
JPEG menggunakan metode pemadatan lossy compression. Pemadatan gambar metode
lossy compression, membuang sejumlah bit-bit gambar untuk membuat gambar berukuran
kecil. Tingkat pembuangan informasi gambar ini biasanya dapat ditentukan oleh pemakai
sewaktu membuat file JPEG.
D. Menampilkan inline dan external image
Cara menampilkan gambar dalam web, ada dua cara, yaitu internal dan eksternal.
Internal Image : gambar ditampilkan secara langsung saat web page dimuat dalam browser
yang berbasiskan grafik.
External Image : gambar yang tidak ditampilkan secara otomatis ketika suatu page dimuat,
tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag <IMG> beserta
atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan
<IMG> secara umum adalah : < IMG SRC=nama file>
Contoh :
<html>
<head>
<title> Penggunaan Tag IMG</title>
</head>
<body bgcolor=lightgrey>
<h3 align=center>Penggunaan tag IMG</h3>
<p>
<img src="STIK-trs.gif">
Teks ditampilkan setelah gambar.
</p>
<p>
Teks ini terpotong dengan
<img src="STIK-trs.gif">
gambar logo.
</p>
<p>
Gambar tampil inline setelah teks ini
<img src="STK-trs.gif">
</p>
</body>
</html>
WIDTH=100
HEIGHT=100
WIDTH=100
HEIGHT=100
WIDTH=100
HEIGHT=100
HSPACE=20
Dalam buku ini akan dipelajari cara membuat halaman web. World Wide Web (WEB) adalah
suatu kumpulan informasi pada beberapa server komputer yang terhubung satu sama lain
dalam jaringan Internet.
Buku ini berisi cara pengatur paragraf dokumen, membuat tabel, membuat frame juga
tidak ketinggalan cara membuat form.
Demikian diharapkan para pembaca nantinya mampu membuat web site sendiri....
</body> </html>
II. LINK
Link dapat menuju ke Web Page, grafik, suara, film, program, isi dari server Gopher, log-in ke
suatu remote computer, server e-mail atau ke suatu ftp.
A. Hypertext dan Hypermedia
Dokumen Hypertext adalah dokumen yang berisi link ke dokumen lain. Dokumen Hypermedia
adalah dokumen yang berdasarkan hypertext ditambah dengan multimedia seperti gambar, video dan
audio.
B. Uniform Resource Locator
WWW menggunakan URL untuk menuju ke lokasi dari suatu informasi pada server lain.
Pemakaian umum URL adalah Protokol://domain_host{:port}/path/nama_file.
Dimana protokol adalah salah satu dari :
http = untuk suatu file pada server WWW
file = untuk suatu file pada sistem komputer lokal
gopher = untuk file pada server gopher
WAIS = untuk suatu file pada server WAIS
telnet = untuk suatu link ke server berbasis telnet
news = untuk suatu newsgroup usenet
ftp = untuk suatu file pada server ftp
Host adalah suatu alamat server. Contoh : www.yahoo.com , www.microsoft.com
Port memberitahu browser untuk membuka koneksi pada suatu port jaringan yang berbeda dari port
default untuk setiap protokol.
Path adalah suatu lokasi dari informasi yang dicari di dalam server, sedang nama file adalah nama
dari file yang diinginkan. Contoh : www.rekreasi.com/lokasi .html
C. Absolute Path dan Relative Path
Dalam HTML terdapat dua jenis path, yaitu path absolute dan path relative. Path relative jika
lokasi file tersebut relatif terhadap dokumen yang sedang aktif, yaitu terletak di atas atau di bawah
direktori dokumen tersebut. Jika suatu file berada di bawah direktori yang sedang aktif, maka direktori
file tersebut perlu disebutkan. Misalnya file hal12.html berada di bawah direktori Bab1 maka untuk
membuat link ke file hal12.html adalah :
<A HREF=Bab1/hal12.html> Link ke halaman 12</A>
Jika ingin membuat suatu link ke direktori di atas direktori aktif saat ini, gunakan :
<A HREF=/link.html> Link ke file di atas direktori saat ini </A>
Tanda .. dalam path menunjukan direktori di atas direktori aktif saat ini.
D. Link Ke Bagian Lain dalam Satu Dokumen
Secara default link digunakan untuk mendapatkan informasi dokumen Web. Pada contoh
program dibawah ini, dokumen HTML mempunyai dua link, satu merupakn anchor tujuan yaitu
Bab2.html dan yang satunya anchor gambar GIF, yaitu Sunset.gif.
<html>
<head>
<title>LINK dan ANCHOR</title>
</head>
<body bgcolor=lightgrey>
<h3>Penggunaan Link dan anchor</h3>
Berikut adalah penggunaan Link dan Anchor untuk memanggil dokumen web
lain
<P>Lihat tanda Link<A HREF="Bab2.html">Bab 2</A>
Untuk melihat yang detail <A HREF="../images/hutan.gif"> Gambar Hutan</A>
</body>
</html>
Jika anda klik salah satu daftar isi di atas misalnya Pengenalan atau Latar belakang atau
Catatan, maka dokumen akan link pada isi dari daftar tersebt yang sebenarnya berada di
bagian bawah dokumen. Hal ini dikarenakan jendela browser tidak mampu menampung
seluruh isi dokumen.
F. Judul LINK
Atribut title bisa digunakan dalam elemen A dan LINK untuk menambah informasi tentang link.
Informasi ini akan ditampilkan berupa tooltip oleh browser.
Contoh :
<html>
<head>
<title>Atribut title</title>
</head>
<body bgcolor=lightgrey>
<h3>Menampilkan title sebagai tool tip</h3>
<body>
............<br>
............<br>
8
<P>Anda akan melihat lebih jauh ke dalam<A HREF="Bab2.html" title="Bab 2">Bab 2</A>
<A HREF="./Bab2.html1" title="Isi Bab 2.">Bab 2</A>
Lihat juga gambar <A HREF="d:\S T A F F\STIK-trs.gif" title="GIF Image logo STIK"
WIDTH=180 HEIGTH=180>Gambar Logo STMIK JAKARTA STI&K</A>
</body>
</html>
G. Elemen <A>
Untuk membuat suatu link dalam HTML elemen dipergunakan elemen anchor yang dinyatakan
dengan tag berpasangan <A></A>. Atribut yang boleh menyertai elemen A adalah :
Name
: Menyatakan titik anchor dalam suatu dokumen HTML.
Href
: Menunjukan lokasi dokumen Web.
Hreflang : Menunjukan bahasa yang dipergunaka, hanya digunakan bersama dengan href.
Type
: Atribut ini memberi catatan tipe isi dari dokumen tujuan.
Rel
: Menggambarkan hubungan dari dokumen asal dengan dokumen tujuan yang ditunjuk
dengan atribut href.
Rev
: menggambarkan hubungan antara dokumen tujuan yang ditunjuk oleh atribut href dengan
dokumen asal.
Charset : Untuk menspesifikasikan karakter encoding dokumen web.
H. Sintaks nama Anchor
Anchor mempunyai nila atribut name dan id. Nama anchor harus mengikuti beberapa aturan
sebagai berikut :
Unik, nama anchor harus unik dalam dokumen. Dalam satu dokumen tidak boleh ada nama
anchor yang sama.
String # , penggunaan string # untuk menuju ke bagian lain dalam dokumen.
I. Dokumen Yang Tidak Ditemukan Browser
Jika suatu dokumen yang link tidak ditemukan oleh browser, ada beberapa keterangan :
Jika browser tidak menemukan lokasi yang di link, browser akan memberi keterangan.
Jika browser tidak bisa mendefinisikan tipe dokumen yang di link, browser akan terus
mencobanya dan akan memberi peringatan.
J. Elemen <LINK>
Elemen ini untuk mendefinisikan suatu hubungan (link). LINK boleh ditampilkan dalam elemen
<HEAD> dan ditampilkan berulang kali. LINK mempunyai tugas untuk menyampaikan informasi
hubungan antar dokumen /bagian, misalnya toolbar dengan menu drop-down.
Berikut adalah contoh potongan program yang menggambarkan beberapa LINK yang berada
pada elemen <HEAD>. Dokumen yang aktif adalah Bab2.html. Atribut rel menunjukan hubungan
antara dokumen yang aktif dengan dokumen yang ituju. Nilai Index, Next, Prev menjelaskan
tujuan dokumen berikutnya.
<!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd>
<HTML>
<HEAD>
<TITLE>Bab 2</TITLE>
<LINK rel=Index href=../index.html>
<LINK rel=Next href=Bab3.html>
<LINK rel=Prev href=Bab1.html>
</HEAD>
isi dokumen selanjutnya
Kedua atribut boleh digunakan secara bersamaan. Atribut rev menunjukan link kembali dari atribut rel.
ini menunjukan bahwa halaman sebelumnya adalah halaman superior. Atribut rel dan rev mempunyai
beberapa nilai yang mengindikasikan dokumen sebagai :
Parent : Dokumen utama (parent)
Index
: Dokumen indeks
Next
: Halaman selanjutnya
Contents : Isi dokumen
Alternate : Versi alternatif
Begin
: Awal halaman
Nilai alternate menunjukan dokumen referensi dari alternatif versi halaman yang aktif. Alternatif versi
ini bisa untuk versi cetak atau alternatif bahasa (tambahan atribut lang).
<LINK REL=alternate HREF=FrenchDoc.html LANG=fr TITLE=Paris>
10
Contoh berikutnya,menyuruh search engine untuk menemukan versi cetak secara manual.
<head>
<title>Referensi Manual</title>
<LINk media="print" title="Cetak manual dengan postcript"
type="application/postcript"
rel="alternate"
href="http://someplace.com/manual/postcript.ps">
</HEAD>
Contoh program berikutnya, menuruh search engine untuk menemukan halaman depan dari
sekelompok dokumen :
<head>
<title>Referensi Manual-halaman 5</title>
<LINk rel="Start" title="Halaman pertama dari buku manual"
type="text/html"
href="http://someplace.com/manual/start.html">
</HEAD>
e-mail</A>
URL mailto : menyebabkan browser menampilkan suatu kotak pesan dimana pembaca dapat
mengetikan pesan-pesannya.
11
R. Link Ke Gopher
Untuk mengidentifikasikan gopher, gunakan gopher: diikuti nama situs. Contoh potongan
program :
<A href=gopher://gopher.eff.org> Gopher organisasi eff </A>
<A href=gopher://riceinfo.rice.edu> Gopher informasi beras </A>
Tetapi banyak browser tidak support dengan database WAIS. Jika anda menempatkan link database,
yakinkan bahwa anda juga sudah memasukan referensi agar browser mendapatkan client WAIS.
Link ke
Web Page
E-mail
Newsgroup
FTP
Gopher
WAIS
Telnet
Rumus
http://namasitus/
mailto:alamat
News:newsgroupname
ftp://namasitus/
Gopher://namasitus/
wais://namasitus/
telnet://namasitus/
Contoh
http://www.situsku.com/
mailto:alamatku@yahoo.com
News:news.newusers.questions
ftp://ftp.situsku.com/
Gopher://gopher.situsku.com/
wais://wais.situsku.com/
telnet://bbs.situsku.com/