---
title: Week 4 - Introduction of HTML & CSS
tags: class1000, HTML, CSS
description: Basic introduction of webpage composition
---
# Week 4 - Introduction of HTML & CSS
## 目錄
- [網路的基本概念：電腦間是如何進行通訊的？](#網路的基本概念：電腦間是如何進行通訊的？)
- [網頁由什麼組成？- HTML](#網頁由什麼組成？--HTML)
- [如何做一個美美的網站？ - CSS](#如何做一個美美的網站？---CSS)
---
## 網路的基本概念：電腦間是如何進行通訊的？
廢話不多說，上圖！
### Steps
使用者打開瀏覽器，點了一個網頁，就會在很短的時間內發生以下的事...
Client端
1. 客戶端(client)向伺服器端(server)發出請求
2. 伺服器將請求轉送給網路應用程式
Server端
3. 從資料庫讀取資料
4. 網路應用程式生成網頁
5. 伺服器將網頁連同其他檔案回傳給使用者
6. 瀏覽器解析網頁並將資料呈現給使用者看
### 爬蟲也是相同原理...
* 程式去瀏覽網頁
* 收到伺服器回傳的資料(下載資料)
* 依照預先寫好的規則解析並整理資料
不斷重複上述動作直至遍歷清單內所有目標，如下圖：
> 圖片來源：[電腦間是如何進行通訊的](https://medium.com/@kpoltoradnev/how-the-website-works-71e404bb5708)
> 圖片來源：[網路爬蟲](https://zh.wikipedia.org/wiki/%E7%B6%B2%E8%B7%AF%E7%88%AC%E8%9F%B2)
---
## 網頁由什麼組成？- HTML
> 請看[投影片](https://drive.google.com/file/d/1hI7gel77-6YN803ug-HTkdKUoBfJRYiz/view?usp=sharing)
### HTML基本介紹
* 超文本標記語言(HyperText Markup Language, HTML) [詳見維基百科](https://zh.wikipedia.org/wiki/HTML)
* 用於**建立網頁**的標準標記語言。
* 常與[CSS](https://zh.wikipedia.org/wiki/CSS)、[JavaScript](https://zh.wikipedia.org/wiki/JavaScript)一起用於設計網頁、網頁應用程式以及行動應用程式的使用者介面。
* 網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。
>```HTML```：寫網頁使用的程式語言
>```CSS```：網頁美化的程式語言
>```JavaScript```：在客戶端控制網頁物件間互動的程式語言
>
>直接來看看原始碼吧！
>1. 瀏覽器打開
>2. 按右鍵->點Inspect
>
>
### HTML特色
1. 頭要先宣告版本
2. 由很多標籤(tags)組成(通常是成對的)
3. 巢狀架構
範例1：HTML5 Hello World
> 試試看copy到記事本然後存成.html檔會看到什麼呢？
```HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Site Title</title>
</head>
<body>
<h1>Hello World!</h1>
<div>
<p>~~~Welcome to my web~~~</p>
<a href="https://www.google.com">A link to Google</a>
</div>
<!--<P>This is very minimal "hello world" HTML document.</P>-->
</body>
</html>
```
### HTML常用標籤 tags
* [標題](https://www.w3schools.com/tags/tag_hn.asp)：```<h1> to <h6>```
* [段落](https://www.w3schools.com/tags/tag_p.asp)：```<p></p>```
* 空格：```<br>```
* 字體控制：
```HTML
- 粗體：<b></b>
- 放大字體：<big></big>
- 斜體：<i></i>
- 縮小字體：<small></small>
- 強調字體：<strong></strong>
- 上標：<sub></sub>
- 下標：<sup></sup>
- 水平分隔線:<hr>
```
* 清單：
```HTML
- 編號清單：ol+li
<ol>
</li></li>
</ol>
- 項目清單：ul+li
<ul>
</li></li>
</ul>
```
* [連結](https://www.w3schools.com/tags/tag_a.asp)：```<a></a>```
* 連結目標：```href="要連的網站"```
* 如何開啟？```target="{_blank, _parent, _self, _top}"```
* [圖片](https://www.w3schools.com/html/html_images.asp)：```<img></img>```
* 圖片來源：```src="要連的圖片"```
* 替代文字：```alt=""```
* 圖片標題：```title""```
* 寬度：```width=""```
* 高度：```height=""```
* 排列方式：```align="{left, right, top, middle, bottom}"```
* [表格](https://www.w3schools.com/tags/tag_table.asp)：
* [表單](https://www.w3schools.com/tags/tag_form.asp)：
```HTML
<form>
<input type='輸入種類' value=''>
<textarea>
<button>
<select>
<option>
</form>
```
* [HTML版本](https://www.w3schools.com/tags/tag_doctype.asp)
* 註解：```<!-- comment goes here --> ```
* 區塊元素：```<div></div> or <span></span>```
* 網頁資訊：```<meta name=''>```
* 網站描述：```name='description' content='描述內容'```
* 網站關鍵字：```keywords=''```
* 爬蟲控制項：```name='robots' content='nofollow'```
* 作者：```name='author' content='作者姓名'```
* 快取控制項：```name='pragma'```
* 快取期限控制項：```name='expires'```
### HTML重要屬性 attribute
* id：給元素指定一個**唯一**個標示
* class：對**多個**元素使用同一個方法標示
* name：給元素定義名稱
### HTML重點整理
來看看自己有沒有懂
* [x] HTML頁面是文字檔
* [x] HTML用標籤包夾內容來賦予資料意義
* [x] 標籤通常成對
* [x] 一對標籤又稱「元素」
* [x] 開始標籤(Opening tag)可以填入屬性
* [x] 屬性一定要有**名稱**跟**值**
* 學習要點：
* [x] tag的功能、擺放位置
* [x] DOCTYPE宣告HTML版本
* [x] id與class使個別元素可以被CSS索引
* [x] 用\<div>, \<span>來群組化標籤(tags)
---
## 如何做一個美美的網站？ - CSS
### CSS選擇器
| Selector | Meaning | Example |
| ------------------------- | --------------------------------------------------------------------- | ------------------------------------ |
| Universal Selector | 選取頁面中所有元素 | ```* { }``` |
| Type Selector | 選取頁面中指定元素ex: <br>選取\<h1>, \<h2>, \<h3> | ```h1, h2, h3 { }``` |
| Class Selector | 選取頁面中指定Class | ```.note { }``` <br>```p.note { }``` |
| ID Selector | 選取頁面中指定ID | ```#intro { }``` |
| Child Selector | 選取指定元素下的子元素<br>ex: \<li>下的所有\<a> | ```li>a { }``` |
| Descendant Selector | 選取指定元素下的子孫元素<br>ex: \<li>下的所有\<a>及其子孫 | ```li a { }``` |
| Adjacent Sibling Selector | 選取指定元素的旁系元素<br>ex: 與\<h1>相鄰的\<p>元素 | ```h1+p { }``` |
| General Sibling Selector | 選取指定元素的旁系元素(不一定要直接相鄰)<br>ex: 與\<h1>相鄰的\<p>元素 | ```h1~p { }``` |
### CSS與HTML連結的方式
* 行內套用
* 優點：方便
* 缺點：混亂、不好管理
* 內部載入：使用```<style>```元素
* 外部載入：使用```<link>```元素
適用順序
### CSS箱子模型
CSS把每個元素看成方框
* <font color='Salmon'>紅框-區塊元素(block level elements)</font>
* <font color='MediumAquaMarine '>綠框-行內元素(inline elements)</font>
|  |
|:------------------------------------:|
| CSS箱子模型 |
|  |
|:------------------------------------:|
| 網頁看到的畫面 |
[CSS箱子模型](https://www.w3schools.com/css/css_boxmodel.asp)可以控制方框的尺寸：```width```, ```height```
* ```margin```
* ```border```
* ```padding```
* ```content```
### CSS框架
* 使用CSS 框架可以快速美化網頁、字體樣式
* 優點：
* 省時，省去撰寫重複的code
* 跨瀏覽器上支援度高
* 缺點：
* 會使網站容量變大，載入時間增長
* 著名CSS框架：
* [Bulma](https://bulma.io/)
* [Tailwind CSS](https://tailwindcss.com/)
* [Bootstrap 4](https://getbootstrap.com/)
* [Semantic UI](https://semantic-ui.com/)
* [Foundation](https://foundation.zurb.com/)
* [Materialize CSS](https://materializecss.com/)
### CSS重點整理
來看看自己有沒有懂
* [x] CSS是文字檔
* [x] CSS將每個HTML元素視為單獨的箱子
* [x] Box model由borders, margin, padding組成
* [x] 透過選擇器、宣告可以控制HTML元素的樣式
* [x] 可以透過**行內套用**、**內部載入**、**外部載入**套用CSS
## 給你一條魚不如教你釣魚
有問題的時候該怎麼辦呢？去找這些參考資料GO！
(直接餵狗！懂？)
> [Basic Python tutorial](https://www.runoob.com/python3/python3-tutorial.html)
> [Pandas tutorial](https://pandas.pydata.org/pandas-docs/stable/)
> [Numpy tutorial](https://docs.scipy.org/doc/numpy/reference/)
> [HTML tutorial](https://www.w3schools.com/html/)
>
> [上一篇請點此：Week 3 - 其他常用套件](https://hackmd.io/@singlien/ByxOx6G5r)
> [下一篇請點此：Week 5 - Basic Web Scraper](https://hackmd.io/@singlien/H1-ceYQsS)
>
Sign in with Wallet
Connect another wallet