這次參加 iThome 鐵人賽，我選擇了 Build on Google AI 作為挑戰主題。
其實我原本也有想過，到底第一天要做什麼。
我以前在大學有接觸過 C#、C++ 和 Unity，也做過幾個小遊戲，所以「程式設計」對我來說並不是完全陌生的東西。
但網頁就不太一樣了。
以前雖然多少看過 HTML 和 CSS，真正自己從頭開始做一個網頁的經驗卻沒有多少。
所以想說先用AI學習如何架設網頁，再順著把之後做好的東西放到網頁上好像也不錯？
首先從 HTML 開始。
HTML 可以用來建立網頁的基本結構，例如標題、段落、圖片等內容。
最簡單的網頁可以寫成：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>我的第一個網頁</h1>
<p>這是我使用 HTML 製作的第一個網頁。</p>
</body>
</html>
一開始看到這些標籤時，其實有不少地方不太理解。
例如 h1、p 分別代表什麼？為什麼內容要放在 body 裡面？
因此我把這些問題交給 Gemini，請它逐一解釋每個標籤的用途，再回頭修改自己的程式碼。
慢慢理解之後，我發現 HTML 並沒有想像中那麼複雜。它比較像是在告訴瀏覽器：「這裡是一個標題」、「這裡是一段文字」、「這裡要放一張圖片」。
只有 HTML 的網頁雖然可以正常顯示內容，但整體看起來比較單調。
接著開始加入 CSS。
body {
font-family: Arial, sans-serif;
background-color: #fff8c6;
}
h1 {
text-align: center;
font-size: 36px;
}
加上 CSS 之後，網頁開始有了一點樣子。
文字可以改大小，背景可以換顏色，標題也可以移到中間。
這也讓我比較容易理解 HTML 和 CSS 的差異：
經過今天的練習，我已經能夠從一個空白的 HTML 檔案開始，建立基本的網頁內容，再利用 CSS 做簡單的外觀設計。
明天預計會用出有一整個整體的網頁。
iThome鐵人賽
看影片追技術