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