11 KiB
Terrarium Project Part 1: HTML 簡介
Sketchnote by Tomomi Imura
課前測驗
查看影片
簡介
HTML，全名 HyperText Markup Language，是網頁的「骨架」。如果說 CSS 是為 HTML「穿衣服」，JavaScript 是讓它「活起來」，那麼 HTML 就是網頁應用程式的「身體」。HTML 的語法甚至反映了這個概念，因為它包含了「head」、「body」和「footer」標籤。
在這節課中，我們將使用 HTML 來設計虛擬玻璃花園的介面「骨架」。它將包含一個標題和三個欄位：左右兩側的欄位放置可拖曳的植物，中間的區域則是玻璃花園的主要部分。完成這節課後，你將能看到植物出現在欄位中，但介面可能看起來有點奇怪；別擔心，下一節課我們會使用 CSS 為介面添加樣式，使其更美觀。
任務
在你的電腦上建立一個名為 'terrarium' 的資料夾，並在其中建立一個名為 'index.html' 的檔案。你可以在 Visual Studio Code 中完成這個操作：打開一個新的 VS Code 視窗，點擊「開啟資料夾」，然後導航到你新建的資料夾。接著在 Explorer 面板中點擊小型「檔案」按鈕，建立新檔案：
或者
使用以下指令在 git bash 中完成：
mkdir terrariumcd terrariumtouch index.htmlcode index.html或nano index.html
index.html 檔案告訴瀏覽器它是資料夾中的預設檔案；例如，
https://anysite.com/test可能是由一個名為test的資料夾結構建立，裡面包含index.html；URL 中不一定會顯示index.html。
DocType 和 html 標籤
HTML 檔案的第一行是它的 DocType。雖然有點令人驚訝，但你需要將這行放在檔案的最頂端，它告訴舊版瀏覽器需要以標準模式渲染頁面，遵循當前的 HTML 規範。
提示：在 VS Code 中，你可以將滑鼠懸停在標籤上，查看 MDN 參考指南中關於其用途的資訊。
第二行應該是 <html> 標籤的開啟標籤，接著是它的關閉標籤 </html>。這些標籤是介面的根元素。
任務
在你的 index.html 檔案頂部添加以下內容：
<!DOCTYPE html>
<html></html>
✅ 有幾種不同的模式可以通過設置 DocType 的查詢字串來確定：Quirks Mode 和 Standards Mode。這些模式曾用於支援非常舊的瀏覽器（例如 Netscape Navigator 4 和 Internet Explorer 5），但現在通常不再使用。你可以使用標準的 DocType 聲明。
文件的 'head'
HTML 文件的 'head' 區域包含關於網頁的重要資訊，也稱為 metadata。在我們的例子中，我們告訴網頁伺服器以下四件事：
- 網頁的標題
- 網頁的 metadata，包括：
- 字元集，告訴網頁使用的字元編碼
- 瀏覽器資訊，包括
x-ua-compatible，表示支援 IE=edge 瀏覽器 - 關於 viewport 的資訊，設定頁面載入時的行為。將 viewport 的初始縮放設為 1 可以控制頁面首次載入時的縮放級別。
任務
在開啟和關閉的 <html> 標籤之間添加 'head' 區塊。
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
✅ 如果你像這樣設置 viewport meta 標籤：<meta name="viewport" content="width=600">，會發生什麼？閱讀更多關於 viewport 的資訊。
文件的 body
HTML 標籤
在 HTML 中，你可以在 .html 檔案中添加標籤來建立網頁的元素。每個標籤通常有一個開啟和關閉標籤，例如：<p>hello</p> 表示一段文字。通過在 <html> 標籤對內添加一組 <body> 標籤來建立介面的主體；你的標記現在看起來像這樣：
任務
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
現在，你可以開始建立你的頁面。通常，你會使用 <div> 標籤來建立頁面中的各個元素。我們將建立一系列 <div> 元素，這些元素將包含圖片。
圖片
一個不需要關閉標籤的 HTML 標籤是 <img>，因為它有一個 src 元素，包含頁面渲染該項目所需的所有資訊。
在你的應用程式中建立一個名為 images 的資料夾，並將 source code folder 中的所有圖片添加到該資料夾中；（共有 14 張植物圖片）。
任務
在 <body></body> 標籤之間添加這些植物圖片到兩個欄位中：
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
注意：Spans vs. Divs。Divs 被認為是「區塊」元素，而 Spans 是「內聯」元素。如果你將這些 divs 轉換為 spans，會發生什麼？
通過這些標記，植物現在會顯示在螢幕上。它看起來很糟糕，因為它們尚未使用 CSS 進行樣式設計，我們會在下一節課中完成這部分。
每張圖片都有 alt 文本，即使你無法看到或渲染圖片，alt 文本也會顯示。這是一個重要的屬性，對於無障礙設計非常重要。在未來的課程中，你將學習更多關於無障礙設計的內容；目前請記住，alt 屬性為圖片提供了替代資訊，當使用者因某些原因無法查看圖片時（例如網速慢、src 屬性錯誤，或使用者使用螢幕閱讀器）。
✅ 你是否注意到每張圖片都有相同的 alt 標籤？這是好的做法嗎？為什麼？你能改進這段程式碼嗎？
語意化標記
通常，撰寫 HTML 時最好使用有意義的「語意化」標記。這意味著你使用 HTML 標籤來表示它們設計用於的資料或互動類型。例如，頁面上的主要標題文字應使用 <h1> 標籤。
在開啟的 <body> 標籤下方添加以下內容：
<h1>My Terrarium</h1>
使用語意化標記，例如將標題設為 <h1>，將無序列表渲染為 <ul>，有助於螢幕閱讀器導航頁面。通常，按鈕應寫為 <button>，列表應寫為 <li>。雖然可以使用特別樣式的 <span> 元素和點擊處理器來模仿按鈕，但對於使用輔助技術的使用者來說，確定頁面上的按鈕位置並與之互動會更容易。如果元素顯示為按鈕，這樣的設計更友好。因此，盡量使用語意化標記。
✅ 查看螢幕閱讀器 如何與網頁互動。你能理解為什麼非語意化標記可能會讓使用者感到沮喪嗎？
玻璃花園
介面的最後部分涉及建立標記，這些標記將被樣式化以建立玻璃花園。
任務：
在最後的 </div> 標籤上方添加以下標記：
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
✅ 雖然你已將這些標記添加到螢幕上，但你完全看不到任何渲染。為什麼？
🚀挑戰
HTML 中有一些有趣的「舊」標籤，雖然不應在標記中使用已棄用的標籤，例如 這些標籤，但你能使用舊的 <marquee> 標籤讓 h1 標題水平滾動嗎？（如果你使用了，記得之後移除它）
課後測驗
回顧與自學
HTML 是「經得起考驗」的建構系統，幫助網頁發展成今天的樣子。通過研究一些舊標籤和新標籤，了解它的歷史。你能弄清楚為什麼某些標籤被棄用，而某些標籤被添加嗎？未來可能會引入哪些標籤？
了解更多關於為網頁和行動裝置建立網站的內容，請參考 Microsoft Learn。
作業
免責聲明：
本文件使用人工智能翻譯服務 Co-op Translator 進行翻譯。我們致力於提供準確的翻譯，但請注意，自動翻譯可能包含錯誤或不準確之處。應以原文文件作為權威來源。對於關鍵資訊，建議尋求專業人工翻譯。我們對因使用此翻譯而引起的任何誤解或誤釋不承擔責任。