前端開發 | 學習記錄 | 知識分享 - 第一個網頁

私密發佈閱讀時間約 13 分鐘

費了好一番功夫，我們終於把我們的環境建立完成，雖然還有許多的東西尚未提及，但是目前我們已經可以使用既有的功能，來建立、完成一個簡單的網頁，今天這篇文章中，我們會開始學習如何使用 HTML 這個語言，並且透過一些簡單的設定，讓我們得以將自己親手製作的網頁部署到線上，這個過程中，我會簡單的介紹 HTML 這個語言是什麼，以及為什麼要使用它，以及有哪些工具可以幫助我們完成這個任務，雖然 HTML 在所謂的 Web 三層蛋糕中，屬於最底層也最簡單的一環，但 HTML 是非常重要的，少了 HTML 使用者是看不到你想要呈現的任何內容的，因此 HTML 如果以我的話來形容的話，HTML 就相當於人體中的骨幹，既非血也非肉，但卻是支撐人體的重要結構。

什麼是 HTML？

HTML 是 HyperText Markup Language 的縮寫，超文字標記語言，我想看光看字可能每個都看得懂，但是就是不知道可以幹嘛，其實超文字的概念可能平常大家在瀏覽網頁就都會遇到，只是太過稀鬆平常，導致並不會特別去在意，超文字可能不是太容易理解，但是超連結大家應該有所耳聞，簡而言之就是瀏覽網頁時，大家經常用滑鼠點擊得那些連結，無論是文字或者圖片皆屬此類，最早期的網頁並不像現如今這麼繽紛多彩，而是單純的文字，加上非常簡易的排版，最初是科研人員想要在網路上分享文件提出的一個構思。

HTML 實際上並不能算是一門程式語言，這實際上與程式語言的定義有關，不過 HTML 其實也並沒有說它是程式語言，而是標記語言，這其中存在微妙的差異，不過初學之際無需在意這枝微末節的小事。稱其為標記語言，一部分來自於其語法的特性，通常由一對我們稱為標籤（Tags）的語法組成，而透過這些標記、標籤瀏覽器得以解析成為螢幕面前使用者瀏覽的網頁內容。

HTML 語法

HTML 的語法相當容易記憶，主要分成三個部分標籤、內容、屬性，而這三個部分合起來就是一個元素（Elements）。

語法看起來如下所示：

<tagName attr="value"> Content </tagName>

上面語法中，tagName 為標籤名稱，一個元素中通常會有成對的標籤名稱，分別為開頭標籤（opening tag）、結尾標籤（closing tag），且會由角括號也就是大於小於所包裹，並且結尾標籤會前綴一個斜線（slash）作為表示。

Content 則為主要內容，並且顯示於頁面上供使用者瀏覽，在一般情況下總是如此，特例是，在特殊情況下，我們的元素並沒有主體內容以及結尾標籤，而是透過屬性的方式進行元素的內容描述，或者使用網址進行引用，而這樣的元素，我們一般稱為空元素，例如：<img src="cute_picture.png" />。

屬性（Attributes）總是在出現在開頭標籤，主要用來替元素附加一些額外的功能，或是元素的延伸描述，這麼說有點抽象，以 <img> 這個元素舉例，本身是一個空元素，因此沒有內容可以對該元素進行描述，通常的做法是透過 src 這個屬性，進而去指定要使用哪張圖片，另一個例子是 title 這個屬性，該屬性可以在使用者滑鼠停留、懸浮（hover）在該元素上時，提供一小段提示的文字，這就是附加的額外小功能。

網頁的結構

上面我們介紹了 HTML 的語法，這讓我們對於該語言有一些簡單的暸解，這一小節，下面我們會使用一個簡單的範例，來剖析網頁的結構，以及如何製作一個網頁。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Hello HTML</title>
  </head>
  <body>
    <h1>這是 h1 標題，哈囉，HTML</h1>
    <p>今天是颱風天，我待在家耍廢。</p>
  </body>
</html>

我們將由上而下的逐行介紹這段程式碼，瀏覽器也是如此解析這段程式碼的。

首先看到首行的 <!DOCTYPE html> 是用來將這份文件宣告為 HTML 文檔的語法，並且是最新的 HTML 5 的宣告方式，非常的簡單易瞭，不同以往的 HTML 又臭又長的宣告語法，現如今的 HTML 語法可以說是非常「人性化」，當然這一轉變與其有意得朝語意化結構設計有關。

接下來的 2 到 11 行，由 <html> 與 </html> 所包裹的各類元素組成的巢狀結構，此為我們主要的程式碼區塊，通常 <html> 也被我們稱為根元素，當我們比較深入了解 HTML 的時候，會提到一個 DOM Tree 的概念，每個元素甚至是屬性都可以是一個節點，組成一個樹狀的結構圖，而其根源就是這個 <html> 元素。

其中 <html> 又包含兩個部分，分別為 <head> 以及 <body>，<head> 主要作為中介資料描述的區塊，<body> 則相當容易理解，但凡要讓使用者看見的網頁內容都會在此處撰寫。

中介資料的概念比較抽象，可以簡單的來說就是使用資料描述資料，以第 4 行的 <meta charset="UTF-8" /> 這行為例，其目的是要告訴瀏覽器，我們的網頁要使用 UTF-8 進行編碼（encoding），UTF-8 俗稱萬國碼，簡單的來說，使用這個編碼模式可以讓我們的網頁不會產生亂碼，而撰寫這行程式碼並不會直接顯示在網頁上，而是提供一個功能讓網頁不會產生亂碼，類似的概念與元素中屬性的概念很雷同，屬性並沒有直接顯示出來，而是透過描述、修改元素展示的樣貌。

