---
# System prepended metadata

title: 第二堂社課（HTML）
tags: [課程]

---

---
###### tags: `課程`
---

第二堂社課（HTML）
===
https://reurl.cc/e6yeRW

---

## 一個按鍵就讓你變成駭客?

----

先打開瀏覽器
隨便點開一個網站（校網之類的）
然後按下 F12

----

螢幕的右方是不是跳出了一個酷酷的視窗
你剛剛做的就叫做
## 檢視網頁原始碼
<!-- 順便講網址 + 全端/純前端網站 -->

----

而視窗內的文字就是今天的主題

---
# HTML

---

## 網頁小知識

----

## 前端?後端?
![](https://i.imgur.com/RewLgaQ.png)

----

## HTML Method

- GET
- POST
- PUT
- PATCH
- DELETE

----

## 網址
<img src="https://i.imgur.com/tswgU3j.jpg" alt="drawing" width="400"/>

<img src="https://i.imgur.com/fcYKZ3g.png" alt="drawing" width="400"/>


----

## https / http

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

---

### <font color="#f00">H</font>yper <font color="#f00">T</font>ext <font color="#f00">M</font>arkup <font color="#f00">L</font>anguage
---
超文字標示語言
<!-- 不是程式語言 -->

----

## 編輯環境

----

因為 html 不是程式語言
所以用任何文字編輯器（記事本
就可以編寫（但那樣超蠢
所以我們使用 VScode 做為這次的編輯器 

---
https://code.visualstudio.com/

----

## 將檔名存為index.html

因為大部分瀏覽器都會把 index (索引)當作首頁
沒有給子連結時會預設在 index.html

----

## html 基本架構
![](https://i.imgur.com/WszhhyT.png)

----

```html=
<!DOCTYPE html> — 文件類型（doctype）用來連結一些應遵守的規則。

<html></html> — 根元素（root element），所有顯示在這個頁面上的
內容。

<head></head> — 裡面放不會顯示於網頁瀏覽者眼前的重要資訊。

<meta charset="utf-8"> — 這個元素指定文件使用utf-8字元編碼。

<title></title> — 呈現於網頁瀏覽者眼前的網頁標題。

<body></body> — 包含了所有會顯示於網頁瀏覽者眼前的內容。
```

----

```html=
起始標籤：<你要的tag>　ex. <p>
結束標籤：</你要的tag> ex. </p>
內容：ex. My cat is very grumpy
元素： 由起始標籤、結束標籤、內容所組成。
```
---
![](https://i.imgur.com/EwcxpF8.png)

----

5. 屬性
* 在元素名稱和屬性之間有一個空格
* 屬性名稱後面接「=」
* 屬性包在起始標籤裡面
---
![](https://i.imgur.com/lPINRZ3.png)

----

## 屬性範例
``` html=
<p style="color:#60f542"> hello world. </p>
<p style="color:rgb(96,245,66)"> hello world. </p>
```

----

# 所以現在是...
# 實作時間！

----

如果依照剛剛的 code
得到的網頁應該像是這樣
![](https://i.imgur.com/ewaBQBW.png)

----

# Github Pages

----

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

----

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

----

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

---

# 其他元素
https://html-online.com/editor/

----

```html=
<p></p> 段落 paragraph
<strong></strong> 粗體字 strong
<b></b> 粗體字 bold
<i></i> 斜體次 italic
<em></em> 強調字 emphasize

<img src="" alt=""> 照片image

<h1></h1> 標題heading 最大
<h2></h2>      ...
<h3></h3>      ...
<h4></h4>      ...
<h5></h5>      ...
<h6></h6>            最小
```

----

```html=
<ul> 無順序清單 unordered list
    <li></li> 清單內容 list item
    <li></li>
    <li></li>
    ......
</ul>

<ol> 有順序清單 ordered list
    <li></li> 清單內容 list item
    <li></li>
    <li></li>
    ......
</ol>

<a href=""></a> 連結 anchor
*註記：href = hypertext reference
```

----

## 巢狀結構
```html=
<p>My <strong>cat</strong> is very grumpy</p>
```
![](https://i.imgur.com/U2EZuxZ.png)

----

### 巢狀結構錯誤範例
---
``` html=
<p> My <strong> cat </p> </strong>
```

----

## 圖片
```html=
<img src="https://upload.wikimedia.org/wikipedia/zh/c/c1/CKSH_Hsinchu_logo.jpg" alt="CKSH_logo">
```
![](https://i.imgur.com/iBt5aA0.png)

----

## 標題
```html=
<h1>Hello world</h1>
<h2>Hello world</h2>
<h3>Hello world</h3>
<h4>Hello world</h4>
<h5>Hello world</h5>
<h6>Hello world</h6>
```
![](https://i.imgur.com/jSkZxiu.png)

----

## 連結
```html=
<a href="https://hackmd.io/@ihatecheese/BJ22IWhCK#/3/6">handout</a>
```
![](https://i.imgur.com/79wQukl.png)

----

## 清單
```html=
<p>在建功資研，我們有</p>

<ul>
  <li>宇謙</li>
  <li>宇謙</li>
  <li>宇謙</li>
</ul>

<p>你以為沒了嗎?對，沒了</p>
```
![](https://i.imgur.com/P9Eo1RW.png)

---

# 補充

----

## 註解
* C++
```cpp=
//這是C++的註解
```
* html
```html=
<!-- 這是html的註解 -->
```

----

## html的空格
```html=
<p>hello world.</p>
<p>hello       world.</p>
```
![](https://i.imgur.com/QLPpsj6.png)
在html中，不管後面有多少空格
輸出結果最多都只會有一個

----

### 但是如果需要不只一個空格呢?

----

## 字元參照
| <    | &lt\;    |
| ---- | -------- |
| >    | &gt\;    |
| "    | \&quot;  |
| '    | \&apos;  |
| &    | \&amp;   |
| 空白  | \&nbsp\; |

----

## class

----

在html建立一個<p\>元素
並給定名為intro的class
```html=
<p class="intro">This is intro</p>
```
在CSS中參照intro這個class
```css=
.intro {
    color: green
    font-weight: bold
}
```

----

## <div\>

----

* <div\> 當作容器將 HTML 整理出不同區塊
* 為了給 CSS 做排版或 JavaScript 做互動操作
* <div\> 本身沒任何特殊意義

----

class常用於<div\>元素
方便網頁上整個區塊的調整

----

<!-- LaTex -->