---
# System prepended metadata

title: 任務六、認識 HTML、CSS 與實作第一個網頁(HTML篇)
tags: [Codeshiba]

---

# 任務六、認識 HTML、CSS 與實作第一個網頁(HTML篇)
###### tags: `Codeshiba`
了解一些 Command Line 工具之後，先讓腦袋休息一會兒，我們來認識一下網頁是怎麼回事。
先了解一下什麼是 HTML、什麼是 CSS。
接著我們來製作屬於我們的第一個網頁。

參考資料: 
[認識HTML元素_HTML Tutorial](https://www.w3schools.com/HTML/DEFAULT.ASP)
[HTML & CSS Is Hard: semantic html](https://internetingishard.netlify.app/html-and-css/semantic-html/index.html)
[Freecodecamp](https://www.freecodecamp.org/)
[Codepen.io](https://codepen.io/)
[devdocs.io](https://devdocs.io/)


## HTML是甚麼東西?
HTML(Hypertext Markup Language) 超文本標記式語言

Q1: 甚麼叫做**超文本標記式語言**
用來告訴瀏覽器該如何呈現網頁的標記式語言(markup language)。

HTML 由一系列的元素(elements)組成，你將利用它們來圍住、包裹，或者說標記(mark up)網頁中的每個部分，使它們在外表或行為上呈現某種特定風貌。

被標籤(tags)包住的內容會變成超連結，或者斜體字，以及其他的功能

可以用來**組織網頁架構**和**呈現網頁內容(list, paragraph or numbers)**

屬於標記式語言
有</head>跟</tail>來包裡面的text
![](https://i.imgur.com/0DpFibB.png)

```注意
通常來說，為了保持一致性(consistency)、可讀性(readability)，以及其他可能的原因，最好還是以小寫來撰寫標籤。
```
```EXAMPLE
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>
```
**1.<!DOCTYPE html> — 文件類型（doctype）。**
在 HTML 發展初期（約莫 1991/2 的年代）文件類型是用來連結一些應遵守的規則，有點像自動校正的功能。然而，現在大家其實不太管文件類型，它就是個必須放在程式碼中的東西，現階段大家只需要知道這點就夠了。
**2.<html></html> — <html> 元素**
又被視為根元素（root element），包含了所有顯示在這個頁面上的內容。
**3.<head></head> —  <head> 元素**
裡面放的是你想涵括的重要資訊，但不會顯示於網頁瀏覽者眼前的。例如，顯示於搜尋結果的關鍵字、頁面說明、CSS、字元實體集...等。
**4.<body></body> —  <body> 元素**
所有會顯示於網頁瀏覽者眼前的內容。 無論是文字、圖片、影面、互動遊戲...等。
**5.<meta charset="utf-8">**
這個元素指定了你的文件使用utf-8這種字元編碼， 建議大家都要使用這個元素，它會幫助你免去許多文字無法正確呈現的煩惱。
**6.<title></title>**
呈現於網頁瀏覽者眼前的網頁標題。

HTML 文件的架構
讓我們來看看一個完整的HTML頁面它所包含的要素（以下範例的程式碼出自這篇文章：Dealing with files）：

HTML遵守W3C(全球資訊網協會)的規範，目前主流的版本是HTML 5

目標-建立第一個網頁:
1. 新增一個檔案命名為index.HTML
2. 用文字編輯器，VS Code或Sublime來打開
3. 輸入內容並存檔
4. 用瀏覽器開啟

### 如何撰寫?
打開vscode，輸入下面內容:
(小提示):透過輸入html 5按下tab鍵即可
```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hi, I am title</title>
    </head>
    <body>
        <h1>Hi, I am h1</h1>
        <p>Hi, I am paragraph</p>
    </body>
</html>
```

"<>"可以不用輸入，只要輸入內文，按下tab即會出現

成果:

![](https://i.imgur.com/j4e4w3D.png)


## HTML 文件的架構
### <!DOCTYPE html>
1. 現今大多數瀏覽器都相容於HTML5的格式
2. 如果需要處理IE瀏覽器的相容性才會需要修改它

### html與head
<html></html> 
屬於根元素(root element)，包含所有顯示頁面上的內容

<head></head> 
head元素裡面放的資訊**不會**在網頁中看到，但其實都是重要的資訊(e.g. 網頁使用的字元集(charset)、標題(title)、顯示在facebook的縮圖等)

字元集: UTF-8、ANSI之類的
FB的縮圖，來自於OG Image

### title和charset
<title></title> 
呈現於網頁瀏覽者前面的網頁標題

<meta charset="utf-8"> 
charset: 為字元的集合，也就是格式
指定文件使用utf-8的字元編碼，**建議使用該元素，以免去許多文字無法呈現的煩惱**

<body></body>
包含了所有顯示於網頁瀏覽者眼前的內容。包含文字、圖片、影片等內容。

## HTML的元素
### 1. Headings

![](https://i.imgur.com/KW5xQo8.png)


```
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hi, Iam title</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>
```

注意：**Head跟headings不一樣喔!!!**
Head是指html裡面架構的一環(通常放title的部分)
Headings是指內容的階層分別

### 2. Paragraphs
![](https://i.imgur.com/NvjBtuh.png)
![](https://i.imgur.com/5gLIVQP.png)

paragraphs之間是會有空間的!屬於**block元素**
```
    <body>
        <h1>Hi, I am h1</h1>
        <p>Hi, I am paragraph</p>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>

        <h1>夏普控康寧日本違約 向大阪地院聲請假處分</h1>
        <p>文字內容1</p>
        <p>文字內容2</p>

    </body>
```
![](https://i.imgur.com/C79sJP0.png)
**span**則屬於**inline元素**，不會有方塊狀的間距
```
        inline 元素
        <span>a</span>
        <span>b</span>
        <sapn>c</sapn>
```
![](https://i.imgur.com/BkBpLLo.png)
**div**則屬於**block元素**，不像paragraphs有帶狀的間距，但會有換行的效果
如果要單純換行，則可使用**br**

```
        inline 元素
        <span>a</span>
        <span>b</span>
        <sapn>c</sapn>
        <br>
        <br>
        block 元素
        <div>甲</div>
        <div>乙</div>
        <div>丙</div>
```

### 3. image
[資源網址](https://www.w3schools.com/html/html_images.asp)
![](https://i.imgur.com/Zh4rieq.jpg)
```
<h2>Pictures from Unsplash</h2>
<img arc="C:\Users\GF63\Desktop\PHOTO\419394.jpg" alt="lalala">
```
**想要跑電腦檔案或網頁出來，都無法...**
![](https://i.imgur.com/fTUFtXX.png)


### 4. link
[資源網址](https://www.w3schools.com/HTML/html_links.asp)
![](https://i.imgur.com/z1NoggN.png)
![](https://i.imgur.com/nYCK2jN.jpg)

連結的話內外部網站都是可以連結的喔!!
```
        <br>
        <br>
        <br>
        <a href="https://tw.dictionary.search.yahoo.com/">Visit 奇摩字典</a>
        <br>
        <a href="C:\Users\GF63\Desktop\PHOTO\419394.jpg">夏天的阿勃勒</a>
```


### 5. Table
[課程資源](https://www.w3schools.com/HTML/html_tables.asp)
![](https://i.imgur.com/p6E2zsx.png)

![](https://i.imgur.com/41i0HZI.png)
tr 代表表格的**一列**資料
th 代表表格的**標題列**
td 代表表格的**一格資料**
```
<table style="width:100%">
            <tr>
              <th>國籍</th>
              <th>姓名</th>
              <th>年紀</th>
            </tr>
            <tr>
              <td>中國</td>
              <td>張小三</td>
              <td>26</td>
            </tr>
            <tr>
              <td>台灣</td>
              <td>吳小六</td>
              <td>38</td>
            </tr>
          </table>
```

不過預設的內容跑出來有點醜...
要調整顏色需要透過調整邊界(Boarder)，之後CSS會講到
補充說明: 下載beutify套件可以讓版面編排更整齊
![](https://i.imgur.com/h6nuHTf.png)

### 6. Forms
[學習資源](https://www.w3schools.com/html/html_forms.asp)
![](https://i.imgur.com/Ctd9Vdm.png)
可透過value和placeholder來放置預設值
**value:** 全黑顯示，代表預設值
**placeholder:** 灰色顯示，表示提醒使用者填寫該值
![](https://i.imgur.com/qbhL71C.png)
```
          <form>
            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname">
          </form>
```
## HTML元素的結構
![](https://i.imgur.com/gLHYmPi.png)
包含 **opening tag(起始標籤)**, **closing tag(結束標籤)** 和 **content(內容)** 等三個部分，即可稱為**元素(element)**
![](https://i.imgur.com/In0hO26.png)

![](https://i.imgur.com/Bz9DUub.png)
在標籤(tag)裡面還可以加以修改的部分，稱為attribute(屬性?)

![](https://i.imgur.com/izdT2o6.png)

Class的範例一，在字體和背景上更改顏色
```
    <head>
        <style>
            .city {
              background-color: tomato;
              color: white;
              padding: 10px;
            }
        </style>
    </head>
   
    <body>
        <h2>The class Attribute</h2>
        <p>Use CSS to style elements with the class name     
        "city":</p>

        <h2 class="city">London</h2>
        <p>London is the capital of England.</p>

        <h2 class="city">Paris</h2>
        <p>Paris is the capital of France.</p>

        <h2 class="city">Tokyo</h2>
        <p>Tokyo is the capital of Japan.</p>
```

### 範例二，id(如果需要跳轉頁面很方便)
![](https://i.imgur.com/BopcZuP.png)
點選該連結後直接往指定地方跳躍
![](https://i.imgur.com/hCaqR7h.png)

```
<h2 id="Country">The class Attribute</h2>
<p>Use CSS to style elements with the class name "city":</p>
# 要指定跳往的區域，加上id碼，形成錨點

<p><a href="#Country">Jump to Country&City</a></p>
# 把連結加上"#"id碼，形成連結
```
還有javascript的運用，但今天很累了
改天再說~

## HTML的絕對路徑和相對路徑
[學習資源](https://www.w3schools.com/html/html_filepaths.asp)
![](https://i.imgur.com/9HUPM4i.png)


![](https://i.imgur.com/BcFyX16.png)

```
<h2>HTML5 Logo</h2>
<img src="C:\Users\GF63\Desktop\HTML.png" alt="">
```

結果這一章悲劇，只有電腦的絕對路徑跑得出來，相對路徑無法...
而且電腦內的是反斜線(Backslash, "\")
操作說明是寫正斜線(Forwardslash,"/")

```
          <h2>HTML5 Logo</h2>
          <img        
          src="C:\Users\GF63\Desktop\htmltst\HTML2.jpg">
          <img src="\html tst\HTML2.jpg" alt="">
          <img src="html tst\HTML2.jpg" alt="">
          <img src=".\html tst\HTML2.jpg" alt="">
```

## CSS(Cascading Style Sheets)
中文：串接樣式表
凡是網頁上看得到的文字、圖片、表格、表單都有它發揮的空間，文字方面，您可以利用CSS來隨意設定字體大小（不再像HTML最大只能到size=7而已），設定行距、間距、去除連結底線…等。

CSS內有一個撰寫 "Style"的區塊，就是撰寫"CSS"的部分

![](https://i.imgur.com/OmH35KO.png)

### Inline CSS 需要撰寫在body內

![](https://i.imgur.com/XY6VopD.png)

```
<body>
<!--Inline CSS-->
<p style="color: darkorange;">Hello</p>
</body>
```

### Internal CSS 需要撰寫id在body內，把值錨定在head中
![](https://i.imgur.com/R6RZXQO.png)

```
<head>
    <style>
    #my-p{
    color: blue
    }
    </style>
</head>

<body>
<!--Internal CSS-->
<p id="my-p"> I am my-p</p>
</body>
```

### External CSS 可以透過LINK來呼叫CSS
![](https://i.imgur.com/nEjZLVR.png)

在同一個WORKSPACE裡面創立一個CSS檔(style.css)，並透過連結呼叫它
```
<head>
<link rel="stylesheet" href="style.css">
</head>
```

```
<body>
<!--Internal CSS-->
<P id="external-p"> I am external</P>
</body>
```

![](https://i.imgur.com/CYKcUQD.png)


```
#external-p{
    color: green
}
```

## 在HTML內使用Javascript
![](https://i.imgur.com/U6XQyUc.png)

### 方法一、script
在body的尾端可以加入script來觸發一些事件，例如alert讓網頁開啟時出現對話方塊
```
<script>
   alert("hi")
</script>
```

### 方法二、用引入的做法
先加入一個Javascript的檔案

可以把引入的程式碼寫在head或body的部分，僅僅是讀取的順序不大一樣

```
<head>
<script src="javascript.js"></script>
</head>
```
![](https://i.imgur.com/XKVfNq4.png)
開創一個javascript檔案，寫入prompt語法
```
a=prompt()
alert(a)
```
![](https://i.imgur.com/UUwX5i5.png)

## HTML與Semantic
語意化: 把不重要的部分做標示，來分出頁首、頁尾等，主要是給搜尋引擎看的，可以**讓搜尋引擎方便辨識**

**非語意化**與**語意化後**的網頁結構差異
![](https://i.imgur.com/dIbuR8S.png)

語意化的流程決策樹，透過該流程可以判斷如何將網頁逐步語意化，而不是每個部分都用DIV
![](https://i.imgur.com/NkvKk6V.png)
