網頁編寫基礎
基礎網頁以超文本標示語言（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、本機測試、上載到網頁伺服器，並注意無障礙與版權。