UNIT 4 BAB 3

HTML Rekabentuk Laman Web

BAB 3 REKABENTUK LAMAN WEB

Pengenalan
Laman web yang anda bangunkan tidak akan nampak ceria tanpa memasukkan unsur-unsur warna, grafik, dan font yang lebih menarik. Di samping anda memikirkan kandungan teks yang ingin disampaikan, anda juga perlu memikirkan tentang persembahan atau rekabentuk laman web tersebut. Rekabentuk yang menarik memberikan tanggapan yang baik kepada pelawat laman web anda. Oleh itu, dalam bab ini, anda akan mempelajari unsur-unsur rekabentuk yang asas seperti warna, grafik, dan font.

Objektif
Sesudah mengikuti bab ini, anda akan dapat: 1. Mengetahui cara untuk memasukkan warna dalam laman web. 2. Mengenal beberapa format grafik. 3. Mengubahsuai format font. 4. Mengubahsuai kedudukan dan persembahan grafik. 5. Menggunakan image map.

3.1 Memasukkan Warna

Setiap laman web yang anda bina akan nampak menarik jika disertakan dengan warna atau gambar jika perlu. Untuk memasukkan warna dalam sesuatu dokumen seperti menggunakan perisian editor seperti Microsoft Word adalah tidak menjadi masalah. Ini kerana anda boleh terus memilih warna dan teks yang ingin diwarnakan hanya dengan klik tetikus. Namun, untuk memasukkan warna dalam dokumen HTML adalah tidak semudah ini. Terdapat dua cara untuk mewakilkan warna dalam HTML iaitu dengan menggunakan color value, dan color name. Color value ialah angka yang menggambarkan sesuatu warna. Angka ini terbit daripada 3 warna asas iaitu merah, hijau, dan biru. Rajah 3.1 menunjukkan 3 warna asas. Untuk setiap warna asas, HTML menyediakan 255 tahap kepekatan. Ini bermaksud, angka 0 ialah tahap yang paling tidak pekat dan 255 ialah tahap yang paling pekat.

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Rajah 3.1: 3 Warna Asas Secara keseluruhannya terdapat 2553 atau 16.7 juta warna yang boleh dihasilkan dengan kombinasi ini. Warna ini terlalu banyak sehinggakan anda mustahil untuk mengingati setiap warna yang ada. Untuk itu, setiap warna dibezakan dengan menggunakan RGB triplet yang berdsarkan komponen Red, Green, dan Blue. Sebagai contoh putih mempunyai nilai RPG triplet (255,255,255) dan hitam ialah (0,0,0). Rajah 3.2 menunjukkan dialog warna yang biasa anda lihat dalam aplikasi editor teks.

Rajah 3.2: Dialog Warna Namun, dalam HTML anda tidak akan gunakan angka 0 hingga 255. Sebaiknya anda akan guna nombor hexadecimal. Nombor hexadecimal ialah nombor asas 16. Nombor asas 16 menggunakan nombor 0 hingga 9 dan A

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

hingga F, dengan A mewakili 10, B mewakili 11, C mewakili 12, D mewakili 13, E mewakili 14, dan F mewakili 15. Ini bermakna, untuk meletakkan warna dalam dokumen HTML, anda perlu terlebih dahulu menukarkan nilai RGB triplet yang dalam asas 10 kepada asas 16. Jadual 3.1 menunjukkan senarai warna utama dalam nilai RBG triplet dan hexadecimal. Jadual 3.1: Nilai RBG Triplet dan Hexadecimal yang Setara Nama Warna Merah Hijau Biru Cyan Kuning Magenta Putih RGB Triplet (255,0,0) (0,255,0) (0,0,255) (0,255,255) (255,255,0) (255,0,255) (255,255,255) Hexadecimal FF0000 00FF00 0000FF 00FFFF FFFF00 FF00FF FFFFFF

