初阶网页编写：构建网站的第一步！
大家好！你有没有想过你最喜欢的网站是如何建成的？这看起来可能像变魔术一样，但其实一切都从一种叫做 HTML 的东西开始。在本章中，我们将揭开这层神秘面纱，学习网页编写的基础知识。
把自己想象成一位建筑师吧，不过你设计的不是建筑物，而是网页的结构。这是一项超级实用的技能，也是整个互联网的基础！如果你从未编写过程序，也不用担心——我们会把所有内容分解成简单易懂的步骤。让我们开始吧！
第一部分：什么是 HTML？网络的骨架
你浏览的每个网站都是使用一种叫做 HTML 的语言建成的。但它究竟是什么？
HTML 的含义
HTML 是 超文本标记语言 (HyperText Markup Language) 的缩写。让我们来拆解一下：
- 超文本 (HyperText)： 这指的是包含指向其他文本链接的文本。正是这个“超”字，让你点击链接时能够从一个页面跳转到另一个页面。这也让万维网成为一个由相互连接的页面组成的“网络”！
- 标记语言 (Markup Language)： 这意味着它是一种使用称为 标签 (tags) 的特殊标记来描述页面结构和内容的语言。它“标记”了文本。
比喻：你可以这样想：如果一个网页是一个人，那么 HTML 就是它的骨架。它赋予身体基本的形状和结构。它决定了“这是头”、“这是手臂”和“这是腿”。它不负责漂亮的衣服或发型——那是另一种语言的事。HTML 完全关乎结构。
标签：HTML 的组成部分
HTML 透过使用 标签 来运作。这些是包含在角括号中的关键字，例如 <p>。大多数标签都是成对出现的：
- 开启标签： <p> (这表示：“一个段落从这里开始。”)
- 关闭标签： </p> (这表示：“段落在这里结束。”斜线 (/) 是主要的区别！)
你放在开启标签和关闭标签之间的任何内容都会受到该标签的影响。
例子：<b>这段文字将会是粗体。</b>
解决跨平台问题
为什么 HTML 如此重要？因为它是一个通用标准！用 HTML 编写的网页可以在任何操作系统 (例如 Windows、macOS、iOS 或 Android) 上的任何网页浏览器 (例如 Chrome、Firefox 或 Safari) 中正确显示。这就是我们所说的解决 跨平台问题。你只需编写一次程序，它就能在所有地方运行。这是一个巨大的优势！
你知道吗？
HTML 是由 Tim Berners-Lee 爵士在 1991 年创建的。他不仅发明了 HTML；他还发明了万维网本身！他希望科学家们能够轻松地在全球分享资讯。
第一部分重点总结
HTML (超文本标记语言) 使用 标签 来赋予网页其结构。它是创建网页的标准语言，并适用于所有平台。
第二部分：辨认基本 HTML 结构
好消息是，你的考试不需要记住 HTML 程序！你只需要辨认这些基本组成部分的作用即可。让我们看看一些常见的例子。
标题和段落：组织文本
- 标题 就像书中的章节标题和副标题。它们使用从 <h1> (最重要) 到 <h6> (最不重要) 的标签。
- 段落 用于一般的文本区块。它们使用 <p> 标签。
- 粗体 和 斜体 文字使用 <b> 和 <i> 标签来增加强调效果。
链接：连接网络
链接，或称超链接，是网络的核心。它们使用 <a> 标签来创建，其中“a”代表“锚点 (anchor)”。该标签需要一个名为 href (超文本引用) 的属性来指定链接目标。
例子：要创建一个指向香港考试及评核局 (HKEAA) 网站的链接，程序会是这样：
<a href="https://www.hkeaa.edu.hk">点击这里访问香港考试及评核局</a>
多媒体元素：加入图像、视频和声音
只有文字的网页会很沉闷！我们使用多媒体标签来让网页生动起来。
- 图像： <img> 标签用于显示图像。它有一个 src (来源) 属性，告诉浏览器在哪里找到图像文件。注意：`` 是一个特殊的标签，不需要关闭标签！
例子：<img src="my_cat.jpg">
- 音频和视频： 现代 HTML 具有简单的标签，如 <audio> 和 <video>，让你可以直接将媒体播放器嵌入到网页中。
表格：组织数据
当你需要以网格形式显示数据时，例如时间表或价格列表，你会使用 表格。
- 整个表格都包围在 <table> 标签中。
- 每行都使用 <tr> (表格行) 标签创建。
- 行内的每个单元格都使用 <td> (表格数据) 标签创建。
比喻：想象一下用乐高积木来搭建网格。` 有时你可能想在一个网页中显示另一个网页。这可以通过使用 框架 来实现。现代的做法是使用 <iframe> 标签。 真实世界例子：当你在新闻网站上看到嵌入的 YouTube 视频时，那就是 <iframe> 在发挥作用！它将 YouTube 网站的一部分直接加载到新闻页面中。 HTML 为不同内容类型设有特定的标签：<h1> 用于标题，<p> 用于段落，<a> 用于链接，<img> 用于图像，以及 <table> 用于数据网格。你应该能够辨认每个标签的作用。 一个出色的网站不仅仅关乎正确的程序；它还必须让访客容易且愉快地使用。这意味着要考虑你的 目标受众。 使用者应该能够轻松找到他们正在寻找的内容，而不会迷失方向。这是首要任务！ - 链接的逻辑放置： 重要的链接应归类到导览菜单中，通常位于页面的顶部或侧面。 - 保持一致： 网站上每个页面的导览菜单看起来应该一样。 - 清晰的标签： 链接的命名应该清晰明确。例如，使用“联络我们”而不是一些模糊的词语，如“更多资讯”。 你为谁构建这个网站？答案会改变一切！ - 例子 1：一个为小学而设的网站。 你会使用背景设计，搭配明亮、友好的颜色。字体大小会较大且易于阅读。你会使用大量的图像和简单的语言。 - 例子 2：一个为大学图书馆而设的网站。 颜色组合会更专业、严谨 (例如蓝色、灰色、白色)。字体风格会简洁而学术。重点将放在组织良好的数据表格和强大的搜索功能上。 - 颜色与对比： 确保你的文字颜色与背景颜色形成鲜明对比 (例如，白色背景上的深灰色文字很好；黄色背景上的白色文字则很糟糕)。 - 字体风格和大小： 不要使用太多不同的字体。坚持使用一两种易于阅读的字体。确保字体足够大，以便舒适阅读。 - 多媒体的放置： 使用图像和视频来辅助你的文字，而不是分散读者注意力。将它们放置在相关信息的附近。 - 布局混乱，一次性呈现太多信息。 - 恼人的自动播放背景音乐。 - 使用颜色冲突或使文字难以阅读的配色。 - 损坏的链接或无法加载的图像。 一个好的网站应该组织良好、易于导览，并为其 目标受众 进行周到设计，从颜色、字体到链接和图像的放置都应一并考虑。 好的，你已经在电脑上创建了 HTML 文件。那么，如何将它们上传到网上，让所有人都能看到？主要有三个步骤。 1. 获取一个域名。 这是你的网站独特的互联网地址，例如 www.google.com。你通常需要注册并支付年费才能获得它。 2. 寻找网页托管公司。 网页托管公司是拥有强大电脑 (称为 服务器) 的公司。这些服务器全天候 24 小时连接到互联网。你租用这些服务器上的一小部分空间来储存你的网站文件。 3. 上传你的文件。 使用一个特殊程序 (通常是 FTP 客户端程序)，你连接到你的网页托管公司的服务器，并将你的 HTML 文件、图像和其他资源从你的电脑复制到服务器。一旦文件上传到服务器上，世界上任何人都可以透过你的域名浏览你的网站！ 要发布一个网站，你需要一个 域名 (地址) 和 网页托管 (服务器上的储存空间)。然后，你将文件 上传 到服务器，使它们可以在万维网上被访问。 * thinka提供的内容由AI生成，可能并非总是准确或最新。请将其用作辅助资源，并与官方材料进行核实。` 是你的底板，每个 `
` 都是一排新的积木，而每个 ` ` 则是该行中的一个独立积木。 框架：通往另一页的窗口
第二部分重点总结
第三部分：为受众设计网页
易于导览
思考你的受众
良好设计实践
应避免的常见错误
第三部分重点总结
第四部分：将你的网站上传至万维网
逐步教学：让网站上线
比喻：域名就像你家的邮寄地址。它告诉人们在哪里可以找到你。
比喻：如果域名是你的地址，那么网页托管就是该地址上的一块土地，你将在那里建造你的房子。第四部分重点总结