網站開發入門：從概念到實踐

前言

想了很久，部落格要用什麼來開局？一直都沒有下定決心，導致部落格閒置了很久。後來想想，反正當初架設部落格也是因為要記錄一下學習的過程，而我也沒有真正的、系統化地學習過網頁設計，大多都是需要什麼學什麼，埋了不少的坑，倒不如就趁這個機會好好地填坑吧！

這個系列比較適合新手，如果是大佬之類的，也歡迎留下建議！

什麼是網站開發

網站開發可以說是一門將創意轉化為實際應用的藝術，簡而言之就是把腦海裡面的想法具象化。這個領域涵蓋的範圍很廣，從網站的規劃、網頁的設計、功能實現，一直到網站上線、後期維護，無不在告訴我們網站開發沒有那麼的容易。

需要什麼技能

要開發一個網站，你需要學會運用三門語言：HTML、CSS、JavaScript。如果把網站比喻成一個人的話，HTML 就好像是人的骨幹，CSS 是人的血肉，JavaScript 是讓人能夠動起來的關鍵。

開發前的準備

在開發前總需要趁手的工具，就如同廚師在烹飪時需要鍋碗瓢盆等器具一般。那我們到底需要準備什麼？

• 程式編輯器

  常見的編輯器有 Visual Studio Code（VSCode）、WebStorm、Dreamweaver、Sublime Text、Atom（現已不再維護更新）、Notepad++、VIM 等。

  自己比較愛用 VSCode，偷偷推一下自己的 VSCode 主題——Canis Theme。

• 瀏覽器

  常見的瀏覽器有 Chrome、Firefox、Safari、Edge、Brave、Arc Browser 等。

• 其它（暫時不需要）

  • FTP：FileZilla、WinSCP
  • 版本控制：Git

網站架構

前面有提到，網站一般是由 HTML、CSS、JavaScript 組成的。這代表著網站網站的架構會圍繞著這三種類型的檔案，也如上面的圖一般，網站除了可能會有其他的檔案。HTML 的副檔名一般為 html、htm，CSS 為 css，JavaScript 為 js

當使用者在進入網站的時候，第一個會看到的頁面是首頁，首頁的檔名通常是下面列出來的幾種，當然這個可以在伺服器那邊修改。

• index.html
• index.htm
• default.htm
• default.html

舉例來說，如果使用者訪問 http://example.com/，而不是 http://example.com/about.html 之類的網址的話，瀏覽器會自動尋找首頁。

網址結構

• 協議名稱

  常見的協議有以下幾種：

  類型	格式
  http	http://
  https	https://
  mailto	mailto:
  ftp	ftp://
  file	file:///

• 域名

  項目	說明
  國家和地區頂級域名	國家和地區頂級域名（country code top-level domain，縮寫：ccTLD），簡稱國家頂級域，又譯國碼域名、頂級國碼域名、國碼頂級網域名稱，或頂級國碼網域名稱。是用兩拉丁字母國家或地區名縮寫代稱的頂級域，使用 ISO 3166-11 標準。
  頂級域名	頂級域、一級域或頂級域名（Top-level Domain，縮寫：TLD）是域名系統的等級中，位於根域空間的最高級域名。
  二級域名	在頂級域名註冊機構註冊的獨特名稱，用於標識你的網站或公司。
  三級域名	又稱子域名，用於進一步區分或指向網站的特定部分或功能。

• 埠號

  一般 http 是 80、https 是 443。

• 查詢

  由半型問號（?）開頭，後面接着一組一組的參數與值（格式 [參數]=[值]），每個項目由 & 符號連結。

當然這些是基礎的，還有一些之後遇到會講。

結語

這篇說了網站開發所需要的基石技能，還有要準備的東西，以及網址的組成。我覺得這篇就講這些了吧？剩下的留給其它篇講吧。

嚴格來說這是我第一次寫部落格，如果有寫的不好的地方，或是有錯誤的地方，歡迎告訴我！另外，部落格裡面的範例程式一般都會在我的 CodePen 裡面，之後有用到其他的再說。

參考資料

1. 學習 HTML ：指南與教學 - 學習該如何開發 Web | MDN：https://developer.mozilla.org/zh-TW/docs/Learn/HTML
2. 統一資源定位符 - 維基百科，自由的百科全書：https://zh.wikipedia.org/zh-tw/統一資源定位符
3. URL格式_百度百科：https://baike.baidu.hk/item/URL%E6%A0%BC%E5%BC%8F/10056474
4. 域名 - 維基百科，自由的百科全書：https://zh.wikipedia.org/zh-tw/域名
5. 頂級域 - 維基百科，自由的百科全書：https://zh.wikipedia.org/zh-tw/頂級域
6. 頂級域名列表：https://data.iana.org/TLD/tlds-alpha-by-domain.txt
7. 國家和地區頂級域 - 維基百科，自由的百科全書：https://zh.wikipedia.org/zh-tw/國家和地區頂級域
8. ISO 3166-1 - 維基百科，自由的百科全書：https://zh.wikipedia.org/wiki/ISO_3166-1

Footnotes

1. ISO 3166-1 國際標準是 ISO 3166 的第一部分，有 ISO 標準國家代碼。旨在為國家、屬地、具特殊科學價值地點建立國際認可的代碼，分為 3 種，即二位字母代碼（alpha-2）、三位字母代碼（alpha-3）、數字代碼（numeric）。 ↩