Anda akhirnya akan dapati bahawa untuk mencari nilai hexadecimal untuk setiap warna adalah satu proses yang rumit. Ia merupakan satu proses cuba jaya yang kadangkala memakan masa yang lama. Untuk mengatasi masalah ini, anda boleh menggunakan satu lagi teknik mewakilkan warna iaitu color name. Color name ialah nama yang menggambarkan sesuatu warna. Oleh itu anda boleh terus mewakilkan warna merah sebagai Red atau hijau sebagai Green. Namun tidak semua nama warna yang dikenali oleh web browser anda. Jadual 3.2 menyenaraikan nama-nama warna yang lazim dan dikenali oleh web browser anda. Jadual 3.2: Contoh Color Name Aqua Black Blue Fuchsia Blueviolet Chocolate Darkgoldenrod Firebrick Gray Green Lime Maroon Gold Hotpink Indigo Mintcream Navy Olive Purple Red Orange Paleturquoise Peachpuff Salmon Silver Teal White Yellow Seagreen Sienna Snow Tan

Anda boleh menukar skema warna laman web anda dengan menukar property yang ada dalam tag BODY. Property tersebut ialah: BGCOLOR adalah untuk menentukan warna latarbelakang dokumen. TEXT adalah untuk menentukan warna teks dokumen. LINK adalah untuk menentukan warna hyperlink. VLINK adalah untuk menentukan warna hyperlink yang telah dilawati. Sintaks untuk tag BODY ialah:

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

<BODY BGCOLOR=warna TEXT=warna LINK=warna VLINK=warna>

Untuk warna, anda boleh gunakan samada color name seperti Maroon dan tan, atau color value seperti #808080 dan #CCCCCC. Contohnya:
<BODY BGCOLOR=#FFFF00 TEXT=Black LINK=Blue VLINK=#FF0000>

Skrip di atas akan menjadikan warna latarbelakang laman web anda berwarna kuning, teks berwarna hitam, pautan berwarna biru dan pautan yang telah dilawati berwarna merah.

Uji Diri 11: Menukar Warna Teks dan Latarbelakang Dokumen

1. Masukkan disket pada drive A komputer anda. 2. Cipta satu folder Bab3 dalam drive A. 3. Download fail pameran.htm, bakawali.htm, lestari.htm, dan blokc.htm dari laman web dan simpan dalam folder Bab3. 4. Larikan aplikasi teks editor dan buka fail pameran.htm. 5. Kenalpasti tag BODY dan lengkapkan kod HTML seperti berikut: <BODY BGCOLOR=Navy TEXT=#FFFFFF LINK=#FF0000 VLINK=Purple> 6. Simpan fail. 7. Lakukan operasi yang sama untuk fail bakawali.htm, lestari.htm, dan blokc.htm. Simpan setiap fail tersebut di akhir operasi. 8. Larikan web browser dan buka fail pameran.htm dalam Bab3. 9. Klik pada hyperlink dan kembali semula kepada pameran.htm. Lihat perbezaan di antara warna hyperlink yang telah dan yang belum dilawati.

Laman Web
Anda boleh lawati laman web seperti di bawah untuk mendapatkan maklumat tambahan tentang warna dalam HTML. Ada antara laman web ini menyediakan kemudahan untuk menukarkan warna yang anda pilih kepada hexadecimal. Ada juga yang membincangkan tentang tips dan isu-isu dalam pemilihan warna. Laman web tersebut ialah: http://www.hidaho.com/colorcenter/ http://www.sci.kun.nl/thalia/guide/color/ http://www.geocities.com/SiliconValley/2902colorama.htm

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Latihan 3.1
1. Apakah yang dimaksudkan dengan color value? Jawapan: 2. Apakah color name untuk nilai hexadecimal 00FFFF? Jawapan:

3.2 Pengubahsuaian Font

