pengenalan kepada laman web

F3026 – WEB AUTHORING 1

1.1 Pengenalan kepada World Wide Web (WWW)

1.2 Rekabentuk laman web

1.3 Jenis-jenis penyunting HTML (HTML editors)

1.4 Pelayan Web

* Klik pada tajuk untuk keterangan selanjutnya*

PENGENALANPENGENALAN KEPADA LAMAN WEBKEPADA LAMAN WEB


Objektif

• Memperkenalkan sejarah World Wide Web (WWW) dan

istilah-istilah yang berkaitan dengan World Wide Web.

• Memberi panduan dalam merekabentuk laman web yang baik.

• Mendedahkan kepada para pelajar elemen-elemen rekabentuk

laman web yang baik.

• Memperkenalkan kepada para pelajar ciri-ciri bentuk laman

peribadi, semasa, komersil dan hiburan.

Pengenalan Kepada Laman Web


WORLD WIDE WEB WORLD WIDE WEB

(WWW)(WWW)

Di kenali

sebagai WEB,

WWW atau W3

1 rangkaian sejagat

dan maya yang

dihubungkan melalui

sistem pautan

Menggunakan

internet

sebagai alat

hubungan

Dicipta pada tahun 1989

di institut penyelidikan

CERN- The European

Laboratary for Particle

Physics

Bergantung

kepada pelayar

web dan http

Pelayar web

pertama

yang popular

ialah Mosaic

Kebanyakan

dokumen web

dibangunkan

menggunakan

HTML

Satu medium

komersil

1.1 Pengenalan Kepada World Wide Web



Istilah :

Beberapa istilah atau konsep yang berkaitan dengan World Wide Web (WWW):

Tapak web (web site): Satu set halaman yang dihubungkan antara satu sama lain.

Laman web (web page): Dokumen elektronik yang mempunyai kombinasi teks,

bunyi dan grafik.

Home page: Halaman permulaan laman web dimana pelawat memulakan pencarian

di tapak web tersebut.

Hyperlink: Pautan diantara perkataan atau grafik di pelayar web yang aktif yang

memaparkan laman web kepada fail lain di World Wide Web.

Pemetaan imej (image map): Grafik yang mempunyai lebih daripada satu pautan.

Pelayar web (web browsers): pelanggan perumah (hosted clients) seperti

NetScape, Mosaic, dan lain-lain, yang membaca fail

yang dibangunkan dengan menggunakan HTML dan

memaparkan halaman yang interaktif kepada

pengguna.



1.2 Rekabentuk Laman Web

1.2.1 Elemen-elemen rekabentuk halaman web yang baik

Elemen-elemen yang

perlu dipertimbang

dalam merekabentuk

halaman web yang baik

ElemenElemen--elemenelemen yang yang

perluperlu dipertimbangdipertimbang

dalamdalam merekabentukmerekabentuk

halamanhalaman web yang web yang baikbaik

Warna Stail

Grafik

Saiz halamanNavigasi

Teks

Kekonsistenan

*Klik pada perkataan untuk penerangan selanjutnya*



WarnaWarna

Penggunaan warna yang salah akan memusnahkan rekabentuk laman web.

Gunakan warna putih atau pastel untuk latarbelakang.

Warna teks mesti berlawanan dengan warna latarbelakang.

Bezakan warna pautan untuk membezakan pautan yang telah dilawati atau

belum.

Jenis-jenis pautan : belum dilawati, telah dilawati dan pautan yang aktif.

Contoh :- biru tua untuk pautan yang belum dilawati, ungu untuk

pautan yang sudah dilawati dan merah untuk pautan

yang aktif.



TeksTeks

Atribut yang boleh ditambah pada teks : tebal, condong, bergaris dan

berkelip.

Teks yang ditebalkan – untuk memberi penekanan kepada teks.

Teks yang berkelip – menunjukkan amaran atau kesalahan.

Tulisan dan saiz tulisan penting kepada rekabentuk. Gunakan tag di

dalam HTML untuk setkan tulisan dan saiznya.



StailStail

Terdapat 3 generasi dalam merekabentuk stail laman web :

1. Halaman generasi yang pertama.

2. Halaman generasi yang kedua.

3. Halaman Generasi yang ketiga.

*Klik pada jenis generasi untuk penerangan selanjutnya*



1. Halaman generasi yang pertama

Linear.

Turutan teks dan imej dari atas-ke-bawah,

kiri-ke-kanan diasingkan dengan tanda

kembali dan pemisah aliran data.

Mempunyai headline banner dan tersusun.

Direkabentuk oleh orang-orang teknikal.



2. Halaman generasi kedua

Ciri-ciri sama seperti halaman generasi

pertama tetapi ikon menggantikan perkataan.

Imej menggantikan latarbelakang kelabu.

Terdapat butang dengan beveled edge.

Banner menggantikan tajuk utama.

