网页编写基础
基础网页以超文本标示语言（HTML）编写，由成对标签标明标题、段落、清单与超连结等内容；可用纯文字编辑器或所见即所得编辑器制作，完成后上载到网页伺服器发布。
- 网页是 HTML 档案，浏览器按标签解读并渲染成版面。
- 标签成对出现，开始标签内可写属性提供额外资讯。
- 常用标签各司其职：h 标题、p 段落、ul 与 li 清单、a 超连结、img 图像。
文体小知识：科技知识说明文——介绍网页的超文本标示语言结构与常用标签，并说明网页由编写、测试到发布的流程。
§课文原文 Passage
1网页是一个以超文本标示语言（HTML）编写的档案。浏览器取得 HTML 档案后，按其中的标签解读内容，再把标题、段落、图像与连结渲染成用户所见的版面。多个相关网页连结在一起便组成网站，网站的首个页面一般称为主页。
2HTML 的基本单位是标签：开始标签与结束标签成对出现，把内容包在中间，例如以 p 标签包住一段文字；标签还可以附带属性，提供额外资讯，例如超连结的目标网址。标签可以层层套叠，构成整页的结构。
3常用标签各有职责：标题标签按重要性分六级；段落标签划分文字；清单标签建立项目符号或编号列表；超连结标签以属性指明目的地，令网页之间可以跳转；图像标签以属性指明图片来源与替代文字。
4编写网页有两条路径：一是用纯文字编辑器直接输入标签，掌握透彻、档案精简，但初学较难；二是用所见即所得编辑器，一边排版一边自动产生 HTML，容易上手，但产生的档案有时较冗赘，亦可能掩盖底层原理。
5网页做好后要经过储存、测试与发布三步：以 htm 或 html 副档名储存；先在本机用浏览器开启测试版面与连结；最后利用档案传输软件把档案上载到网页伺服器，全世界才能透过网址浏览，发布后仍应定期检查连结与内容。
1重点摘要 Summary
网页以超文本标示语言（HTML）编写，由成对标签标明标题、段落、清单与超连结等内容；可用纯文字编辑器或所见即所得编辑器制作，完成后上载到网页伺服器发布。
2生字卡 Vocabulary
以标签标明网页内容与结构的语言，是编写网页的基础。
HTML 中标明内容性质的记号，开始与结束标签成对出现，例如标题标签与段落标签。
写在开始标签内的额外资讯，例如超连结的目标网址、图像的来源档案。
网页之间或页内位置的跳转连结，以连结标签配合目标网址属性设定。
向伺服器索取网页并把 HTML 渲染成版面供用户观看的软件。
网站的入口页面，通常载有网站简介与通往各分页的连结。
编辑时的画面与最终网页效果一致的编写工具，排版同时自动产生 HTML。
只处理纯文字的工具，可直接输入 HTML 标签，档案精简而可控。
图像无法显示或供读屏软件使用的描述文字，写在图像标签的属性中，是无障碍设计的一环。
把本机档案传送到伺服器的过程，网页完成后须上载到网页伺服器才能发布。
3逐步讲解 Steps
- 第一步：网页的运作原理网页本质是一个文字档案，内容是以超文本标示语言写成的标签与文字。用户在浏览器输入网址后，浏览器向网页伺服器索取 HTML 档案，按标签的指示把标题、段落、图像与连结渲染成版面；多个网页以超连结串连，便组成一个网站。举个例子：同一个档案，用纯文字编辑器开启见到标签原文，用浏览器开启则见到排版完成的画面，正好说明标签是写给浏览器解读的指示。
- 第二步：标签与属性的结构HTML 标签成对出现：开始标签与结束标签以斜线区分，内容包在中间，例如段落标签包住一段文字。开始标签内可以写属性，以名称加数值的形式提供额外资讯；属性常用于超连结的目的地与图像的来源。整页骨架由 html、head、body 三层标签组成：head 内存放网页标题等元资料，body 内是用户看见的内容。举个例子：忘写结束标签时，浏览器可能把后续内容一并当作该标签的内容，版面便错乱。
- 第三步：文字内容与清单标签文字内容有专职标签：标题标签按重要性由一级到六级，一级最大；段落标签划分段落；粗体与斜体标签强调文字。清单分两种：项目符号清单以 ul 标签包住整个清单，每项用 li 标签；编号清单则以 ol 标签包住，同样逐项用 li。举个例子：撰写活动网页时，活动名称用一级标题，简介用段落，报名须知逐项列出便用项目符号清单，步骤性内容则宜用编号清单，令读者一目了然。
- 第四步：超连结与图像标签超连结以 a 标签建立，href 属性填上目标网址或档案，标签中间的文字是呈现给用户的连结文字；目标可以是指向其他网站的外部连结，也可以是指向同站其他网页的内部连结。图像以 img 标签插入，src 属性指明图片档案来源，alt 属性提供替代文字，供图像无法显示时呈现及供读屏软件朗读。举个例子：连结写成 a 标签包住「校历」，href 指向 calendar.html；校徽图片则以 img 标签插入，并附上「学校校徽」的替代文字。
- 第五步：纯文字编辑器与所见即所得编辑器编写网页的工具分两类。纯文字编辑器要求直接输入标签，好处是对 HTML 原理理解透彻、档案精简、修改可控，适合考试与专业用途；所见即所得编辑器让用户如排版软件般拖放内容，自动产生 HTML，上手容易、效率高，但产生的档案可能冗赘，且长期依赖会妨碍理解底层语法。举个例子：文凭试要求写出标签，靠所见即所得工具便无从入手，故学习阶段宜先用纯文字编辑器打好基础。
- 第六步：由编写到测试完成编写后，先以 htm 或 html 副档名储存档案，再在本机用浏览器开启测试：检查标题与段落是否正确呈现、清单有否错位、超连结能否跳到正确目标、图像有否正常显示；不同浏览器的渲染略有差异，宜至少用两款浏览器核对。发现问题便回到编辑器修正标签，再储存再测试，循环直至满意。举个例子：连结在原来电脑正常、上载后失效，常见原因是路径大小写不符或档案未曾一并上载。
- 第七步：发布与网页品责测试完成后便要发布：以档案传输软件把网页与相关图像、样式档案一并上载到网页伺服器，之后全世界才能透过网址浏览；网站内容更新后也要重新上载。发布前后还须注意品质：内容准确、版面清晰、连结有效，图像附替代文字照顾无障碍需要，引用他人文字或图片须先取得授权，尊重知识产权。举个例子：把网页存于本机而未上载，其他人无论输入甚么网址都无法浏览，可见上载是发布的关键一步。
5例题示范 Example
应用题：学生会要制作一页活动报名网页，内容包括浏览器标题列文字「学会活动日」、一级标题「学会活动日」、一段简介、两项活动的项目符号清单，以及通往报名表格 signup.html 的超连结文字「立即报名」。试写出完整的 HTML 片段。
- 定出整页骨架：以 html 标签包住全页，内分 head 与 body 两部分；head 内以 title 标签设定浏览器标题列文字「学会活动日」。
- 加入标题与段落：在 body 内以 h1 标签写出一级标题「学会活动日」，以 p 标签包住简介文字。
- 制作清单：以 ul 标签建立项目符号清单，两项活动各自以 li 标签列出一行。
- 加入超连结：以 a 标签建立连结，href 属性填上 signup.html，标签内容写上连结文字「立即报名」。
- 答案：完整片段：<html><head><title>学会活动日</title></head><body><h1>学会活动日</h1><p>欢迎全体同学参加，费用全免。</p><ul><li>上午：程式设计工作坊</li><li>下午：机械人示范</li></ul><a href='signup.html'>立即报名</a></body></html>。要点：title 在 head 内影响标题列；h1 与 p 在 body 内呈现内容；ul 配 li 建立项目符号清单；a 标签以 href 属性指向报名表格。
6常见错误 Mistakes
75 题快测 Quick check
Q1HTML 的全写是甚么？它的作用是甚么？
Q2建立超连结要用哪个标签？目的地写在哪个属性？
Q3img 标签的 alt 属性有甚么用途？
Q4纯文字编辑器与所见即所得编辑器各有甚么优点？
Q5网页完成测试后，要经过哪一步才能让其他人透过网址浏览？
8重点回顾 Recap
- 网页是 HTML 档案，浏览器按标签解读并渲染成版面。
- 标签成对出现，开始标签内可写属性提供额外资讯。
- 常用标签各司其职：h 标题、p 段落、ul 与 li 清单、a 超连结、img 图像。
- 纯文字编辑器练基础，所见即所得编辑器求效率；考试须能手写标签。
- 发布三步：储存为 html、本机测试、上载到网页伺服器，并注意无障碍与版权。