Dalam Uji Diri 10 anda telah berjaya mengubah warna teks dengan menggunakan tag BODY. Namun, operasi yang anda buat akan mengubah warna keseluruhan teks. Bagaimana caranya jika anda hendak mengubah hanya teks tertentu sahaja? Anda boleh berbuat ini dengan menggunakan tag FONT. Sintaks font adalah seperti berikut:
<FONT COLOR=warna>Teks Yang Ingin Ditukar</FONT>

Sebagai contoh, dengan memasukkan COLOR=Navy dalam tag FONT, anda sebenarnya telah menukar warna teks kepada warna biru navy. Selain warna, tag FONT juga menyediakan property yang membolehkan anda menukar jenis font tersebut. Jenis font asal (default) untuk kebanyakan web browser adalah Times New Roman. Anda boleh tukar jenis font kepada: Arial Helvetica San Serif Courier New Sintaksnya ialah:
<FONT FACE=jenis_font>Teks Yang Ingin Ditukar</FONT>

Contohnya, jika anda ingin menukar jenis teks kepada San Serif, anda perlu masukkan property FACE=San Serif ke dalam tag FONT. Rajah 3.4 adalah contoh paparan beberapa jenis font.

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Rajah 3.4 Contoh Paparan Font Property SIZE membolehkan anda menukar saiz untuk teks tertentu. Saiz disukat dengan menggunakan sukatan point. Rajah 3.5 menunjukkan saiz heading dalam point. Sintaks untuk menggunakan property SIZE ialah:
<FONT SIZE=Saiz>Teks Yang Ingin Ditukar</FONT>

Contohnya jika anda ingin menukar saiz font kepada 5, masukkan SIZE=5 dalam tag FONT. Sebaliknya, jika anda ingin meningkatkan saiz font 3 point relatif kepada saiz font sekitar teks tersebut, anda perlu masukkan kod SIZE=+3.

Uji Diri 12: Menukar Format Teks

1. Larikan editor dan buka semula fail pameran.htm yang berada dalam folder Bab3. 2. Kenalpasti teks Ke Arah Kehidupan Siber. 3. Tambahkan tag di bawah pada teks tersebut seperti:
<FONT COLOR=Yellow FACE=Arial SIZE=+2>Ke Arah Kehidupan Siber</FONT>

4. Simpan fail. 5. Larikan web browser dan buka fail pameran.htm dalam Bab3.

Latihan 3.2
1. Apakah jenis font asal (default) untuk kebanyakan web browser? Jawapan: 2. Tuliskan tag FONT untuk memaparkan teks Selamat Datang dengan font jenis Arial, berwarna hijau, dan bersaiz 4 point lebih besar daripada teks disekitarnya.

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Jawapan:

3.3 Manipulasi Gambar

Gambar merupakan satu lagi objek yang boleh dimasukkan ke dalam laman web anda. Dengan memasukkan gambar yang sesuai dari segi saiz, format, dan tema maklumat yang anda ingin sampaikan, akan menjadikan dokumen anda lebih menarik. Terdapat dua jenis format gambar yang boleh dibuka oleh kebanyakan web browser iaitu format GIF dan JPEG. Kedua-dua format ini mempunyai kelebihan dan kelemahannya yang tersendiri. Oleh itu pemilihan format yang sesuai adalah aspek yang penting dalam rekabentuk sesuatu laman web. Sintaks untuk grafik ialah:
<IMG SRC=nama_fail_grafik ALIGN=bidar ALT=teks_mouse_over VSPACE=jarak_menegak HSPACE=jarak_mendatar WIDTH=lebar HEIGHT=tinggi>

