---
# System prepended metadata
title: HTML&CSS教學
tags: [' B&B組', ' EE+', 網服導論]
---
---
title: HTML&CSS教學
tags: 網服導論, B&B組, EE+
slideOptions: # 簡報相關的設定
transition: 'fade' # 換頁動畫
theme: white
parallaxBackgroundImage: 'https://ycchang0324.github.io/webprogramming/tutorial-background.png'
---
# HTML&CSS教學
投影片:https://hackmd.io/@ycchang0324/web-lecture01-html-and-css
---
## 我是誰
* 1.B&B組負責人
* 2.二手書網站後端組組長
---
## 上完這堂課要學會的知識
* 1.學會html和css的使用方法，能夠寫一個網頁
* 2.了解javascript和html的關聯
---
## 大綱
* 簡介
* HTML教學
* CSS教學
* 作業講解
* 參考資料
---
## 簡介
----
### 100%的網站都會用到html和css
----
### 甚麼是html
* hypertext markdown language 超文本標記語言
* html不是程式(programming language)
* html是一個網頁的架構
----
### html的環境
* 1.文字編輯：notepad、textedit(mac)、記事本、visual studio、bracket...
* 2.執行：瀏覽器
----
### 線上程式編輯器 codepen.io
==[點我](https://codepen.io/ycchang0324/pen/zYBxZzP)== :computer:
---
## HTML教學
----
### 註解
```htmlmixed=
```
* 1.讓人易讀程式碼
* 2.debug時可以用
----
### 命名規則
* 1.全部小寫
* 2.如果有兩個字，中間用hyphen(-)連結，如：first-paragraph
* 不好的命名方法
* 1.firstParagraph(camel case)
* 2.FirstParagraph(Pascal case)
* 3.first_paragraph
* 4.firstparagraph
----
### 縮排
* 1.html不強制縮排
* 2.極度強烈建議縮排(除非你想被coworker揍)
----
### html tag
```htmlmixed=
```
一個tag包含三樣東西
* 1.starting tag、closing tag
* 2.attribute屬性
* 3.text內文
----
### html樹狀結構 html Document of Model(html DOM)
```graphviz
digraph hierarchy {
nodesep=1.0 // increases the separation between nodes
node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour
edge [color=Blue, style=line] //All the lines look like this
document -> html
html -> head
html -> body
head->{title}
body-> p
{rank=same;} // Put them on the same level
}
```
parent element、child element、sibling element
----
### head底下的tag
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/vYKEWpp)== :computer:
----
### body底下的tag
* 1.headings
* 2.paragraph
* 3.layout of a webpage
* 4.links
* 5.images
* 6.videos
* 7.list
* 8.tables
* 9.container
* 10.input
----
### 1.heading tags
```htmlmixed=
...
```
==[點我](https://codepen.io/ycchang0324/pen/KKMwXJx?editors=1001)== :computer:
----
### 2.paragraph tags
```htmlmixed=
```
* 1.段落排放的方式，決定在瀏覽器顯現的方式
* 2.在html檔裡面空白行不會影響
==[點我](https://codepen.io/ycchang0324/pen/LYZEeNd)== :computer:
----
### 3.layout of a webwage
```htmlmixed=
```
* 增加組織性、易讀性
* 增加搜尋引擎的排名
==[點我](https://codepen.io/ycchang0324/pen/zYBxpyj)== :computer:
----
### 4.links
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/rNLapbd)== :computer:
----
### 5.images
```htmlmixed=
width="100"
height="100"
```
==[點我](https://codepen.io/ycchang0324/pen/MWeYVLa)== :computer:
----
### 6.videos
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/JjKovPr)== :computer:
----
### 7.list
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/NWrPMbW)== :computer:
----
### 8.tables
```htmlmixed=
|
|
|
```
==[點我](https://codepen.io/ycchang0324/pen/gOMbzxJ)== :computer:
----
### 9.container
1.wrapper all the thing into a container
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/oNLgdda)== :computer:
----
### 10.input and form
```htmlmixed=
type = ""
```
==[點我](https://codepen.io/ycchang0324/pen/jOrExoB)== :computer:
---
## CSS教學
----
### 大綱
* 1.css是甚麼
* 2.css寫在哪裡
* 3.css的規則
----
### CSS是甚麼
* cascading style sheet 階層式樣式表
* 網頁美化的魔術師
* css不是程式
----
### CSS寫在哪裡
* 1.直接在tag裡面寫(inline css)
* 2.head裡面的style(internal css)
* 3.外面的css檔(external css)
==[點我](https://codepen.io/ycchang0324/pen/YzWXQEV)== :computer:
----
### CSS檔的架構
規則
----
### 為甚麼要有CSS檔
* 1.可以讓多個html檔共用
* 2.html檔較簡潔
----
### CSS檔的規則
```css=
selector{
property1:value1; /*注意：css要加分號*/
property2:value2; /*注意：css的property是冒號不是等號，且沒有雙引號*/
/*注意：css的註解和html的不一樣，且沒有 // 這種註解*/
}
```
----
### selector介紹
```css=
.class{} /*類別selector*/
#id{} /*id selector*/
* {} /*universal selector*/
p{} /*tag selector*/
h1,h2,p{} /*group selector*/
div p{} /*select p in div*/
p.class{} /*select p in the class*/
p#id{} /*slector p in id*/
```
----
### CSS功能教學
* 1.color
* 2.background
* 3.font
* 4.box model
* 5.pseudo class
* 6.position
* 7.flexbox
----
### 1.color
```css=
color:red; /*一般的顏色*/
color:Lavender; /*html自訂顏色的名字*/
color:#00ff00; /*十六進位*/
color:rgb(0,255,0); /*rgb值*/
}
```
==[點我]( https://codepen.io/ycchang0324/pen/YzWypmX)== :computer:
----
### 2.background
```css=
background-color: #AAAAAA; /*背景顏色*/
background-image : url("image.jpg"); /*背景圖片*/
background-repeat: no-repeat; /*是否重複*/
background-position: right top; /*圖片位置*/
}
```
==[點我]( https://codepen.io/ycchang0324/pen/xxOwgxN)== :computer:
----
### 3.font
```css=
font-weight: bold; /*字體粗細*/
font-family: 'Open Sans', sans-serif; /*字型*/
font-style: italic; /*字體樣式*/
font-size: 14px; /*字體大小/
}
```
[font 中文字型](https://www.wibibi.com/info.php?tid=67)
==[點我]( https://codepen.io/ycchang0324/pen/WNxbmjY)== :computer:
----
### 4.box model
==[點我]( https://codepen.io/ycchang0324/pen/eYzpgJQ)== :computer:
----
### 5.pseudo class
```css=
li:first-child /*第一個子元素*/
li:last-child /*最後一個子元素*/
li:nth-child(5) /*第五個子元素*/
li:nth-child(even) /*偶數子元素*/
a:link { /*未點擊前*/
color: red;
}
a:active{ /*點擊時*/
color:green;
}
a:hover{ /*滑鼠飄過連結時*/
color:blue;
}
a:visited{ /*已點過連結*/
color:black;
}
```
==[點我](https://codepen.io/ycchang0324/pen/xxOGLLX)== :computer:
==[點我](https://codepen.io/ycchang0324/pen/NWrqvpQ)== :computer:
----
### 6.position
```css=
position:relative;
position:absolute;
position:fixed;
```
==[點我](https://codepen.io/ycchang0324/pen/VwjLzKX)== :computer:
----
### 7.flexbox
```css=
display:flex;
flex-direction: column;
vertical-align: center;
justify-content: center;
justify-content: flex-end;
justify-content: space-around;
```
==[點我](https://codepen.io/ycchang0324/pen/KKMdaYE)== :computer:
---
## 作業連結
[網服導論HW1 HTML&CSS](https://hackmd.io/5wGLpTcdQWqIow5xWIstFA?view)
---
## 參考資料
* 1.HTML Full Course - Build a Website Tutorial
* https://www.youtube.com/watch?v=pQN-pnXPaVg
* 2.CSS Crash Course For Absolute Beginners
* https://www.youtube.com/watch?v=yfoY53QXEnI
* 3.W3school
* https://www.w3schools.com/
width="100"
height="100"
```
==[點我](https://codepen.io/ycchang0324/pen/MWeYVLa)== :computer:
----
### 6.videos
```htmlmixed=
```
==[點我](https://codepen.io/ycchang0324/pen/JjKovPr)== :computer:
----
### 7.list
```htmlmixed=