【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML是什麼

無論是前端、後端、設計師甚至是網路行銷工作者,一定都聽說過HTML這個語言

而現在是資訊網路爆炸的時代,每個人每天一定都會接觸到網頁,但你知道HTML是如何組成網頁的嗎?

今天開始一系列的HTML入門教學,帶你一起認識HTML是什麼!

本篇內容包含 :

  • HTML 是什麼?
  • HTML 元素
  • HTML 結構
  • 快速製作簡易網頁
  • HTML 的 Q&A

前端入門系列 – HTML篇

本系列會介紹與教學關於HTML最基礎的知識語法,歡迎分享與留言討論!

HTML系列#1: 【HTML系列#1】HTML是什麼?5分鐘做出簡易網頁!

HTML系列#2: 【HTML系列#2】h1~h6介紹與教學,影響SEO的重要關鍵!

HTML系列#3: 【HTML系列#3】div、p、span 介紹與教學,區塊、段落一篇搞懂!

HTML系列#4: 【HTML系列#4】br、hr、& nbsp 介紹與教學,輕鬆加上斷行、分隔線與空格!

HTML系列#5: 【HTML系列#5】href、a、target介紹與教學,一起自訂傳送門!

HTML系列#6: 【HTML系列#6】ul、ol 介紹與教學,一招搞定清單列表!

HTML系列#7: 【HTML系列#7】img 介紹與教學,一行指令豐富你的網頁!

HTML系列#8: 【HTML系列#8】table 表格介紹與教學,5 分鐘搞懂表格!

HTML系列#9: 【HTML系列#9】iframe 介紹與教學,一招輕鬆嵌入影片!

HTML 是什麼?

HTML 為「超文本標記語言(HyperText Markup Language)」的縮寫,是一種建立網頁的標準標記語言,常看到的網頁都是由HTML所構成

常見的網頁都會配合CSS與JavaScript共同組成與開發,因此HTML、CSS與JavaScript被稱為組成網頁三大巨頭

而HTML也常常被稱為程式語言,但它其實是一種「標記語言」,寫法像標籤一樣會把內容框起來,同時標籤也有很多樣式,包括嵌入影片照片等等

HTML是什麼
HTML是什麼

HTML基本介紹影片




HTML 元素

HTML的元素是由「標籤」加上「內容」,這樣就是一個元素,而整個網頁中會由上千上百個元素所組成

下圖所示,標籤由起始標籤結束標籤組合而成並且包著內容,最後變成一個元素

  • 起始標籤 (opening tag) :
    寫法都是由 < 與 > 包起來,裡面的標籤有很多種樣式,這邊以 p 當作範例
  • 結束標籤 (closing tag) :
    寫法與起始標籤一樣,但是必須在樣式 p 前面加一個斜線 /
  • 內容 (content) :
    每個內容會依照不同的標籤樣式有不同的東西
  • 元素 (element) :
    上述三點組合而成
HTML元素
HTML元素

HTML 結構

了解完HTML的元素之後,接下來就是由元素組成的網頁架構,HTML就像人一樣有頭、身、腳,所以基本元素就是head、body和footer

下圖所示,在html裡面就有head、body和footer,而每個元素裡也都會再擁有自己的元素與內容

HTML結構
HTML結構

快速製作簡易網頁

HTML要用什麼寫?

HTML撰寫的編輯器有很多種,最簡單的方式就是使用「文字編輯器」,像是Notepad++、Wordpad或記事本都可以

但現在很多有名的公司紛紛推出程式碼編輯器,像是著名的VScode、Atom或sublime text等等都很好用,也有許多套件方便使用者撰寫

以下我就用平常我最常用的VScode來舉例


開始製作

step 1

先在你要的地方創建一個新的資料夾,這邊我取名為「html」

資料夾
創建資料夾

step 2

打開VScode之後,點選左上角的「File」,然後選擇「Open Folder」,找到你剛剛創建資料夾的位置打開它

開啟資料夾
開啟資料夾
選擇資料夾
選擇資料夾

step 3

打開之後左邊的工具欄會出現像下面這張圖的畫面,點選紅色框框處來新增檔案,點擊之後會需要輸入檔名,這邊我命名「index.html」

新增檔案
新增檔案

step 4

這時右邊的畫面就可以開始寫code啦~

撰寫code
撰寫code

step 5

接著就打上最基本的html程式碼,這邊可以先照抄下面的code,之後會再慢慢出教學文

記得打完要按存檔,快捷鍵是「Ctrl + S」,如果是mac就是「Command + S」

HTML程式碼
HTML範例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的網頁</title>
</head>
<body>

    <p>我的第一個網頁!</p>

</body>
<footer>

    <p>footer在這裡</p>
    
</footer>
</html>

step 6

最後就是要把我們網頁打開,我們到一開始創建資料夾的位置,會發現裡面多了一個我們剛剛創建的檔案,點擊兩下就可以打開網頁囉!

開啟網頁方式有很多種,也可以利用一些套件開啟,但這邊我就用最簡單的方式來使用

index檔案
index檔案

HTML 的 Q&A

Q1 : HTML是一種程式語言嗎?

A1 :

它其實是一種標記語言,用來建立網頁用的,但因為需要搭配CSS和JavaScript一起使用,所以都會由工程師來做,也因為這樣就被大家放在程式語言的位置

其實不用想的太複雜,它就是很多標籤把很多內容包在一起,所以想學的人其實只要靜下心看看它的結構都可以看懂的!


Q2 : 網頁設計和HTML有什麼關係?

A2 :

網頁就是由HTML、CSS和JavaScript所組成,因此網頁設計師在設計時,理論上也需要知道一些HTML標籤,這樣在與工程師討論時會較好進行,不會有代溝

如果網頁設計師或是網路行銷工作者懂一點HTML的話,對於排版或是SEO的設計都會大大的加分,能力提升自然薪水或是機會也會較多


Q3 : 誰需要/適合學HTML?

A3 :

這個問題我覺得有在用網站、網頁甚至是平時沒事逛網拍的人都可以學,因為現在無論是誰打開手機、平板或電腦,一定都會用到網頁,了解一門技術也無妨

但如果是必要學習的人,我認為前端工程師、後端工程師、網頁設計師和網路行銷工作者,這些職業都應該要會或是要懂一些,對於工作上會比較有幫助


總結

HTML是構成網頁不可或缺的角色之一,也適合任何人去了解,雖然真正的網頁設計與網頁撰寫會很複雜,但對於懂一些皮毛並不是壞事

希望這篇文章有幫助到想學習HTML或是網頁的大家,這是HTML系列,未來也會陸續出其他網頁相關系列,謝謝大家!



Leave a Comment

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Scroll to Top