一些常用的元素

這一小節，我會介紹一些常用的元素供你參考，當然常用不常用是基於網站本身的用途，這邊是指一般的使用情景，通常是單純的內容分享。

<h1> ~ <h6>
標題元素，共分六級，預設的字級為大到小顯示。

<p>
段落元素，用來呈現文字段落內容的描述。

<a>
連結元素，提供一個連結的能力，可以將網頁導向其他頁面或同個頁面的錨點。

<img>
圖片元素，用來將要展示的圖片呈現到頁面上。

<ul>、<ol>
清單元素，<ul> 為 unordered list，<ol> 為 ordered list，<ul> 前綴小圓點作為沒有順序分別的無序清單展示，<ol> 前綴數字提供有序的清單展示。通常為巢狀結構，內容會存放在其子元素 <li> 之中。

<table>
表格元素，用來陳列表格資料的元素。此元素通常為巢狀結構，內嵌 <th>、<tr>，並將資料存放於 <td> 之中。

<div>
區塊元素，通常用來存放沒有特別意義劃分的區塊內容，或做為元素容器使用，用以存放其他的元素在其中。

<span>
行內元素，通常用來存放沒有特別意義劃分的行內內容，不可用來做為元素容器使用。

第一個網頁

前面我們簡單的說明了 HTML 一些相關的知識，接著這個小節我們會開始動手製作一個簡單的網頁，並且我會帶你們將其上傳到 Github，使其成為一個可以供別人瀏覽的網頁，當然，這個網頁還相當的樸素，但這無關緊要，記得我們在最開始提及的一個概念嗎？一個好的開始是非常重要的。

礙於篇幅，請參考上面的網頁結構程式碼，使用 vscode 建立一個檔案，名為 index.html，記得要副檔名一定要是 .html，這是系統判斷是否為網頁的依據。

index.html

上面是成功建檔並開啟 vscode 的展示圖。

接著，你可以試著修改 <title> 的內容，並且在 <body> 中加入一些元素，依據上面我們提到的那些常用的元素，主題不限，這份網頁可以是一個形象網站，可能是一份餐廳的菜單，又或者是你的個人部落格，你可以在上面撰寫一些簡單的自我介紹。

修改完成後的 index.html

上面的程式碼並沒有提供 <a> 以及 <img> 的使用範例，下面我提供一個網站讓大家可以更方便的查詢語法的使用。

W3schools

如果程式碼沒有問題的話，接著找到你存放這個檔案的地方，並且嘗試開啟這個檔案，用滑鼠直接點開這個檔案，你的電腦會使用預設的瀏覽器幫你開啟這個網頁，如果網頁不是透過瀏覽器開啟的，那麼試著檢查一下檔案的副檔名是不是 .html。

上傳到 Github

Github 是一個線上存放程式碼的平台，而我們會透過其中的 Github Pages 來進行網站的部署（deploy），好消息是這個功能是免費的，並且有著不錯的線上存放容量可以供我們使用，壞消息是要使用 Git 這個版控工具大魔王，當然我們不會這麼殘忍，如果你不太熟悉，下面我會盡可能將各種指令陳列出來，你只要按部就班即可達成部署到線上的目的。

此前，我們在環境建立的文章開頭，有提供如何安裝 git 這個工具的作法，如果你是依序閱讀過來的，那麼現在你的電腦中應該已經有 git 這套工具了，使用前我們會做一些簡單的設定，下面的指令請打開終端機服用。

git config --global user.name 使用者名稱 # 這個坑是誰挖出來的，這樣才找得到人
git config --global user.email 你的信箱@gmail.com # 與別人協作時能聯絡到你
git config --global init.defaultBranch main # main 為預設的主要分支名稱，不用修改

將 git 設定完成後，按照下面的步驟依序執行：

註冊 Github 帳號
建立一個新的儲存庫（repository）
初始化 git，並建立一個 commit（建立一筆紀錄），將原始碼 push 到 Github 上
設定 Github Pages

註冊帳號的部分，我就不進行說明了，難點在於英文閱讀，稍微查一下字典應該就解決了，如果你決心要繼續走下去，英文必定不能成為你的弱點。

儲存庫的建立方法為，登入 Github 後，左上角會有一個 new 的按鈕，按下即可，或者在右上方的摺疊選單中也可以找到相應的功能，以下為參考圖。

新增儲存庫

儲存庫命名

儲存庫建立完成圖

在 Github 成功建立一個儲存庫後，會出現這樣一個頁面，主要在告訴你，如何使用 git 在建立一個本地端（local）的儲存庫，並且建立一筆版控紀錄（commit），然後上傳到 Github 遠端（remote）儲存庫。

如果你已經會使用 git 建立本地端的儲存庫，可以參考上面完成圖中的下方的作法，如果你還不會建立本地端的儲存庫，可以參考下面的指令的解說，然後這些指令都要透過終端指令完成。

# 簡單的終端指令說明
cd 目錄名 # 欲切換的目錄
cd .. # .. 回到上一層目錄

# 執行下面的指令前，請先切換到該檔案的目錄中，再執行下面的指令。

# 使用 Git 建立本地端儲存庫
git init # git 環境初始化
git add .
git commit -m "first commit"
git branch -M main # 如果你沒有進行上方的 git 預設處理，這一行就需要執行，反之則不用

# 下面這行是用來設定要上傳的遠端儲存庫為，確認一下上傳的使用者名稱以極儲存庫為你設定的，使用 Github 提供的指令位置基本上不會錯
git remote add origin https://github.com/你的使用者名稱/版本庫名稱.git

# 上傳到 Github
git push -u origin main