# 言果學習教育訓練 ## 學習目標 透過 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)