在開始寫 HTML 之前,你需要一個好用的「筆記本」來寫程式。目前全球開發者最推薦的工具就是 Visual Studio Code (簡稱 VS Code)。它免費、快速,而且功能非常強大。
1. 下載 VS Code
首先,請前往 VS Code 的官方網站下載安裝檔。
進入官網後,點擊大大的 “Download” 按鈕(系統會自動偵測你是 Windows 還是 Mac)。
2. 安裝步驟 (Windows / Mac)
Windows 使用者:
- 執行下載的
.exe檔。 - 點選「我同意合約」。
- 重要: 在「選取額外工作」畫面時,建議勾選 「將 [以此 Code 開啟] 動作新增到 Windows 檔案總管內容功能表」。這樣你之後對著資料夾點右鍵就能直接開啟,非常方便。
- 點擊「安裝」直到完成。
Mac 使用者:
- 下載完成後會得到一個
.zip檔。 - 解壓縮後,將 Visual Studio Code 圖示拖曳到你的 「應用程式 (Applications)」 資料夾即可。
3. 環境中文化 (繁體中文)
VS Code 預設是英文介面,新手可以先安裝中文插件來降低學習門檻。
- 打開 VS Code。
- 點擊左側圖示列最下方的 「擴充功能 (Extensions)」 圖示(長得像積木)。
- 在搜尋框輸入:
Chinese。 - 找到 “Chinese (Traditional) Language Pack for Visual Studio Code” 並點擊 Install。
- 安裝完成後,右下角會出現重啟通知,點擊 “Restart” 即可切換為中文。
4. 建立你的第一個網頁檔案
安裝好後,我們來動手試試看:
- 在桌面建立一個新的資料夾,取名為
my-web。 - 回到 VS Code,點擊 「檔案」>「開啟資料夾」,選擇剛才建立的
my-web。 - 點擊左側「檔案總管」旁的新增檔案圖示,輸入檔名:
index.html。 - 在右側空白處輸入
!然後按下 Tab 鍵,VS Code 會自動幫你產生標準的 HTML 骨架!
5. 推薦新手的必裝套件
除了中文化之外,這兩個套件能讓你寫網頁的效率提升 200%:
- Live Server:讓你改完程式碼存檔後,瀏覽器會自動重新整理,即時看到結果。
- Auto Close Tag:輸入開頭標籤後,自動幫你補上結尾標籤。
結語
恭喜你!你已經準備好開發環境了。現在你的電腦已經不是一台只能追劇的機器,而是能創造出無限可能網頁的工具。
下一步建議:
既然環境裝好了,快去學習 HTML 基礎標籤,試著在 index.html 寫下你的第一行標題吧!