---
# System prepended metadata

title: '[2020H401] 2020.7.2上課筆記'
tags: [H400大學家教]

---

# [2020H401] 2020.7.2上課筆記


## 課程進度

| 日期     | 課程進度   | 備註     |
| -------- | -------- | -------- |
| 6/16(Tue.)    | 課程規畫討論/Python基本觀念          |      |
| 6/18(Thr.)    | Python基本語法(一) 變數與資料結構                |      |
| 6/23(Tue.)    | Python基本語法(二) 控制流程：迴圈與判斷式                |      |
| 6/25(Thu.)    | 函數與類別, Python實務應用             |      |
| 6/30(Tue.)    | 程式碼版本管理   |      |
| 7/2(Thr.)     | **HTML/CSS/Javascript基本觀念與語法**     |      |
| 7/7(Tue.)     | Django & SQL基本觀念與語法     |      |
| 7/9(Thr.)     | Whatsapp Web App系統需求技術分析   |      |
| 7/14(Tue.)    | Whatsapp  Web App專題開發(一)     |      |
| 7/16(Tue.)    | Whatsapp  Web App專題開發(二)     |      |
| 7/21(Thr.)    | Whatsapp  Web App專題開發(三)     |      |
| 7/23(Tue.)    | Whatsapp  Web App專題開發(四)     |      |


## 今日課程重點
- 網際網路運作原理與應用發展
- HTML基礎知識


## 網際網路運作原理與應用發展
### 網路的起源
1960年，美國國防部根據MIT教授的構想，將大學跟研究機構的電腦，以網路連結，稱為APRANET

1990年，研究學者Tim Berners-Lee在歐洲粒子物理實驗室研發全球網（Worldwide Web, WWW），目標是制定文件的標準格式，方便資訊的流通。


### 網站（Web site）簡介
網站是一堆網頁（Web Page）的集合。

而Web Page是網路上的最基本的資料形式，可利用URL（Uniform Resource Locator）的位址來定位。

Web page的格式標準為HTML（Hypertext markup language），內容可包含文字、圖片、影片、聲音、軟體元件，組成多媒體網頁，提供豐富資訊呈現。

Web page的發布，是先將HTML放在網站伺服器上。

使用者透過Web Browser（網頁瀏覽器），輸入此網頁的URL位置或是點選網頁中的超連結(Hyperlink)來對網站伺服器發出請求，當網站伺服器收到請求後，回覆網頁與相關資訊，Ｗeb Browser就會正確顯示網頁內容，讓使用者獲得所需網頁資訊內容。

網站的發布可以透過以下方式
- 自行架設網站伺服器：自己架設一台電腦，並且設定固定IP網址
- 網站託管：找網站伺服器供應商，將網頁檔案上傳至業者的伺服器

### 網站的演進
- Web 1.0：唯讀、單向傳輸的網路世界
    - Ex. 學校課表網頁
- Web 2.0：高互動、雙向資訊傳輸
    - Ex. Facebook, Youtube
- Web 3.0：具備自我學習能力的網路世界（尚未發生）
    - Note: 可以研究語意網、人工智慧

### 動態網頁系統
到了Web2.0，由於網站具備互動性，所以又把這樣的網站，稱為動態網頁系統，就像是網際網路版本的應用程式(Web App)。

#### 動態網頁系統架構
- 二層式架構(Client - Server)
Client(用戶端)使用Web Browser透過http協定，向Server(伺服器端)
提出請求，伺服器回覆用戶請求（http request）回傳相關網頁與資料，用戶端接到網頁與資料後，透過Web Browser呈現人類可理解的內容與格式。

- 三層式架構(Client - Processing - Data Storage)
與二層式架構的差異是，Server端將資料的存取邏輯與儲存分開，Processing Tier根據用戶請求，去Data Storage Tier讀入或寫入資料，並且將結果回覆給用戶。

#### 動態網頁系統相關技術
Web App開發技術可以分為前端(Front-end)與後端(Back-end)兩部分，粗體為本課程所選擇的技術。

