SlideShare a Scribd company logo
1 of 32
ASAS SAINS
KOMPUTER
BAB 04 :
KOD ARAHAN
4.2.
1
MELAKAR PAPAN
CERTITA
BIDANG PEMBELAJARAN:
4.0 Kod Arahan
Standard Kandungan :
4.2 Kod Arahan HTML
Standard Pembelajaran :
Murid boleh ;
4.2.1 Melakar papan cerita untuk membina laman
sesawang yang menggunakan kod arahan HTML
PAPAN CERITA
Papan cerita ialah satu siri lakaran yang
menggambarkan isi kandungan untuk
setiap paparan skrin suatu laman
sesawang.
• Memberikan suatu gambaran visual kepada
pengatur cara dengan lebih teratur
• Menggambarkan reka bentuk dan reka letak
antara muka bagi setiap paparan yang akan
dibina
• Menentukan aliran navigasi sesuatu laman
sesawang
Sebelum membina satu laman
sesawang,anda harus melakar
papan cerita laman sesawang
terlebih dahulu. Rajah dibawah
menunjukkan kebaikan melakar
papan cerita.
Langkah ini penting dan akan
memudahkan pembinaan lama
sesawang.
KEBAIKAN MELAKAR
PAPAN CERITA
MELAKAR
PAPAN
CERITA
Memberikan
Penjelasan
Kasar Tentang
Struktur Laman
Sesawang
Mengetahui Bilangan
Laman Sesawang
Yang Diperlukan
Mengetahui Maklumat
Yang Harus
Dimasukkan
Mengetahui
Aliran Antara
Laman
Sesawang
GURU
LAMAN
SESAWANG
BUKU
RUJUKAN
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.
APA ITU INTERNET?
SATU SALURAN
ATAU MEDIA
PENYEBARAN
MAKLUMAT…
LANGKAH-LANGKAH YANG PERLU DIAMBIL
SEBELUM MELAKAR PAPAN CERITA
1. KUMPUL MAKLUMAT YANG DIKEHENDAKI
TEKS,IMEJ,AUDIO,GRAFIK
2. SUSUN SEMUA MAKLUMAT MENGIKUT TOPIK
DARI UMUM KE KHUSUS
3. TENTUKAN TAJUK-TAJUK UTAMA,TAJUK KECIL DAN
ISI KANDUNGAN UNTUK SETIAP LAMAN
TAJUK UTAMA, TAJUK KECIL,
ISI KANDUNGAN
4. RANCANGKAN STRUKTUR MAKLUMAT DAN PAUTAN
LAMAN SESAWANG
STRUKTUR LINEAR,STRUKTUR
HIERARKI,STRUKTUR CABANG DAN
STRUKTUR RODA
REKA BENTUK STRUKTUR MENU
6. RANCANGKAN RUPA DAN REKA BENTUK
LAMAN
SKEMA WARNA,JENIS,SAIZ DAN
WARNA TEKS
7. LAKARKAN ALIRAN PAUTAN BAGI KESEMUA LAMAN DALAM
TAPAK SESAWANG
Lakar papan cerita untuk satu
laman sesawang berdasarkan
mana- mana topik di bawah :
a. Portfolio diri
b. Sukan
c. Sains
d. Pelancongan.
Arahan :
1.Anda boleh melakar di atas kertas
A4 untuk laman sesawang yang
mengandungi sekurang-kurangnya 5
pautan . Tangkap gambar papan
cerita dan hantar ke Google
Classroom
2.Jika anda menggunakan IPAD, boleh
gunakan aplikasi keynotes dan
simpan dalam format PDF dan
hantar ke Google Classroom
4.2.
2
TAG DALAM HTML
-Bahasa pengaturcaraan yang menggunakan
kod-kod arahan yang dipanggil TAG HTML.
-TAG Ini mudah difahami dan ditulis
dalam tulisan biasa.
-pembinaan aturcara HTML tidak diperlukan
perisian yang khusus.
-boleh menggunakan perisian NOTEPAD dan
menyimpan dalam bentuk HTML (.html).
(Save as *. html)
Tag HTML boleh ditulis dalam huruf
besar atau huruf kecil
MAKSUDNYA,
<BODY> MEMPUNYAI KESAN
YANG SAMA SEPERTI <body>
TAG HTML DITULIS DALAM KURUNGAN < >
TAG HTML WUJUD DALAM PASANGAN
TAG AWAL < > DAN TAG AKHIR < / >
Gunakan Perisian Notepad
dalam komputer anda
1.Tekan start di skrin
2.Klik All programs
3. Klik Accessorries
4. Klik Notepad
Tag HTML
<html>
<head> <title> tajuk</title>
</head>
<body>
<p> taip perenggan
</p>
</body>
</html>
4.2.
3
PARAGRAPH HEADINGS DALAM
HTML
LANGKAH-LANGKAH MENGATUR CARA HTML
UNTUK MENGHASILKAN ENAM SAIZ PARAGRAPH
HEADINGS
BUKA PERISIAN
APLIKASI NOTEPAD
DAN LANCARKAN
SATU DOKUMEN
BAHARU
DI ANTARA TAG <body>
DAN
</body>,MASUKKAN
TAG HEADINGS KE
DALAM DOKUMEN
BAHARU
PILIH MENU FILE>SAVE AS UNTUK
MENYIMPAN DOKOMEN ANDA
DALAM FOLDER HTML
SAYA.NAMAKAN DOKUMEN ANDA
HEADINGS.html
BUKA FOLDER HTML
SAYA.DWIKLIK FAIL
HEADINGS.HTML UNTUK
MEMBUKANYA DALAM PELAYAR
WEB
Modul Score A
Buat latihan ms 81:
1. Buka notepad
2. Taip Latihan2
3. Save as Latihan2. html
Pengenalan papan cerita ask ting 1
Pengenalan papan cerita ask ting 1

