初階網頁編寫：建構網站的第一步！
大家好！你有沒有想過你最喜歡的網站是如何建成的呢？這看起來可能像變魔術一樣，但其實一切都由一種叫做 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 檔案、圖像和其他資源從你的電腦複製到伺服器。一旦檔案上傳到伺服器上，世界上任何人都可以透過你的網域名稱瀏覽你的網站！
要發佈一個網站，你需要一個 網域名稱 (地址) 和 網頁寄存 (伺服器上的儲存空間)。然後，你將檔案 上傳 到伺服器，使它們可以在萬維網上被訪問。
` 是你的底板，每個 `
` 都是一排新的積木，而每個 ` ` 則是該行中的一個獨立積木。
框架：通往另一頁的窗口
第二部分重點總結
第三部分：為受眾設計網頁
易於導航
思考你的受眾
良好設計實踐
應避免的常見錯誤
第三部分重點總結
第四部分：將你的網站上傳至萬維網
逐步教學：讓網站上線
比喻：網域名稱就像你家的郵寄地址。它告訴人們在哪裡可以找到你。
比喻：如果網域名稱是你的地址，那麼網頁寄存就是該地址上的一塊土地，你將在那裡建造你的房子。
第四部分重點總結