Semua bab所有章节

Bab 4第4章 · 4.2 Kod Arahan HTML4.2 HTML 指令代码

Kod Arahan指令代码

Membina laman sesawang dengan kod HTML.用 HTML 代码建立网页。

Selepas bab ini, anda boleh:学完这一章，你可以：

  • Menulis kerangka asas HTML: <html>, <head>, <title>, <body>.写出 HTML 的基本框架：<html>、<head>、<title>、<body>。
  • Menggunakan <p>, <h1> hingga <h6>, <ul> dan <li>.使用 <p>、<h1> 到 <h6>、<ul> 和 <li>。
  • Memasukkan imej, pautan, banner, frame, menu, pull-down menu dan ruang komen.加入图片、链接、横幅、框架、菜单、下拉菜单和留言区。
  • Mengesan dan membaiki ralat dalam kod HTML.找出并改正 HTML 代码里的错误。
  • Menyusun langkah membina laman sesawang.排好建立网站的步骤。
Mula belajar开始学习

4.2

Apakah HTML?什么是 HTML？

Definisi untuk peperiksaan考试用的定义 HTML ialah singkatan bagi HyperText Markup Language. HTML digunakan untuk membina laman sesawang. Kod HTML boleh ditulis dengan perisian aplikasi Notepad dan disimpan dengan sambungan ".html" atau ".htm". Fail ini dibaca oleh pelayar web.HTML 是 HyperText Markup Language（超文本标记语言）的简称，用来建立网页。HTML 代码可以用记事本（Notepad）来写，存成「.html」或「.htm」文件。浏览器会读这个文件。

Dalam bahasa mudah简单来说

HTML ialah arahan untuk pelayar web. Setiap tag memberitahu pelayar: "Ini tajuk", "Ini perenggan", "Ini gambar".HTML 是给浏览器的指令。每一个标签都在告诉浏览器：「这是标题」、「这是段落」、「这是图片」。

Cerita mudah简单的故事

Bayangkan awak mengemas barang dalam kotak dan menampal label: "Buku", "Baju", "Mainan". Tag HTML seperti label itu. <h1> bermaksud "ini tajuk besar". <p> bermaksud "ini perenggan". Pelayar web membaca label dan menyusun laman.想象你把东西装进箱子，再贴上标签：「书」、「衣服」、「玩具」。HTML 标签就像这些标签。<h1> 的意思是「这是大标题」，<p> 的意思是「这是段落」。浏览器读了标签，就把网页排好。

Peraturan tag (buku teks)标签的规则（课本）

Tag HTML ditulis dalam kurungan < >. Kebanyakan tag HTML wujud dalam pasangan: tag awal < > dan tag akhir </ >. Beberapa tag tiada tag akhir: <img>, <input>, <frame> dan <br>. Tag tidak sensitif huruf: <BODY> sama dengan <body>.HTML 标签写在 < > 里面。大部分标签是成对的：开始标签 < > 和结束标签 </ >。有几个标签没有结束标签：<img>、<input>、<frame> 和 <br>。标签不分大小写：<BODY> 和 <body> 一样。

Tag标签Fungsi功能
<html> </html>Permulaan dan tamat atur cara HTML.HTML 程序的开始和结束。
<head> </head>Bahagian kepala laman sesawang.网页的头部。
<title> </title>Tajuk pada tab pelayar web. Diletak di dalam <head>.浏览器标签页上的标题，放在 <head> 里面。
<body> </body>Bahagian utama: semua isi kandungan seperti teks, imej dan pautan.主体部分：所有内容，比如文字、图片和链接。
<p> </p>Satu perenggan.一个段落。

Langkah demi langkah一步一步看

Taip HTML dalam Notepad, langkah demi langkah一步一步在记事本里打 HTML

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Bagaimanakah kita menulis laman pertama, mengikut langkah buku teks?照着课本的步骤，第一个网页要怎么写？

Notepad: buah.html记事本：buah.html

  1. <html>
  2. <head>
  3. <title>Buah-buahan Tempatan</title>
  4. </head>
  5. <body>
  6. <p>Buah-buahan tempatan mempunyai banyak khasiat.</p>
  7. <p>Buah-buahan tempatan juga murah.</p>
  8. </body>
  9. </html>

Pelayar web浏览器

Buah-buahan tempatan mempunyai banyak khasiat.

Buah-buahan tempatan juga murah.

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。
  1. Baca soalan di atas. Cuba fikir dahulu, kemudian tekan Seterusnya untuk melihat jawapan.读上面的题目。先想一想，再按「下一步」看答案。
  2. Langkah 1: taip <html> dan </html>. Ia permulaan dan tamat atur cara. Laman masih kosong.第 1 步：打 <html> 和 </html>。这是程序的开始和结束。网页还是空的。
  3. Langkah 2: di antaranya, taip <head> dan </head>: bahagian kepala.第 2 步：在中间打 <head> 和 </head>：头部。
  4. Langkah 3: di dalam <head>, taip <title>. Lihat tab pelayar: tajuk muncul di situ, bukan di dalam laman!第 3 步：在 <head> 里打 <title>。看浏览器的标签页：标题出现在那里，不是在网页里面！
  5. Langkah 4: selepas </head>, taip <body> dan </body>. Semua isi diletak di sini.第 4 步：在 </head> 后面打 <body> 和 </body>。所有内容都放在这里。
  6. Langkah 5: taip satu perenggan dengan <p> dan </p>. Kini laman ada isi.第 5 步：用 <p> 和 </p> 打一个段落。现在网页有内容了。
  7. Setiap pasangan <p> dan </p> menjadi satu perenggan baharu. Simpan sebagai buah.html, kemudian dwiklik untuk membukanya dalam pelayar.每一对 <p> 和 </p> 都会变成一个新段落。存成 buah.html，再双击用浏览器打开。

Contoh例子 1/2 · Langkah步骤 1/7

Cuba试试看

