　本文最後更新時間：2025-10-03 2025-10-03

打造你的專屬網站：免費HTML與CSS入門，讓你也能輕鬆上手

給想要踏入網站設計領域的朋友們，一個溫暖又實在的起點。

哈囉大家好！有沒有覺得現在網路上的網站都好漂亮、好有質感，心裡默默想：「要是我也能自己做一個就好！」？但一想到要寫程式碼，就覺得頭皮發麻、直接放棄？別擔心！今天就來跟大家聊聊，怎麼用免費的 HTML 和 CSS，打造屬於你自己的網站，而且保證讓你覺得一點都不難！

為什麼要學 HTML 和 CSS？

在我們開始之前，先簡單聊一下 HTML 和 CSS 是什麼，以及為什麼我們要學它們。想像一下，網站就像一棟房子，HTML 就像房子的骨架，決定了有哪些房間、門窗在哪裡。而 CSS 就像房子的裝潢，決定了牆壁的顏色、家具的擺設，讓房子看起來美觀又舒適。

簡單來說，HTML 負責網頁的內容結構，CSS 負責網頁的外觀樣式。它們是網頁設計的基礎，只要學會它們，你就能夠控制網頁的每個細節，打造出獨一無二的網站。

免費資源哪裡找？

好消息是，網路上有超多免費的 HTML 和 CSS 學習資源！不用花大錢上補習班，也能輕鬆入門。

線上互動式課程： 像是 freeCodeCamp、Codecademy、Khan Academy 都有提供免費的 HTML 和 CSS 課程。它們的特色是互動性很高，會讓你實際動手寫程式碼，邊學邊做，更容易上手。
- 個人經驗分享： 我自己以前就是從 freeCodeCamp 開始學的，他們的課程設計得很棒，從基礎概念到實作專案都有，而且完全免費！
YouTube 教學影片： YouTube 上也有很多很棒的教學影片，你可以搜尋「HTML 教學」、「CSS 教學」等關鍵字，找到適合自己的影片。
- 個人經驗分享： 我覺得新手可以先從看影片開始，跟著老師一步一步操作，建立初步的概念。
MDN Web Docs： 這是 Mozilla 開發者網路，裡面有非常詳細的 HTML 和 CSS 文件，可以當作工具書來查閱。
- 個人經驗分享： MDN 的資料非常完整，但內容比較專業，適合已經有一些基礎的朋友。
W3Schools： 也是一個很棒的網頁開發學習網站，裡面有大量的 HTML 和 CSS 教學、範例程式碼，可以讓你快速學習。
- 個人經驗分享： W3Schools 的範例程式碼可以直接在網頁上執行，非常方便！

開始你的第一個 HTML 網頁

讓我們一起寫出第一個 HTML 網頁吧！

打開文字編輯器： 像是記事本 (Windows) 或 TextEdit (Mac) 都可以。
輸入以下程式碼：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>歡迎來到我的網站！</h1>
  <p>這是一個簡單的 HTML 網頁。</p>
</body>
</html>

儲存檔案： 將檔案儲存為 index.html。記得要將檔案類型設定為「所有檔案」，才不會變成純文字檔。
用瀏覽器打開： 找到你儲存的 index.html 檔案，雙擊它，用瀏覽器打開。

如果你看到網頁上顯示了「歡迎來到我的網站！」和「這是一個簡單的 HTML 網頁。」，那就恭喜你，你已經成功寫出第一個 HTML 網頁了！

HTML 常用標籤介紹

<!DOCTYPE html>： 宣告文件類型為 HTML5。
<html>： HTML 文件的根元素。
<head>： 包含網頁的標題、描述、CSS 樣式等資訊。
<title>： 網頁的標題，會顯示在瀏覽器的標籤頁上。
<body>： 網頁的主要內容，會顯示在瀏覽器視窗中。
<h1> 到 <h6>： 標題標籤，<h1> 是最大的標題，<h6> 是最小的標題。
<p>： 段落標籤，用來顯示一段文字。
<a>： 連結標籤，用來建立超連結。
<img>： 圖片標籤，用來顯示圖片。
<ul> 和 <li>： 無序清單標籤，用來建立項目符號清單。
<ol> 和 <li>： 有序清單標籤，用來建立編號清單。
<div>： 區塊標籤，用來將網頁內容分成不同的區塊。
<span>： 行內標籤，用來標記一小段文字。