More Related Content

What's hot

Bab 1 reka bentuk dan teknologi
Bab 1 reka bentuk dan teknologiBab 1 reka bentuk dan teknologi
Bab 1 reka bentuk dan teknologiLy Jonathan
 
RBT : 1.2 Kepentingan Reka Bentuk & Teknologi
RBT : 1.2 Kepentingan Reka Bentuk & TeknologiRBT : 1.2 Kepentingan Reka Bentuk & Teknologi
RBT : 1.2 Kepentingan Reka Bentuk & TeknologiMaz Ina
 
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3SMK SERI PErMAISURI
 
2.0 algoritma pseudokod carta alir
2.0 algoritma pseudokod carta alir2.0 algoritma pseudokod carta alir
2.0 algoritma pseudokod carta alirSakinah Hassan
 
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2SMK SERI PErMAISURI
 
BUKU TEKS RBT TINGKATAN 2
BUKU TEKS RBT TINGKATAN 2BUKU TEKS RBT TINGKATAN 2
BUKU TEKS RBT TINGKATAN 2Fadhirul Fitri
 
Tajuk 4 bahan bantu mengajar
Tajuk 4 bahan bantu mengajarTajuk 4 bahan bantu mengajar
Tajuk 4 bahan bantu mengajarSalini Dharan
 
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4CyafRBT
 
7 teori pengajaran kaedah pengajaran
7 teori pengajaran  kaedah pengajaran 7 teori pengajaran  kaedah pengajaran
7 teori pengajaran kaedah pengajaran Universiti selangor
 
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6Mellisa Mell
 
Reka Bentuk & Teknologi : 1.1 Dunia Reka Bentuk
Reka Bentuk & Teknologi : 1.1 Dunia Reka BentukReka Bentuk & Teknologi : 1.1 Dunia Reka Bentuk
Reka Bentuk & Teknologi : 1.1 Dunia Reka BentukMaz Ina
 
Kata tugas berdasarkan taksonomi bloom
Kata tugas berdasarkan taksonomi bloomKata tugas berdasarkan taksonomi bloom
Kata tugas berdasarkan taksonomi bloomMokhzani Fadir
 
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGI
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGIRBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGI
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGIFadhirul Fitri
 
Bab 5 reka bentuk fesyen
Bab 5 reka bentuk fesyenBab 5 reka bentuk fesyen
Bab 5 reka bentuk fesyendeeyah mar
 
Penyelesaian masalah inventif
Penyelesaian masalah inventifPenyelesaian masalah inventif
Penyelesaian masalah inventifLy Jonathan
 
Panduan penulisan rph
Panduan penulisan rphPanduan penulisan rph
Panduan penulisan rphtamya65
 