Susun kerangka asas HTML排好 HTML 的基本框架

Seret langkah ke tempat yang betul, kemudian tekan Semak.把步骤拖到正确的位置，然后按「检查」。

  1. <html>
  2. <head>
  3. <title>Laman Saya</title>
  4. </head>
  5. <body>
  6. <p>Selamat datang!</p>
  7. </body>
  8. </html>

4.1 Atur cara Scratch: sama seperti Bab 34.1 Scratch 程序：和第 3 章一样

Bahagian 4.1 menggunakan blok Scratch untuk idea Bab 3. "ask and wait" = MASUKKAN. "say" = PAPARKAN. "set … to" = SETKAN. "if … then" = pilihan tunggal. "if … then … else" = dwipilihan. "repeat 10" = UNTUK. "forever" = ulang tanpa henti. "repeat until" berhenti apabila syarat menjadi benar, tetapi ia menyemak syarat dahulu. Jika syarat sudah benar dari awal, ia berjalan 0 kali. Jadi ia tidak sama dengan ULANG–SEHINGGA, yang membuat langkah dahulu dan menyemak kemudian. Ralatnya juga sama: sintaks, masa larian dan logik.4.1 用 Scratch 积木来做第 3 章的概念。「ask and wait」= 输入。「say」= 显示。「set … to」= 设定。「if … then」= 单一选择。「if … then … else」= 双重选择。「repeat 10」= UNTUK。「forever」= 一直重复。Scratch 的「repeat until」在条件成立时停下来，但它先检查条件；条件一开始就成立时，会执行 0 次。它和先执行、后检查的 ULANG–SEHINGGA 不完全一样。错误也一样：语法、运行时和逻辑错误。

Tip peperiksaan考试技巧

Hafal kerangka seperti lagu: html, head, title, /title, /head, body, /body, /html. Tag yang dibuka paling akhir ditutup paling awal.把框架像歌一样背起来：html、head、title、/title、/head、body、/body、/html。最后打开的标签最先关上。

Cuba fikir想一想

Cuba fikir: asas HTML想一想：HTML 基础

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Mei menaip kod HTML dalam Notepad. Dia mahu membukanya dengan pelayar web. Apakah sambungan nama fail yang perlu dipilih?Mei 在记事本里打了 HTML 代码，想用浏览器打开。文件名要用什么后缀？

  1. Pelayar web membaca fail HTML.浏览器读的是 HTML 文件。

Jawapan答案: .html (atau .htm).html（或 .htm）

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. Fail .txt dibuka oleh Notepad sebagai teks biasa..txt 文件会被记事本当成普通文字打开。
  3. Contoh: buah.html. Dwiklik fail itu untuk membukanya dalam pelayar web.例子：buah.html。双击这个文件，就会在浏览器里打开。

Contoh例子 1/4 · Langkah步骤 1/3

4.2.1

Melakar papan cerita画故事板

Definisi untuk peperiksaan考试用的定义 Papan cerita ialah satu siri lakaran yang menggambarkan isi kandungan untuk setiap paparan skrin suatu laman sesawang.故事板是一系列草图，画出网站每一个屏幕画面的内容。

Dalam bahasa mudah简单来说

Sebelum menulis kod, lakar setiap laman di atas kertas: di mana tajuk, menu, teks dan gambar, dan laman mana bersambung ke laman mana.写代码之前，先在纸上画出每一页：标题、菜单、文字和图片放在哪里，哪一页连到哪一页。

Cerita mudah简单的故事

Sebelum merakam video muzik K-pop, pengarah melukis papan cerita: lakaran kecil bagi setiap babak, siapa berdiri di mana, dan babak mana selepas babak mana. Laman sesawang juga dirancang begitu.拍 K-pop 音乐录影带之前，导演会先画故事板：每一个镜头的小草图，谁站在哪里，哪一个镜头接哪一个镜头。网站也是这样规划的。

Kebaikan melakar papan cerita画故事板的好处
Mengetahui bilangan laman sesawang yang diperlukan.知道需要几个网页。
Mengetahui maklumat yang harus dimasukkan.知道要放什么资料。
Mengetahui aliran antara laman sesawang.知道网页之间怎么连。
Memberikan penjelasan kasar tentang struktur laman sesawang.大概说明网站的结构。

Cuba试试看

Susun langkah melakar papan cerita (buku teks Rajah 4.12)排好画故事板的步骤（课本图 4.12）

Seret langkah ke tempat yang betul, kemudian tekan Semak.把步骤拖到正确的位置，然后按「检查」。

  1. Kumpul semua maklumat yang dikehendaki (teks, imej, audio, grafik).收集所有需要的资料（文字、图片、音频、图形）。
  2. Susun maklumat mengikut topik, dari umum ke khusus.按照主题排好资料，从大概到详细。
  3. Tentukan tajuk utama, tajuk kecil dan isi kandungan setiap laman.决定每一页的主标题、小标题和内容。
  4. Rancangkan struktur maklumat dan pautan (linear, hierarki, cabang, roda).规划资料和链接的结构（线性、层次、分支、轮状）。
  5. Reka bentuk struktur menu.设计菜单的结构。
  6. Rancangkan rupa laman: skema warna, jenis, saiz dan warna teks.规划网页的样子：配色、字体、字的大小和颜色。
  7. Lakarkan aliran pautan bagi semua laman.画出所有网页的链接流程。

Empat struktur pautan (linear, cabang, roda dan hierarki) ada demo sendiri. Klik untuk mencubanya.四种链接结构（线性、分支、轮状和层次）都有自己的演示。点进去试试看。

Buka demo struktur laman sesawang打开网页结构演示

Tip peperiksaan考试技巧

Papan cerita mesti ada: banner atau tajuk, butang menu, kotak teks, kotak imej berlabel (contoh "Imej bunga raya") dan anak panah untuk aliran pautan.故事板一定要有：横幅或标题、菜单按钮、文字框、有标签的图片框（例如「Imej bunga raya」），以及表示链接流程的箭头。

