Jawapan · Papan cerita & langkah答案 · 故事板与步骤

Faham dengan cara mudah用简单的话理解

Sebelum membina halaman, kita boleh melukis kotak untuk tajuk, menu, gambar dan teks. Lakaran ini menunjukkan apa yang akan dilihat oleh pembaca tanpa perlu menulis kod dahulu.建网页之前，可以先画出标题、菜单、图片和文字的位置。还没写代码，就能看出读者将看到什么。

Apabila lakaran halaman disusun bersama dengan hubungan pautannya, kita mendapat papan cerita laman sesawang. Ia menjadi panduan semasa membina kandungan dan susun atur sebenar.把各页面的草图和它们之间的链接关系整理在一起，就是网页故事板。之后制作实际内容和布局时，就可以照这个规划进行。

Faham dengan cara mudah用简单的话理解

Contohnya, lakaran Utama dan Jadual membolehkan kita melihat bahawa dua halaman perlu dibina. Inilah kegunaan papan cerita untuk merancang bilangan halaman.例如，画出 Utama 和 Jadual 两页，就能看出需要制作两个页面。这是故事板规划页面数量的用途。

Kemudian lukis pautan dari Utama ke Jadual. Anak panah itu menunjukkan cara pembaca bergerak antara halaman. Ini kegunaan kedua: merancang aliran pautan sebelum menulis kod.再画出从 Utama 到 Jadual 的链接箭头，就知道读者如何在页面间移动。这是第二个用途：写代码前规划链接流程。

Faham dengan cara mudah用简单的话理解

Dalam tutorial ini, Seterusnya membawa kita ke halaman selepasnya dan Sebelum membawa kita ke halaman sebelumnya. Kita mengikuti satu susunan, bukannya terus memilih mana-mana topik.这个教程中，Seterusnya 带你到后一页，Sebelum 带你回前一页。读者沿着一个固定顺序移动，而不是任意跳到某个主题。

Bayangkan halaman tersusun dalam satu barisan, dengan pautan ke jiran di depan atau belakang. Bentuk laluan ini dipanggil struktur linear; boleh bergerak ke belakang tidak mengubahnya menjadi struktur roda.想象页面排成一条线，只连到前后相邻的页面。这叫线性结构（linear）；能往回走，也不会因此变成轮状结构。

Faham dengan cara mudah用简单的话理解

Bayangkan mahu berpindah dari satu topik ke topik lain. Soalan menyatakan kita mesti kembali ke laman utama dahulu, jadi tiada jalan terus antara dua topik itu.想象要从一个主题换到另一个主题。题目规定必须先回主页，所以两个主题之间没有直达链接。

Lukis utama di tengah dan halaman topik di sekeliling, masing-masing bersambung ke utama. Coraknya seperti pusat dan jejari roda, maka istilahnya struktur roda.把主页画在中间，主题页围在周围，各自连接主页。这个图像轮子的中心和辐条，因此叫轮状结构（roda）。

Faham dengan cara mudah用简单的话理解

Mulakan dengan Utama di atas. Dalam contoh jawapan, Utama bercabang kepada Muzik dan Permainan; di bawah Muzik ada Album, dan di bawah Permainan ada Catur.先把 Utama 放在上方。按示例答案，它分到 Muzik 和 Permainan；Muzik 下再放 Album，Permainan 下再放 Catur。

Lukis anak panah Utama → Muzik → Album dan Utama → Permainan → Catur. Jangan tambah pautan antara dua cabang kerana soalan melarang pautan silang. Susunan dari umum ke khusus ini dipanggil cabang dalam istilah kelas ini.画出 Utama → Muzik → Album 和 Utama → Permainan → Catur。题目说没有交叉链接，所以不要连接两条分支。这种从概括到具体的结构，在本课堂叫 cabang。

Faham dengan cara mudah用简单的话理解

Pengguna mungkin mahu menulis komen yang panjang hingga beberapa baris. textarea menyediakan kawasan menaip berbilang baris untuk teks itu.用户可能要写一段有好几行的留言。textarea 就提供能够输入多行文字的区域。

form mengumpulkan ruangan borang, termasuk textarea, untuk tujuan penghantaran. Jadi textarea ialah kotak menulis komen dan form ialah borangnya; form bukan jadual yang menyusun data dalam baris dan lajur.form 把 textarea 等输入区域组织成可提交的表单。所以 textarea 是写留言的框，form 是整个表单；form 不是用行列排列资料的表格。