Pembelajaran secara kontekstual
Pembelajaran secara kontekstualPembelajaran secara kontekstual
Pembelajaran secara kontekstualzabidah awang
 

What's hot (20)

Bab 1 reka bentuk dan teknologi
Bab 1 reka bentuk dan teknologiBab 1 reka bentuk dan teknologi
Bab 1 reka bentuk dan teknologi
 
RPH Fertigasi
RPH FertigasiRPH Fertigasi
RPH Fertigasi
 
RBT : 1.2 Kepentingan Reka Bentuk & Teknologi
RBT : 1.2 Kepentingan Reka Bentuk & TeknologiRBT : 1.2 Kepentingan Reka Bentuk & Teknologi
RBT : 1.2 Kepentingan Reka Bentuk & Teknologi
 
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3
E-BOOK REKA BENTUK DAN TEKNOLOGI TINGKATAN 3
 
2.0 algoritma pseudokod carta alir
2.0 algoritma pseudokod carta alir2.0 algoritma pseudokod carta alir
2.0 algoritma pseudokod carta alir
 
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2
E-BOOK PENDIDIKAN SENI VISUAL TINGKATAN 2
 
BUKU TEKS RBT TINGKATAN 2
BUKU TEKS RBT TINGKATAN 2BUKU TEKS RBT TINGKATAN 2
BUKU TEKS RBT TINGKATAN 2
 
Tajuk 4 bahan bantu mengajar
Tajuk 4 bahan bantu mengajarTajuk 4 bahan bantu mengajar
Tajuk 4 bahan bantu mengajar
 
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4
Tajuk 1 keselamatan bengkel 2019 RBT Tahun 4
 
7 teori pengajaran kaedah pengajaran
7 teori pengajaran  kaedah pengajaran 7 teori pengajaran  kaedah pengajaran
7 teori pengajaran kaedah pengajaran
 
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6
RBT TINGKATAN 2: 2.6 reka bentuk makanan part 6
 
Reka Bentuk & Teknologi : 1.1 Dunia Reka Bentuk
Reka Bentuk & Teknologi : 1.1 Dunia Reka BentukReka Bentuk & Teknologi : 1.1 Dunia Reka Bentuk
Reka Bentuk & Teknologi : 1.1 Dunia Reka Bentuk
 
Kata tugas berdasarkan taksonomi bloom
Kata tugas berdasarkan taksonomi bloomKata tugas berdasarkan taksonomi bloom
Kata tugas berdasarkan taksonomi bloom
 
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGI
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGIRBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGI
RBT T1 BAB 1 PENGENALAN KEPADA REKA BENTUK DAN TEKNOLOGI
 
Bab 5 reka bentuk fesyen
Bab 5 reka bentuk fesyenBab 5 reka bentuk fesyen
Bab 5 reka bentuk fesyen
 
Penyelesaian masalah inventif
Penyelesaian masalah inventifPenyelesaian masalah inventif
Penyelesaian masalah inventif
 
teknologi pembuatan
teknologi pembuatanteknologi pembuatan
teknologi pembuatan
 
Panduan penulisan rph
Panduan penulisan rphPanduan penulisan rph
Panduan penulisan rph
 
88 aktiviti pak21
88 aktiviti pak2188 aktiviti pak21
88 aktiviti pak21
 
Pembelajaran secara kontekstual
Pembelajaran secara kontekstualPembelajaran secara kontekstual
Pembelajaran secara kontekstual
 

Similar to Pengenalan papan cerita ask ting 1

6 kod arahan 2
6   kod arahan 26   kod arahan 2
6 kod arahan 2pudzi98
 
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docx
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docxSILABUS_RPL_Pemrograman_Web_dan_Perangka.docx
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docxSusiSusanti389778
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSAhmad Afandi
 
Soal word processing
Soal word processingSoal word processing
Soal word processingSamsugi S
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfBeon Intermedia
 
silabus-pwpb (1).docx
silabus-pwpb (1).docxsilabus-pwpb (1).docx
silabus-pwpb (1).docxsolehakbar2
 
SAP - AXIOO PROGRAMING JUNIOR.pdf
SAP - AXIOO PROGRAMING JUNIOR.pdfSAP - AXIOO PROGRAMING JUNIOR.pdf
SAP - AXIOO PROGRAMING JUNIOR.pdfBsIsmail1
 
