HTML&CSS教學

--- 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 ![](https://i.imgur.com/hElWb4E.png) --- ## 我是誰 ![](https://i.imgur.com/0dcmvPi.png) * 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>  <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>  ``` ==[點我](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>   <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"  height="100"  ``` ==[點我](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>  <div></div>  ``` ==[點我](https://codepen.io/ycchang0324/pen/oNLgdda)== :computer: ---- ### 10.input and form ```htmlmixed= <input/> type = "" <textarea></textarea>  <form></form>  ``` ==[點我](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> ![](https://sites.google.com/site/guishanguoxiaowunianliuban/_/rsrc/1329996332932/rules/%E7%8F%AD%E8%A6%8F%E6%B5%B7%E5%A0%B1%E7%89%88.PNG?height=400&width=290) ---- ### 為甚麼要有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://i.imgur.com/u9vdblp.png) ==[點我]( 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/

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.