網頁設計03-通訊協定與靜態網頁(2.5hr)

一、HTTP/HTTPS(25min)

  1. HTTP簡介：HTTP協議是Hyper Text Transfer Protocol(超文本傳輸協議)的縮寫，是用於從網際網路(WWW:World Wide Web)服務器傳輸超文本到本地瀏覽器的傳送協議。HTTP是一個基於TCP/IP通信協議來傳遞數據(HTML 文件，圖片文件，查詢結果等)。
  2. 說人話：我(Server)->明信片 (HTML/圖片/檔案)->依照中華郵政規範去送信(HTTP協定)->郵差(TCP協定)->門牌(IP協定)->信箱(本地瀏覽器)->你(Client) (http://www.w3big.com/zh-TW/http/http-methods.html)
  3. HTTP請求方法(get/post)： https://medium.com/@totoroLiu/http-post-%E5%92%8C-get-%E5%B7%AE%E7%95%B0-928829d29914
  4. HTTPS簡介：在HTTP上加入SSL/TLS，讓資料以加密方式傳送。https://www.youtube.com/watch?v=o0dO5iXbCCs、https://blog.dexiang.me/tech/about-hyper-text-transfer-protocol/#Why-HTTPS、https://kknews.cc/tech/x5ljxqr.html
  5. 說人話：我(Server)->掛號信 (HTML/圖片/檔案)->依照中華郵政規範去送信(HTTP協定)->加上信封(TLS協定)->郵差(TCP協定)->門牌(IP協定)->信箱(本地瀏覽器)->拆信(解密)->你(Client)
  6. Wireshark軟體：
    1. 封包分析軟體，下載：https://www.azofreeware.com/2008/06/wireshark-100.html
    2. http網頁：http://pos.agric.tw/index.php
    3. https網頁：https://pos.agric.tw/index.php

二、 TCP/IP(15min)

  1. OSI模型簡介：https://zh.wikipedia.org/wiki/OSI%E6%A8%A1%E5%9E%8B
  2. TCP簡介：屬於傳輸層協定，兩端主機可透過彼此的溝通，確保資料在傳輸中的正確性(檢查封包)，以及傳輸速率的控制等，是屬於可靠的、全雙工的連線模式。( http://dns2.asia.edu.tw/~wzyang/slides/info_net/info_B/CH10TCP.pdf 、 https://zh.wikipedia.org/wiki/傳輸控制協定 )
  3. 封包交換：https://www.youtube.com/watch?v=z4WodkgeV3I
  4. IP簡介：找尋位址，每個 IP位址是唯一的，現有IPv4、IPv6兩種版本 ( https://zh.wikipedia.org/wiki/%E7%BD%91%E9%99%85%E5%8D%8F%E8%AE%AE )、https://www.youtube.com/watch?v=WhxVFo_-1EY
  5. 本地IP：它是保留給本機回路測試使用的﹐它不可以被運用於實際的網路中，其中的 127.0.0.1 則代表任何一台 IP 主機本身。(http://www.pcnet.idv.tw/pcnet/network/network_ip_addr.htm)

三、Domain與DNS(10min)

  1. Domain網域名稱與URL結構：https://www.design-hu.com/web-news/domain.html
  2. DNS簡介：網域名稱系統，將好理解的網域名稱(www.google.com)轉換為機器可讀取的 IP位址(172.217.160.100)。https://aws.amazon.com/tw/route53/what-is-dns/、http://dns-learning.twnic.net.tw/internet/intro8.html
  3. 申請靜態域名(Domain)： PChome 買網址 http://myname.pchome.com.tw/、gandi https://id.gandi.net/zh-hant/login

四、網際網路(15min)

  1. 網路發展概況：https://www.youtube.com/watch?v=wuiQeQCfT4g、https://report.twnic.tw/2019/TrendAnalysis_infrastructure.html、https://kknews.cc/news/jno9pl.html
  2. 網路型態：
    1. WAN：https://zh.wikipedia.org/wiki/廣域網路
    2. LAN：https://zh.wikipedia.org/wiki/區域網路
    3. WiFi：https://zh.wikipedia.org/wiki/Wi-Fi
  3. 常見網路設備與線材：
    1. Router路由器：https://zh.wikipedia.org/wiki/路由器
    2. Switch交換器：https://zh.wikipedia.org/wiki/網路交換器
    3. Hub集線器(已被交換器取代)：https://zh.wikipedia.org/wiki/集線器
    4. Firewall防火牆：https://zh.wikipedia.org/wiki/防火牆
    5. Modern數據機：https://zh.wikipedia.org/wiki/數據機
    6. RJ45網路線：https://zh.wikipedia.org/wiki/8P8C
    7. 光纖：https://www.youtube.com/watch?v=PZBUfDGEwEM
    8. 機房建置規劃：http://www.dataknit.com.tw/gallery/施耐德apc資料中心規劃簡介.pdf、http://noc.twaren.net/noc_2008/Download/download_file.php?id=21060103、https://www.ccliang.me/wp-content/uploads/2019/12/網路設備場佈.jpg
  4. 常見連接埠：
    1. 20：FTP data，FTP傳送資料。
    2. 21：FTP control，FTP控制資料。
    3. 22：SSH，可用於遠端登入Linux系統。
    4. 25：SMTP，郵件寄送。
    5. 80：HTTP，未加密網頁。
    6. 110：POP3，收信(存local)。
    7. 143：IMAP，收信(存server)。
    8. 443：HTTPS，加密網頁。
    9. 989：FTPS data，安全FTP的資料傳輸埠。
    10. 990：FTPS control，安全FTP的控制埠。
    11. 3306：MYSQL，MySQL連線。
    12. 8080：HTTP ALT、Tomcat，替代網頁(80port)，tomcat網頁服務。
    13. 詳細：https://zh.wikipedia.org/wiki/TCP/UDP端口列表

五、HTML與CSS(50min+25min練習)

  1. 網頁前端與後端：https://tw.alphacamp.co/blog/2018-07-20-18464、https://www.hexschool.com/qa/how-to.html
  2. HTML簡介：用於建立網頁的標準標記語言，網頁瀏覽器可以讀取HTML檔案，並將其彩現成視覺化網頁。HTML允許嵌入圖像與物件，且可以用於建立互動式表單等。( https://zh.wikipedia.org/wiki/HTML )
  3. CSS簡介：用來為結構化文件(如HTML文件添加樣式(ex:字型、間距和顏色等)的語言，網頁瀏覽器會參照CSS的定義來顯示網頁文字和其它元素的外觀與布局。( https://zh.wikipedia.org/wiki/CSS )
  4. HTML練習：https://www.w3schools.com/html/html_basic.asp
  5. HTML測驗：https://www.w3schools.com/html/html_quiz.asp
  6. CSS練習： https://www.w3schools.com/css/css_syntax.asp
  7. CSS測驗：https://www.w3schools.com/css/css_quiz.asp

六、SEO(10min)

  1. SEO簡介：搜尋引擎最佳化，透過自然排序（無付費）的方式增加網頁能見度的行銷規律。
  2. SEO技巧：https://transbiz.com.tw/seo-guide/ 、 https://marketing.blueeyes.tw/seo-report-introduction.php

七、作業

  1. 要求：
    1. 無需撰寫「功能」，只要版面與格式一樣即可
    2. 頁面上的文字照寫
    3. 若有背景圖片，請用小畫家建立色塊取代原圖
  2. 題目：

八、參考書籍

  1. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=677022&T=0&S=ASC&ty=ie&snc=1609373E1C212BF367F95FCA8DEE52E6
  2. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=651544&T=0&S=ASC&ty=ie&snc=0778DA5CE377D34A3D03463314153404
  3. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=651545&T=0&S=ASC&ty=ie&snc=0778DA5CE377D44D3E00413413143701
  4. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=569607&T=0&S=ASC&ty=ie&snc=C6BE83EC51EE5EC4B789C8BD9A9BBE9A
  5. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=592694&T=0&S=ASC&ty=ie&snc=3E36181A223410160957FA6EE94B0E2A
  6. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=615599&T=0&S=ASC&ty=ie&snc=3E31151A3D192AF062FC5CC98EEF53E5
  7. http://www.libwebpac.yuntech.edu.tw/Webpac2/store.dll/?ID=653203&T=0&S=ASC&ty=ie&snc=3E311114340B46DC4E10312423044711

九、課程影片(片長：01:33:27)