既然AI問世了，與其害怕被取代，不如讓他幫助我們加快速度學習一門新技能。這個免費教學系列是我想嘗試的一個新的教學系列內容，我想要透過各種實際版型練習，讓初學者透過實作和AI請教的過程中，更快速掌握到網頁的開發技巧和邏輯。
那我們就開始吧！
1. 詢問 AI
首先開啟任何一個你喜歡的 AI LLM (大型語言模型)，例如最知名的ChatGPT，試著輸入提示詞。
提示詞：你可以教我寫出我的第一個網站 hello world! 嗎？
以下是 ChatGPT 回覆的內容：
1. 建立 HTML 檔案
首先，請在你的電腦上建立一個新檔案，命名為 index.html。
2. 撰寫基本 HTML 結構
打開 index.html，並將以下程式碼貼上：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>這是我的第一個網站。</p>
</body>
</html>3. 程式碼說明
- <!DOCTYPE html>
這行告訴瀏覽器我們使用 HTML5。 - <html lang=”zh-TW”>
定義網頁語言為繁體中文。 - <head> 區塊
內含網頁的基本設定，例如編碼（<meta charset=”UTF-8″>）與標題（<title>Hello World!</title>）。 - <body> 區塊
這裡是網頁的主要內容區域，我們在裡面使用 <h1> 標籤顯示大標題「Hello World!」，並用 <p> 標籤加入一段說明文字。
4. 開啟網站檢視效果
儲存 index.html 檔案後，直接用瀏覽器（例如 Chrome、Firefox 或 Edge）打開，即可看到「Hello World!」的頁面。
2. 複製程式碼
將以下程式碼複製起來。
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<p>這是我的第一個網站。</p>
</body>
</html>3. 呈現網頁結果
在第一步驟中的 ChatGPT 回覆當中，ChatGPT是引導我們自行新增一個檔案，將程式碼內容貼入之後，在瀏覽器中開啟.html這個檔案。但如果對你來說在自己電腦中新增一個.html檔有點困難的話，這裡教你一個更方便一些的學習工具。
請到 codepen 這個網站中，開啟一個新的 Pen 也就是編輯視窗，在 html 的編輯框中貼上剛剛複製的程式碼。接著就會出現你的第一個網站內容預覽了！
4. 試著編輯程式碼內容
在這個結果中，請試著更換 <h1> 和 </h1> 兩個標籤中的內容，將 Hello World! 更改成你想呈現的任何標題。並且觀察是否有即時顯示在網頁預覽內容中。
你也可以將 <h1> </h1> 更換成
<h2> 我要開始學習寫程式 </h2>試試看，字體大小會發生變化。
從這個範例中，我們可以學到網頁html程式語言是由各種標籤所組成，每個標籤會由一個起始標籤 <p> 及結尾標籤 </p> 包著你想要呈現的文字或內容。
例如我想要在網頁中呈現一個最重要的一號標題，你就可以用<h1>和</h1>包夾著你的標題文字 『Hello World!』來告訴瀏覽器用什麼字體來呈現它。
一般來說，我們的主要呈現在網頁中的內容會在 <body></body> 這組標籤中呈現，其他關於這個網頁的設定會放在 <head></head> 當中，屬於這個網站的後設資料(Metadata)，像是網頁標題、關鍵字、作者、網址等SEO相關的設定，也就是給機器或爬蟲看的資訊都會放在這邊。
＊關於巢狀結構
如果你注意看，會發現這些標籤之前會有巢狀的結構在，在某一組標籤中可以包含其他多組的標籤，例如像是 <body> 中就包含了<h1>和<p>兩組標籤，而<body>本身的上層則是<html>這個標籤，而我們寫程式時為了方便閱讀，則會用空格或是Tab來產生內縮的排列讓閱讀更容易！
這就是一個很快地體會 HTML 這個標籤程式語言的簡單案例！
如果你喜歡這篇教學內容，我推出了一個超級完整的網站開發教學，包含了超過30小時118個單元的扎實內容、教學影片及示範程式碼。有興趣的可以考慮購買起來喔！