Cuba fikir想一想

Cuba fikir: papan cerita想一想：故事板

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Ali terus menaip kod HTML tanpa melakar papan cerita. Apakah masalah yang mungkin berlaku?Ali 没有画故事板，就直接打 HTML 代码。可能会有什么问题？

  1. Tanpanya, Ali mungkin terlupa maklumat, imej atau pautan.没有它，Ali 可能会忘了资料、图片或链接。

Jawapan答案: Dia tidak tahu bilangan laman, maklumat dan aliran pautan yang diperlukan.他不知道需要几页、什么资料，以及链接怎么连。

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. Papan cerita memberitahu kita apa yang perlu ada pada setiap laman.故事板告诉我们每一页要有什么。
  3. Lakar papan cerita dahulu, kemudian barulah menulis kod.先画故事板，然后才写代码。

Contoh例子 1/3 · Langkah步骤 1/3

4.2.2 – 4.2.3

Tag perenggan dan paragraph headings段落标签和标题标签

Definisi untuk peperiksaan考试用的定义 Paragraph headings mengarahkan pelayar web supaya memaparkan teks dengan saiz tertentu. Terdapat enam saiz, dari <h1> yang terbesar hingga <h6> yang terkecil.标题标签（paragraph headings）让浏览器用特定的大小显示文字。一共有六个大小，从最大的 <h1> 到最小的 <h6>。

Dalam bahasa mudah简单来说

<h1> untuk tajuk utama, <h2> untuk tajuk kecil, dan seterusnya. Ayat biasa menggunakan <p>.<h1> 用在主标题，<h2> 用在小标题，依此类推。普通的句子用 <p>。

Cerita mudah简单的故事

Lihat surat khabar: tajuk berita paling besar, tajuk kecil lebih kecil, dan berita ditulis dengan tulisan biasa. <h1> ialah tajuk berita, <h2> tajuk kecil, dan <p> ialah ayat berita.看看报纸：新闻标题最大，小标题小一点，新闻内容用普通的字。<h1> 是新闻标题，<h2> 是小标题，<p> 是新闻内容。

Langkah demi langkah一步一步看

Lihat saiz heading berubah看标题的大小怎么变

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Apakah yang dipaparkan oleh kod <h1> hingga <h4> ini? (UASA A10)这段 <h1> 到 <h4> 的代码会显示什么？（UASA A10）

Notepad: penyakit.html记事本：penyakit.html

  1. <html>
  2. <head>
  3. <title>Penyakit</title>
  4. </head>
  5. <body>
  6. <h1>Malaria</h1>
  7. <h2>Denggi</h2>
  8. <h3>HIV-AIDS</h3>
  9. <h4>COVID-19</h4>
  10. </body>
  11. </html>

Pelayar web浏览器

Malaria

Denggi

HIV-AIDS

COVID-19

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。
  1. Baca soalan di atas. Cuba fikir dahulu, kemudian tekan Seterusnya untuk melihat jawapan.读上面的题目。先想一想，再按「下一步」看答案。
  2. Mula dengan kerangka asas: <html>, <head>, <title>, <body>. Tajuk dalam <title> muncul pada tab pelayar.先打基本框架：<html>、<head>、<title>、<body>。<title> 里的标题会出现在浏览器的标签页上。
  3. <h1>: tulisan paling besar.<h1>：最大的字。
  4. <h2>: lebih kecil sedikit.<h2>：小一点。
  5. <h3>: lebih kecil lagi.<h3>：再小一点。
  6. <h4>: semakin kecil. Jawapan UASA A10: B, tulisan yang semakin kecil.<h4>：越来越小。UASA A10 的答案：B，越来越小的字。

Contoh例子 1/3 · Langkah步骤 1/6

Cuba试试看

Tag yang mana?用哪一个标签？

Pilih tag yang menghasilkan setiap paparan.选出做出每一种显示的标签。

Jawapan betul答对: 0 / 6

  1. Teks pada tab pelayar web.浏览器标签页上的文字。

  2. Tajuk utama yang paling besar.最大的主标题。

  3. Satu perenggan ayat biasa.一段普通的句子。

  4. Satu item dengan titik bulat (•).有圆点（•）的一项。

  5. "Buah Betik", ditulis dengan saiz biasa (soalan UASA C2).用普通大小写的「Buah Betik」（UASA C2 题）。

  6. Tajuk "Buah-buahan Tempatan" di dalam <head> (soalan UASA C2).<head> 里面的标题「Buah-buahan Tempatan」（UASA C2 题）。

Tip peperiksaan考试技巧

Ingat: semakin BESAR nombor heading, semakin KECIL tulisannya. <h1> paling besar, <h6> paling kecil.记住：标题的数字越大，字越小。<h1> 最大，<h6> 最小。

Cuba fikir想一想

Cuba fikir: tag teks想一想：文字标签

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

<h1>Malaria</h1> <h2>Denggi</h2> <h3>HIV-AIDS</h3> <h4>COVID-19</h4>. Apakah yang dipaparkan?<h1>Malaria</h1> <h2>Denggi</h2> <h3>HIV-AIDS</h3> <h4>COVID-19</h4>。会显示什么？

  1. Malaria (paling besar) → Denggi → HIV-AIDS → COVID-19 (paling kecil)Malaria（最大）→ Denggi → HIV-AIDS → COVID-19（最小）

Jawapan答案: B: Memaparkan tulisan yang semakin kecil.B：显示越来越小的字。

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. <h1> paling besar. Semakin besar nombornya, semakin kecil tulisannya.<h1> 最大。数字越大，字越小。
  3. Ada enam saiz: <h1> hingga <h6>.一共有六个大小：<h1> 到 <h6>。

Contoh例子 1/4 · Langkah步骤 1/3

4.2.5 – 4.2.6

Pautan teks, pautan imej dan memasukkan imej文字链接、图片链接和插入图片