Dengan nama_fail_grafik dari format GIF atau JPEG. bidar ialah bagaimana teks di sekitar gambar tersebut disusun.teks_mouse_over ialah teks yang terpapar apabila anda meletakkan cursor tetikus pada gambar tersebut. jarak_menegak ialah jarak menegak di antara gambar dan teks di sekelilingnya. jarak_mendatar ialah jarak mendatar di antara gambar dan teks di sekelilingnya. lebar ialah lebar gambar yang ingin dipaparkan (tidak semestinya saiz sebenar gambar). Panjang ialah panjang gambar yang ingin dipaparkan (tidak semestinya saiz sebenar gambar). GIF atau Graphics Interchange Format merupakan format grafik yang paling lazim digunakan dalam web. Namun fail GIF hanya boleh memaparkan grafik yang mempunyai maksimum 256 warna. Oleh kerana itu, grafik jenis ini lebih sesuai digunakan untuk gambar yang mudah seperti logo, garisan, dan icon. Maka, gambar yang mempunyai warna yang lebih banyak dari 256 warna akan muncul kabur pada web browser. Antara kelebihan format GIF ialah ia mampu untuk menyimpan gambar lutsinar dan gambar beranimasi.

Laman Web
Jika anda kesuntukan masa untuk mencipta GIF animasi, anda boleh mendapatkannya secara percuma di web. Antara laman web di mana yang anda boleh perolehi GIF animasi ialah:

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Nama Animation Factory 2Cool Animation Animation City

URL http://www.animfactory.com/ http://www.gifanimations.com/ http://www.animationcity.com/

Uji Diri 12: Memasukkan Gambar GIF Dalam Laman Web

1. Larikan editor dan buka semula fail pameran.htm yang berada dalam folder Bab3. 2. Kenalpasti teks Pameran Komputer dan Manusia 2001 kerana anda akan gantikan teks ini kepada satu GIF lutsinar. 3. Padamkan teks tersebut dan gantikan dengan kod di bawah:
<IMG SRC="logo.gif">

4. Simpan fail. 5. Larikan web browser dan buka fail pameran.htm dalam Bab3. Satu lagi format fail grafik yang boleh dibuka pada web browser ialah JPEG atau Joint Photographic Experts Group. JPEG berbeza daripada GIF dari segi jumlah warna yang boleh disokong. JPEG mampu untuk menyimpan gambar yang mempunyai sebanyak 16.7 juta jenis warna. Ini menyebabkannya sesuai digunakan untuk gambar fotograf atau gambar yang diambil dari video.

Uji Diri 13: Memasukkan Gambar JPEG Dalam Laman Web

1. Larikan editor dan buka semula fail pameran.htm yang berada dalam folder Bab3. 2. Kenalpasti perenggan pertama yang bermula dengan teks Pameran Komputer dan Manusia 2001 merupakan . 3. Masukkan tag grafik di bawah sebelum teks tersebut dan selepas tag <P> seperti berikut:
<P><IMG SRC=pusanika.jpg ALT= Pusanika, University Kebangsaan Malaysia ALIGN=Left VSPACE=5 HSPACE=20 WIDTH=150 HEIGHT=150> Pameran Komputer dan Manusia 2001 merupakan

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

4. 5. 6. 7.

Simpan fail. Larikan web browser dan buka fail pameran.htm dalam Bab3. Download fail bg.jpg dan simpan dalam folder Bab3. Tambah property BACKGROUND ke dalam tag BODY seperti berikut:
<BODY BACKGROUND=bg.jpg>

8. Simpan fail dan refresh web browser untuk melihat perbezaannya. Sebagai tips, apabila anda memasukkan warna dan grafik dalam dokumen HTML, anda akan dapati saiz fail tersebut akan menjadi besar. Ini akan menyebabkan dokumen anda akan lambat untuk paparkan jika pelawat hanya menggunakan modem biasa untuk sambungan Internet. Oleh itu, terdapat beberapa kaedah untuk mengecilkan saiz fail iaitu: Kurangkan jumlah warna yang anda gunakan. Gunakan 256 warna dan bukannya 16.7 juta warna. Kecilkan saiz grafik menggunakan aplikasi grafik (bukannya tukarkan nilai WIDTH dan HEIGHT dalam tag IMG). Cuba simpan grafik dalam format GIF dan JPEG. Pilih format yang failnya lebih kecil dan tidak menjejaskan kualiti grafik. Guna GIF animasi hanya untuk gambar yang kecil seperti icon, garisan, dan button. Gunakan thumbnails iaitu gambar yang kecil dan rendah kualitinya. Letakkan hyperlink pada thumbnails kepada grafik yang sebenar. Ini memberi peluang kepada kepada pelawat betul-betul mahu melihat grafik yang sebenar untuk melihatnya. Guna semula grafik. Ini kerana web browser akan simpan fail grafik buat capaian kali pertama dalam komputer anda. Seterusnya, web browser akan capai fail tersebut jika perlu.

