---
# System prepended metadata

title: 認識 HTML、CSS 與實作第一個網頁

---

# 認識 HTML、CSS 與實作第一個網頁

## HTML是什麼?

HTML(HyperText Markup Language)，是一種超文本標記語言，它扮演著網頁骨架的重要角色，目前的規範版本為HTML5。

![](https://i.imgur.com/yayVQDL.jpg)

---

# CSS 是什麼？

CSS（Cascading style Sheets）是 「層疊樣式表單」的意思，也可以叫作「層疊樣式表」，實際上CSS語言是一組樣式，是一個用於網頁排版的標記性語言。

CSS主要的用途是對網頁中字體、顏色、背景、圖像及其他各種元素的控制，使網頁能夠完全按照設計者的要求來顯示。

![](https://i.imgur.com/06DK1zU.jpg)

---

試著用command line 去完成任務建立第一個自己的網頁

1.先啟動iterm，先使用`ls`指令搜尋目前文件裡所有檔案，找到先前存放網頁檔案的資料夾。

![](https://i.imgur.com/j9rWQOn.jpg)

2.使用`touch`創一個新的html檔案，然後再使用`ls`檢查是否有創建好新的檔案。

![](https://i.imgur.com/qYesrar.jpg)

3.輸入`code `+ `index.html`去開啟VScode。

![](https://i.imgur.com/2W8TMVJ.jpg)

4.開啟VScode，，輸入`!`+`tab`之後就會顯示html的架構出來。

![](https://i.imgur.com/SiKT2VX.jpg)

展開後

![](https://i.imgur.com/AMlEKSE.jpg)

5.

* `title`中輸入你要的網頁標題
* `h1`打上你要表頭
* `p`打上你要的段落

輸入完成後做儲存的動作。

![](https://i.imgur.com/6utE0QT.jpg)

6.回到iterm，打開網頁瀏覽。

![](https://i.imgur.com/fe8F7Eu.jpg)

![](https://i.imgur.com/pIT8Idb.jpg)

完成第一個網頁製作！！