自我介紹

我叫許胖

• 長頸鹿
• 臺大資工碩二
• 美術社 + 生研社 + 資訊社
• 台文 + 日文 + 韓文
• 還有一堆數學
• Facebook

什麼是網頁？

網頁的源起

• 世界第一個網頁 (1989)
  • Tim Berners-Lee, CERN
• 全球資訊網 World Wide Web
  • 統一資源標識符 (URI)：資源定位
  • 超文字傳送協定 (http)：資料傳輸、交流
  • 超文本標記語言 (HTML)：網頁格式
• W3C 協會 (1994)：制定標準

網頁瀏覽器

• 主流市佔率變遷
• 列表、行動裝置
• 發展時間線

第一次瀏覽器大戰

• 新的 feature！！新的特色！！
• 專屬武器格式：VBScript、DHTML、ActiveX
• 後遺症：不遵守標準、支援不穩定
• 結果：IE 勝出 (95%)，Netscape 於 1998 年開源

第一次瀏覽器大戰

• HTML 表格排版 (1995)
• Javascript 上膛 (Netscape 2.0, 1995)
• 程式語言和 CSS 等第一次實裝 (IE3, 1996)
  • CSS
  • VBScript
  • Java
  • JScript
• Flash 問世 (1996)

第二次瀏覽器大戰

• Opera 瀏覽器 (1996)
• Apple
  • Safari 瀏覽器 (2003)
• 第二戰的第一槍－－Mozilla 基金會
  • 網景公司在 1998 年成立
  • 維持開源計畫
  • Firefox 瀏覽器 (2004)

第二次瀏覽器大戰

• XHTML 2.0 (2004)：標準太過嚴格
• 瀏覽器聯盟－－WHATWG (2004)
  • Firefox + Opera + Safari
  • 自己的瀏覽器自己救：HTML5
  • 雙頭馬車時代

第二次瀏覽器大戰

• 新的網頁標準
  • HTML5 (2014)
  • CSS3 (制定中)
  • ES6 (2015)
  • ES7 (制定中)
• Chromium 瀏覽器 (2008)
  • 開源版本 Google Chrome 
• 結果：Chrome 成為第一大瀏覽器，IE 由 Edge 取代

第二次瀏覽器大戰

• 智慧型手機崛起 (2007)
• Flash 逐漸被淘汰 (2010s)

第三次？

• 網際網路變遷
• 延伸閱讀
  • HTML 到 HTML 5 的發展簡史
  • 第二次瀏覽器大戰已分勝負，但第三次大戰才剛剛開始

網頁如何運作？

網路概念

• TCP/IP 架構
• URL
• DNS 協定

TCP/IP 協定架構

統一資源定位符 URL

標示網路上每個文件的方法

DNS 協定

IP 位址和網域的翻譯蒟蒻

排版引擎

• 現代網頁組成主要有三個部分
  • 超文本標記語言 HTML：網頁骨幹
  • 層疊樣式表 CSS：樣式排版、特效
  • 程式語言 javascript：網頁互動
• 排版引擎 (Layout Engine)
  • 瀏覽器主要用於處理 HTML、CSS 渲染的工具
  • 常見的排版引擎
    • KHTML / WebKit / Blink：Chrome、Opera、Safari
    • Gecko：Firefox
    • EdgeHTML：Edge
    • 文字瀏覽器：Lynx、Links

如何打開網頁

1. 輸入網址
2. 藉由 DNS 查詢對應 IP 位址
3. 將對應位置的網頁下載到電腦
4. 由瀏覽器打開下載的檔案
5. 排版引擎渲染檔案
6. 排版引擎的結果，顯示在瀏覽器

常用工具

一個好用的編輯器

一個好用的瀏覽器

• Firefox
• Chrome (RAM 巨獸)
• Edge

更多有用的工具會慢慢介紹！

關於課程

希望有程式底子

• 不是普通的網頁程式設計
• 沒有學過程式會比較辛苦
• 有網路概念會幫助理解

以 Javascript 切入

• 想學 python 和 ruby on rails 要自己來
• 多查文件，這堂課沒辦法講太詳盡
• 網頁設計環境變化大
  • 可能你畢業現在學的東西就淘汰
  • 文件大多只有英文

可能有作業

• 個人寫、團體寫皆可
• 要寫不寫皆可
• 主要讓大家熟悉工具

！有助教！

• 可以多發問
• 歡迎大家快樂學程式
• Any Question？