Definisi untuk peperiksaan考试用的定义 Pautan teks dan imej menjadikan laman sesawang interaktif. Tag pautan ialah <a> </a>, dan href ialah alamat destinasi. Imej dimasukkan dengan tag <img>. Tag <img> ialah tag kosong: ia tidak perlukan tag penutup.文字和图片链接让网页可以互动。链接标签是 <a> </a>，href 是要去的地址。图片用 <img> 标签插入。<img> 是空标签：不需要结束标签。

Dalam bahasa mudah简单来说

Pautan ialah pintu ke laman lain: klik, dan awak pergi ke sana. Imej ialah gambar yang diletak di dalam laman.链接就像通往其他网页的门：一点，你就过去了。图片就是放在网页里的照片。

Atribut属性Maksud意思Contoh例子
srcImage source: nama fail imej.Image source：图片的文件名。<img src="betik.png">
altTeks yang dipaparkan jika imej tidak dapat dipaparkan.图片显示不出来时显示的文字。alt="Buah betik"
style, width, heightSaiz imej, dalam piksel (px).图片的大小，单位是像素（px）。style="width:300px;height:230px;"
hrefAlamat laman yang dibuka apabila pautan diklik.点链接时会打开的网页地址。<a href="http://moe.gov.my">
Format imej图片格式Kebaikan优点Kelemahan缺点
GIF (.gif)Boleh beranimasi. Dilihat dalam hampir semua komputer.可以做动画。几乎所有电脑都能看。Hanya 256 warna.只有 256 种颜色。
JPEG (.jpg)16.7 juta warna.1670 万种颜色。Dimampatkan, jadi kualiti berkurang.被压缩，所以质量会变差。
PNG (.png)Dimampatkan tetapi kualiti tetap sama.被压缩，但质量不变。Tiada animasi.不能做动画。

Langkah demi langkah一步一步看

Bina pautan dan masukkan imej做链接和插入图片

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Bagaimanakah kita membuat pautan teks ke laman KPM? (buku teks Rajah 4.20)怎样做一个连到教育部网站的文字链接？（课本图 4.20）

Notepad: pautan.html记事本：pautan.html

  1. <html>
  2. <head>
  3. <title>Membina Pautan Teks</title>
  4. </head>
  5. <body>
  6. <a href="http://moe.gov.my">
  7. Kementerian Pendidikan Malaysia
  8. </a>
  9. </body>
  10. </html>

Pelayar web浏览器

Kementerian Pendidikan Malaysia

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。
  1. Baca soalan di atas. Cuba fikir dahulu, kemudian tekan Seterusnya untuk melihat jawapan.读上面的题目。先想一想，再按「下一步」看答案。
  2. Mula dengan kerangka asas: <html>, <head>, <title>, <body>. Tajuk dalam <title> muncul pada tab pelayar.先打基本框架：<html>、<head>、<title>、<body>。<title> 里的标题会出现在浏览器的标签页上。
  3. Taip <a href="…"> dengan alamat laman, dan </a>.打 <a href="…">，加上网址，还有 </a>。
  4. Teks di antara <a> dan </a> menjadi biru dan bergaris bawah. Itulah yang diklik. Tanpa teks di antara <a> dan </a>, tiada apa-apa untuk diklik!<a> 和 </a> 中间的字会变成蓝色，下面有线。这就是要点的地方。<a> 和 </a> 中间没有字，就没有东西可以点！

Contoh例子 1/3 · Langkah步骤 1/4

Cuba试试看

Atribut yang mana?哪一个属性？

Pilih atribut bagi setiap tugas.为每个用途选出属性。

Jawapan betul答对: 0 / 4

  1. Nama fail imej yang hendak dipaparkan.要显示的图片文件名。

  2. Teks yang dipaparkan jika imej tidak dapat dipaparkan.图片显示不出来时显示的文字。

  3. Alamat laman yang dibuka apabila pautan diklik.点链接时会打开的网页地址。

  4. Saiz imej: width:300px;height:230px;图片的大小：width:300px;height:230px;

Tip peperiksaan考试技巧

Eja dengan tepat: src (bukan scr) dan href. Jangan lupa tanda petik "…" dan kurungan > di hujung tag.要拼对：src（不是 scr）和 href。不要忘了引号 "…" 和标签最后的 >。

Cuba fikir想一想

Cuba fikir: pautan dan imej想一想：链接和图片

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Ahmad menulis <img scr="logo.jpg">. Gambar tidak dipaparkan. Kenapa?Ahmad 写了 <img scr="logo.jpg">。图片没有显示。为什么？

  1. src bermaksud image source (sumber imej). "scr" tiada maksud.src 是 image source（图片来源）的意思。「scr」没有意思。

Jawapan答案: Salah ejaan. Tulis <img src="logo.jpg">.拼错了。要写 <img src="logo.jpg">。

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. Baca ejaan atribut dengan teliti.仔细看属性的拼法。
  3. Ini ralat sintaks: kesalahan ejaan dalam kod.这是语法错误：代码拼错了。

Contoh例子 1/4 · Langkah步骤 1/3

4.2.7 – 4.2.8

Pull-down menu dan ruang komen下拉菜单和留言区

Definisi untuk peperiksaan考试用的定义 Pull-down menu mengandungi senarai item yang muncul apabila pengguna mengklik butangnya. Tag <select> menghasilkan menu, dan setiap pilihan ialah <option>. Ruang komen dibina dengan <form> dan <textarea>, dan butang hantar dengan <input type="submit">.下拉菜单里有一列项目，用户点按钮时就会出现。<select> 标签做出菜单，每个选项是 <option>。留言区用 <form> 和 <textarea> 来做，发送按钮用 <input type="submit">。

Dalam bahasa mudah简单来说

Pull-down menu: pengguna MEMILIH jawapan, jadi tiada salah ejaan. Ruang komen: pengguna MENAIP pendapatnya.下拉菜单：用户是「选」答案，所以不会拼错。留言区：用户「打」出自己的意见。

