---
# System prepended metadata

title: HTML基本簡介

---

# HTML介紹

---

# 什麼是HTML
* HTML（HyperText Markup Language，超文本標記語言）算是一種標記語言，與一般的程式語言不太一樣。主要是負責網頁的結構，像是文字、圖片及畫面排版等，可說是網頁的核心。

---

## 要怎麼看到網頁上的HTML?

* 滑鼠右鍵後，
點選「檢視網頁原始碼」/「檢視網頁來源」

---

# 基本的HTML架構
```xml!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>My first page</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>
```

---

## HTML元素的基本觀念
* 標籤的基本格式
```xml!
<tagname attributes=""></tagname>
<tagname attributes=""/>
```

:::info
* tagname為標籤名稱。
* attributes為屬性，大部分標籤具有不同屬性，但也有共通的共同屬性。
* <tagname attributes="">為opening tag；
* </tagname>為closing tag。
:::

---

## 標籤的巢狀結構
標籤的共同屬性、個別的屬性
```xml!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>My first page</title>
</head>
<body>
    <H1>Hello world</H1>
    <img src="" alt=""/>
    <nav>
        <a href="#">新知所網首頁</a>
        <a href="#">W3C school HTML</a>
        <a href="#">W3C school CSS</a>
        <a href="#">W3C school javascript</a>
    </nav>
    <div>
        <img src="" alt=""/>
        <p>......</p>
        <p>......</p>
        <p>......</p>
    </div>
</body>
</html>
```

---

# 文字

---

### 標題(heading)
:::info
- h1~h6，共有6個層級
- h1通常只寫一個，代表最重要的標題
- h4以下的標題與內文差不多大，較少使用，改採CSS控制。

:::
```xml!
<h1>This is heading H1</h1>
<h2>This is heading H2</h2>
<h3>This is heading H3</h3>
<h4>This is heading H4</h4>
<h5>This is heading H5</h5>
<h6>This is heading H6</h6>
```

---

<style>
    #heading-demo * {
        border-bottom: none;
        color:  #ffffff;
        padding: 0;
        margin-top: 12px;
        margin-bottom: 8px; 
    }
</style>
<div id="heading-demo">
<h1>This is heading H1</h1>
<h2>This is heading H2</h2>
<h3>This is heading H3</h3>
<h4>This is heading H4</h4>
<h5>This is heading H5</h5>
<h6>This is heading H6</h6>
</div>