用 CSS 美化你的網頁

HTML 負責網頁的內容結構，CSS 負責網頁的外觀樣式。讓我們一起用 CSS 來美化剛剛的 HTML 網頁吧！

建立 CSS 檔案： 新建立一個檔案，命名為 style.css。
輸入以下程式碼：

body {
  font-family: Arial, sans-serif;
  background-color: f0f0f0;
}

h1 {
  color: 333;
  text-align: center;
}

p {
  color: 666;
  line-height: 1.5;
}

將 CSS 檔案連結到 HTML 檔案： 在 index.html 檔案的 <head> 標籤中加入以下程式碼：

1	<link rel="stylesheet" href="style.css">

用瀏覽器打開： 重新整理你的 index.html 網頁。

如果你看到網頁的字體變了、背景顏色變了、標題置中了，那就表示 CSS 樣式已經成功套用到你的網頁上了！

CSS 常用屬性介紹

font-family： 設定字體。
color： 設定文字顏色。
background-color： 設定背景顏色。
text-align： 設定文字對齊方式。
line-height： 設定行高。
width： 設定寬度。
height： 設定高度。
margin： 設定外邊距。
padding： 設定內邊距。
border： 設定邊框。

一些我學網頁設計的小故事

說到學網頁設計，其實我一開始也是個完全的門外漢。以前大學念的科系跟程式一點關係都沒有，畢業後工作也都是文書處理、行政方面的工作。

直到有一天，我發現身邊的朋友開始經營自己的部落格，而且部落格的排版、設計都很有個人特色，讓我非常羨慕。我就想：「如果我也可以自己設計一個網站，分享我的興趣、我的生活，那該有多好！」

但問題來了，我完全不懂程式碼啊！那時候，我每天下班回家，就是打開電腦，在網路上搜尋各種免費的 HTML 和 CSS 教學。剛開始的時候，真的覺得很難，很多專有名詞都看不懂，程式碼也常常寫錯。

但我沒有放棄，我告訴自己：「每天只要學一點點就好。」我每天花一個小時學習 HTML 和 CSS，跟著教學影片一步一步操作，遇到不懂的地方就上網查資料。

慢慢地，我開始對 HTML 和 CSS 有了概念，也能夠自己寫一些簡單的網頁了。那種成就感，真的讓我覺得很開心！

我還記得我第一次自己設計出來的網站，是一個非常簡陋的個人網站，裡面只有一些簡單的文字和圖片，排版也很普通。但對我來說，那是我第一次靠自己的力量打造出來的東西，意義非凡！

持續學習，不斷精進

學網頁設計就像學任何技能一樣，需要不斷的練習和學習。不要害怕犯錯，犯錯是學習的必經過程。

多做專案： 實際動手做專案是學習的最佳方式。你可以從簡單的專案開始，例如：個人網站、部落格、作品集等等。
閱讀別人的程式碼： 閱讀別人的程式碼可以讓你學習到不同的寫法和技巧。
參與社群： 參與網頁設計社群可以讓你認識更多同好，互相交流、學習。

一些貼心小提醒

工欲善其事，必先利其器： 建議可以使用像是 Visual Studio Code、Sublime Text 等程式碼編輯器，它們有語法高亮、自動完成等功能，可以讓你寫程式碼更有效率。
善用瀏覽器的開發者工具： 瀏覽器的開發者工具可以讓你檢查網頁的 HTML 和 CSS 程式碼，找出錯誤。
不要害怕尋求幫助： 如果遇到問題，不要害怕在網路上發問，或是向朋友請教。

學網頁設計是一個漫長的過程，但只要你有熱情和耐心，一定可以學會。希望這篇文章能夠幫助你踏出第一步，打造出屬於你自己的網站！

→　請點這裡繼續看更多內容

→　最後更新時間 2025-10-03　要更新請點這裡

打造你的專屬網站：免費HTML與CSS入門，讓你也能輕鬆上手

免費AI教學影...

免費JavaS...