HTML ialah singkatan bagi HyperText Markup Language dan digunakan untuk membina laman sesawang.
HTML telah dibangunkan oleh seorang saintis yang bernama Tim Berners-Lee pada tahun 1990.
HTML ialah kod yang membantu pengguna Internet berkomunikasi dengan pengguna Internet lain di World Wide Web (WWW).
HTML adalah di bawah seliaan World Wide Web Consortium (W3C), iaitu sebuah organisasi yang menyelia dan memantau WWW.
HTML digunakan untuk membina laman sesawang.
HTML terdiri daripada beberapa kod arahan yang pendek dan disimpankan sebagai fail HTML.
Fail ini boleh dibaca oleh pelayar web (web browser).
Kod arahan HTML boleh ditaip tanpa menggunakan perisian pengaturcaraan yang khusus.
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 hierarkimempunyai 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
Maksud
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).
Ciri-Ciri Tag HTML
Tag html ditulis dalam kurungan \(<>\).
Tag html wujud dalam pasangan.
Tag awal \(<>\) dan tag akhir .
Tag HTML tidak sensitif huruf.
Senarai Tag HTML
\(\lt \text{html}\gt\) dan \(\lt/\text{html}\gt\): Tag yang menandakan permulaan dan tamat atur cara HTML
\(\lt \text{head}\gt\) dan \(\lt/\text{head}\gt\): Tag yang menandakan bahagian kepala laman sesawang.
\(\lt \text{title}\gt\) dan \(\lt/\text{title}\gt\): Tag yang mengarahkan pelayar web untuk memaparkan tajuk dokumen HTML.
\(\lt \text{body}\gt\) dan \(\lt/\text{body}\gt\): Tag yang menandakan bahagian utama laman sesawang.
\(\lt \text{p}\gt\) dan \(\lt/\text{p}\gt\): Tag yang mengarahkan pelayar web supaya isi kandungan dipaparkan dalam 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
Maksud
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 \(\lt\text{title}\gt\lt/\text{title}\gt\)
Taipkan \(\lt\text{banner}\gt\lt/\text{banner}\gt\) di antara tag \(\lt\text{body}\gt\lt/\text{body}\gt\).
Taipkan kod arahan \(\lt\text{img src}=”\text{logo.jpg}”\gt\) ke dalam tag \(\lt\text{banner}\gt\lt/\text{banner}\gt\).
Klik File\(>\) Save As dan pilih folder HTML saya, serta tukar nama dokumen kepada fail HTML.
* Kod arahan\(\lt\text{img src}=”\text{logo.jpg}”\gt\) bermaksud Image source dan merupakan tag HTML untuk memasukkan imej ke dalam kod arahan HTML.
Frame
Maksud
Bingkai yang membahagikan skrin paparan laman sesawang kepada bahagian - bahagian tertentu.
Komponen Frame
Frame terdiri daripada ruang melintang dan juga ruang menegak, atau gabungan kedua-duanya.
Bagi frame melintang, tag rows digunakan dalam tag \(\lt\text{frameset}\gt\) :
Bagi frame menegak, tag cols digunakan dalam tag \(<\text{frameset}>\) :
Menu
Maksud
Pautan pantas ke bahagian-bahagian tertentu dalam laman sesawang
Jenis Menu
Menu senarai pautan statik (static links)
Ciri-Ciri:
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)
Ciri-Ciri:
Berbentuk bar menu tetapi apabila menu ini diklik, satu kotak yang menyenaraikan pelbagai pilihan akan muncul.
Menu pelbagai tingkat (multilevel menu)
Ciri-Ciri:
Berbentuk menu jenis jadual, tetapi setiap pilihan dalam jadual boleh dikembangkan ke pilihan yang lain menjadikannya berkembang pelbagai tingkat.
Menu terapung (floating menu)
Ciri-Ciri:
Berbentuk bingkai yang statik , menu ini tidak bergerak bersama tatal (scroll bar).
Berguna sebagai elemen navigasi dalam sesuatu laman sesawang.
Tag bagi Menu
\(\lt\text{nav}\gt\lt/\text{nav}\gt\): Mentakrif pautan pengemudian.
\(\lt\text{ul}\gt\lt/\text{ul}\gt\): Mentakrif senarai tak tertib.
\(\lt\text{li}\gt\) : 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 HTML
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 \(\lt\text{a}\gt\lt/\text{a}\gt\)
Langkah-langkah Membina Pautan Teks
Taipkan kod arahan asas HTML.
Taipkan kod seperti berikut:
3. Klik File > Save As untuk menyimpan dokumen sebagai fail HTML.
Langkah-Langkah Membina Pautan Imej
Taipkan kod arahan asas HTML.
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:
GIF (.gif)
JPEG (.jpg)
PNG (.png)
Imej dimasukkan dengan menggunakan tag \(\lt\text{img}\gt\) 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:
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
Taipkan kod arahan asas HTML.
Masukkan tag \(\lt\text{select}\gt\lt/\text{select}\gt\) dalam tag \(\lt\text{body}\gt\lt/\text{body}\gt\).
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 \(\lt\text{form}\gt\lt/\text{form}\gt\) dan \(\lt\text{textarea}\gt\lt/\text{textarea}\gt\)diletakkan dalam tag \(\lt\text{body}\gt\lt/\text{body}\gt\) untuk membina ruang komen.
Langkah-Langkah Membina Ruang Komen
Taipkan kod arahan asas HTML.
Dalam tag \(\lt\text{body}\gt\lt/\text{body}\gt\), taipkan kod arahan yang ditunjukkan di bawah:
3. KlikFile> Save As untuk menyimpan dokumen sebagai fail HTML.
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
Maksud Laman Sesawang yang Interaktif
Laman sesawang interaktif adalah laman sesawang dinamik yang membenarkan pelawat berinteraktif dengan isi kandungan yang terdapat dalam laman tersebut.
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.
Langkah-Langkah untuk Membina Satu Laman Sesawang yang Interaktif