Menggunakan model atas_bawah, senarai

bullet dan model berpandukan menu untuk

mempersembahkan maklumat secara berhieraki



3. Halaman generasi yang ketiga

Kombinasi typografi dan susunatur secara

visual yang kreatif.

Gunakan tema visual untuk menarik perhatian

serta sebagai panduan kepada pengguna.

Cenderung menjadikan tapak yang ramah-

pengguna dan mudah dikemudikan, isi kandungan

yang berkualiti serta nilai pengeluaran yang tinggi.

Direkabentuk oleh beberapa orang dalam kumpulan.



SaizSaiz halamanhalaman

Pastikan halaman pendek.

Panjang halaman yang dicadangkan kurang dua muatan-skrin di mana

terdapat pautan di halaman pertama dan terakhir.

Grafik tidak melebihi 30K bagi memudahkan proses muatan.

Dimensi Halaman Cetakan Paparan

Kelebaran Maksimum 535 piksel 595 piksel

Ketinggian Masimum (satu skrin) 295 piksel 295 piksel

Dimensi Halaman



GrafikGrafik

Grafik dikurangkan kerana ia akan mengganggu perhatian pengguna dan

memperlahankan proses navigasi.

Majoriti grafik di web dalam format GIF atau JPEG.

Fail GIF untuk imej bergambarajah bagi ikon dan animasi.

Fail JPEG untuk imej yang besar dan kompleks.



KonsistensiKonsistensi

Gunakan pendekatan yang konsisten untuk susunatur, latarbelakang, dan

rekabentuk supaya pengguna dapat menyesuaikan diri dengan rekabentuk

anda.

Rekabentuk, grafik dan latarbelakang yang bercampur aduk akan

memperlahankan masa pindah turun serta mengelirukan pelawat tapak anda.

Contoh rekabentuk susunan yang konsisten



NavigasiNavigasi

Sediakan alat navigasi seperti butang, secara konsisten di lokasi yang

sama di keseluruhan laman web.

Butang navigasi perlulah jelas dan logik.

Setiap halaman mesti mempunyai pautan untuk kembali ke halaman

pertama atau ke mana-mana titik navigasi di dalam tapak web.



1.2.1 Soalan yang perlu diambil kira semasa membentuk laman web

Siapakah yang akan

membaca laman web ini?

Kenapa mereka

melawat tapak web

anda?

Apakah ciri-ciri yang akan

membuatkan mereka melawat

laman web anda semula?

Bagaimana ia boleh

berkomunikasi dengan anda?

Adakah mereka mempunyai

soalan, keperluan atau kaitan?



RancangRancang secarasecara berhatiberhati--hatihati

Rancang isi kandungan, susunatur dan rekabentuk.

Susunatur hendaklah berbeza untuk kanak- kanak atau orang dewasa.

Buat papan cerita untuk menunjukkan bagaimana semua halaman

dipautkan.

Pautkan setiap halaman kembali kepada halaman pertama.

JadikanJadikan setiapsetiap halamanhalaman konsistenkonsisten

Gunakan templet (template) supaya setiap elemen yang berulang akan

berada di tempat yang sama di setiap halaman.

1.2.3 Panduan untuk membangunkan laman web

Sambungan…



BinaBina halamanhalaman yang yang mempunyaimempunyai visualvisual

Seimbangkan teks dan grafik serta gunakan latarbelakang bewarna putih.

Gunakan animasi dan bunyi yang tidak keterlaluan kerana pengguna tidak

mahu mengambil masa yang lama untuk proses pemuatan.

BinaBina halamanhalaman pertamapertama yang yang ringkasringkas

Halaman yang pertama mestilah ringkas (tanpa skrol) dan dipautkan

kepada keseluruhan isi kandungan.

Sekiranya isi kandungan, guna anchor untuk memisahkannya.

Sambungan…



BeriBeri kepercayaankepercayaan kepadakepada halamanhalaman andaanda

Beri akuan dan pautan emel kepada anda.

SemakSemak dandan ulangiulangi menyemakmenyemak kerjakerja andaanda

Membuat semakan untuk memastikan adakah semua pautan berfungsi.

Semak ejaan dan tatabahasa.

Semak navigasi dari satu halaman ke halaman yang lain.

Adakah susunatur berfungsi secara logik?

Buka laman web anda di beberapa pelayar web untuk memastikan

paparan yang sama.



1.2.4 Ciri-ciri rekabentuk laman web

Terdapat beberapa jenis laman web:

1. Laman peribadi (personal page)

2. Laman semasa (topical page)

3. Laman komersil (commercial page)

4. Laman hiburan (entertainment page)

* Klik pada jenis laman web untuk keterangan selanjutnya *



LamanLaman peribadiperibadi ((personal pagepersonal page))

Dibina secara peribadi.

Membenarkan anda berkongsi maklumat bersama rakan-rakan, keluarga

