01 先認識畫面的骨架
HTML 是 HyperText Markup Language，中文常稱超文字標記語言。它用標籤描述內容的結構與意義，例如標題、段落、連結與表單。副檔名為 .html 的檔案，可由瀏覽器開啟。
<h1>我的第一份圖解教學</h1> <p>這是一段說明。</p> <a href="index.html">回到文章列表</a>
標籤不只是讓字變大或變小：標題層級讓讀者和輔助工具理解結構。視覺外觀則交給 CSS 處理。
02 有些互動，HTML 自己就能做
例如 details 與 summary 能建立展開／收合區塊，不需要另外寫 JavaScript。先使用原生元件，通常能省下重做鍵盤操作的工作。
點一下，或用鍵盤 Enter 展開
你正在操作原生 HTML 的展開元件。這種方式適合補充說明或解答，但不要把必要警告全部藏起來。
若要拖動滑桿並同步改變預覽文字，就需要處理輸入與畫面更新。這時 JavaScript 負責讀值，CSS 負責顯示結果。
03 動手試：字級與行高
移動滑桿，觀察同一段文字在不同設定下的閱讀感。也可以用 Tab 選到滑桿，再按方向鍵調整。
好的排版不只讓文字好看，也讓讀者知道從哪裡開始、在哪裡停下，以及什麼值得多看一眼。
此練習不會儲存設定；重新整理後回到 24 px、1.8 倍行高。
字變大後，每行容納的字數會變少；行高過小容易擁擠，過大則可能削弱段落的連續性。沒有一組值適合所有版面，要搭配內容長度和螢幕寬度觀察。
04 一個 HTML 檔案的基本規格
<!doctype html> <html lang="zh-Hant"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>我的互動練習</title> </head> <body> <h1>字體練習場</h1> </body> </html>
meta charset="utf-8" 宣告文件使用 UTF-8 編碼；lang 說明頁面語言；viewport 設定讓行動裝置使用合適的版面寬度。它們不會自動完成響應式設計，仍須設定可伸縮的寬度、圖片與排版。
小練習可以把 CSS 和 JavaScript 放在同一份 HTML，方便傳遞；網站變大時，再拆成樣式與腳本檔。圖片若放在另一個資料夾，分享時也必須一起提供，並保留相對路徑。
05 怎麼請 AI 幫你做第一個小工具？
請製作一個繁體中文的字體練習頁，提供字級和行高滑桿，調整時即時更新預覽。附上重設按鈕；支援手機與鍵盤操作。不要使用外部套件。請給我可儲存為 index.html 的完整程式，說明如何開啟，以及哪些資料不會保存。
拿到程式後，先測試預設值，再測試最小值、最大值與重設按鈕。縮小視窗，確認文字沒有溢出；重新整理，確認資料行為符合說明。能開啟不代表所有功能都正確。
06 互動不等於後端，也不等於已上線
在瀏覽器調整字級，不需要帳號或伺服器。但如果你想跨裝置保存資料、讓會員登入，或真的接收表單，就需要另外規劃服務與資料管理，不能只做一個「成功送出」的提示。
沒有外部依賴的小工具可以離線使用；若載入外部字體、圖片或 API，則可能需要網路。分享 HTML 檔案與部署公開網址也是兩件事：前者是讓對方開啟檔案，後者是讓讀者透過網站存取。