HTML介紹

本質上,HTML 是一種由元素所組成、相當簡易的語言。我們在文件裡將元素套用到文字片段以賦予它們不同的意義 (是一個段落? 是一個項目清單? 抑或是一部分的表格?),使得文件具有邏輯區塊的架構 (它具有標頭嗎?三個欄位的內容?一個導覽目錄?),並在其中嵌入圖片或影片 ... 等內容。這裡我們將介紹前面兩項,並介紹基本概念以及語法以讓你了解 HTML。

預備知識

在開始閱讀本章之前,你不需要具備任何 HTML 知識,但是你必須對電腦有基礎了解,而且能夠「被動地」上網(只是上網瀏覽、接受內容)。你需要建立一個基礎工作環境,並且了解如何建立與管理檔案──這些都屬於我們 Web 入門 的一部分。

提示: 如果您是在某些無法建立個人檔案的電腦/平板/其他裝置上進行,您可以在一些線上 coding program (如 JSBinThimble) 上測試程式碼範例。

指南

本章包含以下幾個子題,將帶你了解所有HTML的基礎理論,並且提供充足的機會讓你測試所習得的技能。

HTML入門
包含HTML最基礎的部分──我們定義元素(elements)、屬性(attributes)、以及你可能聽過的所有其他重要術語,還有適合它們的位置。我們還展示了如何組織HTML元素、典型的HTML頁面的結構,以及解釋其他重要的基本特性。我們會玩一些HTML,讓你感興趣!
在head中有什麼? HTML的後設資料(Metadata)
當網頁加載完畢,HTML 文檔 head 的 Metadata 不會顯示在網頁瀏覽器中。它包含的訊息,例如有頁面的:<title>,連結到 CSS (假如 HTML 的內容想要用自己設定的CSS時), 連結到客製化網站圖示,以及 metadata (用來描述這個 HTML 文檔是誰製作的與它的重要關鍵字。)
HTML 文字的基礎知識
HTML 主要作用之一是提供文本含義(又稱語義化),以便瀏覽器知道如何正確顯示它。本文將探討如何中斷 HTML 將文字區塊的標題和段落結構,增加重點/重要詞,創建列表......等。
建立超連結
超連結非常的重要 — 它使得網路得以成為我們現今所知的網路。這篇文章介紹使用超連結所需要的句法,並且探討最佳的實作方法。
進階文字格式
在HTML中還有許多元素可以用來設定文本的格式,但我們沒有在 HTML 文字的基礎概念知的文章中涵蓋這些內容。這些元素較少為人所知,但還是相當有用。在這裡,你可以學到如何標記引用、描述列表、程式碼、上下標,聯繫訊息等等。 
文件與網站架構
除了定義網頁的各個部分(例如:段落或是圖片),HTML還用於定義網站的區塊(例如:標頭、導航列或是主要內容)。這篇文章介紹了如何規劃基本網頁架以及如何編寫HTML來表達網頁架構。
HTML除錯
如果HTML出錯了、而且一時之間也找不到程式碼裡哪裡發生了錯誤該怎麼辦?這篇文章會介紹一些能幫上忙的實用工具。

評量

下面的評量將測試您對於以上的HTML基礎是否已經了解。

標記信件內容
我們早晚都得學會寫信,而信件也是一個很好用來訓練設定文字格式的釋例。在這份作業中,你會受到一封內容需要被標記的信。
編輯頁面架構
在這份作業中將會測試你使用HTML來編輯頁面架構能力,包含頁眉、頁腳、導覽、主要內文還有側邊攔。

另外請見

Web literacy basics 1
Mozilla基金會所提供的一個優質課程。在此課程中,探討與測試了在HTML入門模塊中所介紹的技術。透過六個學習模塊,學習者能夠熟悉閱讀、編寫以及參與網路。經由實際的操作和參與了解網路基礎。