第一次做網頁，先看懂這些基本名詞

網頁（web page）是你在瀏覽器裡看到的一個頁面，例如作品介紹頁。網站（website）則是組織在一起的網頁與資源，例如包含首頁、作品頁、關於我的整個作品集。網站也可以只有一頁。

瀏覽器（browser）是用來開啟與呈現網頁的軟體，例如 Chrome、Safari 或 Firefox。它讀取網頁的內容與樣式，將它們呈現成你能閱讀、點選的畫面。

網址（URL）用來指出資源的位置。它可以指向一篇文章，也可以指向一張圖片。連結（link）則讓你從目前的地方前往另一個網址，或跳到同一頁的某個段落。

延伸閱讀：MDN：網路如何運作。

做網頁時，最常先遇到 HTML、CSS 和 JavaScript。用同一張作品卡來看，就容易理解它們的差別。

HTML｜內容與結構

用標籤描述標題、段落、圖片、按鈕等內容。它是標記語言。作品卡上有哪些文字、哪裡放圖片，可以由 HTML 描述。

CSS｜外觀與排版

描述字體、顏色、間距和版面。作品卡的背景色、圖片比例、手機上改成單欄，都可以用 CSS 處理。

JavaScript｜程式邏輯與行為

是一種程式語言。你按下「只看品牌設計」，作品列表便依條件更新，這類行為可以用 JavaScript 實作。

響應式設計（responsive design）是讓版面隨螢幕與可用空間調整。例如桌機並排三張作品卡，手機改成一張一張閱讀，而非把桌機畫面整張縮小。

那 script 又是什麼？

script通常譯為「腳本」，是用來執行工作的程式。在網頁情境裡，常指 JavaScript 程式。HTML 的 <script> 元素可以放入或載入這類程式。

script.js 只是常見的檔名，不是另一種語言，也不是所有網站都一定要用這個名稱。檔案叫 main.js 或 app.js 也很常見。

HTML 本身就有連結、表單輸入、展開與收合等原生能力；不是所有互動都需要 JavaScript。

打開專案資料夾，可能看到什麼？

portfolio/
├── index.html       首頁內容
├── styles.css       外觀與排版
├── script.js        自訂互動
└── images/
    └── project.jpg  作品圖片

原始碼（source code）是用來製作網站、可以編輯的程式與標記內容。素材（assets）常指圖片、字體、影片等資源。上面是一種簡單的安排，並不是固定規格。

檔案路徑（path）說明檔案位在哪裡。例如從這份 index.html 指向圖片，可以寫 images/project.jpg。圖片移了位置，引用它的路徑也可能要跟著修改。

延伸閱讀：MDN：網頁標準與核心技術。

作品集先展示圖片和文字，就能發揮用途。但如果你想加入「訪客填寫聯絡表單」，接下來要想的是：按下送出之後，誰接收資料？資料存在哪裡？

前端（frontend）

使用者在瀏覽器裡接觸的介面與行為，例如填寫表單、看到錯誤提示。前端程式主要在使用者的瀏覽器執行。

後端（backend）

在伺服器端處理資料與規則的部分，例如檢查表單資料、寄送通知、確認登入權限。

伺服器（server）

接收請求並提供回應的軟體或運行它的電腦。可以提供網頁檔案，也可以執行後端程式；不一定是你自己購買的一台機器。

資料庫（database）

有組織地儲存和查詢資料的系統，例如保存聯絡紀錄。你之後從另一台電腦登入，也能透過服務讀取同一份資料。

訪客填表前端介面

→

檢查與處理後端服務

→

保存紀錄資料庫

API是軟體之間約定好的操作介面。以聯絡表單為例，前端可以依後端 API 的規則送出資料，再取得成功或失敗的回應。API 不只用於連網，瀏覽器也提供操作畫面等 API。

先確認需求：只展示作品，不一定需要自己開發後端或建立資料庫。純前端網頁也能有互動；「靜態網站」不等於畫面不能動。

同樣地，畫面出現「送出成功」的字樣，不足以證明資料已寄出或保存。製作時要實際確認接收端，才知道整個流程有沒有完成。

延伸閱讀：MDN：伺服器端入門、API 的定義。

本機（local）指目前使用的這台電腦。你可以直接開啟一些簡單的 HTML 檔案，也可以啟動本機伺服器，以接近網站的方式測試。這個階段通常稱為預覽（preview）。

看到 http://localhost:3000 時，localhost 指的是開啟網址的裝置自己；3000 是連接埠，用來指定要連到的服務入口。它不是公開網站網址：把它傳給朋友，朋友會連向自己的裝置，不是你的作品集。

部署（deploy）是把準備好的網站檔案與必要設定放到目標環境，讓網站能在那裡運作。部署到公開託管服務後，別人才可以透過對應網址開啟。

託管（hosting）是提供網站存放與運作環境的服務。網域名稱（domain name）則是容易記住的名稱。前者負責承載網站，後者幫助人們找到它；使用託管平台提供的網址，也可以先分享網站，不一定要先買自己的網域。

https://example.com/works/

https://

使用的通訊協定

example.com

網域名稱

/works/

資源路徑

再認識兩個詞：DNS 與 HTTPS

DNS 是網域名稱系統，協助查找網域對應的網路位址。使用自己的網域時，通常需要依託管服務指示設定相關紀錄。

HTTPS 是經過加密保護的 HTTP 連線方式，用來保護傳輸中的資料；它不代表網站內容一定可信，也不保證網站沒有其他安全問題。

延伸閱讀：MDN：發布網站、HTTPS。

下面是一段示意指示，不是現在需要執行的命令：

「在終端機安裝套件，先啟動本機預覽，確認後建置，再部署網站。」

翻成白話就是：用文字指令操作電腦，準備專案需要的程式，在自己的電腦試看，確認後產生發布用檔案，最後放到網站環境。

終端機（terminal）

用文字指令與電腦互動的介面。當教學請你輸入一行命令時，通常會說明要在哪個資料夾執行。

套件（package）

可重複使用的一組程式或資源。專案依賴的套件，常稱為「相依套件」。安裝它們是讓專案取得需要的功能。

框架（framework）

提供既定結構與做法，幫助組織應用程式。它能減少部分重複工作，但簡單網頁也可以直接使用 HTML、CSS 與 JavaScript。

建置（build）

將開發中的檔案轉換、整理成適合發布的版本。某些專案需要這一步；簡單靜態網頁可能直接發布原本的檔案。

Git、GitHub、儲存庫，又是什麼？

Git 是版本控制工具，協助記錄檔案變更、比較版本和協作。儲存庫（repository，常簡稱 repo） 保存專案檔案及版本歷史。

GitHub 是託管 Git 儲存庫並提供協作功能的平台。把程式碼推送到 GitHub，並不自動等於網站已發布；還要設定 GitHub Pages 或其他部署服務。有設定自動部署的專案，推送後才可能接著觸發發布。

指示看不懂時，可以直接問 AI：「請說明這一步的目的、要在哪裡操作、成功後會看到什麼；也請確認我的專案真的需要這一步。」這比把每個名詞背起來更容易開始。

延伸閱讀：GitHub 官方：Git 與 GitHub。