Latihan 3.3
1. Bincangkan kelebihan fail grafik format JPEG berbanding GIF. Jawapan: 2. Tuliskan kod HTML untuk fail grafik tajuk.jpeg yang mempunyai jarak 32 point menegak dan 25 point mendatar daripada teks disekitarnya. Jawapan:

3.3 Image Map

9

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Image map ialah senarai koordinat pada sesuatu gambar yang menentukan sempadan untuk satu atau lebih hotspot. Hotspot ialah sesuatu kawasan pada gambar yang berfungsi seperti hyperlink. Pelawat yang klik pada manamana hotspot, hyperlink tersebut akan berfungsi. Tujuan image map ialah untuk menjadikan sesuatu gambar itu interaktif dengan meletakkan beberapa hyperlink sesuai pada gambar tersebut. Dalam kes Pameran ini, anda boleh meletakkan peta bangunan Pusanika seperti Rajah 3.3 untuk memudahkan pelawat melihat aturcara yang berlangsung berdasarkan kawasan.

Rajah 3.3: Peta Pusanika Untuk mencipta image map, anda perlu buka fail gambar tersebut dengan aplikasi grafik dan rekodkan koordinat untuk dijadikan hotspot. Kerja ini boleh menjadi susah dan memakan masa. Untuk itu, anda boleh menggunakan beberapa aplikasi seperti MapEdit, MapServe, dan Web Hotspot yang khusus untuk mencipta image map. Walau aplikasi tersebut ciptakan image map secara automatik untuk anda, ia hanya boleh dijadikan sebagai alat bantuan sampingan. Anda masih perlu mengetahui sintak image map kerana dengan itu anda akan lebih memahami bagaimana web browser anda memaparkannya. Sintak untuk image map ialah:
<MAP NAME=nama_image_map> <AREA SHAPE=bentuk COORDS=koordinat HREF=URL> </MAP>

dengan nama_image_map ialah apa-apa nama yang boleh mewakili image map, bentuk ialah jenis bentuk hotspot, koordinat ialah titik koordinat

10

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

hotspot, dan URL ialah nama dokumen hyperlink. Setelah tag map lengkap, anda perlu menambah property USEMAP pada tag IMG seperti berikut:
<IMG SRC=nama_fail_grafik USEMAP=#nama_image_map>

dengan nama_image_map adalah sama seperti dalam tag MAP. Terdapat tiga jenis bentuk hotspot yang boleh anda guna. Bentuk hotsport pertama ialah segiempat. Nilai property SHAPE untuk bentuk segiempat ialah Rect. Koordinat pada property COORDS pula ditentukan oleh dua titik iaitu titik bucu kiri-atas dan kanan-bawah. Untuk peta pusanika, Auditorium Lestari boleh diwakilkan sebagai satu segiempat. Dua titik penting untuk Auditorium Lestari ialah (261,91) dan (339,196) seperti Rajah 3.4. Maka sintaks tag AREA untuk Auditorium Lestari ialah:
<AREA SHAPE="Rect" COORDS="261,91,339,196">

