# 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=
<!DOCTYPE html> <!--定義網頁的型態為html-->
<html></html> <!--整個檔案的root tag-->
<head></head> <!--裝檔案的資訊-->
<body></body> <!--裝內文-->
```
一個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=
<title></title> <!--標題-->
<meta> <!--資料的資料-->
<link></link> <!--外部連結-->
<style></style> <!--網頁樣式-->
<script></script> <!--放javascript程式-->
```
==[點我](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=
<h1></h1> <!--最大的標頭-->
<h2></h2> <!--第二大的標頭-->
...
```
==[點我](https://codepen.io/ycchang0324/pen/KKMwXJx?editors=1001)== :computer:
----
### 2.paragraph tags
```htmlmixed=
<p></p> <!--段落-->
<!--字體變化-->
<b></b><!--粗體-->
<i></i><!--斜體-->
<u></u> <!--底線-->
<sub></sub> <!--下標-->
<sup></sup> <!--上標-->
<!--single tag-->
<br/><!--空白行-->
<hr/><!--水平直線-->
```
* 1.段落排放的方式，決定在瀏覽器顯現的方式
* 2.在html檔裡面空白行不會影響
==[點我](https://codepen.io/ycchang0324/pen/LYZEeNd)== :computer:
----
### 3.layout of a webwage
```htmlmixed=
<header></header> <!--放標題-->
<nav></nav> <!--上列選單-->
<main></main> <!--主要文字-->
<article></article> <!--文章內容-->
<section></section> <!--段落-->
<aside></aside> <!--和主網頁無關，如廣告-->
<footer></footer> <!--網頁結尾-->
```
* 增加組織性、易讀性
* 增加搜尋引擎的排名
==[點我](https://codepen.io/ycchang0324/pen/zYBxpyj)== :computer:
----
### 4.links
```htmlmixed=
<a href="url" target="_blank"> <!--用絕對路徑，新開分頁-->
<a href="./page2.html" target="_blank"> <!--用相對路徑，新開分頁-->
<a href="./image.png" target="_blank"> <!--也可以用瀏覽器開圖檔-->
```
==[點我](https://codepen.io/ycchang0324/pen/rNLapbd)== :computer:
----
### 5.images
```htmlmixed=
<img
src="https://codepen.io/ycchang0324/pen/MWeYVLa"
alt="cute chiwawa"
/><!--網址及替代名稱-->
width="100" <!--寬度100px-->
height="100" <!--高度100px-->
```
==[點我](https://codepen.io/ycchang0324/pen/MWeYVLa)== :computer:
----
### 6.videos
```htmlmixed=
<video width="400"
controls loop autoplay
poster="bookmark.png">
<source src="video.mp4" type="video/mp4">
</video>
```
==[點我](https://codepen.io/ycchang0324/pen/JjKovPr)== :computer:
----
### 7.list
```htmlmixed=
<ul></ul> <!--無序清單-->
<ol></ol> <!--有序清單-->
<li></li> <!--清單項目-->
```
==[點我](https://codepen.io/ycchang0324/pen/NWrPMbW)== :computer:
----
### 8.tables
```htmlmixed=
<table></table> <!--表格-->
<tr></tr> <!--一列-->
<td></td> <!--一行-->
<th></th> <!--欄位名稱-->
<Caption></Caption> <!--表格名稱-->
<thead></thead> <!--表格的標頭-->
<tbody></tbody> <!--表格主要資料-->
```
==[點我](https://codepen.io/ycchang0324/pen/gOMbzxJ)== :computer:
----
### 9.container
1.wrapper all the thing into a container
```htmlmixed=
<span></span> <!--inline container-->
<div></div> <!--block container-->
```
==[點我](https://codepen.io/ycchang0324/pen/oNLgdda)== :computer:
----
### 10.input and form
```htmlmixed=
<input/>
type = ""
<textarea></textarea> <!--可輸入文字-->
<form></form> <!--把input資料包起來-->
```
==[點我](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檔的架構
<font size=7>規則</font>
----
### 為甚麼要有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/
{"title":"HTML&CSS教學","metaMigratedAt":"2023-06-15T13:56:34.105Z","metaMigratedFrom":"YAML","breaks":true,"slideOptions":"{\"transition\":\"fade\",\"theme\":\"white\",\"parallaxBackgroundImage\":\"https://ycchang0324.github.io/webprogramming/tutorial-background.png\"}","contributors":"[{\"id\":\"edbc0fde-4951-4b36-b82b-8a01f9684da3\",\"add\":14562,\"del\":6275}]"}