|
|
|
|
- HTML ialah singkatan bagi HyperText Markup Language dan digunakan untuk membina laman sesawang.
- HTML terdiri daripada beberapa kod arahan yang pendek dan disimpankan sebagai fail HTML.
- Kod arahan ditulis dengan menggunakan perisian aplikasi Notepad dan disimpan dengan sambungan “.html” atau “.htm”
|
|
|
Melakar Papan Cerita
|
|
Papan cerita |
|
|
Satu siri lakaran yang menggambarkan isi kandungan untuk setiap paparan skrin suatu laman sesawang. |
|
|
|
|
|
|
|
- Papan cerita berfungsi sebagai satu set susunan bahan grafik dalam bentuk ilustrasi atau imej yang akan dipersembahkan sebagai animasi, grafik bergerak atau media interaktif.
|
- Kepentingan papan cerita :
- Dapat memberikan suatu gambaran visual kepada pengatur cara.
- Membolehkan pengatur cara menjalankan tugas mengatur cara dengan lebih teratur.
- Dapat menggambarkan reka bentuk dan reka letak antara muka bagi setiap paparan yang akan dibina supaya interaksi antara pengguna dengan laman sesawang lebih mesra.
|
- Struktur maklumat dan pautan laman sesawang
- Struktur linear menghubungkan setiap laman dengan dua pilihan pengemudian iaitu, bergerak ke hadapan atau ke belakang.
- Struktur cabang bersifat dinamik dan berkeupayaan mengemudi ke laman lain dengan mudah. Laman utama dipautkan ke laman-laman lain melalui sistem menu.
- Struktur roda berbentuk seperti ruji basikal. Laman utama dipautkan ke laman-laman lain tetapi pengunjung terpaksa kembali ke laman utama sebelum dipautkan ke laman seterusnya.
- Struktur hierarki mempunyai model pengemudian atas ke bawah. Bermula dengan laman utama, pengunjung dipautkan ke laman-laman lain. Pengunjung ada pilihan untuk ke laman-laman seterusnya tanpa kembali ke laman utama.
|
|
Langkah-langkah melakar papan cerita:
- Kumpul semua maklumat yang dikehendaki
- Susun semua maklumat mengikut topik
- Tentukan tajuk utama, tajuk kecil dan isi kandungan untuk setiap laman
- Rancangkan struktur maklumat dan pautan laman sesawang
- Reka bentuk struktur menu
- Rancangkan rupa dan reka bentuk laman
- Lakarkan aliran pautan bagi kesemua laman dalam tapak sesawang
|
|
|
Tag dalam HTML
|
|
|
HTML |
|
|
Bahasa pengaturcaraan yang menggunakan kod-kod arahan yang dipanggil tag HTML |
|
|
|
|
|
|
|
- Tag HTML boleh ditaip dengan menggunakan perisian aplikasi Notepad dan menyimpan fail tersebut sebagai fail HTML (.html).
|
- Tag html ditulis dalam kurungan \(<>\).
- Tag html wujud dalam pasangan.
- Tag awal \(<>\) dan tag akhir \(\).
- Tag HTML tidak sensitif huruf.
|
- \(<\text{html}>\): Tag menandakan permulaan dan tamat atur cara HTML
- \(<\text{head}>\): Tag ini adalah bahagian kepala atur cara HTML.
- \(<\text{title}>\) : Tag yang mengarahkan pelayar web untuk memaparkan tajuk dokumen HTML.
- \(<\text{body}>\): Tag ini adalah bahagian kandungan fail HTML iaitu kandungan dokumen seperti teks, imej, pautan dan sebagainya
- \(<\text{p}>\) : Tag yang mengarahkan pelayar web supaya isi kandungan antara dua tag ini perlu dipaparkan sebagai satu perenggan.
|
|
|
Paragraph Headings dalam HTML
|
- Paragraph headings mengarahkan pelayar web supaya memaparkan teks dengan saiz yang tertentu.
- Paragraph headings boleh digunakan untuk teks di bahagian tajuk atau di bahagian utama laman sesawang.
- Penggunaan paragraph headings memudahkan pembacaan kerana teks telah dipecahkan kepada bahagian-bahagian yang kecil di bawah sesuatu tajuk.
|
|
|
Banner, Frame dan Menu dalam HTML
|
|
|
Banner |
|
|
Sepanduk web yang diletakkan dalam laman sesawang dan boleh digunakan sebagai tajuk kepada laman |
|
|
|
|
|
|
|
Langkah-langkah menghasilkan banner :
- Muat turun logo yang diinginkan.
- Simpan file dalam bentuk logo.jpg.
- Taipkan kod arahan asas HTML.
- Taipkan banner dalam tag \(<\text{title}>\)
- Taipkan \(<\text{banner}>\) dalam tag \(<\text{body}>\).
- Taipkan kod arahan \(<\text{img src}=”\text{logo.jpg}”>\) ke dalam \(<\text{banner}>\).
- Klik File \(>\) Save As dan pilih folder HTML saya, serta tukar nama dokumen kepada fail HTML.
|
- Kod arahan\(<\text{img src}=”\text{logo.jpg}”>\) bermaksud Image source dan merupakan tag HTML untuk memasukkan imej ke dalam kod arahan HTML.
|
|
|
Frame |
|
|
Bingkai yang membahagikan skrin paparan laman sesawang kepada bahagian - bahagian tertentu. |
|
|
|
|
|
|
|
- Frame terdiri daripada ruang melintang dan juga ruang menegak, atau gabungan kedua-duanya.
- Bagi frame melintang, tag rows digunakan dalam tag \(<\text{frameset}>\) :
- Bagi frame menegak, tag cols digunakan dalam tag \(<\text{frameset}>\) :
|
|
|
Menu |
|
|
Pautan pantas ke bahagian-bahagian tertentu dalam laman sesawang |
|
|
|
|
|
|
|
Jenis menu |
Ciri-ciri |
Menu senarai pautan statik (static links)
|
- Berbentuk jalur mendatar atau menegak seperti bar menu dalam program aplikasi.
- Menu senarai pautan statik ialah satu senarai pautan hiperteks ke destinasi lain dalam laman sesawang.
|
Menu jenis jadual bawah (drop-down menu)
|
- Berbentuk bar menu tetapi apabila menu ini diklik, satu kotak yang menyenaraikan pelbagai pilihan akan muncul.
|
Menu pelbagai tingkat (multilevel menu)
|
- Berbentuk menu jenis jadual, tetapi setiap pilihan dalam jadual boleh dikembangkan ke pilihan yang lain menjadikannya berkembang pelbagai tingkat.
|
Menu terapung (floating menu)
|
- Berbentuk bingkai yang statik , menu ini tidak bergerak bersama tatal (scroll bar).
- Berguna sebagai elemen navigasi dalam sesuatu laman sesawang.
|
|
|
|
- \(<\text{nav}>\) : Mentakrif pautan pengemudian
- \(<\text{ul}>\) : Mentakrif senarai tak tertib
- \(<\text{li}>\) : Mentakrif senarai item
|
|
Langkah-langkah menghasilkan Menu:
- Taipkan kod arahan asas HTML.
- Taipkan Menu1 dalam tag dan klik > Menu1.html.
- Tukar Menu1 kepada Menu2 dan simpan sebagai Menu2.html.
- Ulang langkah untuk hasilkan Menu3.html dan Menu4.html.
- Buka file baharu dan tuliskan kod arahan di bawah:
- Klik File > Save As dan tukar nama dokumen kepada fail HTML.
|
|
|
Pautan Teks dan Imej dalam HTM
|
- Pautan teks digunakan untuk memudahkan kefahaman isi kandungan laman destinasi.
- Pautan imej pula digunakan untuk memberikan gambaran isi kandungan laman destinasi.
- Tag HTML yang digunakan ialah \( <\text{a}>\).
|
|
Langkah-langkah membina pautan teks :
- Taipkan kod arahan asas HTML.
- Taipkan kod seperti berikut:
- Klik File > Save As untuk menyimpan dokumen sebagai fail HTML.
|
|
Langkah-langkah membina pautan imej :
- Taipkan kod arahan asas HTML.
- Taipkan kod seperti berikut:
- Klik File> Save As untuk menyimpan dokumen sebagai fail HTML.
|
|
|
Memasukkan Imej dalam HTML
|
|
- Tiga jenis format imej yang biasa digunakan ialah:
- GIF (.gif)
- JPEG (.jpg)
- PNG (.png)
|
- Imej dimasukkan dengan menggunakan tag \(<\text{img}>\) dan tidak mempunyai penutup.
|
|
Langkah-langkah memasukkan imej:
- Taipkan kod arahan asas HTML.
- Pilih satu imej dan namakan sebagai nama imej.gif.
- Taipkan kod seperti di bawah:
- Klik File> Save As untuk menyimpan dokumen sebagai fail HTML.
|
|
|
Pull-down Menu dalam HTML
|
|
- Pull-down menu juga dikenali sebagai drop-down menu, drop-down list dan drop-down box.
- Berfungsi sebagai alat pilihan untuk memudahkan pengguna memasukkan data.
- Dalam atur cara HTML, tag digunakan untuk menghasilkan pull-down menu.
- Tag \(<\text{option}>\) dimasukkan dalam tag \(<\text{select}>\) untuk menunjukkan jenis pilihan yang ada dalam pull-down menu yang dibina.
|
|
Langkah-langkah membina pull-down:
- Taipkan kod arahan asas HTML.
- Masukkan tag \(<\text{select}>\) dalam tag \(<\text{body}>\).
- Taipkan kod seperti di bawah:
- Ulangi tag untuk nama negeri yang lain yang lain seperti ditunjukkan di bawah:
- Klik File > Save As untuk menyimpan dokumen sebagai fail HTML.
|
|
|
Ruang Komen dalam HTML
|
|
- Ruang komen dalam laman sesawang bertujuan untuk pelawat memberi maklum balas dan memberikan pendapat mereka dalam bentuk teks di dalam ruang komen.
|
- Dalam atur cara HTML, tag \(<\text{form}>\) dan \(<\text{textarea}> \)diletakkan dalam tag \(<\text{body}>\) untuk membina ruang komen.
|
|
Langkah-langkah membina ruang komen:
- Taipkan kod arahan asas HTML.
- Dalam tag \(<\text{body}>\), taipkan kod arahan yang ditunjukkan di bawah.
- Klik File> Save As untuk menyimpan dokumen sebagai fail HTML.
|
|
|
Mengesan Ralat
|
|
Langkah-langkah untuk mengesan ralat pada atur cara :
|
- Uji lari atur cara yang dibina.
- Bandingkan laman sesawang yang dipaparkan oleh pelayar web dengan apa yang dijangkakan. Kenal pasti ralat.
- Teliti semula kod-kod HTML
- Baiki ralat pada atur cara HTML.
|
|
|
Membina Laman Sesawang yang Interaktif
|
|
|
Domain |
|
|
Sekumpulan komputer dan peranti dalam suatu rangkaian yang ditadbirkan sebagai satu unit dan mempunyai peraturan dan prosedur yang sama. |
|
|
|
|
|
|
|
|
Tapak sesawang |
|
|
Satu himpunan fail WWW dengan satu laman sesawang utama yang dikenali sebagai homepage. |
|
|
|
|
|
|
|
- Laman sesawang interaktif adalah laman sesawang dinamik yang membenarkan pelawat berinteraktif dengan isi kandungan yang terdapat dalam laman tersebut.
|
|
Langkah-langkah untuk membina satu laman sesawang yang interaktif:
|
- Pilih topik dan tajuk laman sesawang.
- Kumpulkan maklumat-maklumat.
- Lancarkan perisian aplikasi Notepad.
- Layari laman sesawang yang telah dibina.
- Baiki ralat (jika ada).
- Layari Internet.
- Muat naik fail.
- Lawat tapak sesawang yang telah siap dibina.
|
|
|
|
|