---
# System prepended metadata

title: 言果學習教育訓練

---

# 言果學習教育訓練

## 學習目標
透過 2~2.5 小時教育訓練，能嘗試動手，做自己的網頁 AI 小工具
## 提前安裝
1. Chrome 瀏覽器
2. 註冊 [ChatGPT 服務](https://chat.openai.com/auth/login)
3. [shareGPT 插件](https://sharegpt.com/)
4. 程式編輯器 VSCode：https://code.visualstudio.com/

> 不熟悉 3.程式編輯器安裝，可觀看前 20 分鐘影片，這是我錄製的新手向影片教學：https://www.youtube.com/watch?v=Pgiw0cefBxo&list=PLYrA-SsMvTPP4eB_kWV_BubZXZdq9yyf9


## 學習大綱
### 1hr - 網頁介紹
1. 自我介紹 (5分鐘)
2. 介紹HTML的基本概念，以及如何使用它來創建網頁。HTML基本結構 (10分鐘)
3. 講解DOCTYPE、html、head、title、body等元素，並展示如何撰寫一個簡單的HTML檔案。常用標籤 (10分鐘)
4. 介紹和演示如何使用常見的HTML標籤，如h1-h6、p、a、img、ul、ol、li等。(10分鐘)
5. 表單設計，表單（form、input、label、button等）元素來收集使用者資訊 (20分鐘)


### 1hr - 藉由 ChatGPT 做網頁應用
1. HTML、CSS、JavaScript 三劍客
2. AI 溝通方式
3. 由淺入深的範例

## HTML 標籤介紹
1. 新增一個 project 資料夾後，新增一個 `index.html` 檔案
2. 介紹 HTML 標籤：`h1、p`
3. 小練習：去張貼一個 Yahoo 新聞消息，並將程式碼張貼到 Google Meet
4. `html、head、body 差異`，可以用 `!` 按 tab 展開快速產生格式
5. 插入 `img 圖片、a 連結、ul li 列表、input 表單`

### HTML 標籤
```=HTML
<h1>標題</h1>
<p>段落</p>
<img src="https://s.yimg.com/cv/apiv2/twfrontpage/logo/Yahoo-TW-desktop-FP@2x.png" alt="yahoo 照片">

<ul>
    <li>列表一</li>
    <li>列表二</li>
    <li>列表三</li>
</ul>

<input type="text" placeholder="請輸入 Email">
<input type="button" value="儲存">
```

## HTML、CSS、JavaScript 三劍客
* 何謂 [HTML、CSS、JavaScript](https://www.google.com/search?q=HTML+CSS+Javascript&rlz=1C5CHFA_enTW989TW989&sxsrf=APwXEddZvfE_TrMyay932rhWr2DGOKEG_A:1682174594108&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjc4YbZ3L3-AhVvmlYBHVhRDv8Q_AUoAXoECAEQAw&biw=1402&bih=755&dpr=1.25)？
* HTML=骨頭、CSS=外觀、JavaScript=大腦
## AI 溝通方式 ([深津式泛用 Prompt](https://www.youtube.com/watch?v=ReoJcerYtuI))
### 文章摘要
1. 確切定義角色
2. 明確指示輸入與輸出
3. 清楚說明要輸出的內容。
4. 使用標記式語言讓 AI 區分命令內容
5. 給予清楚條列命令，藉此限縮 AI 輸出範圍

```
#身份與指令：
您是一名資深軟體工程師
請根據以下的開發主題、限制條件、輸入內容，輸出一個
HTML 網頁。

#開發主題：紅色標題

#限制條件：
1. 請設計一個 h1 標題，將顏色設計為紅色

#輸入內容：
無

#輸出內容：
```

### 每日小語 ([分享連結](https://sharegpt.com/c/sMA53IA))
1. 建立每日小語文案庫
2. 將既有程式碼進行功能擴充
3. 搭配 [unsplash](https://unsplash.com/) 圖庫，進行背景樣式設計


::: spoiler 範例程式碼
```
<!DOCTYPE html>
<html>
<head>
  <title>每日小語</title>
  <meta charset="UTF-8">
  <style>
    #quote-container {
      display: none;
    }
    .image-container {
      display: none;
    }
  </style>
</head>
<body>
  <h1>每日小語</h1>
  <ul id="quote-container">
    <li>「天行健，君子以自強不息。」 —— 孟子</li>
    <li>「志不立，天下无可成之事。」 —— 韩愈</li>
    <li>「人生自古誰無死，留取丹心照汗青。」 —— 文天祥</li>
    <li>「積累知識，思考問題，解決困難。」 —— 鄧小平</li>
    <li>「山重水复疑无路，柳暗花明又一村。」 —— 陆游</li>
    <li>「腳踏實地，目標遠大。」 —— 邓小平</li>
    <li>「百折不撓，堅持到底。」 —— 毛澤東</li>
    <li>「天下興亡，匹夫有責。」 —— 顧炎武</li>
    <li>「敢為人先，勇攀科學高峰。」 —— 錢學森</li>
    <li>「成功來自不懈的努力。」 —— 愛迪生</li>
  </ul>
  <div id="random-quote"></div>
  <div class="image-container" id="image-1">
    <img src="https://source.unsplash.com/featured/?mountain" alt="山川">
  </div>
  <div class="image-container" id="image-2">
    <img src="https://source.unsplash.com/featured/?cloud" alt="雲朵">
  </div>
  <div class="image-container" id="image-3">
    <img src="https://source.unsplash.com/featured/?cat" alt="貓咪">

</div>
<script>
  // 獲取名言列表的容器
  const quoteContainer = document.getElementById('quote-container');
  // 獲取所有名言列表項
  const quotes = quoteContainer.querySelectorAll('li');
  // 隨機選擇一個名言
  const randomQuoteIndex = Math.floor(Math.random() * quotes.length);
  const randomQuote = quotes[randomQuoteIndex];
  // 將隨機選擇的名言顯示在頁面上
  const randomQuoteContainer = document.getElementById('random-quote');
  randomQuoteContainer.innerHTML = randomQuote.innerHTML;
// 獲取所有圖片容器
const imageContainers = document.querySelectorAll('.image-container');
// 隨機選擇一個圖片容器
const randomImageIndex = Math.floor(Math.random() * imageContainers.length);
const randomImageContainer = imageContainers[randomImageIndex];
// 將隨機選擇的圖片容器顯示在頁面上
randomImageContainer.style.display = 'block';
</script>
</body>
</html>
```
:::



## 小題目練習，請在 Google Meet 分享你的 shareGPT
1. 溫度轉換器(攝氏轉為華氏)：[分享連結](https://sharegpt.com/c/qOupWQZ)
2. [寶寶計算機](https://ymd.0123456789.tw/)：[分享連結](https://sharegpt.com/c/cGiRQKJ)
3. [BMI 計算機](https://newbmi.0123456789.tw/)
4. [簡易番茄鐘](https://0123456789.tw/tomato/)
5. [倒數計時器](https://alarm.0123456789.tw/)
6. [貓年齡計算機](https://cat.0123456789.tw/)


## 補充資料
1. [ChatPDF](https://www.chatpdf.com/) - 丟 PDF，他會針對 PDF 內容回覆你問題([影片範例](https://www.youtube.com/watch?v=nL78NF_fIYk))
2. [Google Excel GPT](https://kikinote.net/161998)：[範例 excel](https://docs.google.com/spreadsheets/d/1hzgXK6rzyEHBMw-rSfcaGsxy4mBuFMdel_SPKz_d-1g/edit#gid=0)、[文章參考](https://kikinote.net/161998)
3. [ChatGPT 幫我不懂程式碼也能寫出番茄鐘待辦清單工具，實測心得](https://www.playpcesor.com/2023/03/ChatGPT-pomodoro-code.html?fbclid=IwAR0YRofadRg3PzcrLSE358gyqoKvghcKgv0uotS5NiCFTthWISrFodFt-0E&m=1&mibextid=S66gvF)