• 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 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 :

1. Dapat memberikan suatu gambaran visual kepada pengatur cara.
2. Membolehkan pengatur cara menjalankan tugas mengatur cara dengan lebih teratur.
3. 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

1. Struktur linear menghubungkan setiap laman dengan dua pilihan pengemudian iaitu, bergerak ke hadapan atau ke belakang.
2. Struktur cabang bersifat dinamik dan berkeupayaan mengemudi ke laman lain dengan mudah. Laman utama dipautkan ke laman-laman lain melalui sistem menu.
3. 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.
4. 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:

1. Kumpul semua maklumat yang dikehendaki
2. Susun semua maklumat mengikut topik
3. Tentukan tajuk utama, tajuk kecil dan isi kandungan untuk setiap laman
4. Rancangkan struktur maklumat dan pautan laman sesawang
5. Reka bentuk struktur menu
6. Rancangkan rupa dan reka bentuk laman
7. Lakarkan aliran pautan bagi kesemua laman dalam tapak sesawang

Tag dalam HTML

• Tag HTML boleh ditaip dengan menggunakan perisian aplikasi Notepad dan menyimpan fail tersebut sebagai fail HTML (.html).

• Ciri-ciri tag HTML:

1. Tag html ditulis dalam kurungan  \(<>\).
2. Tag html wujud dalam pasangan.
3. Tag awal \(<>\) dan tag akhir \(\).
4. Tag HTML tidak sensitif huruf.

• Senarai tag HTML

1. \(<\text{html}>\): Tag menandakan permulaan dan tamat atur cara HTML
2. \(<\text{head}>\): Tag ini adalah bahagian kepala atur cara HTML.
3. \(<\text{title}>\) : Tag yang mengarahkan  pelayar web  untuk memaparkan tajuk dokumen HTML.
4. \(<\text{body}>\): Tag ini adalah bahagian kandungan fail HTML iaitu kandungan dokumen seperti teks, imej, pautan dan sebagainya
5. \(<\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

Langkah-langkah menghasilkan banner :

1. Muat turun logo yang diinginkan.
2. Simpan file dalam bentuk logo.jpg.
3. Taipkan kod arahan asas HTML.
4. Taipkan banner dalam tag \(<\text{title}>\)
5. Taipkan \(<\text{banner}>\) dalam tag \(<\text{body}>\).
6. Taipkan kod arahan \(<\text{img src}=”\text{logo.jpg}”>\) ke dalam \(<\text{banner}>\).
7. 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 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}>\) : 
  

• Tag bagi menu:

1. \(<\text{nav}>\) : Mentakrif pautan pengemudian
2. \(<\text{ul}>\) : Mentakrif senarai tak tertib
3. \(<\text{li}>\) : Mentakrif senarai item

Langkah-langkah menghasilkan Menu: 

1. Taipkan kod arahan asas HTML.
2. Taipkan Menu1 dalam tag dan klik > Menu1.html.
3. Tukar Menu1 kepada Menu2 dan simpan sebagai Menu2.html.
4. Ulang langkah untuk hasilkan Menu3.html dan Menu4.html.
5. Buka file baharu dan tuliskan kod arahan di bawah: 
   
6. 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 :

1. Taipkan kod arahan asas HTML.
2. Taipkan kod seperti berikut:
   
3. Klik File > Save As untuk menyimpan dokumen sebagai fail HTML.

Langkah-langkah membina pautan imej :

1. Taipkan kod arahan asas HTML.
2. Taipkan kod seperti berikut:
   
3. Klik File> Save As untuk menyimpan dokumen sebagai fail HTML.

Memasukkan Imej dalam HTML

• Tiga jenis format imej yang biasa digunakan ialah:

1. GIF (.gif)
2. JPEG (.jpg)
3. PNG (.png)

• Imej dimasukkan dengan menggunakan tag \(<\text{img}>\) dan tidak mempunyai penutup.

Langkah-langkah memasukkan imej:

1. Taipkan kod arahan asas HTML.
2. Pilih satu imej dan namakan sebagai nama imej.gif.
3. Taipkan kod seperti di bawah:
   
4. 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:

1. Taipkan kod arahan asas HTML.
2. Masukkan tag \(<\text{select}>\) dalam tag \(<\text{body}>\).
3. Taipkan kod seperti di bawah:
   
4. Ulangi tag untuk nama negeri yang lain yang lain seperti ditunjukkan di bawah:
   
5. 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: 

1. Taipkan kod arahan asas HTML.
2. Dalam tag \(<\text{body}>\), taipkan kod arahan yang ditunjukkan di bawah.
3. Klik File>  Save As untuk menyimpan dokumen sebagai fail HTML.

Mengesan Ralat

Langkah-langkah untuk mengesan ralat pada atur cara :

1. Uji lari atur cara yang dibina.
2. Bandingkan laman sesawang yang dipaparkan oleh pelayar web dengan apa yang dijangkakan. Kenal pasti ralat.
3. Teliti semula kod-kod HTML
4. Baiki ralat pada atur cara HTML.

Membina Laman Sesawang yang Interaktif

• 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:

1. Pilih topik dan tajuk laman sesawang.
2. Kumpulkan maklumat-maklumat.
3. Lancarkan perisian aplikasi Notepad.
4. Layari laman sesawang yang telah dibina.
5. Baiki ralat (jika ada).
6. Layari Internet.
7. Muat naik fail.
8. Lawat tapak sesawang yang telah siap dibina.