Langkah demi langkah一步一步看

Bina pull-down menu dan ruang komen做下拉菜单和留言区

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Bagaimanakah kita membuat menu ▾ untuk memilih negeri? (buku teks Rajah 4.22)怎样做一个选州属的 ▾ 菜单？（课本图 4.22）

Notepad: negeri.html记事本：negeri.html

  1. <html>
  2. <head>
  3. <title>Pull-down menu</title>
  4. </head>
  5. <body>
  6. <p>Pilih Negeri</p>
  7. <select>
  8. <option value="Johor">Johor</option>
  9. <option value="Kedah">Kedah</option>
  10. <option value="Kelantan">Kelantan</option>
  11. </select>
  12. </body>
  13. </html>

Pelayar web浏览器

Pilih Negeri

Johor

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。
  1. Baca soalan di atas. Cuba fikir dahulu, kemudian tekan Seterusnya untuk melihat jawapan.读上面的题目。先想一想，再按「下一步」看答案。
  2. Mula dengan kerangka asas: <html>, <head>, <title>, <body>. Tajuk dalam <title> muncul pada tab pelayar.先打基本框架：<html>、<head>、<title>、<body>。<title> 里的标题会出现在浏览器的标签页上。
  3. Satu perenggan sebagai arahan.一个段落当作说明。
  4. <select> dan </select> menghasilkan kotak menu ▾. Ia masih kosong, kerana belum ada pilihan.<select> 和 </select> 做出 ▾ 菜单框。它还是空的，因为还没有选项。
  5. Setiap <option> ialah satu pilihan. Yang pertama dipaparkan dahulu. Buku teks menyenaraikan 13 negeri dan 3 Wilayah Persekutuan dengan cara yang sama.每个 <option> 是一个选项。第一个会先显示。课本用同样的方法列出 13 个州和 3 个联邦直辖区。

Contoh例子 1/2 · Langkah步骤 1/5

Tip peperiksaan考试技巧

Kotak pilihan ▾ → <select> + <option>. Kotak menaip + butang Hantar → <form> + <textarea> + <input type="submit">.▾ 选择框 → <select> + <option>。打字框 + 发送按钮 → <form> + <textarea> + <input type="submit">。

Cuba fikir想一想

Cuba fikir: pull-down menu dan komen想一想：下拉菜单和留言

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Mei mahu satu menu ▾ untuk memilih kumpulan K-pop: BLACKPINK, TWICE atau IVE. Tag apakah yang digunakan?Mei 想做一个 ▾ 菜单来选 K-pop 团体：BLACKPINK、TWICE 或 IVE。要用什么标签？

  1. <select> … </select>
  2. <option value="TWICE">TWICE</option>

Jawapan答案: <select> dengan tiga <option> di dalamnya.<select> 里面放三个 <option>。

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. Menu ▾ ialah pull-down menu.▾ 菜单就是下拉菜单（pull-down menu）。
  3. Setiap pilihan ialah satu <option>.每一个选项是一个 <option>。
  4. Pull-down menu mengelakkan kesilapan ejaan, kerana pengguna hanya memilih.下拉菜单可以避免拼错字，因为用户只要选就好。

Contoh例子 1/2 · Langkah步骤 1/4

4.2.9 – 4.2.10

Mengesan ralat dan membina laman sesawang interaktif找错误和建立互动网站

Definisi untuk peperiksaan考试用的定义 Jika output atur cara tidak seperti yang dikehendaki, atur cara itu mempunyai ralat. Ralat yang biasa dalam HTML ialah ralat sintaks (salah ejaan atau tanda baca) dan penggunaan tag di tempat yang salah.如果程序的输出不是想要的，这个程序就有错误。HTML 常见的错误是语法错误（拼错或标点错）和把标签放错地方。

Dalam bahasa mudah简单来说

Buka laman, lihat apa yang salah, baca semula kod, dan baiki. Ulang sehingga betul.打开网页，看看哪里不对，再读一次代码，然后改正。一直重复到对为止。

Cuba试试看

Susun langkah mengesan ralat (buku teks Rajah 4.24)排好找错误的步骤（课本图 4.24）

Seret langkah ke tempat yang betul, kemudian tekan Semak.把步骤拖到正确的位置，然后按「检查」。

  1. Uji lari atur cara: buka fail HTML dengan pelayar web.运行程序：用浏览器打开 HTML 文件。
  2. Bandingkan laman yang dipaparkan dengan apa yang dijangka. Kenal pasti ralat.把显示的网页和预期的比较，找出错误。
  3. Teliti semula kod-kod HTML.再仔细看一次 HTML 代码。
  4. Baiki ralat pada atur cara HTML.改正 HTML 程序里的错误。

Tag komen <!-- … -->注释标签 <!-- … -->

Ayat di dalam <!-- … --> tidak dipaparkan dalam pelayar web. Pengatur cara menggunakannya sebagai nota, contohnya <!--gambar bunga raya-->, supaya ralat lebih mudah dicari.<!-- … --> 里面的句子不会在浏览器里显示。程序员把它当作笔记，比如 <!--gambar bunga raya-->，这样比较容易找错误。

Cuba试试看

Kod ini betul atau salah?这段代码对还是错？

Semak setiap baris kod HTML.检查每一行 HTML 代码。

Jawapan betul答对: 0 / 6

  1. <p>Hai, saya Mei.</p>

  2. <img scr="kucing.jpg">

  3. <h1>Tajuk</h2>

  4. <a href="menu.html">Menu</a>

  5. Untuk SATU perenggan: <p>Ayat pertama.<p>要做「一个」段落：<p>Ayat pertama.<p>

  6. <img src="betik.png" alt="Buah betik">