EXTENTION VISUAL CODE EDITOR.pptx
EXTENTION VISUAL CODE EDITOR.pptxEXTENTION VISUAL CODE EDITOR.pptx
EXTENTION VISUAL CODE EDITOR.pptxochimochi
 
Chapter 1 introduction html (shared)
Chapter 1   introduction html (shared)Chapter 1   introduction html (shared)
Chapter 1 introduction html (shared)YUSRA FERNANDO
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis webandika_navian
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis webandika_navian
 
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfRPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfSuparno20
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain webYUSRA FERNANDO
 
Bab iii proyek web html notepad
Bab iii proyek web html notepadBab iii proyek web html notepad
Bab iii proyek web html notepadrainbi
 

Similar to Pengenalan papan cerita ask ting 1 (20)

BOOK-web-programming.pdf
BOOK-web-programming.pdfBOOK-web-programming.pdf
BOOK-web-programming.pdf
 
Silabus PWPB
Silabus PWPBSilabus PWPB
Silabus PWPB
 
6 kod arahan 2
6   kod arahan 26   kod arahan 2
6 kod arahan 2
 
6 kod arahan 2
6   kod arahan 26   kod arahan 2
6 kod arahan 2
 
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docx
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docxSILABUS_RPL_Pemrograman_Web_dan_Perangka.docx
SILABUS_RPL_Pemrograman_Web_dan_Perangka.docx
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
 
Soal word processing
Soal word processingSoal word processing
Soal word processing
 
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdfMemahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
Memahami Alur Kerja Pembuatan Website - Sitemaya Webinar - Day 1.pdf
 
silabus-pwpb (1).docx
silabus-pwpb (1).docxsilabus-pwpb (1).docx
silabus-pwpb (1).docx
 
SAP - AXIOO PROGRAMING JUNIOR.pdf
SAP - AXIOO PROGRAMING JUNIOR.pdfSAP - AXIOO PROGRAMING JUNIOR.pdf
SAP - AXIOO PROGRAMING JUNIOR.pdf
 
Silibus web design
Silibus web designSilibus web design
Silibus web design
 
EXTENTION VISUAL CODE EDITOR.pptx
EXTENTION VISUAL CODE EDITOR.pptxEXTENTION VISUAL CODE EDITOR.pptx
EXTENTION VISUAL CODE EDITOR.pptx
 
Chapter 1 introduction html (shared)
Chapter 1   introduction html (shared)Chapter 1   introduction html (shared)
Chapter 1 introduction html (shared)
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
 
Praktikum pemrograman berbasis web
Praktikum pemrograman berbasis webPraktikum pemrograman berbasis web
Praktikum pemrograman berbasis web
 
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdfRPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
RPS - Pemrograman Web Desain - berbasis KKNI OBE Prodi MI.pdf
 
Bab 1 pengantar desain web
Bab 1   pengantar desain webBab 1   pengantar desain web
Bab 1 pengantar desain web
 
Bab iii proyek web html notepad
Bab iii proyek web html notepadBab iii proyek web html notepad
Bab iii proyek web html notepad
 
Bab iii proyek web html notepad
Bab iii proyek web html notepadBab iii proyek web html notepad
Bab iii proyek web html notepad
 
Bab 3 proyek
Bab 3 proyekBab 3 proyek
Bab 3 proyek
 