Faham dengan cara mudah用简单的话理解

Bayangkan membuka satu menu untuk memilih satu perkara daripada beberapa pilihan. select membina kawalan menu yang mengumpulkan pilihan itu.想象打开一个菜单，从几项内容中选择一项。select 创建这个把各个选项放在一起的菜单控件。

Setiap pilihan ditulis dalam option sendiri di dalam select. Jika menu ada Catur dan Muzik, perlu satu select dengan dua option, supaya kedua-duanya boleh dipilih secara berasingan.每个选项各写在一个 option 中，再放进 select。例如菜单有 Catur 和 Muzik，就需要一个 select 和两个 option，才能把它们列成两个独立选项。

Faham dengan cara mudah用简单的话理解

Butang submit memulakan penghantaran borang apabila diklik, tetapi perkataan submit tidak memberitahu sistem bahawa penerimanya ialah guru.点击 submit 按钮可以发起表单提交，但 submit 这个词本身并没有告诉系统接收者是老师。

Borang perlu mempunyai destinasi yang betul dan fungsi yang menerima serta memproses mesej. Tanpa bahagian itu, butang yang kelihatan pada skrin tidak membuktikan bahawa guru akan menerima komen.表单还需要正确的提交目的地，以及接收和处理留言的功能。缺少这些，屏幕上出现按钮，并不能证明老师会收到留言。

Faham dengan cara mudah用简单的话理解

Mula-mula buka halaman dalam pelayar supaya ada hasil yang boleh diperiksa. Bandingkan hasil itu dengan kehendak soalan; barulah kita tahu bahagian yang salah.先在浏览器打开网页，才有实际效果可以检查。把效果与题目要求比较，才能知道哪里不对。

Selepas mengenal pasti masalah, teliti kod yang berkaitan dan baikinya. Kemudian buka atau muat semula halaman untuk menguji semula. Kitaran nyahpepijat ini selesai hanya apabila hasil pembaikan telah diperiksa.找到问题后，再检查相关代码并修正。接着重新打开或刷新网页测试。调试这一轮要到检查过修改效果后才算完成。

Faham dengan cara mudah用简单的话理解

Selepas muat naik, pembaca membuka alamat diterbitkan, bukan fail dalam komputer kita. Oleh itu, pemeriksaan mesti dibuat pada alamat yang akan digunakan pembaca.上传后，读者打开的是发布地址，不是你电脑里的文件。所以要到读者实际访问的地址检查。

Klik pautan, lihat sama ada imej muncul, baca kandungan dan semak susun atur. Contohnya, imej yang tertinggal semasa muat naik boleh muncul di komputer sendiri tetapi hilang di laman diterbitkan.点击链接、查看图片是否出现、阅读内容并检查布局。例如，上传时漏掉的图片，在自己电脑上可能正常，在发布网页上却会缺失。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 1: Sebelum ada fail halaman, tentukan perkara yang hendak diceritakan dan tempat tajuk, teks serta imej. Pilih topik dan tajuk, kemudian rancang papan cerita supaya kita tahu apa yang perlu dibina.按本题的课堂顺序，第 1 步：还没建立网页文件时，先想清楚要讲什么，以及标题、文字和图片放哪里。选择主题和标题，再规划故事板，才知道接下来要制作什么。

Langkah 3: Bahan sahaja belum menjadi halaman tersusun. Tulis kod dalam editor teks untuk menandakan tajuk, perenggan dan imej, kemudian simpan sebagai fail HTML supaya hasilnya boleh dibuka sebagai halaman dalam pelayar.第 3 步：素材本身还不是排好结构的网页。要在文本编辑器写代码，标出标题、段落和图片，再存成 HTML 文件，才能在浏览器中作为网页打开。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 2: Papan cerita sudah menunjukkan bahan yang diperlukan. Kumpulkan teks dan imej itu sekarang supaya ada kandungan sebenar untuk dimasukkan apabila kod halaman ditulis.按本题的课堂顺序，第 2 步：故事板已经列出需要哪些素材。现在收集文字和图片，之后写网页代码时，才有实际内容可以放进去。

