完全新手也能做網站！

先說重點：你不需要任何程式經驗，只要會用記事本和瀏覽器就能做網站！

想像一下：

• 就像寫 Word 文件一樣簡單
• 不用花錢買軟體，只要有電腦就行
• 不用背程式碼，複製貼上就完成
• 10分鐘內就能看到成果

學完這篇後，如果你想進一步精進技能，可以參考我們的CSS動畫基礎教學，讓你的網站加上動態效果。

我們會做出什麼？

一個簡單但完整的個人網站，包含：

• 你的名字和簡介
• 幾張照片或作品
• 聯絡方式
• 在手機和電腦上都好看

總共只需要3樣東西：

1. 記事本（電腦裡就有）
2. 瀏覽器（Chrome、Edge 都行）
3. 10分鐘時間

這只是開始，後續你可以學習更多技能，像是CSS垂直置中技巧等進階布局技巧。

如果你需要為企業建置專業網站，也可以參考我們的企業網站建置指南。

第一步：打開記事本開始寫

什麼是 HTML？

想像你在寫一份文件：

• 一般文件：你寫「標題」，看起來就是普通文字
• HTML 文件：你寫「<h1>標題</h1>」，瀏覽器就知道要把它變大、變粗

HTML 就是告訴瀏覽器：「這段是標題、那段是內文、這裡放照片」的說明書。

開始動手做

步驟 1：打開記事本

• Windows：開始選單 → 搜尋「記事本」
• Mac：啟動台 → 搜尋「文字編輯」

步驟 2：複製下面的程式碼 不要怕這些看起來很複雜的字，就直接複製貼上：

第二步：修改成你自己的資訊

現在你有一個基本的網站了！但裡面還是範例內容，我們來改成你自己的資訊。

要改哪些地方？

找到這些文字並改成你的：

1. 「你的名字」 → 改成你的真名或暱稱
2. 「關於我」的內容 → 寫一些你的介紹
3. 「我的興趣」 → 改成你真正的興趣
4. 「[email protected]」 → 改成你的真實信箱

簡單修改範例

原本：我是 <strong>你的名字</strong>
改成：我是 <strong>小美</strong>

原本：[email protected]
改成：[email protected]

想要更漂亮？簡單加個照片

如果你想加照片，找到這一行：

<p>這是我的第一個網站，很開心你來參觀！</p>

在下面加上：

<img src="https://picsum.photos/300/200" alt="我的照片" style="width:300px; border-radius:10px;">

解釋：

• https://picsum.photos/300/200 是一張隨機美圖
• 你可以改成你自己的照片網址
• width:300px 控制照片大小
• border-radius:10px 讓照片有圓角

第三步：檢查你的成果

儲存檔案

超級重要的步驟：

1. 在記事本按「檔案」→「另存新檔」
2. 檔案名稱打：index.html（一定要 .html）
3. 檔案類型選：「所有檔案 (.)」
4. 編碼選：「UTF-8」
5. 存到桌面或你記得的地方

開啟你的網站

雙擊你剛存的 index.html 檔案

如果一切順利，瀏覽器會開啟並顯示你的網站！

如果出現問題

常見問題和解決方法：

問題1：雙擊檔案沒反應

• 檢查檔名是否為 .html 結尾
• 嘗試右鍵 → 開啟檔案 → 選擇瀏覽器

問題2：網頁看起來很醜

• 可能複製程式碼時有缺少部分
• 重新複製完整的程式碼

問題3：中文變成亂碼

• 重新儲存檔案，編碼選擇「UTF-8」

問題4：修改後沒有變化

• 記得要存檔案
• 重新整理瀏覽器（按F5）

第四步：讓網站在手機上也好看

你現在的網站在電腦上看很棒，但在手機上可能會太小或跑版。我們來簡單修正一下。

什麼是響應式設計？

簡單說就是：

• 在大螢幕（電腦）上，網站看起來是一種樣子
• 在小螢幕（手機）上，網站會自動調整變得適合閱讀

超簡單的修正方法

在你的程式碼最上面，找到 <style> 這一行，在它的下面加上這段：

