HTML介紹
本質上,HTML 是一種非常簡單的語言,由元素所組成。元素可以賦予文字片段不同的意義 (比方說,將它們描述成段落、項目清單,或是表格的一部分)、將文件組織成不同的邏輯區段 (如標頭(header)、三行的內文,或是導覽目錄),以及在網頁中嵌入圖片或影片等內容。在這個主題中我們將介紹前面兩項,並介紹基本概念以及語法以讓你了解 HTML。
預備知識
在開始閱讀之前,你並不需要具備任何 HTML 知識,你只要能夠操作電腦、瀏覽網頁並消化其中的內容即可。你需要建立一個基礎工作環境,並且了解如何建立與管理檔案── 這些都屬於我們 Web 入門 的一部分。
導覽
這個主題包含以下子題,將帶你了解所有 HTML 的基礎理論,並且提供充足的機會讓你測試所習得的技能。
- HTML 入門
-
包含 HTML 最基礎的部分 ── 我們將定義元素(elements)、屬性(attributes)以及其他重要術語,並且介紹它們的使用方法。除此之外,我們也將說明典型的 HTML 網頁及其中的元素是如何構成的,並解釋其他重要的基本語言特性。還有,我們也會玩一些 HTML,好引發你的興趣!
- 在 head 中有什麼? HTML 中的後設資料(Metadata)
-
HTML 文件的 head 是在網頁加載完畢之後,不會顯示在瀏覽器上的部分。其中包含一些資訊,如頁面的標題(
<title>
)、CSS 的連結 (當你想利用 CSS 來妝點你的頁面 HTML 時,你會用到它們)、網頁圖示(favicon)的連結,以及 metadata (裡頭承載了有關於該 HTML 的資料,如作者、描述該文件的關鍵詞等。) - HTML 文字的基礎知識
-
一個 HTML 的主要作用是賦予純文字意義(又稱為語義化),好讓瀏覽器知道如何正確地顯示它。這篇文章將探討如何使用 HTML 來將文字區塊拆解為標題(heading)和段落(paragraph)、強調字詞、建立列表等等。
- 建立超連結
-
超連結真的非常重要 — 它造就了我們現今所知的網路。這篇文章介紹超連結的使用語法,並且探討建立連結的最佳實踐方法。
- 進階文字格式
-
在 HTML 中還有許多可以用來格式化文字的元素,但我們沒有在 HTML 文字的基礎知識中提及這些內容。雖然這些元素比較鮮為人知,不過還是相當值得一談。在這篇文章中,你將會學到如何表示引言、描述列表、程式碼、上下標,及聯繫訊息等等。
- 文件與網站架構
-
除了分別定義網頁的各個成分(例如:段落或是圖片),HTML 還能定義網頁上的區塊(例如:標頭、導航列或是主要內容)。這篇文章將介紹如何規劃一個基本的網頁架構,以及如何透過編寫 HTML 來表示網頁架構。
- HTML 除錯
-
如果 HTML 出錯了,卻找不到哪裡有錯誤該怎麼辦?這篇文章將會介紹一些能幫得上忙的實用工具。
評量
另見
- Web literacy basics 1
-
Mozilla 基金會所提供的一個優質課程。該課程探索並測驗了很多在本主題中所提及的技術。透過裡頭的六大學習主題,學習者能夠熟悉閱讀、撰寫以及參與網路,並經由實作與合作了解網路基礎。