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>同學恭喜你！
你會寫網頁我們可以下課了！
下堂待續
下禮拜我們會把開發環境建好
然後就開始寫網頁囉！