dan orang ramai.

Merupakan satu latihan yang menyeronokkan.

Maklumat yang selalu dipaparkan:

- Latarbelakang peribadi - Maklumat untuk dihubungi

- Hobi - Pekerjaan

- Koleksi gambar peribadi - Maklumat tentang penerbitan laman web

- Pautan kepada laman web yang lain



LamanLaman semasasemasa ((topical pagetopical page))

Homepage untuk topik tertentu.

Ditulis oleh ahli kumpulan sukarelawan atau seseorang yang meminati isu

tersebut.

Halaman ini boleh diubah dari masa ke semasa.

Perkara yang perlu dipertimbangkan:

- Apa yang dimasukkan dahulu?

- Fokus pada isi penting

- Halaman komersil

- Buat rancangan pertukaran



HalamanHalaman komersilkomersil ((Commercial pageCommercial page))

Dibina oleh organisasi untuk mengurangkan kos penerbitan.

Penghantaran katalog barangan kepada penjual.

Fokus kepada isi kandungan.

Merangkumi pelbagai stail.

Memerlukan matlamat, kepakaran dan sumber.

Pastikan semua halaman di laksanakan dengan baik dan berkualiti.

Mesti ada ciri-ciri keselamatan.

Beberapa tip yang perlu dipertimbangkan:

- Apa yang dimasukkan dahulu? - Dapatkan kebenaran.

- Di dalam atau di luar firewall. - Perlukan pakar.

- Keunikan. - Awasi penggunaannya.



LamanLaman hiburanhiburan ((entertainment pageentertainment page))

Fokus pada peningkatan bilangan pelawat ke tapak web kerana peningkatan

hasil pengiklanan adalah fokus perniagaan seperti ini.

Laman web yang paling popular dan perlu di kemaskini setiap hari.

Pelawat boleh berkomunikasi melalui laman web ini.

Lebih daripada hiburan semata-mata.

Cadangan untuk membina laman web ini:

- Pastikan ia sentiasa kelihatan segar dan ceria.

- Gunakan teknologi terkini.



1.3 Jenis-jenis penyunting HTML (HTML editors)

Penyunting HTML -> satu alat yang memudahkan anda membina laman web.

Penyunting HTML yang paling asas -> NotePad.

Antara jenis-jenis penyunting yang berada di pasaran :

- Microsoft FrontPage

- Macromedia Dreamweaver



1.3.1 Microsoft Frontpage

Sesuai untuk sesiapa sahaja yang mahu merekabentuk laman web yang

mudah dengan sedikit kesan khas, dengan cepat dan pantas.

Mudah dipelajari ->mempunyai sistem kerja dan tapak templet yang mudah diikuti.

Tapak templet membantu anda membina tapak web dalam masa yang singkat.

Mudah memformat teks, memasukkan imej atau jadual dengan menggunakan

mana-mana pemprosesan web.

• Boleh menguruskan struktur tapak web dengan menggunakan struktur pokok.

Sesuai dengan program Office yang lain.

Sambungan…



Kelebihan bagi kesesuaian tugas:

- Mencipta halaman yang mudah – Cemerlang

- Mencipta halaman yang kompleks – Baik

- Pengurusan tapak (site) – Cemerlang

- Kod Server-side – Cemerlang

• Peringkat mudah bagi kesesuaian tugas:


- Mencipta halaman yang kompleks – Cemerlang

- Pengurusan tapak (site) – Cemerlang

- Kod Server-side – Cemerlang



1.3.2 Macromedia Dreamweaver

Sesuai untuk membina isi kandungan yang lebh profesional dan

rekabentuk yang lebih baik menggunakan Flash atau Firework ke tapak

web yangberkaitan dengan pangkalan data dan e-dagang.

Membenarkan anda merekabnetuk halaman dengan beberapa lapisan

Boleh membina pemetaan imej dari imej asal yang terletak di dalam

program itu sendiri.

Membenarkan anda membuat imej interaktif tanpa guna JavaScript

dalaman

Sesuai dengan produk Macromedia yang lain.

Mudah diurus dan mengubah penampilan keseluruhan halaman.

Sambungan…



kelebihan bagi kesesuaian tugas:


- Mencipta halaman yang kompleks – Baik

- Pengurusan tapak (site) – Sederhana

- Kod Server-side – Sederhana

Peringkat mudah bagi kesesuaian tugas:


- Mencipta halaman yang kompleks – Cemerlang

- Pengurusan tapak (site) – Baik

- Kod Server-side – Sederhana



1.4 Pelayan Web

Definisi Pelayan Web ->

Program komputer yang melayan permintaan fail / carian laman web daripada

pelayar pelanggan.

Pelayan web juga dirujuk sebagai sebuah komputer di mana perisian pelayan

yang menyimpan fail-fail bagi satu atau lebih laman web.


pengenalan kepada laman web

Education