Istilah名词Maksud (buku teks)意思（课本）
Domain网域（domain）Sekumpulan komputer dan peranti dalam satu rangkaian yang ditadbirkan sebagai satu unit, dengan peraturan dan prosedur yang sama. Domain ditakrif mengikut alamat Internet Protocol (IP). Ini bukan sama dengan nama domain.一个网络里当作一个单位来管理的一组电脑和设备，有一样的规则和程序。网域是按照网际协议（IP）地址来定义的。它和「域名」不是同一样东西。
Nama domain dan URL域名和网址Nama domain digunakan dalam URL (Uniform Resource Locator) untuk mengenal pasti sesuatu laman sesawang. Contoh: www.moe.gov.my. Nama domain ialah nama yang mudah diingat oleh manusia. DNS menukarnya kepada alamat IP. URL pula boleh ada lebih banyak: protokol dan laluan, contohnya https://www.moe.gov.my/index.html.域名用在网址（URL，Uniform Resource Locator）里，用来找出某一个网页。例子：www.moe.gov.my。域名是方便人记忆的名称；DNS 可以把它解析为 IP 地址。URL 还可以包含协议和路径，例如 https://www.moe.gov.my/index.html。
Tapak sesawang网站Satu himpunan fail WWW (World Wide Web) dengan satu laman sesawang utama yang dikenali sebagai homepage.一组 WWW（万维网）文件，有一个叫做首页（homepage）的主页。
Laman sesawang interaktif互动网页Laman dinamik yang membenarkan pelawat berinteraksi, contohnya menghantar komen dan klik pautan.让访客可以互动的动态网页，比如发留言和点链接。

Cuba试试看

Susun langkah membina laman sesawang (buku teks Rajah 4.26)排好建立网站的步骤（课本图 4.26）

Seret langkah ke tempat yang betul, kemudian tekan Semak.把步骤拖到正确的位置，然后按「检查」。

  1. Pilih topik dan tajuk laman sesawang (lakar papan cerita).选择网站的主题和标题（画故事板）。
  2. Kumpulkan maklumat-maklumat.收集资料。
  3. Lancarkan perisian aplikasi Notepad dan tulis kod HTML.打开记事本，写 HTML 代码。
  4. Layari laman sesawang yang telah dibina.浏览已经做好的网页。
  5. Baiki ralat (jika ada).改正错误（如果有）。
  6. Layari Internet dan daftar di tapak sesawang.上网，在网站平台注册。
  7. Muat naik fail.上传文件。
  8. Lawat tapak sesawang yang telah siap dibina.浏览已经建好的网站。
Langkah步骤Apa yang dibuat (nota cikgu)要做什么（老师的笔记）
1. Pilih topik dan tajuk1. 选择主题和标题Fikirkan topik, topik kecil dan tajuk. Lakarkan papan cerita yang lengkap.想好主题、小主题和标题。画一个完整的故事板。
2. Kumpulkan maklumat2. 收集资料Teks, imej, grafik, pautan luaran dan dalaman, serta audio dan video jika perlu.文字、图片、图形、内部和外部链接，需要的话还有音频和视频。
3. Lancarkan Notepad3. 打开记事本Tulis kod HTML yang lengkap: Banner, Menu, Frame, ruangan komen dan pull-down menu.写完整的 HTML 代码：横幅、菜单、框架、留言区和下拉菜单。
4. Layari laman yang dibina4. 浏览做好的网页Klik pada fail HTML yang disimpan.点击存好的 HTML 文件。
5. Baiki ralat (jika ada)5. 改正错误（如果有）Jika output berlainan dengan jangkaan, periksa kod dan baiki ralat.如果输出和预期不一样，检查代码并改正错误。
6. Layari Internet6. 上网Cari dan pilih tapak sesawang yang sesuai, kemudian daftar untuk menggunakannya.找一个合适的网站平台，然后注册来使用它。
7. Muat naik fail7. 上传文件Klik Upload file, kemudian Preview untuk melihat, dan Save untuk menyimpan.按 Upload file 上传，再按 Preview 看一看，最后按 Save 保存。
8. Lawat tapak sesawang8. 浏览网站Pastikan semua pautan dan kandungan berfungsi. Baiki ralat jika ada, dan muat naik semula.确认所有链接和内容都正常。有错误就改正，再上传一次。

Tip peperiksaan考试技巧

Cara hafal 8 langkah (UASA B10): Topik → Kumpul → Notepad → Layari laman → Baiki → Internet → Muat naik → Lawat. Lima langkah pertama dibuat di komputer sendiri; tiga langkah terakhir di Internet.记 8 个步骤的方法（UASA B10）：主题 → 收集 → 记事本 → 浏览网页 → 改错 → 上网 → 上传 → 浏览网站。前五步在自己的电脑上做，后三步在网上做。

Cuba fikir想一想

Cuba fikir: cari ralat HTML想一想：找 HTML 错误

Tekan → untuk langkah seterusnya dan ← untuk undur.按 → 看下一步，按 ← 返回。

Laman tentang buah betik: <img src="bungaraya.jpg"> <!--gambar buah betik-->. Pelayar memaparkan gambar bunga raya! Apakah ralatnya?介绍木瓜的网页：<img src="bungaraya.jpg"> <!--gambar buah betik-->。浏览器显示的却是大红花！错误在哪里？

  1. Dijangka: buah betik. Dipaparkan: bunga raya.预期：木瓜。显示：大红花。
  2. src="bungaraya.jpg" ✗

Jawapan答案: Nama fail salah. Tukar kepada <img src="buahbetik.jpg">.文件名错了。要改成 <img src="buahbetik.jpg">。

  1. Baca soalan. Cuba fikir dahulu sebelum melihat jawapan!读题目。看答案之前，先自己想一想！
  2. Bandingkan apa yang dipaparkan dengan apa yang dijangka.把显示出来的和预期的比较。
  3. Teliti semula kod: nama fail dalam src.再仔细看代码：src 里的文件名。
  4. Komen <!-- … --> tidak dipaparkan, tetapi membantu kita mencari ralat.注释 <!-- … --> 不会显示，但可以帮我们找错误。

