Praktikum Perencanaan Web Dasar

PRAKTIKUM : IMAGE HTML

NAMA : ___________________________________
TANGGAL PRAKTIKUM : ___________________________________

A. TUJUAN
1. Mengenal, memahami dan menyisipkan gambar pada dokumen HTML.
2. Mengenal, memahami dan mengimplementasikan atribut-atribut pada tag <img>
3. Dapat menggunakan image sebagai link

B. PENDAHULUAN
Penyisipan image/gambar pada halaman web dimaksudkan agar tampilan dari halaman
tersebut dapat lebih menarik dan informatif. Ada beberapa hal yang perlu diperhatikan dalam
penyisipan image pada halaman web, yaitu:
a. Ukuran file image
Ukuran file yang terlalu besar akan membuat pengunjung web harus menunggu lebih lama
dalam mengakses web karena harus terlebih dahulu mendownload file image yang
ukurannya besar.
b. Tipe file image
Terdapat dua buah format image yang secara umum digunakan, yaitu format GIF (Graphical
Interchange Format) and JPEG (Joint Photographic Experts Group). Alasan mengapa format
GIF dan JPEG digunakan secara luas adalah karena format ini dapat memampatkan
(compress) ukuran file image tanpa terlalu banyak menghilangkan/mengurangi kualitas dari
image itu sendiri. Ukurannya yang lebih kecil juga membuat format ini lebih ideal/cocok
digunakan.
1. GIF (Graphical Interchange Format)
Format ini dikembangkan oleh CompuServe
File extension - .gif
Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto karena
lebih dari 256 warna.
Tidak cocok untuk gambar yang mengandung garis.
Jenis file GIF terdiri dari :
 Interlacing, gambar dapat terlihat dalam band (pita), gambar dapat ditampilkan
secara bertahap tidak perlu harus semua file terkirim terlebih dahulu
 Transparent, background gambar transparent.
 Animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi
seperti animasi.

2. JPEG (Joint Photographic Expert Group)

Warna terdiri dari 24 bit, dioptimasi untuk menyimpan file gambar berupa foto, hasil
seni natural, dan bahan yang menyerupai dengan kompresi (4:1).
Digunakan untuk membuat warna grayscale.
Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang tajam
Gunakan thumbnails, yaitu membuat gambar dengan ukuran kecil yang mewakili
gambar besar yang sebenarnya.
File extension - .jpg .

1
 Praktikum Perencanaan Web Dasar
Tabel berikut menampilkan perbandingan antara Format GIF dan JPEG.
GIF vs JPEG Differences
GIF JPEG
Best for drawings, logos, graphs, text Best for scanned photos, artwork
No more than 256 colours Approximately 16.7 million colours
Lossless format (no loss in quality) Lossy format (loss in quality when saved)
Interlaced Progressive rendering
Transparent areas
Animation

3. PNG (Portable Network Graphic)

Merupakan sebuah format hasil penggabungan dari fitur format GIF dan JPEG.
Masih jarang digunakan.
File extension .png

C. MATERI
File image dapat disisipkan ke dalam suatu file HTML dengan menggunakan tag <img> dimana
tidak diperlukan tag penutup untuk tag ini. Berikut adalah syntax dasar untuk penggunaan tag
ini:
<img src="image URL" attr_name="attr_value"...more attributes />

1. Atribut src
Atribut src (source) ini digunakan untuk menspesifikasikan URL dari file image. Berikut ini
adalah contoh penggunaan tag <img> dalam menampilkan sebuah file image pada halaman
web. Pada contoh berikut ditampilkan penggunaan tag <img> dalam menampilkan image
pada dokumen HTML:

Untuk menampilkan file image dalam folder yang sama dengan file dokumen HTML, kita
dapat langsung menuliskan nama file image tersebut lengkap beserta ekstensionnya. Pada
contoh diatas nama file image adalah HappyTree dengan ekstension .jpg.

2
 Praktikum Perencanaan Web Dasar
Pada contoh berikut dibawah ini ditampilkan bentuk penulisan value/nilai pada atribut src
untuk menampilkan file image yang berada dalam sub folder images.

2. Atribut Border
Atribut ini digunakan untuk men-setting ketebalan garis pinggir yang mengelilingi image.
Secara default nilai pada atribut border jika tidak didefinisikan adalah 0 (dalam ukuran pixel).

3
 Praktikum Perencanaan Web Dasar
3. Atribut Alt
Atribut Alt berfungsi sebagai alternatif jika web browser yang digunakan oleh pengguna tidak
dapat menampilkan image.

4. Atribut Title
Teks yang berada pada atribut title akan ditampilkan sebagai informasi tambahan ketika
users menempatkan kursor diatas (hover) sebuah image.

