### GDSC NYUST x 資訊創客社
<br>
### 網頁前端開發讀書會
#### HTML基礎 & CSS基礎
<br>
#### 2023/11/13 ( Mon ) 19:00 - 21:00
#### 講師：楊鈞元 Charles
#### 本次課程影片：(⚒️製作中)
<img src="" height="200px">
---
### 介紹HTML 5
----
### HTML / HTML 5 的泛用率
[🔗W3Techs](https://w3techs.com/technologies/details/ml-html5)
目前全世界95.5%的網站採用 HTML 技術
而 HTML 5 占了 92.4 %
----
| 早期的網頁 | HTML 5 流行後 |
| :--------: | :--------: |
|<img src="https://hackmd.io/_uploads/HJX6xX0Qp.png" style="width:50vw"> |<img src="https://hackmd.io/_uploads/BJBYCVC7T.png" style="width:50vw"> |
----
具體來說，什麼是HTML、CSS？
|  |  |
| -------- | -------- |
| HTML 提供內容與結構 | CSS 主要提供樣式外觀 |
----
### HTML
#### HyperText Markup Language
超文本**標記語言**
----
### CSS
#### Cascading Style Sheets
階層式**樣式表**
----
他們都**不是** Programming Language (程式語言)
HTML 是"標記語言"
CSS 是"樣式表"
但他們的內容依然可以說是 "Code"
----
### 現在還有需要學寫網頁嗎？
### 為什麼不學寫 APP 就好了？
----
### 學習開發網頁相較於APP...
- 學習曲線比APP要平緩很多
- 即時回饋性高
- 跨平台兼容性高
- 無需安裝與使用者手動更新
---
### 使用環境&工具
- Linux (WSL)
- Node.js
- Yarn
- Vite
---
### 複製專案環境範例
#### 或
### 手動建立環境
---
### 複製專案
``` bash=
git clone https://github.com/NYUST-GDSC/Learning_Exchange_Group_for_Frontend_HTML_CSS_demo
```
---
### 建立開發環境
#### 若已經複製專案可以跳過此章節
----
### 安裝推薦 VS Code Extension
----
### 建立 Vite 專案
```= bash
yarn create vite
```
----
### 先選擇 Vanilla JavaScript 即可
----
### 初始化 Yarn 專案
```= bash
yarn
```
----
### 啟動 Vite 環境
```= bash
yarn dev
```
----
### 設定 Prettier
創建 .prettierrc.js
```= js
module.exports = {
semi: true, // 在語句末尾使用分號
singleQuote: true, // 使用單引號而不是雙引號
trailingComma: "all", // 在物件和數組最後一個元素後使用逗號
printWidth: 80, // 每行最大字符數
tabWidth: 2, // 縮進使用兩個空格
endOfLine: "lf", // 使用 Linux 系統預設的 LF 換行符
arrowParens: "avoid", // 當只有一個參數時，省略箭頭函數的括號
};
export default config;
```
----
### 設定 vscode setting
在 .vscode/settings.json 寫入
```= json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
}
}
```
---
### 安裝推薦 VS Code Extensions
----
#### 利用先前教過的技巧進入專案資料夾
> *忘記怎麼進入專案資料夾了嗎？
> 記得複習 [🔗VS Code & Node.js 課程](https://hackmd.io/@GDSC-NYUST/SkiZJXPZ6/%2FkpG3SBCFQU6OPl-gK-R0eQ?authuser=0)
----
----
|  |  |
| -------- | -------- |
---
## 介紹HTML
----
### 基本框架
```html=
<!DOCTYPE html>
<html lang="en"> <!-- 可以設定其他語言 -->
<head>
<!--全域設定-->
<meta charset="UTF-8" /> <!-- 此行必須在head內第一行 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 標題 </title>
</head>
<body>
<script type="module" src="/main.js"></script>
<!-- 網頁內容 -->
</body>
</html>
```
----
### element tag：元素標籤
HTML由 element 組成
element 透過 tag (標籤) 表達
👆我們可以說這是一個 element
口語上說它是一個 div tag 也沒錯
如果是寫好內容的一段，我們通常會說是 element
如果單純指 HTML 可用的某某 element，會說 'tag' 或 'element tag'
鼓勵大家記住正確的叫法，在討論跟詢問問題時
才能降低溝通成本 (特別是用英文交流時)
----
### element tag：元素標籤
寫在 begin tag 跟 end tag 中間的叫做 element value
也可以叫做 opening tag 跟 closing tag
> [🔗 HTML Element Tag 有哪些？](https://www.w3schools.com/tags/default.asp)
----
#### 隨堂測驗
以下的 element 中，element value 分別是什麼？
```html=
<!-- Q1： -->
<p>123</p>
<!-- Q2： -->
<img src="./image.jpg" alt="這是一張圖片">
<!-- Q3： -->
<br />
```
----
#### 公布答案
```html=
<!-- Q1： -->
<p>123</p>
element value: 123
```
```html=
<!-- Q2： -->
<img src="./image.jpg" alt="這是一張圖片">
element value: (無)
```
```html=
<!-- Q3： -->
<br />
element value: (無)
```
----
### 自閉合標籤（self-closing tag）
不需要 closeing tag 的 tag
也就是不需要 **element value** 的 tag
```html=
<img src="image.jpg" alt="描述文字" />
<br>
```
從 HTML 5 開始，self-closing tag 的 '/'，可加可不加
----
### attribute：屬性
opening tag 中，tag名稱本身 到 '>' 之間，以 name="value" 的格式表示
例如src, alt, href, class, style 都是 Attribute
> [🔗 HTML Attribute 有哪些？](https://www.w3schools.com/tags/ref_attributes.asp)
```html=
<img src="./image.jpg" alt="這是一張圖片" class="backgroud">
<a href="www.google.com.tw" style="font: bold;"></a>
```
----
### block elements 跟 inline elements
<br>
| block elements | inline elements |
| -------- | -------- |
| 組成一個可見區塊 | 專門放在 block 裡的內容 |
| 單獨佔據一行 | 非完整段落或群組<br>通常只出現在一段文字中 |
| 前後以換行分隔 | 不會產生新的一行 |
```html=
常見的 block：<main> <div> <p> <form> <table> <hr>
常見的 inline：<a> <button> <input> <span> <img> <br>
```
----
```html=
<!-- 正確👍 -->
<div>
<span>This is a paragraph inside a div.</span>
<div>
<h2>Heading 2 inside a nested div</h2>
<p>Another paragraph inside the nested div.</p>
</div>
</div>
<!-- 錯誤❌ -->
<span>This is a paragraph with a <div>block element</div> inside.</span>
```
- block elements可以巢狀其他block elements，但不能套在inline elements中
> [🔗更多常見的 block elements 跟 inline elements](https://www.w3schools.com/html/html_blocks.asp)
----
### Text Basics (基礎文本)
----
- 標題標籤（Heading Tags）
```html
在HTML中，標題標籤用於定義標題的級別，從<h1>`到<h6>
分別表示最高級別的標題到最低級別的標題。
```
```html=
<h1>這是主標題</h1>
<h2>這是子標題</h2>
```
<br>
- 段落標籤（Paragraph Tag）：
```
標籤用於定義段落，使文本分段
```
```html=
<p>這是A段落。</p>
<p>這是B段落。</p>
```
----
- 粗體和斜體（Bold and Italic）
```
用於 SEO 權重判斷使用，如果你只是為了美觀/網頁不需要SEO (例如管理系統)
請使用 CSS 來讓文字控制樣式
```
```html=
<p>這是 <strong>粗體</strong> 文本。</p>
<p>這是 <em>斜體</em> 文本。</p>
```
- 換行（Line Break）
```
在文本中插入換行
```
```html=
<p>這是第一行。<br>這是第二行。</p>
```
----
### List Types (列表種類)
----
### unordered list (ul)：無序清單
```html=
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
```
----
### ordered list (ol)：有序清單
```html=
<ol type="1">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol type="A">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol type="a">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol type="I">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
<ol type="i">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>
```
----
### Links (連結)
又稱 archor target, a target 即 "錨點"
```html=
<a href="https://www.google.com" target="_blank">Google首頁</a>
```
```
href=#id 可以連結到同頁面指定的block element
```
target 屬性的 value 意義如下
- _self(default)：覆蓋當前頁面
- _blank：開新分頁
- _parent：在父框架開啟頁面
- _top：在最頂端框架開啟頁面
<br>
----
### Images (圖片)
----
```html=
<img src="./images/1.png" alt="圖片1" />
<img src="https://hackmd.io/_uploads/SJ7M5YRQ6.pngsharing" width="200px" alt="GDSC NYUST" />
```
<br>
- src：指定圖片檔案的路徑或 網站 URL
- alt：提供圖片的文字描述，供視覺障礙者和<br>圖片無法載入時使用
- titie：滑鼠懸停時顯示的訊息
- width：指定寬度，未指定單位時為px
- height：指定高度，未指定單位時為px
----
### Forms & Inputs (表單與輸入)
----
`<form>` 會搭配 `<label>` 以及 `<input>` 使用
----
#### `<label>`
- action：送到的頁面
- for：label限定的參數
- method：表單送出的方法GET或POST
- method=“” 預設為get
- get -> 會將資訊夾帶在網址，適合提交公開非隱私資料(如搜尋關鍵字)
- post -> 會隱藏傳送的參數，適合提交隱私資訊(如登入帳號密碼)
- type：定義input型別，根據型別可輸入各種值
- size：輸入框的長度
- maxlength：輸入框字數限制<br>
----
#### `<input>`
| | |
| -------- | -------- |
----
#### 登入功能範例
```html=
<body>
<form action="" method="post">
<label for="username">帳號</label>
<input id="username" type="text" name="username" />
<label for="password">密碼</label>
<input id="password" name="password" type="password" />
<input type="checkbox" id="show" /> 顯示密碼
<button type="submit">登入</button>
</form>
<script>
let checkbox = document.querySelector('#show');
let password = document.querySelector('#password');
checkbox.addEventListener('click', () => {
if (password.type == 'password') {
password.type = 'text';
} else {
password.type = 'password';
}
});
</script>
</body>
```
----
```
> 加入required參數為必填
> checkbox加入checked參數為預設打勾
> button放在form裡面時預設type=submit，會將form當中name參數的value傳給後端
> 若放在form外面時預設type=button，無任何效果
> 只有name參數會被傳送到後端，HTML也以相同name名稱視為同一主體
> 例如有3個input的name相同，則這個name回傳的值由這3個input的內容共同決定，像是3選1或複選
```
----
### Tables (表格)
----
- `<th>`：表格標題 (table header)
- `<tr>`：表格列(table row)
- `<td>`：表格資料 (table data)
----
`<thead>`, `<tbody>`, `<tfoot>` 不會影響功能跟外觀
但用於分段可以增加 Code 可讀性
----
#### Table 範例
```html=
<table>
<thead>
<tr>
<th colspan="3">Table</th>
</tr>
<tr>
<th>title A</th>
<th>title B</th>
<th>title C</th>
</tr>
</thead>
<tbody>
<tr>
<td>content A</td>
<td>content B</td>
<td>content C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Update: 2023-11-14</td>
</tr>
</tfoot>
</table>
```
----
### Semantic Tags (語意標籤)
----
HTML 5 用更精確的 element 取代 div 用到底
方便維護及閱讀並增強 SEO
- section: 有意義的主題區塊，例如表格的篩選列
- article: 可以獨立的完整區塊，例如一篇文章
- nav: 導航連結區塊，例如主選單、側邊導覽列
- header: 標頭區塊
- footer: 頁尾區塊
- main: 頁面主要內容區塊，每個頁面只能有 1 個
- aside: 跟主要內容無關的區塊
----
---
## 介紹CSS
----
### 基本組成
- CSS Syntax (語法規則)
- CSS Selectors (選擇器)
- Usage of CSS (使用方式)
----
### CSS Syntax
CSS 的語法主要由 Property: Value 組成
用來描述網頁上各個 element 的樣式
<br>
- Selector（選擇器）： 用來選擇要應用樣式的 HTML 元素。
- Property（屬性）： 表示要設定的樣式屬性
```
例如 color、font-size、margin 等。
```
- Value（值）： 屬性的具體值
```
例如 red、14px、8rem 等。
```
----
### CSS Selectors
<br>
- Element (元素)
- Class (類別)
- ID
- Descendant (後裔、後代、層級)
- Attribute (屬性)
```
其中 class 跟 element 最常使用
```
----
``` css=
/* Element */
p {
font-size: 16px;
}
/* Class */
.container {
width: 80%;
}
/* ID */
#header {
background-color: #333;
}
/* Descendant */
article p {
color: #666;
}
/* Attribute */
input[type="submit"] {
background-color: #4285f4;
color: #fff;
}
```
----
### Usage of CSS
- Inline Style
```css=
<p style="color: #ff0000;">這是紅色的文字。</p>
```
- Internal Style Sheet
```css=
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: #333;
}
</style>
</head>
```
----
### Usage of CSS
- External style sheet
```css=
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css">
</head>
-------------------------------------------
/* style.css */
p {
font-size: 16px;
}
.container {
width: 80%;
}
#header {
background-color: #333;
}
```
----
### 不同寫法的差異
#### 優先權：Inline ＞ Internal ＞ External
> External最好維護
建議 Internal Style 與 Inline 只在行數很少
且不需要跟其他檔案共享樣式的情況下使用
----
### Units (單位類型)
----
### absolute units (絕對單位)
> 有預設值或生活中已定義的單位：px (pixel), mm, cm, in
原則上要使用絕對單位時，只會使用 px
----
### relative units (相對單位)
- em：相對 parent element 的長度
```css=
/* parent element */
body {
font-size: 50px;
}
/* current element */
h1 {
font-size: 2em;
/* 2 * 50px = 100px */
}
```
```css
在多層DOM Tree中
越下層element的em值較難計算
因此實務上避免使用em
```
----
- rem (root em)：以html元素計算，瀏覽器預設為16px
```
使用者若有修改瀏覽器設定大小則依修改後為基準單位計算顯示
```
```css=
h1 {
font-size: 1.5rem;
/* 1.5 * 16px = 24px */
}
```
----
- vw (viewport width)：當前視窗寬度的1%
```css=
body{
width: 1920px;
}
h1{
width: 90vw;
}
```
```
設定100vw為略微超出網頁寬度，會產生horizontal scrollbar
```
----
- vh (viewport height)：當前視窗高度的1%
```css=
body{
height: 1080px;
}
h1{
height: 10vh;
}
```
----
- % (percentage)：相對parent element的值
```css=
body {
height: 1080px;
}
h1 {
height: 10%;
}
```
----
### Color (顏色)
- keyword
```css
.demo {
color: red;
}
```
- rgb
```css
.demo {
color: rgb(100, 100, 100);
/* value為0~255 */
}
```
----
### Color (顏色)
- rgba
```css
.demo {
color: rgb(100, 100, 100, 0.5);
/* a為alpha，設定透明度 0(透明) ~ 1(不透明) */
}
```
- hex
```css
.demo {
color: #1f6e6f;
}
```
----
### Color (顏色)
- HSL
```css
.demo {
color: hsl(131, 45%, 62%);
/*
Hue / Saturation / Lightness
色相 / 飽和度 / 亮度
0~359 / 0~100% / 0~100%
*/
}
```
> 純 CSS 的情況，rgba, hex, keyword 是較佳的選擇
----
### Text Styling (文字樣式)
----
- font-size：絕對 or 相對單位
```css
h1 {
/*絕對單位*/
font-size: 24px;
}
p {
/*相對單位*/
font-size: 24rem;
}
```
----
### Width & Height (寬度與高度)
- 定義固定寬高
- width：500px
- height：100vh
- 隨著畫面縮放依比例變更大小
- min-width：20%
- max-width：calc(100% - 50px)
- min-height：20vh
- max-height：calc(10vh + 5%)
```css
calc() 可以將多個單位進行合併運算取最終px值
```
----
### Background (背景)
----
### background-color
- transparent
```css
h1 {
background-color: transparent
/* 將背景設為透明 */
}
```
其餘顏色同先前 color 用法
----
- background-image
```css
h1 {
background-image: url(./image/photo.jpg);
}
```
----
- background-size
- auto：保持原尺寸
- contain：等比例縮放，不剪裁拉伸。
- background-repeat：在contain模式下，若圖片小於容器選擇是否要重複圖片
```css
h1 {
background-size: contain;
/* 預設為repeat */
background-repeat: no-repeat;
}
```
- cover：等比例縮放到完全覆蓋容器，尺寸跟容器不同時即自動裁切
----
- background-postition
設定背景對齊位置
- top
- bottom
- left
- right
----
- background (shorthand)
以"background: 參數"設定值
省略color、imgae、size etc.
```css
h1 {
background: green;
background: url(./image/photo.jpg);
/* ... */
}
```
---
## 結語和問答
----
### 回顧課程
----
### 補充學習資源
- [W3C HTML Tutorial](https://www.w3schools.com/html/default.asp)
- [W3C CSS Tutorial](https://www.w3schools.com/css/default.asp)
- [MDN - 學習該如何開發 Web](https://developer.mozilla.org/zh-TW/docs/Learn)
- [ChatGPT](https://chat.openai.com/)
----
### Q & A
{"title":"HTML基礎 & CSS基礎","slideOptions":"{\"transition\":\"concave\",\"allottedMinutes\":100}","contributors":"[{\"id\":\"f8142aa2-66aa-4867-821d-2f1ffff7a7ba\",\"add\":16048,\"del\":1475}]","description":"image"}