|閱讀時間 ‧ 約 13 分鐘

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

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

什麼是 HTML?

HTMLHyperText 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 設定完成後,按照下面的步驟依序執行:

  1. 註冊 Github 帳號
  2. 建立一個新的儲存庫(repository)
  3. 初始化 git,並建立一個 commit(建立一筆紀錄),將原始碼 push 到 Github 上
  4. 設定 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

除了一開始的 cd 為切換目錄需要用到的終端機指令,其餘的都是使用 git 建立本地端儲存庫以及上傳到 Github 的指令。

如何成功將原始碼上傳到 Github,儲存庫的頁面會由上傳的指令說明,轉變為所儲存的原始碼內容。

原始碼上傳完成圖

將網頁部署到線上

成功將網頁原始碼上傳到 Github 之後,我們需要進行一些設定,這才能夠將網頁正式部署到網路上供其他使用者觀看。

參考上面的原始碼上傳完成圖,我們可以在上方的導覽列中的 settings 中,找到關於 Github Pages 的設定,點選的路徑為:

  1. 上方導覽列的 settings
  2. settings 頁面中,左側的 Pages
  3. 將 Github Pages 設定為啟用,點選下圖中的紅線區域中的 Save 按鈕

Github Pages 設定頁面


最後嘗試重新整理這個頁面,最上面會顯示 Github Pages 成功啟用的訊息,並且提示網頁部署的網址,如下圖所示。

成功部署到網路上完成圖


如果重新整理頁面沒有顯示提示訊息,可以試著回到一開始的該儲存庫畫面,並重新進入這個 Github Pages 設定頁面即可。

第一個網頁,完成!!

第一個網頁

最後,附上一個醜醜的第一個網頁完成圖,嘻嘻 ☺️

分享至
成為作者繼續創作的動力吧!
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.