Contoh例子 1/3 · Langkah步骤 1/4

Cuba sendiri自己试试

Makmal HTML: taip dan lihatHTML 实验室：打代码，看结果

Kiri ialah Notepad, kanan ialah pelayar web. Taip kod HTML, dan laman berubah serta-merta. Jangan risau tersalah: tekan "Mula semula" untuk kembali.左边是记事本，右边是浏览器。打 HTML 代码，网页马上就会改变。不用怕打错：按「重新开始」就可以回到原来的样子。

Cuba试试看

Laman pertama saya我的第一个网页

Cuba tugas-tugas ini satu demi satu:一个一个试试这些任务：

  1. Tukar teks di dalam <title>. Lihat tab pelayar berubah.改 <title> 里的文字，看浏览器的标签页改变。
  2. Tukar <h1> dan </h1> kepada <h3> dan </h3>. Apa yang berlaku?把 <h1> 和 </h1> 改成 <h3> 和 </h3>。会怎样？
  3. Tambah satu <li> lagi dengan hobi awak sendiri.再加一个 <li>，写你自己的爱好。
  4. Tambah <a href="https://www.moe.gov.my">KPM</a>. Teks itu menjadi biru.加上 <a href="https://www.moe.gov.my">KPM</a>。这些字会变成蓝色。
  5. Tambah <img src="kucing.jpg" alt="Kucing saya">. Tiada fail gambar, jadi teks alt dipaparkan.加上 <img src="kucing.jpg" alt="Kucing saya">。没有这个图片文件，所以会显示 alt 的文字。

Pelayar web浏览器

Kod anda disimpan dalam peranti ini, jadi ia masih ada selepas halaman dimuat semula. "Mula semula" memadamnya.你的代码会存在这台设备里，重新整理网页后还在。按「重新开始」会把它删掉。

Bahagian CC 部分

Cara menjawab "Lengkapkan kod HTML"「完成 HTML 代码」的答法

Langkah menjawab答题步骤

1. Cari kerangka: html, head, title, body.2. Lihat paparan pelayar: teks pada tab → <title>; tulisan besar → <h1>; ayat biasa → <p>; ayat bertitik → <li>; gambar → <img src="…">.3. Tag yang berpasangan mesti ditutup dengan tag akhir yang ada /. Tag kosong seperti <img>, <input>, <frame> dan <br> tiada tag akhir.4. Tutup </body> sebelum </html>.5. Semak ejaan: src, href, tanda petik dan >. 1. 找框架：html、head、title、body。2. 看浏览器的显示：标签页上的字 → <title>；大字 → <h1>；普通句子 → <p>；有圆点的句子 → <li>；图片 → <img src="…">。3. 成对的标签一定要用带 / 的结束标签关上。空标签，比如 <img>、<input>、<frame> 和 <br>，没有结束标签。4. 先关 </body>，再关 </html>。5. 检查拼法：src、href、引号和 >。

Soalan UASA 2022 Bahagian C 2(b): lihat paparan pelayar ini, kemudian lengkapkan kod.UASA 2022 C 部分第 2(b) 题：先看这个浏览器的显示，再完成代码。

Buah Betik

Buah betik mempunyai khasiat untuk sistem penghadaman.

betik.png

Buah Manggis

Buah manggis mempunyai khasiat yang bertindak sebagai anti kanser.

manggis.png

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。

Lengkapkan langkah完成步骤

Lengkapkan kod HTML (UASA C2, 8 markah)完成 HTML 代码（UASA C2，8 分）

Pilih tag bagi setiap tempat kosong.为每个空格选出标签。

Jawapan betul答对: 0 / 8

  1. <html> <head>

  2. < ___ > Buah – buahan Tempatan di Malaysia < ___ >

  3. </head> <body>

  4. < ___ > Buah Betik < ___ >

  5. < ___ > Buah betik mempunyai khasiat untuk sistem penghadaman. < ___ >

  6. < ___ ="betik.png">

  7. < ___ > Buah Manggis < ___ >

  8. < ___ > Buah manggis mempunyai khasiat yang bertindak sebagai anti kanser. < ___ >

  9. < ___ ="manggis.png">

  10. < ___ >

  11. </html>

Nota tentang <li> dalam kertas UASA关于 UASA 试卷里 <li> 的说明

Kertas UASA meletakkan <li> terus di dalam <body>, tanpa <ul>. Untuk soalan ini, jawab seperti skema jawapan. Dalam HTML yang betul, setiap <li> berada di dalam <ul> (atau <ol>), seperti soalan baharu di bawah.UASA 试卷把 <li> 直接放在 <body> 里面，没有 <ul>。这一题要照答案的写法回答。正确的 HTML 里，每个 <li> 都放在 <ul>（或 <ol>）里面，就像下面的新题目一样。

Soalan baharu dalam gaya yang sama. Lihat saiz tulisan dengan teliti!一样题型的新题目。仔细看字的大小！

Catur Cina

Setiap pemain ada 16 buah catur.

catur.png

Mahjong

Mahjong 3 pemain popular di Malaysia.

mahjong.png

Lakaran: begini lebih kurang rupa laman dalam pelayar.草图：网页在浏览器里大概是这个样子。

Lengkapkan langkah完成步骤

Lengkapkan kod HTML: permainan kegemaran saya完成 HTML 代码：我最喜欢的游戏

Pilih tag bagi setiap tempat kosong.为每个空格选出标签。

Jawapan betul答对: 0 / 8

  1. <html> <head>

  2. < ___ > Permainan Kegemaran Saya < ___ >

  3. </head> <body>

  4. < ___ > Catur Cina < ___ >

  5. <ul>

  6. < ___ > Setiap pemain ada 16 buah catur. < ___ >

  7. </ul>

  8. < ___ ="catur.png">

  9. < ___ > Mahjong < ___ >

  10. <ul>

  11. < ___ > Mahjong 3 pemain popular di Malaysia. < ___ >

  12. </ul>

  13. < ___ ="mahjong.png">

  14. < ___ >

  15. </html>