/* 讓網站在手機上也好看 */
@media (max-width: 600px) {
    body {
        padding: 10px;
    }
    
    .container {
        padding: 20px;
    }
    
    h1 {
        font-size: 24px;
    }
    
    .intro {
        font-size: 16px;
    }
}

這段程式碼的意思：

• 當螢幕寬度小於600px（手機大小）時
• 自動縮小一些間距和文字大小
• 讓內容更適合小螢幕閱讀

測試手機版本

在電腦上測試：

1. 在瀏覽器按 F12（開啟開發者工具）
2. 點擊手機圖示（響應式設計模式）
3. 選擇不同的手機型號查看效果

在手機上測試：

1. 把 index.html 傳到手機（用雲端硬碟或Line）
2. 在手機上開啟檔案
3. 看看是否顯示正常

第五步：把網站放到網路上讓大家看到

現在你的網站只能在你的電腦上看到，我們來把它放到網路上！

免費網站託管 - GitHub Pages

GitHub Pages 是什麼？

• 免費的網站託管服務
• 全世界的人都能看到你的網站
• 不用花錢，不用複雜設定

超簡單上傳步驟

步驟1：註冊 GitHub

1. 去 github.com
2. 點「Sign up」註冊帳號
3. 照著指示完成註冊

步驟2：建立新的儲存庫

1. 登入後點右上角的「+」→「New repository」
2. Repository name 填：你的使用者名稱.github.io
3. 勾選「Public」和「Add a README file」
4. 點「Create repository」

步驟3：上傳你的網站

1. 點「uploading an existing file」
2. 把你的 index.html 拖拽到網頁裡
3. 在下面寫「Add my first website」
4. 點「Commit changes」

步驟4：查看你的網站

• 等1-2分鐘
• 在瀏覽器輸入：https://你的使用者名稱.github.io
• 你的網站就上線了！

其他簡單的選擇

如果GitHub太複雜，還有這些超簡單的選擇：

Netlify Drop

1. 去 netlify.com/drop
2. 直接把你的 index.html 拖拽進去
3. 馬上得到一個網址

CodePen

1. 去 codepen.io
2. 註冊免費帳號
3. 把程式碼複製貼上
4. 立刻分享給朋友

恭喜你！現在你是網頁設計師了

你已經學會了什麼

經過這個教學，你已經：

• ✅ 建立了你的第一個網站 - 有完整的內容和設計
• ✅ 學會了基本的HTML - 知道標籤是怎麼運作的
• ✅ 做出響應式設計 - 網站在手機上也好看
• ✅ 把網站放到網路上 - 全世界都能看到
• ✅ 有了成就感 - 你真的做出了一個網站！

接下來可以做什麼？

立即可以嘗試：

1. 換個顏色 - 把 #4285f4 改成 #e74c3c（紅色）或 #2ecc71（綠色）
2. 加更多頁面 - 複製 index.html，改名為 about.html，寫不同內容
3. 加照片 - 上傳照片到免費圖床，放到你的網站裡
4. 學更多語法 - 搜尋「HTML CSS教學」繼續學習

進階學習方向：

1. CSS 美化 - 學會更多樣式和動畫效果
2. JavaScript 互動 - 讓網站有按鈕、表單等互動功能
3. 設計工具 - 學習 Figma 設計網站外觀
4. 更多功能 - 加入購物車、會員系統等

給新手的鼓勵

記住這些重點：

• 🎯 每個專家都是從新手開始 - 不要因為不懂而感到挫折
• 💪 做中學最快 - 比看一百本書更有效
• 🔥 犯錯是正常的 - 網站壞了可以修，勇敢嘗試
• 🌟 享受創造的樂趣 - 你正在創造屬於自己的數位作品

下次有朋友說「我不會做網站」，你可以很自豪地說：「我會！而且我可以教你！」

更多新手友善的教學

如果你喜歡這種簡單易懂的教學風格，可以繼續看：

• 我的第一個動畫效果 - 讓網站動起來
• 如何選擇好看的顏色 - 色彩搭配技巧
• 免費設計工具推薦 - 不用花錢做設計

開始行動吧！每個網頁大師都是從複製貼上第一行程式碼開始的 😊