上一篇教了大家開始寫了第一隻javascript程式，「Hello World」。今天要教大家寫出第一個網頁！對真的是網頁。今天會使用 copliot 輔助開發學習。
讀完此篇你會學到：利用AI(Copilot) 寫出人生第一個 HTML 網頁，並學會如何在瀏覽器中看到成果。
網頁組成
網頁是由 Html，︀CSS，︀ Javascript 這三個組成的。那這三個分別主要是什麼關係？簡單來說 Html 主要是網頁的架構，CSS負責網頁的樣式也就是外觀。，Javascript 負責功能的部分。這個部分我們下一篇再來詳細的說名。今天先在重在寫出網頁。
不過你可能會想說，我不是來學 javascript的嗎？為什麼還要學 Html和CSS?還要多學其他的東西，感覺就好累。可以不要學嗎？
其實答案是可以的！因為 Html和CSS主要是網頁前端的部分，如果你對作網頁畫面沒有興趣的話，其實是可以不用學的。那可以做什麼？可以單純做後端，後端主要是用 Javascript 處理一些數據，可能是資料格式，或是和資料庫溝通，或是數據的處理方面，甚至是做一些功能。
但我還是比較建議都學，這樣可以自己做出一個成品的感覺成就感會比較大。
第一個網頁
講了這麼多，要開始正式開始了，打開你的 codespaces，建立一個 index.html檔案。然後要打什麼，我相信一開始的大家都很茫然，但會推薦使用 codespaces的原因就是因為他有 copilot。
Copilot
我們可以使用Copilot輔助我們寫出第一行程式，2025了，善用AI工具也是很必要的吧。
點擊最上面那個很像帶飛行眼鏡？的一個人頭圖像，就會出現聊天視窗。
再來是在聊天視窗送出的按鈕旁邊有個下拉選單，選擇代理程式。這三個有什麼差別呢？
詢問：就是詢問AI，該怎麼寫，他會給你建議，但要不要採用是由你決定。
編輯：AI會幫你編輯特定選取的檔案
代理程式：AI會依照需求幫你修改檔案，甚至新增檔案，下終端機指令，而且會反覆試錯，到“他”覺得沒問題為止。
至於要選擇什麼，可以依據情境還有個人需求選擇了。
請產生html檔案
再來我們請Copilot協助我們寫 html 檔案，在聊天視窗打
「請產生基本 html檔案」，就會得到以下成果。很有趣，他給你的範例也是 Hello Workld。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
執行Html檔案
寫好後，那我們要怎麼執行呢？其實執行Html檔案的方法有很多種，不過因為我們在開發網頁，會想看到網頁寫出來的樣子。在這邊可以安裝 "Live Server" 的插件，就可以直接執行程式碼。
Live Server
在側邊工具列點選市集的圖示，然後再搜尋打上 "Live"第一個看到的就是了。直接點擊安裝。
安裝好後回到檔案總管，對著我們新增的 index.html 按下右鍵，會看一個 「Open with Live Server」。點下去就會執行html檔案了。
瀏覽器會直接跳轉頁面，你就會看到一個只有 Hello World的網頁了。
到這一步，你已經成功執行了 Html檔案，並且做出你的第一個網頁了！
修改網頁
再來把index.html裡面的 Hello, World修改成 Hello, Tom。看看網頁有什麼不一樣？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, Tom</h1> <<<修改這行
</body>
</html>
看到網頁就變成 Hello, Tom了！是不是很神奇！
這樣你也學會怎麼修改並執行網頁了。
練習：
作業 ：換句話說
請修改 <h1>Hello, Tom</h1> 裡面的內容，變成你自己想說的話，例如：
<h1>我做出我的第一個網頁了！</h1>
📌 觀察一下畫面有沒有跟著改？
你已經踏出學網頁的第一步！別小看這個 Hello, World，這代表你已經懂得怎麼操作環境、怎麼跑網頁並且看到結果。
可以把練習的結果貼在留言，讓大家知道你成功了！！有任何問題也可以在連言區問我，謝謝。喜歡的話記得幫我追蹤，才不會錯過我的更新！
關注Tom，每天十分鐘，你也學得會寫程式！
