一個網站需要些什麼

• 一台電腦
  • 資料庫
  • 伺服器
  • 網頁介面
• 一個實體位址
  • IP 位址
• 一個網址
  • domain

舉例來說

• 放在 Windows 上的 EazyPHP
  • MySQL

  • Apache+PHP

  • HTML、CSS、Javascript

• 學校給學生的伺服器

  • 140.129.13.240

• 學生的伺服器網址

  • ​homepage.ttu.edu.tw

我知道你們計概沒學好

那我只好從頭開始了

好啦投影片其實沒啥內容

大部份還是我直接講這樣

網路到底是啥鬼？

簡單來說，就是可以讓你上網的東西

自己讀：
鳥哥：http://linux.vbird.org/linux_server/0110network_basic.php#whatisnetwork

維基：http://zh.wikipedia.org/wiki/互聯網

網頁又是啥鬼？

簡單來說，就是你上網之後看到的頁面

通常以 HTML 呈現，CSS 修飾，Javascript 變魔術

自己讀：

維基百科：http://zh.wikipedia.org/wiki/網頁

IP跟網址又是什麼？

IP簡單來說，就像是你家的經緯度

網址簡單來說，就像是你家的門牌

自己讀：

維基百科：
http://zh.wikipedia.org/wiki/TCP/IP協議族

http://zh.wikipedia.org/wiki/域名
 

EazyPHP 是啥？

其實不是啥，他只是個套件包

其他有名的套件包像是 XAMPP、WAMPP 等等

所謂套件包也就是幫你把假一個伺服器所需要的東西都包好

自己讀：

維基百科：
http://zh.wikipedia.org/wiki/XAMPP

其他的？

更底層的東西相信在上次社長大人的社課中已經介紹過了，

大家可以去翻翻當時的投影片

http://slides.com/miso/deck-11#/

還是不懂DNS嗎

還是不懂DNS嗎

How the DNS works

為什麼有家裡IP卻不一定連得到

嘛，你忘了你家的IP分享器/路由器了嗎？

HTML

HyperText Markup Language

• 超文本
• 給瀏覽器看的文字
• XML 格式

HTML

看起來就像這樣

CSS

Cascading Style Sheets

• 決定檔案的顏色、字型、排版等顯示特性
• 加強檔案可讀性與結構化
• 階層式架構

CSS

看起來就像這樣

footer.page-footer {
  margin-top: 0px;
}

#card {
  margin-top: 6%;
}

#register {
  float: right;
  left: -50%;
  position: relative;
}

Javascript

一種直譯的語言

• Javascript 跟 Java 的關係就跟狗與熱狗一般
• 弱型別
• 通常是在瀏覽器上運行

Javascript

看起來就像這樣

var form = document.querySelector('form')
form.onsubmit = function(submitEvent) {
  var name = document.querySelector('input').value
  request({
    uri: "http://example.com/upload",
    body: name,
    method: "POST"
  }, function(err, response, body) {
    var statusMessage = document.querySelector('.status')
    if (err) return statusMessage.value = err
    statusMessage.value = body
  })
}