Rajah 3.4: Hotspot Auditorium Lestari Bentuk kedua ialah bulatan yang diwakilkan sebagai Circle pada property SHAPE. Nilai COORDS untuk bulatan pula ditentukan oleh titik pusat dan jejari bulatan tersebut. Jejari bulatan dikira dalam unit pixel. Dalam peta pusanika, Dewan Bakawali ialah satu-satunya kawasan yang boleh diwakilkan sebagai bulatan. Rajah 3.5 menunjukkan titik pusat dan jejari Dewan Bakawali. Oleh itu, sintaks AREA untuk Dewan Bakawali ialah:
<AREA SHAPE="Circle" COORDS="220,196,40">

11

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

Rajah 3.4: Hotspot Dewan Bakawali Bentuk hotspot ketiga ialah Polyganal yang diwakili sebagai Poly. Hotspot jenis ini adalah sesuai untuk kawasan selain berbentuk segiempat dan bulatan. Bilangan koordinatnya adalah bergantung kepada bilangan bucu yang ada pada bentuk tersebut. Contohnya, segitiga mempunyai 3 bucu, maka bilangan COORDS menjadi 6. Untuk peta pusanika, kawasan Blok C adalah sesuai untuk hotspot ini. Rajah 3.6 menunjukkan 6 bucu yang ada pada Blok C.Sintaks AREA untuk Blok C ialah:
<AREA SHAPE="Poly" COORDS="142,21,142,78,82,78,82,197,20,197, 20,21">

Uji Diri 14: Memasukkan Image Map Dalam Laman Web

1. Larikan editor dan buka semula fail pameran.htm yang berada dalam folder Bab3. 2. Kenalpasti teks Kerjasama oleh Fakulti Teknologi dan Sains Maklumat, UKM kerana kod berikut akan diletakkan satu baris di atas dan di bawah teks ini. 3. Lengkapkan kod seperti berikut:
<P ALIGN="Center">Klik setiap lokasi untuk mengetahui aturcara yang akan atau sedang berlangsung</P> <P ALIGN="Center"><IMG SRC="peta.gif" USEMAP="#pusanika"> </P>

12

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

<P ALIGN="Center">Kerjasama oleh Fakulti Teknologi dan Sains Maklumat, UKM</P> <MAP NAME="pusanika"> <AREA SHAPE="rect" coords="261,91,339,196" href="lestari"> <AREA SHAPE="circle" coords="220,196,40" href= bakawali.htm"> <AREA SHAPE="poly" coords="142,21,142,78,82,78,82,197,20, 197,20,21" href="blokc.htm">

</MAP> 4. Simpan fail. 5. Larikan web browser dan buka fail pameran.htm dalam Bab3. 6. Tekan hyperlink untuk ketiga-tiga hotspot. Anda dapati di sekeliling peta anda ada garisan berwarna ungu. Garisan ini dipanggil BORDER. Ia terjadi kerana gambar anda mengandungi hyperlink. Untuk menghilangkan garisan ini, tambah property BORDER pada tag IMG seperti berikut:
<IMG SRC="peta.gif" USEMAP="#pusanika" BORDER=0>

Latihan 3.4
1. Apakah yang dimaksudkan dengan hotspot, dan image map? Jawapan: 2. Berapakah jenis hotspot? Senaraikan kesemunya. Jawapan:

Rumusan
Anda telah pun mengetahui cara untuk memasukkan warna dan mengubah jenis font dalam laman web anda. Anda juga telah mengenal beberapa format fail grafik dan seterusnya dapat mencipta image map untuk grafik tersebut. Dalam kes tertentu anda mungkin ingin memaparkan table dalam laman web anda. Satu cara ialah dengan melukis table tersebut dalam bentuk grafik dan paparkannya seperti yang telah anda pelajari dalam bab ini. Namun cara ini

13

UNIT 4 BAB 3

HTML Rekabentuk Laman Web

tidak efisyen. Dalam bab seterusnya anda akan mempelajari cara-cara untuk memasuk dan mengubahsuai penampilan table dalam laman web anda.

14