# [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>
- <!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大學家教`
Sign in with Wallet
Connect another wallet