前言
網頁應用程式 (web application) 是指以全球資訊網 (the Web) 為載體的應用程式。更精確地說，是使用 HTTP 協定和外界溝通的應用程式。本文短短的內容無上馬上讓讀者會寫網頁應用程式，但可以對寫網頁有一個起點和方向。
註：網頁應用程式其實有點誤譯，因網頁應用程式有可能沒有頁面 (web pages)，僅輸出資料。中文維基將 web applications 翻為網路應用程式，但這樣可能會和涵蓋更廣的 network applications 搞混，故我們仍沿用原有的翻譯。
你可能不需要網頁程式設計
我們談到網頁時，其實可能代表以下數種意義之一：
- 網頁 (web pages)
- 網站 (websites)
- 網頁應用程式 (web applications)
- Web API
除此之外，還有一些不典型的網頁應用程式：
- 混合模式行動軟體 (hybrid applications)，像是 Cordova
- 使用 JavaScript 寫行動軟體，像是 React Native 或 NativeScript
- 應用網頁技術的桌面軟體 (desktop applications)，像是 Electron
- 將網頁程式做為物聯網程式的一部分
網頁 (Web Page)
全球資訊網一開始的目的是為了傳播靜態文字資訊，後來才慢慢加入各種檔案格式的支援；網頁 (web page) 一開始只是靜態的文件，沒有漂亮的樣式。網頁之間可透過連結 (hyperlinks) 相互串連，是其一大特色。
靜態網頁的例子像是由 doxygen 或其他同質軟體生成的函式庫 API 文件。這類網頁可線上 (online) 或離線 (offline) 觀看。
對於甚少變動的內容，使用靜態網頁仍然是最快的。因為靜態網頁不需要由後端程式動態生成頁面，而是直接從網頁伺服器傳頁面到瀏覽器。
網站 (Website)
我們這裡的網站 (website) 是指以內容 (content) 為主體的網站。內容型網站 (content website) 以靜態內容為主，可說是多個網頁的集合體。
網站會用有組織的方式將網頁串連起來，讓網站訪客易於拜訪。一些網站的例子包括部落格 (blogs)、維基 (wikis)、討論區 (forums) 等。其實部落格、維基、討論區、社群媒體等在本質上都是網站，差異在於版面排列的方式。部落格是以時間軸為中心，維基以條目為中心、討論區以討論串為中心。藉由不同的排列方式，不同類型的網站帶給我們不同的閱讀感受。
依據網頁生成的方式，可將網站分為靜態網站和動態網站兩種。前者像是以靜態站台產生器產生的部落格，後者像是以 Wordpress 架設的部落格或以 phpBB 架設的討論區等 (參考這裡)。兩者的差別在於輸出的頁面是靜態的還是由程式即時產生。
現在想做內容型網站的話，幾乎不會從頭寫內容管理系統，而會善用現有的內容管理系統，踩在巨人的肩膀上。透過 WordPress 或其他內容管理系統，可以在完全不寫程式碼或僅寫少量程式碼的前提下，很快地建立一個網站。
網頁應用程式 (Web Application)
網頁應用程式 (web applications) 則是透過全球資訊網發佈的應用程式，和行動應用程式 (mobile applications) 是兩種最受一般使用者 (general users) 喜好的應用程式的媒介；一些知名的網頁應用程式有 Gmail 或 Google Maps。
網頁應用程式很難直接用 Wordpress 或其他同質的內容管理系統來做，往往需要依專案的需求重新開發，這也是程式人比較能發揮專長的地方。
Web API
Web API 是將網頁應用程式視為一種遠端 (remote) API。這類應用程式沒有頁面 (web pages)，以網址做為其對外的介面 (interfaces)。
比起函式庫 (libraries) 來說，web API 的開發者對自己 API 有較高的管控權，可保護 API 的程式碼，易於配置運算資源。而且 web API 是跨平台的，主流的程式語言都有使用 web API 的函式庫或套件。因此，近年來許多大型科技公司 (tech giants) 以 web API 發佈其產品。
我需要那一種形式的網頁？
根據不同的需求，可決定學習的深度。如果只是要做內容型網站，重頭打造內容管理系統往往是在繞遠路；選擇現有的軟體來製作網站會比較快，這時的重點就會放在 HTML 和 CSS 上。如果是想做應用程式，除了前述兩項技術外，JavaScript 目前仍是必學的。當然，還要學一些其他的東西，我們下一節會談。
網頁程式學習地圖
在理論面來說，需要學習：
- HTTP 協定
在技術面來說，需要學習：
- 前端 (front end)
- HTML 和其前置語言
- CSS 和其前置語言
- JavaScript 和其前置語言
- 後端 (back end)
- 至少一種後端語言
- 資料端
- 關連式資料庫 (relational databases)
- NoSQL 資料庫
- (選擇性) 其他
- 第三方 API
- GNU/Linux 系統管理
- 版本控制軟體
- 其他工具
註：前置語言經由前置處理器 (preprocessor) 會轉為相對應的原生語言。
看起來東西很多，好像要學很久，但初學者不用妄自菲薄，即使完全不用後端技術，光會前端技術就可以寫一些網頁小程式了。
後端程式主要的功能是：
- 做為前端和資料庫間連結的橋樑
- 隱藏一些敏感的數據和程式邏輯
- 串接其他不易或無法在前端使用的應用程式
對於初學者來說，建議先學前端相關的技術 (HTML、CSS、JavaScript 等)。因為學完前端技術後，就可以建立有界面、有程式邏輯的網頁小程式了。對於寫網頁程式來說，後端程式在需要時再補上即可。
由於篇幅限制，我們不會全部介紹，目前主要目標放在 HTTP 協定、HTML、CSS 的介紹，會加入一些現代化工具和前置語言的相關內容。至於其他的就等以後有機會再開新的系列文。