Web 初學者的第一堂課
網路概論
在開始上課之前
我想知道大家的程度如何
首先
什麼是網路
網際網路
- 對岸稱之互聯網
- 是網路與網路之間所串連成的龐大網路
- DNS、FTP、HTTP、SSH、POP3
- 簡單來講,就是讓你上網的東西

再來
網頁是用什麼傳輸的
超文本傳輸協定
- HyperText Transfer Protocol
- 聽起來就很厲害
- POST、GET、UPDATE、DELETE
- HTML 透過 HTTP(s) 協定傳輸

然後呢?
OSI 模型

提供為應用軟體而設的介面,以設定與另一應用軟體之間的通訊。例如: HTTP,HTTPS,FTP,TELNET,SSH,SMTP,POP3等。
應用層

最重要,最關鍵的一層,是唯一負責總體的資料傳輸和資料控制的一層。
像是 TCP 就是在這一層
傳輸層

網路層提供路由和尋址的功能,使兩終端系統能夠互連且決定最佳路徑,並具有一定的擁塞控制和流量控制的能力。TCP/IP協議體系中的網路層功能由IP協議規定和實現,故又稱IP層。
網路層
讓我們動手看看
請同學打開 Chrome 瀏覽器
讓我們動手看看
請同學打開 Wireshark
沒有就算了,看我的!
IP、網址、Domain?
他們之間的關係是什麼呢
Domain Name Server

電腦透過 DNS 去對應到一組 IP 然後透過 IP 找到主機在哪裡
用漫畫來說就是這樣

How the DNS works
大概瞭解網路之後..
我們來看網頁長什麼樣子
現在流行的網頁框架
- Bootstrap
- Material Design
- Semantic UI
- 還有很多其他的
Bootstrap

Material Design

Semantic UI

漂亮的套版網頁
- HTML5 UP
- materialup
- 還有很多其他的
HTML5 UP

materialup

想不想寫出一樣漂亮的網站
別傻了孩子,我也不會
要做出一個網站我們需要..
- 一台電腦
- 你的雙手
- 一個文字編輯器
環境安裝
請同學下載 Sublime
http://www.sublimetext.com/3
環境安裝
我相信應該大家都有 Chrome
終於要寫網頁了
請照著打
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個網站</title>
</head>
<body>
<h1>Hello HTML5!</h1>
<p>你看打中文也沒有問題!</p>
</body>
</html>
同學恭喜你!
你會寫網頁我們可以下課了!
下堂待續
下禮拜我們會把開發環境建好
然後就開始寫網頁囉!
Web 初學者的第一堂課
By Albert Hsieh
Web 初學者的第一堂課
大同大學資訊創意研究社系列社課
- 1,358