Tip peperiksaan考试技巧

Dalam soalan UASA, "Buah Betik" ditulis dengan saiz biasa, jadi <p>. Dalam soalan baharu, "Catur Cina" ditulis besar, jadi <h1>. Sentiasa lihat paparan pelayar dahulu.在 UASA 题里，「Buah Betik」是普通大小的字，所以用 <p>。在新题里，「Catur Cina」是大字，所以用 <h1>。一定要先看浏览器的显示。

Gaya peperiksaan考试题型

Lengkapkan langkah完成步骤

Soalan UASA B10: lapan langkah membina laman sesawang. Langkah 1, 3, 6 dan 8 sudah diberi. Pilih langkah yang hilang.UASA B10 题：建立网站的八个步骤。第 1、3、6 和 8 步已经给了。选出不见了的步骤。

Lengkapkan langkah完成步骤

Lengkapkan langkah membina laman sesawang (UASA B10)完成建立网站的步骤（UASA B10）

Jawapan betul答对: 0 / 4

  1. Langkah 1: A. Pilih topik dan tajuk laman sesawang.第 1 步：A。选择网站的主题和标题。

  2. Langkah 2: …第 2 步：……

  3. Langkah 3: G. Lancarkan perisian aplikasi Notepad.第 3 步：G。打开记事本。

  4. Langkah 4: …第 4 步：……

  5. Langkah 5: …第 5 步：……

  6. Langkah 6: F. Layari Internet.第 6 步：F。上网。

  7. Langkah 7: …第 7 步：……

  8. Langkah 8: B. Lawat tapak sesawang yang telah siap dibina.第 8 步：B。浏览已经建好的网站。

Lengkapkan langkah完成步骤

Lengkapkan kerangka HTML完成 HTML 框架

Jawapan betul答对: 0 / 7

  1. ___

  2. ___

  3. ___ Laman Saya </title>

  4. ___

  5. ___

  6. <p>Selamat datang!</p>

  7. ___

  8. ___

Uji diri测验自己

Kuiz Bab 4第4章 小测验

Soalan objektif seperti Bahagian A. Pilih satu jawapan.像 A 部分的选择题。选一个答案。

Jawapan betul答对: 0 / 12

  1. Soalan题目 1 HTML ialah singkatan bagi …HTML 是什么的简称？

  2. Soalan题目 2 Tag HTML ditulis dalam kurungan …HTML 标签写在什么括号里？

  3. Soalan题目 3 Perisian aplikasi yang digunakan oleh buku teks untuk menaip kod HTML ialah …课本用来打 HTML 代码的应用软件是……

  4. Soalan题目 4 Apakah tag yang memaparkan teks pada tab pelayar web?哪一个标签会把文字显示在浏览器的标签页上？

  5. Soalan题目 5 Tag heading yang manakah memaparkan tulisan yang paling besar?哪一个标题标签显示的字最大？

  6. Soalan题目 6 Pilih kod yang betul untuk memasukkan imej.选出插入图片的正确代码。

  7. Soalan题目 7 Warna yang biasa digunakan untuk teks pautan ialah …链接文字通常是什么颜色？

  8. Soalan题目 8 Tag manakah yang menghasilkan pull-down menu?哪一个标签可以做出下拉菜单？

  9. Soalan题目 9 <frameset cols="*,*,*"> membahagikan skrin kepada …<frameset cols="*,*,*"> 会把屏幕分成……

  10. Soalan题目 10 Teks di dalam <!-- … --> …<!-- … --> 里面的文字……

  11. Soalan题目 11 Langkah pertama membina laman sesawang ialah …建立网站的第一个步骤是……

  12. Soalan题目 12 Antara berikut, yang manakah BUKAN format imej yang biasa digunakan dalam HTML?下面哪一个「不是」HTML 常用的图片格式？

Ringkasan总结

Nota ringkas Bab 4第4章 重点笔记

Topik题目Perkara penting重点
HTMLHyperText Markup Language. Tulis dalam Notepad, simpan sebagai .html, buka dengan pelayar web.HyperText Markup Language。用记事本写，存成 .html，用浏览器打开。
Kerangka框架<html> <head> <title> </title> </head> <body> … </body> </html>
Teks文字<p> perenggan. <h1> paling besar hingga <h6> paling kecil. <ul> + <li> senarai bertitik.<p> 段落。<h1> 最大到 <h6> 最小。<ul> + <li> 圆点列表。
Imej图片<img src="…" alt="…">. Tiada tag akhir. Format: .gif, .jpg, .png.<img src="…" alt="…">。没有结束标签。格式：.gif、.jpg、.png。
Pautan链接<a href="…">teks</a> = pautan teks. <a href="…"><img …></a> = pautan imej.<a href="…">文字</a> = 文字链接。<a href="…"><img …></a> = 图片链接。
Banner, frame, menu横幅、框架、菜单<banner>. <frameset rows> melintang, <frameset cols> menegak. <nav> <ul> <li> <a>.<banner>。<frameset rows> 横的，<frameset cols> 直的。<nav> <ul> <li> <a>。
Borang表单<select> + <option> = pull-down menu. <form> + <textarea> + <input type="submit"> = ruang komen.<select> + <option> = 下拉菜单。<form> + <textarea> + <input type="submit"> = 留言区。
Komen注释<!-- … --> tidak dipaparkan.<!-- … --> 不会显示。
Ralat错误Uji lari → bandingkan → teliti kod → baiki.运行 → 比较 → 检查代码 → 改正。
Bina laman建网站Topik → Kumpul → Notepad → Layari → Baiki → Internet → Muat naik → Lawat.主题 → 收集 → 记事本 → 浏览 → 改错 → 上网 → 上传 → 浏览网站。