Pengenalan papan cerita ask ting 1

  • 2. 4.2. 1 MELAKAR PAPAN CERTITA BIDANG PEMBELAJARAN: 4.0 Kod Arahan Standard Kandungan : 4.2 Kod Arahan HTML Standard Pembelajaran : Murid boleh ; 4.2.1 Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan HTML
  • 3. PAPAN CERITA Papan cerita ialah satu siri lakaran yang menggambarkan isi kandungan untuk setiap paparan skrin suatu laman sesawang. • Memberikan suatu gambaran visual kepada pengatur cara dengan lebih teratur • Menggambarkan reka bentuk dan reka letak antara muka bagi setiap paparan yang akan dibina • Menentukan aliran navigasi sesuatu laman sesawang
  • 4.
  • 5. Sebelum membina satu laman sesawang,anda harus melakar papan cerita laman sesawang terlebih dahulu. Rajah dibawah menunjukkan kebaikan melakar papan cerita. Langkah ini penting dan akan memudahkan pembinaan lama sesawang.
  • 6. KEBAIKAN MELAKAR PAPAN CERITA MELAKAR PAPAN CERITA Memberikan Penjelasan Kasar Tentang Struktur Laman Sesawang Mengetahui Bilangan Laman Sesawang Yang Diperlukan Mengetahui Maklumat Yang Harus Dimasukkan Mengetahui Aliran Antara Laman Sesawang GURU LAMAN SESAWANG BUKU RUJUKAN
  • 7. 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
  • 8. 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.
  • 11. LANGKAH-LANGKAH YANG PERLU DIAMBIL SEBELUM MELAKAR PAPAN CERITA
  • 12. 1. KUMPUL MAKLUMAT YANG DIKEHENDAKI TEKS,IMEJ,AUDIO,GRAFIK
  • 13. 2. SUSUN SEMUA MAKLUMAT MENGIKUT TOPIK DARI UMUM KE KHUSUS
  • 14. 3. TENTUKAN TAJUK-TAJUK UTAMA,TAJUK KECIL DAN ISI KANDUNGAN UNTUK SETIAP LAMAN TAJUK UTAMA, TAJUK KECIL, ISI KANDUNGAN
  • 15. 4. RANCANGKAN STRUKTUR MAKLUMAT DAN PAUTAN LAMAN SESAWANG STRUKTUR LINEAR,STRUKTUR HIERARKI,STRUKTUR CABANG DAN STRUKTUR RODA
  • 17. 6. RANCANGKAN RUPA DAN REKA BENTUK LAMAN SKEMA WARNA,JENIS,SAIZ DAN WARNA TEKS
  • 18. 7. LAKARKAN ALIRAN PAUTAN BAGI KESEMUA LAMAN DALAM TAPAK SESAWANG
  • 19.
  • 20. Lakar papan cerita untuk satu laman sesawang berdasarkan mana- mana topik di bawah : a. Portfolio diri b. Sukan c. Sains d. Pelancongan.
  • 21. Arahan : 1.Anda boleh melakar di atas kertas A4 untuk laman sesawang yang mengandungi sekurang-kurangnya 5 pautan . Tangkap gambar papan cerita dan hantar ke Google Classroom 2.Jika anda menggunakan IPAD, boleh gunakan aplikasi keynotes dan simpan dalam format PDF dan hantar ke Google Classroom
  • 23. -Bahasa pengaturcaraan yang menggunakan kod-kod arahan yang dipanggil TAG HTML. -TAG Ini mudah difahami dan ditulis dalam tulisan biasa. -pembinaan aturcara HTML tidak diperlukan perisian yang khusus. -boleh menggunakan perisian NOTEPAD dan menyimpan dalam bentuk HTML (.html). (Save as *. html)
  • 24. Tag HTML boleh ditulis dalam huruf besar atau huruf kecil MAKSUDNYA, <BODY> MEMPUNYAI KESAN YANG SAMA SEPERTI <body> TAG HTML DITULIS DALAM KURUNGAN < > TAG HTML WUJUD DALAM PASANGAN TAG AWAL < > DAN TAG AKHIR < / >
  • 25. Gunakan Perisian Notepad dalam komputer anda 1.Tekan start di skrin 2.Klik All programs 3. Klik Accessorries 4. Klik Notepad
  • 26. Tag HTML <html> <head> <title> tajuk</title> </head> <body> <p> taip perenggan </p> </body> </html>
  • 28. LANGKAH-LANGKAH MENGATUR CARA HTML UNTUK MENGHASILKAN ENAM SAIZ PARAGRAPH HEADINGS
  • 29. BUKA PERISIAN APLIKASI NOTEPAD DAN LANCARKAN SATU DOKUMEN BAHARU DI ANTARA TAG <body> DAN </body>,MASUKKAN TAG HEADINGS KE DALAM DOKUMEN BAHARU PILIH MENU FILE>SAVE AS UNTUK MENYIMPAN DOKOMEN ANDA DALAM FOLDER HTML SAYA.NAMAKAN DOKUMEN ANDA HEADINGS.html BUKA FOLDER HTML SAYA.DWIKLIK FAIL HEADINGS.HTML UNTUK MEMBUKANYA DALAM PELAYAR WEB
  • 30. Modul Score A Buat latihan ms 81: 1. Buka notepad 2. Taip Latihan2 3. Save as Latihan2. html