Langkah 4: Fail HTML sudah ditulis, tetapi melihat kod sahaja belum menunjukkan hasil kepada pembaca. Buka fail dalam pelayar untuk melihat sama ada tajuk, teks dan imej muncul seperti yang dirancang.第 4 步：HTML 文件已经写好，但只看代码还看不到读者眼中的效果。用浏览器打开，才能检查标题、文字和图片是否按计划出现。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 3: Bahan sahaja belum menjadi halaman tersusun. Tulis kod dalam editor teks untuk menandakan tajuk, perenggan dan imej, kemudian simpan sebagai fail HTML supaya hasilnya boleh dibuka sebagai halaman dalam pelayar.按本题的课堂顺序，第 3 步：素材本身还不是排好结构的网页。要在文本编辑器写代码，标出标题、段落和图片，再存成 HTML 文件，才能在浏览器中作为网页打开。

Langkah 5: Jika hasil dalam pelayar tidak sepadan dengan rancangan, cari puncanya dalam kod atau fail. Baiki ralat, kemudian muat semula dan uji lagi; perubahan kod perlu diperiksa untuk memastikan masalah benar-benar selesai.第 5 步：如果浏览器中的效果与计划不同，就从代码或文件中找原因。修正错误后刷新并重测；必须检查修改后的结果，才能确认问题确实解决。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 4: Fail HTML sudah ditulis, tetapi melihat kod sahaja belum menunjukkan hasil kepada pembaca. Buka fail dalam pelayar untuk melihat sama ada tajuk, teks dan imej muncul seperti yang dirancang.按本题的课堂顺序，第 4 步：HTML 文件已经写好，但只看代码还看不到读者眼中的效果。用浏览器打开，才能检查标题、文字和图片是否按计划出现。

Langkah 6: Halaman sudah diuji pada komputer sendiri. Untuk membolehkannya dicapai melalui Internet, pilih penyedia pengehosan dan daftar jika perlu. Langkah ini menyediakan tempat yang akan menerima fail semasa muat naik.第 6 步：网页已经在自己电脑上测试过。要让别人通过互联网访问，需要选择托管服务，并按需要注册。这一步准备好下一步上传文件所需的存放空间。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 5: Jika hasil dalam pelayar tidak sepadan dengan rancangan, cari puncanya dalam kod atau fail. Baiki ralat, kemudian muat semula dan uji lagi; perubahan kod perlu diperiksa untuk memastikan masalah benar-benar selesai.按本题的课堂顺序，第 5 步：如果浏览器中的效果与计划不同，就从代码或文件中找原因。修正错误后刷新并重测；必须检查修改后的结果，才能确认问题确实解决。

Langkah 7: Ruang pengehosan sudah tersedia, tetapi fail masih berada pada komputer sendiri. Muat naik fail halaman dan bahan yang diperlukan, termasuk imej, supaya pelayan mempunyai kandungan untuk dipaparkan.第 7 步：托管空间已经准备好，但文件还在自己的电脑上。把网页和图片等所需素材上传，服务器才有内容可以提供给读者。

Faham dengan cara mudah用简单的话理解

Dalam urutan kelas ini, langkah 6: Halaman sudah diuji pada komputer sendiri. Untuk membolehkannya dicapai melalui Internet, pilih penyedia pengehosan dan daftar jika perlu. Langkah ini menyediakan tempat yang akan menerima fail semasa muat naik.按本题的课堂顺序，第 6 步：网页已经在自己电脑上测试过。要让别人通过互联网访问，需要选择托管服务，并按需要注册。这一步准备好下一步上传文件所需的存放空间。

Langkah 8: Fail sudah dimuat naik, jadi cuba alamat diterbitkan seperti seorang pembaca. Klik pautan dan periksa imej serta kandungan di situ; pemeriksaan ini boleh mengesan fail yang tertinggal atau laluan yang salah selepas penerbitan.第 8 步：文件已经上传，就像读者一样打开发布地址，点击链接并检查图片和内容。这样能发现发布后漏掉的文件或写错的路径。

Faham dengan cara mudah用简单的话理解

Kita mahu satu menu yang menawarkan dua pilihan berasingan: Catur atau Muzik. select ialah bekas menu itu; setiap option mewakili satu pilihan.我们要做一个菜单，里面有 Catur 和 Muzik 两个独立选项。select 是菜单容器，每个 option 代表其中一个选项。