5. Atribut Align
Atribut ini berfungsi untuk menetapkan/menentukan jenis perataan image secara horizontal,
dengan value/nilai: left, right, top, bottom dan middle.

6. Atribut Width dan Height

Atribut Width berfungsi untuk menetapkan lebar image sedangkan atribut Height berfungsi
untuk menetapkan tinggi image. Value/nilai yang diberikan, dapat berupa persentase
maupun dalam ukuran pixel, contoh: 10 (dalam pixel) atau 20%.

7. Atribut Hspace dan Vspace

Hspace  memberikan ruang horizontal disekitar image. Value/nilai yang diberikan, dapat
berupa persentase maupun dalam ukuran pixel. Vspace  memberikan ruang vertikal
disekitar image. Value/nilai yang diberikan, dapat berupa persentase maupun dalam ukuran
pixel.

8. Atribut image map

Image map adalah suatu gambar yang terbagi-bagi dalam beberapa bagian tertentu dimana
setiap bagian dihubungkan dengan suatu link tertentu. Jika bagian tertentu dari gambar
diklik, maka pemakai akan dibawa ke link yang dihubungkan dengan bagian gambar tersebut.

Sebuah image dapat dijadikan sebuah link dengan mendefinisikan daerah tertentu
mengandung sebuah link ke halaman lain atau alamat internet lain. Definisi daerah di dalam
image yang dijadikan link dinyatakan dalam bentuk objek. Metode image map mengharuskan
mendefinisikan daerah-daerah dalam suatu gambar yang mempunyai link atau yang akan
diberi link. Daerah yang didefinisikan berupa bentuk daerah dan kordinat pembatasnya :
a. POINT : daerah berupa satu titik, dengan kordinat x,y.
b. RECT : daerah berupa persegi panjang, dengan kordinat pojok kiri atas dan pojok
kanan bawah.
c. POLY : daerah berupa polygon, dengan kordinat x, y untuk setiap titik dari setiap garis.
d. CIRCLE : daerah berupa lingkaran, dengan kordinat titip pusat lingkaran (x,y) dan jari-
jari.

Perhatikan gambar dibawah ini, menunjukan kondisi pertama dari koordinat awal sumbu x
dan y. (dilihat dari tampilan monitor)

4
 Praktikum Perencanaan Web Dasar

Berikut adalah contoh pengimplementasian image map diatas :

Berikut ini adalah atribut-atribut pada tag <area> :

Attribute Value
coords if shape="rect" then coords="left,top,right,bottom"
if shape="circ" then coords="centerx,centery,radius"
if shape="poly" then coords="x1,y1,x2,y2,..,xn,yn"
href URL
shape POINT
RECT
POLY
CIRCLE
target _blank
_parent
_self
_top
Where to open the target URL.
_blank  the target URL will open in a new window
_self  the target URL will open in the same frame as it was clicked
_parent  the target URL will open in the parent frameset
_top  the target URL will open in the full body of the window

D. PRAKTIKUM
Ketentuan Praktikum:

5
 Praktikum Perencanaan Web Dasar

1. Ketik dokumen halaman web pada Notepad.

2. Capture Screen hasil tampilan pada browser.
3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan.

1. Src dan Border

Letakkan file image (pada contoh ini adalah file “HappyTree.jpg”) dalam folder yang sama
dengan dokumen web HTML.

2. Align
a.

b.

3. Width dan
Height

6
 Praktikum Perencanaan Web Dasar

4. Hspace dan Vspace

a. Hspace

b. Vspace

7
 Praktikum Perencanaan Web Dasar

5. Image sebagai Link

6. Image Map
Pada praktikum Image Map ini digunakan sebuah file image dengan nama file testmap.jpg,
dengan tampilan gambar sbb:

a. Buat gambar diatas menggunakan aplikasi Paint.

b. Ketik susunan tag dokumen HTML berikut ini pada Notepad:

8
 Praktikum Perencanaan Web Dasar
c. Buat 5 buah halaman web yaitu yellow.html, orange.html, blue.html, pink.html dan
red.html. Sesuaikan warna latar belakang halaman dengan nama halaman web nya!
Contoh:

Lakukan hal yang sama untuk 4 halaman lainnya!

E. LATIHAN SOAL
1. Jelaskan perbedaan format image JPG dan GIF !
2. Buat susunan tag HTML untuk menampilkan image seperti gambar berikut ini !

Gambar rata tengah

Ukuran : 100 x 100
Border : 10 px
Hspace dan Vspace : 20 px

3. jelaskan fungsi atribut alt dan title pada tag <img> !

4. Apa yang dimaksud dengan Image Map?
5. Perhatikan gambar berikut ini:

Buatlah susunan tag html untuk Image Map diatas!

F. KESIMPULAN PRAKTIKUM