- 前端(Front-end)
    - 瀏覽器軟體：**Chrome**, IE, Safari
    - 網頁內容語言：**HTML**
    - 網頁格式語言：**CSS**
    - 網頁格式語言框架：Bootstrap, Foundation
    - 前端程式語言：**Javascript**
    - Javascript函式庫：JQuery
    - Javascript框架：Angular, React, Vue...

- 後端(Back-end)
    - 伺服器（自行架設）：Apache, Nginx, Microsoft IIS...
    - 伺服器（供應商）：**Heroku**, Amazon
    - 後端程式語言：**Python**, Ruby, PHP, ASP, JSP, Node.js...
    - 資料庫：**Postgre**, MySQL, Microsoft SQL...
    - 動態網頁系統開發框架
        - Python: **Django**, Flask, Grok, Pylons
        - PHP: CakePHP, Laravel...
        - JSP:Spring MVC

##  2


### HTML 文件基本架構(HTML5)
1. HTML 基本架構包含 <!doctype html> ， <html>， <head> ，及 <body>

![](https://i.imgur.com/YxUQIXF.png)

- <!doctype html> 宣告本文件為 HTML 文件型態，提供瀏覽器辨識
- <html> 為根元素 (Root element)，根元素包含所有其他元素
- <head> 元素緊跟在 <html> 標籤之後，稱為文件標頭 (Document head)，包含：
- <title> 元素在視窗標題區呈現標題
- <meta charset="utf-8"> 元素說明檔案的編碼方式 (utf-8 為主流)
- <body> 元素緊跟在<head>元素之後， 稱為文件本體 (Document body)

2. 瀏覽器忽略 HTML 文件中的空行，亦忽略多於一個的連續空白
3. HTML 的標籤不分大小寫，因此`<br>`亦可用`<BR>`代替，但習慣上均以小寫為主
4. 可利用各種屬性 (Attribute) 來設定 HTML 元素的特性，屬性放在標籤之後， 其語法為：attribute="value"
    - 例如利用 src (Source) 屬性在 HTML 文件中插入一影像： <img src="myPicture.jpg" alt="My picture">
    - 屬性值的雙引號可以省略 (但並非主流)，但如果屬性有許多值 (亦即內含空白)，就必須要有雙引號，例如： <div style="width:200px; margin:0 auto;">
    
4.  當瀏覽器開啟一份 HTML 文件時，瀏覽器依據標籤指示來組合及格式化文件內容，此程序稱為解析 (Parsing) 或呈現 (Rendering)


### 練習建立一個HTML檔案：
1. 開啟記事本
檔案 → 新增 → ctrl-s → 選擇 <...>/webdesign/ 目錄，檔名：example.html → 儲存

2. 輸入以下內容：

```
<!doctype html>
<html>
<head>
<title>甜點商店</title>
<meta charset="utf-8">
</head>
<body>

<h1>甜點商店</h1>
<p>我們製作最精美、最有創意、最健康的各式甜點</p>
<hr>

<h2>您要什麼甜點?</h2>
<p>餅乾和糕點：每份 50 元</p>
<p>蛋糕和派：每份 75 元</p>
<p>美食巧克力：每份 100 元</p>
<br>

<h2>開店時間</h2>
<p>
  星期一到星期四，7:45 a.m. -- 9:45 p.m.<br> 星期五，7:45 a.m. -- 4:30 p.m.<br>
  星期六，9:00 a.m. -- 4:00 p.m.<br> 星期日，中午 -- 9:00 p.m.
</p>
<br>

<h2>付款方式</h2>
<p>現金，自動櫃員機，信用卡，美國運通，發現卡，大來卡</p>
<br>

</body>
</html>
```

3. 使用Chrome瀏覽器，開啟example.html

### 發布網站：使用Github Pages

https://gitbook.tw/chapters/github/using-github-pages.html



## 參考教材
[HTML/CSS概論](http://yltang.net/tutorial/webdesign/0/)





###### tags: `H400大學家教` 