Letakkan Catur dalam option pertama dan Muzik dalam option kedua, kedua-duanya di dalam select. Dengan satu select dan dua option, pelayar boleh memaparkan satu kawalan pilihan dengan kedua-dua nama itu.第一个 option 写 Catur，第二个写 Muzik，两者都放进 select。一个 select 配上两个 option，就能让浏览器显示包含这两个名称的选择控件。

Faham dengan cara mudah用简单的话理解

Bayangkan pengguna perlu satu tempat menaip komen dan satu butang untuk menghantarnya. textarea menyediakan ruang berbilang baris; input jenis submit menyediakan butang yang berlabel Hantar melalui value.想象用户需要一个写留言的地方，以及一个提交按钮。textarea 提供多行输入区域；submit 类型的 input 提供按钮，value 把按钮上的文字设为 Hantar。

Letakkan kedua-duanya dalam form supaya tergolong dalam borang yang sama. label Komen dipadankan dengan id komen pada textarea melalui for="komen", jadi jelas ruangan mana untuk menulis komen.把两者放进 form，让它们属于同一张表单。Komen 标签的 for="komen" 与 textarea 的 id komen 对应，说明这个输入框用来写留言。

Ini hanya rangka paparan yang diminta. Butang Hantar tidak menjamin komen diterima oleh sesiapa; penghantaran sebenar masih memerlukan destinasi dan pemprosesan yang berfungsi.这只是题目要求的页面结构。出现 Hantar 按钮不保证有人收到留言；真正提交还需要有效的目的地和处理功能。

Faham dengan cara mudah用简单的话理解

Bayangkan halaman Kelab Catur yang akan dilihat pembaca. Tulis tajuk Kelab Catur di atas dan letakkan menu Utama/Jadual berhampirannya supaya pembaca tahu topik halaman dan tempat memilih halaman lain.想象读者打开 Kelab Catur 网页。上方写 Kelab Catur 标题，附近放 Utama/Jadual 菜单，让读者知道页面主题，也知道从哪里切换页面。

Di bawahnya, lukis satu kotak berlabel Imej catur dan satu ruang perenggan. Papan cerita hanya memerlukan lakaran berlabel; tidak perlu melukis gambar catur secara terperinci.下方画一个标着 Imej catur 的图片框，再留一块段落区域。故事板需要的是清楚标记的草图，不必把象棋图片画得很细。

Jadual dalam menu ialah pautan, jadi lukis anak panah Jadual → jadual.html seperti contoh jawapan. Semak lima perkara: tajuk, menu, imej, perenggan dan petunjuk destinasi pautan. Anak panah menerangkan ke mana pembaca pergi selepas klik.菜单里的 Jadual 是链接，所以按示例画出 Jadual → jadual.html 的箭头。检查五项：标题、菜单、图片、段落和链接目的地标记。箭头说明读者点击后去哪里。

Faham dengan cara mudah用简单的话理解

Ikut urutan nota kelas yang digunakan dalam soalan ini. Mula dengan B: kumpul maklumat supaya ada bahan. Kemudian E: susun bahan dari umum ke khusus. Selepas itu D: tentukan tajuk dan isi halaman berdasarkan bahan yang sudah tersusun.按本题采用的课堂笔记顺序，先做 B：收集资料，有了材料才可整理。再做 E：从概括到具体整理。之后做 D：根据整理好的材料确定标题和页面内容。

Apabila halaman sudah dikenal pasti, F menentukan hubungan pautannya. Kemudian A mereka menu untuk menggunakan pautan itu, dan G merancang rupa serta warna halaman.确定有哪些页面后，F 规划它们的链接关系。接着 A 设计使用这些链接的菜单，再用 G 规划页面外观和颜色。

Akhir sekali C melakar keseluruhan aliran pautan supaya perjalanan antara halaman dapat dilihat. Gabungan urutan ini ialah B → E → D → F → A → G → C; ia urutan yang ditetapkan nota kelas, bukan satu-satunya cara merancang semua laman.最后 C 把完整链接流程画出来，让人看清页面间的路线。合起来就是 B → E → D → F → A → G → C。这是课堂笔记指定的顺序，不是规划所有网站的唯一做法。