<!-- ![](https://i.imgur.com/RpI54lE.png)

---

### 段落(paragraph)

```xml!
<p>This is a paragraph</p>
```
<p>This is a paragraph</p>


<!-- ![](https://i.imgur.com/xtwqK42.png) -->

---

### 文字裝飾：Strong、Emphasis......
:::info
這一類的HTML標籤叫做text formatting，有以下的類別。

下列只展示其中幾種文字的效果，其他標籤的大家可以上網搜尋試試看。
:::
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text

---

- Smaller text
- Deleted text
- Inserted text
- Subscript text
- Superscript text

```xml!
<p><strong>我是粗體文字</strong></p>
<p><em>我是斜體文字</em></p>
<!-- <b></b> 亦有相同效果 -->
```
<p><strong>我是粗體文字</strong></p>
<p><em>我是斜體文字</em></p>
<!-- ![](https://i.imgur.com/1GhrclF.png) -->

---

### 換行(Line Break)
:::info
用於換行，不需要Closing Tag
:::
```xml!
<p>我要<br/>換行</p>
```
<p>我要<br/>換行</p>
<!-- ![](https://i.imgur.com/ehnSalO.png) -->

---

# 清單

---

### 有序清單(ordered list)
```xml!
<ol>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
</ol>
```
<ol>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
</ol>
<!-- ![](https://i.imgur.com/wLFAdKo.png)
 -->

---

### 無序清單(unordered list)
```xml!
<ul>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
</ul>
```
<ul>
    <li>List1</li>
    <li>List2</li>
    <li>List3</li>
</ul>
<!-- ![](https://i.imgur.com/JNuaane.png) -->

---

## 超連結 (Anchor)
:::info
- href (Hypertext reference) 後面的雙引號中放入所要連結的東西，可以是網頁（絕對位置或相對位置）、網頁的特定段落、信箱甚至是電話。
- target：決定連結打開的方式
    - `_self` 在原本的頁面開啟
    - `_blank` 在新視窗開啟

:::

```xml!
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">點我</a>
<!-- 此tag中href即為attribute，後面的雙引號內的值為value -->
```
[點我](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rja&uact=8&ved=2ahUKEwj6zeLXzqn-AhXHb94KHUPXBAQQwqsBegQIDRAB&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DdQw4w9WgXcQ&usg=AOvVaw0aHtehaphMhOCAkCydRLZU)

---

:::success
❓想想看，
如何用新分頁打開連結
:::

---

# 圖片( Image)

:::info
* src: 檔案來源位置
* alt: 當瀏覽器找不到檔案的時候，會顯示alt裡面的文字
:::
```xml!
<img src="https://imgur.dcard.tw/AwMs0MBh.jpg" alt="快逃"/>
```
![](https://i.imgur.com/97Eufp4.png)

----

:::success
❓想想看，
如何讓圖片具有超連結效果
:::

----

<a href="https://linktr.ee/ncu_nkfw">
    <img src="https://i.imgur.com/6WBk89Y.png" alt="NKFW宣傳頁"/>
</a>
  
:::spoiler 解答在這裡
```xml!
<a href="https://linktr.ee/ncu_nkfw">
    <img src="https://i.imgur.com/6WBk89Y.png" alt="NKFW宣傳頁"/>
</a>
```
:::

---

# 容器

---

# div
:::info
分類 elements（區塊）
:::
```xml!
<div>
    <h1>我是標題</h1>
    <p>我是內文</p>
</div>
```
<div>
    <h3>我是標題</h3>
    <p>我是內文</p>
</div>
<!-- ![](https://i.imgur.com/bg5oOxY.png) -->

---

### span
:::info
分類 elements（字）
:::
```xml!
<p>I am <span>span</span> tag.</p>
```
<p>I am <span>span</span> tag.</p>
<!-- ![](https://i.imgur.com/vinoGwt.png) -->

---

# 表格(Table)

- 表格橫列 table row (tr)
- 橫列標題 table head (th)
- 詳細內容 table detail (td)
```xml!

---

```xml!
<table>
    <tr>
        <th>表格標題1</th>
        <th>表格標題2</th>
    </tr>
    <tr>
        <td>表格內容1</td>
        <td>表格內容2</td>
    </tr>
</table>


```
<table class="rev">
    <tr style="all:revert;">
        <th style="all:revert;">表格標題1</th>
        <th style="all:revert;">表格標題2</th>
    </tr>
    <tr style="all:revert;">
        <td style="all:revert;">表格內容1</td>
        <td style="all:revert;">表格內容2</td>
    </tr>
</table>

<!-- ![](https://i.imgur.com/7TRida0.png) -->

---

### Project 1: 用表格做出自己的課表

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

:::spoiler 範例在這裡
```xml!
<table>
    <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
    </tr>
    <tr>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td></td>
        <td>Chinese</td>
        <td>Electronic Circuits</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>3</td>
        <td>Electronic Circuits</td>
        <td></td>
        <td>Calculus</td>
        <td>Chinese</td>
        <td>Freshman English</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Electronic Circuits</td>
        <td></td>
        <td>Calculus</td>
        <td>Chinese</td>
        <td>Freshman English</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Calculus</td>
        <td>Physical Education</td>
        <td>Freshman English</td>
        <td>Introduction to Computer Science</td>
        <td></td>
    </tr>
    <tr>
        <td>6</td>
        <td>Calculus</td>
        <td>Physical Education</td>
        <td>Freshman English</td>
        <td>Introduction to Computer Science</td>
        <td></td>
    </tr>
    <tr>
        <td>7</td>
        <td>Principles of Programming Languages</td>
        <td></td>
        <td></td>
        <td>Introduction to Computer Science</td>
        <td></td>
    </tr>
    <tr>
        <td>8</td>
        <td>Principles of Programming Languages</td>
        <td></td>
        <td></td>
        <td></td>
        <td>Introduction to Computer Science Lab</td>
    </tr>
    <tr>
        <td>9</td>
        <td>Principles of Programming Languages</td>
        <td></td>
        <td>Freshman English</td>
        <td>Theory and Skills of Creativity</td>
        <td>Introduction to Computer Science Lab</td>
    </tr>
    <tr>
        <td>A</td>
        <td></td>
        <td></td>
        <td>Digital Logic Circuit Labs</td>
        <td>Theory and Skills of Creativity</td>
        <td></td>
    </tr>
    <tr>
        <td>B</td>
        <td></td>
        <td></td>
        <td>Digital Logic Circuit Labs</td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>C</td>
        <td></td>
        <td></td>
        <td>Digital Logic Circuit Labs</td>
        <td></td>
        <td></td>
    </tr>
</table>
```
:::

---

## 表單(form)

---

### 表單的組成
:::info
表單主要由兩個元素所組成，分別是：

* input：透過控制type，input可以有很多不同類型，包含文字輸入框、選項、下拉式清單等

* label：label則是用來顯示在螢幕上的文字，跟相對應的input綁定在一起。以底下的範例來說，"電話"這個label的`for`屬性必須跟input的`id`一樣。
:::

---

```xml!
<form action="/action_page.php">
  <label for="phone">電話：</label><br/>
  <input type="text" id="phone" name="phone" value=""/><br/>
  <label for="name">姓名：</label><br/>
  <input type="text" id="name" name="name" value=""/><br/><br/>
  <input type="submit" value="Submit"/>
</form> 
```

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

---

### input的種類
* text：輸入單行文字 
```xml!
<input type="text"/>
```
![](https://i.imgur.com/r7wXhR9.png)


* radio：從多個選項當中選取一個(單選)
```xml!
<input type="radio" name="Gender"/>Male
<input type="radio" name="Gender"/>Female
```
![](https://i.imgur.com/sjc10Pl.png)


---

* checkbox：從多個選項當中選取好多個(複選)
- [ ] HTML 
- [x] CSS
- [ ] JavaScript
* select：下拉選單
```xml!
<select name="school">
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>
```
![](https://i.imgur.com/0kTLcua.png)

---

* submit：送出表單資料
```xml!
<input type="submit"/>
```
![](https://i.imgur.com/SMS212F.png)


* button
```xml!
<button>我是按鈕</button>
```
![](https://i.imgur.com/7wgRDoX.png)

---

# Project 2: 自我介紹
:::info
運用以上所學的內容，製作一個自我介紹的網站
格式可自由發揮，成品大致如下
:::
![](https://i.imgur.com/joa1X0V.png)

<style>
    .rev, .rev *{
        all:revert;
    }
</style>

---

<h1>
    END
</h1>

