HTML5 網頁程式開發班
建議對象：
須修畢第五階段《JavaScript 程式開發班》
課程長度：
2小時 x 15堂 = 30小時
HTML5 網頁程式開發班是橘子蘋果程式學苑的線上與實體網頁設計課程，給修完《JavaScript 程式開發班》的學生（4～7 年級依序上來，或 8 年級以上從 JavaScript 起步）。孩子學 HTML、CSS，搭配 JavaScript 與 jQuery，學完能做出自己的網頁。每堂 2 小時、共 15 堂 30 小時。
我們將帶孩子學習網頁開發的關鍵「HTML」，了解網頁的基礎架構和組成元素，並設計出自己的專屬網頁！
課程優勢
學生程度相近
由於需修畢第五階段的菁英課程，這堂課的孩子都具備一定的程式基礎以及問題解決能力，提高學習效率。
小班制教學
橘子蘋果採小班制：線上正式班師生比 1:10、實體班 1:13 小班，並視課程及教學狀況增派助教，保障學習品質。
課程主題實用性高
主題內容包括抽獎抽籤、計算機、物件配對，和倒數等實用性高的功能，可以直接應用至日常生活。
「我們會將這些專業資訊，轉為孩子可以消化的知識。」
九階段課程，全面掌握程式知識
有能力挑戰國際程式認證
1. 程式設計基礎觀念（序列、迴圈、條件式、變數等），並結合數學、自然、遊戲設計等科目實作
2. 在課程中培養運算思維，讓孩子可以更有條理、結構性地解決問題
3. 培養孩子將流程、資料抽象化的能力，每節課都能學到一個全新的程式知識
1. 每一階段深入一種常用程式語言，逐步累積完整的程式能力
2. 交互應用所學程式語言，讓孩子的程式能力足以完成更複雜的程式專案
3. 學習完 Python 後便能挑戰該語言之國際認證，可由學生自主上傳，作為學習歷程多元表現的佐證
1. 進階 JavaScript 應用：從網頁開發、資料庫到演算法，逐步完成更完整的專案
2. 學習排序、搜尋等基礎演算法，橘子蘋果將用視覺化、遊戲化的方式，讓複雜的程式問題不再那麼深
3. 在橘子蘋果的最終階段將導入 AI 人工智慧的運作原理與開發邏輯，邁向更進階的程式境界
孩子將學過 Scratch、Python、JavaScript 等程式語言
九階段課程，全面掌握程式知識
1. 程式設計基礎觀念（序列、迴圈、條件式、變數等），並結合數學、自然、遊戲設計等科目實作
2. 在課程中培養運算思維，讓孩子可以更有條理、結構性地解決問題
3. 培養孩子將流程、資料抽象化的能力，每節課都能學到一個全新的程式知識
1. 每一階段深入一種常用程式語言，逐步累積完整的程式能力
2. 交互應用所學程式語言，讓孩子的程式能力足以完成更複雜的程式專案
3. 學習完 Python 後便能挑戰該語言之國際認證，可由學生自主上傳，作為學習歷程多元表現的佐證
- 06 HTML5 網頁
- 07 網路與 資料庫應用
- 08 演算法 研究與應用
- 09 AI 人工智慧
1. 進階 JavaScript 應用：從網頁開發、資料庫到演算法，逐步完成更完整的專案
2. 學習排序、搜尋等基礎演算法，橘子蘋果將用視覺化、遊戲化的方式，讓複雜的程式問題不再那麼深
3. 在橘子蘋果的最終階段將導入 AI 人工智慧的運作原理與開發邏輯，邁向更進階的程式境界
有能力挑戰國際程式認證孩子將學過 Scratch、Python、JavaScript 等程式語言
孩子能獲得什麼？
寫出個人專屬網頁
孩子將了解網頁的基礎架構，以及如何利用函式庫提高開發效率，課堂實作中將會寫出自己的個人化網頁！
邏輯思考能力
透過製作不同網頁並整合多個程式語言，培養抽象運算思維，學會將問題重新拆解與組織，能更有條理地解決複雜問題。
更進階的程式能力
孩子在編寫網頁時將學會整合運用不同程式語言，例如定義網頁架構的 HTML、控制外觀樣式的 CSS，以及互動與動態效果的 JavaScript。
認證
學習完 HTML 和 CSS 後，孩子將有機會挑戰考取 ITS HTML and CSS 國際證照，可由學生自主上傳，作為學習歷程多元表現的佐證。
HTML5 網頁程式開發班課程範例作品
這些是 HTML5 網頁程式開發班課堂上做出的課程範例作品，不是學生個人作品；每件都標出是第幾堂課。
第 6 堂
BMI 計算機
- 這是什麼
- 輸入身高體重，馬上算出 BMI 並顯示結果
- 孩子學會什麼
- 讀取使用者填的數字，按下計算後換上結果文字和圖片
第 10 堂
井字遊戲
- 這是什麼
- 兩人輪流下圈和叉的井字遊戲網頁
- 孩子學會什麼
- 點一格就改變那格的顏色與樣式，畫面跟著操作變化
第 13 堂
算術炸彈
- 這是什麼
- 限時判斷算式對錯，時間條跑完遊戲結束
- 孩子學會什麼
- 用隨機數字出題，再加上倒數計時的時間條
課程介紹影片
常見問題
HTML5 網頁程式開發班是幫人做網站的服務嗎？
HTML5 網頁程式開發班不是網站代製服務，而是給學生上的程式課：橘子蘋果程式學苑菁英課程第 6 階段，讓修完 JavaScript 程式開發班的孩子學 HTML、CSS，自己動手做出網頁。
HTML5 網頁程式開發班適合幾年級？
橘子蘋果的 HTML5 網頁程式開發班需先修完菁英課程第 5 階段《JavaScript 程式開發班》；4～7 年級依序上來，或 8 年級以上從 JavaScript 起步的孩子，都可以接著上。
HTML5 網頁程式開發班要上多久？
HTML5 網頁程式開發班每堂 2 小時，共 15 堂，合計 30 小時。
為什麼橘子蘋果先教 JavaScript、再教 HTML？
橘子蘋果先教 JavaScript，因為 JavaScript 課已經帶到 HTML 與 CSS。在橘子蘋果的課程設計裡，JavaScript 課已經帶到常搭配使用的 HTML 標籤語法與 CSS 樣式表，所以 HTML5 班是深化，不是重新起步。
上完 HTML5 網頁程式開發班可以考什麼證照？
上完 HTML5 網頁程式開發班，可以挑戰 ITS HTML and CSS 國際證照。不論實體班或線上班，都是在家線上應考。
HTML5 網頁程式開發班的線上和實體班有什麼不同？
HTML5 網頁程式開發班的線上和實體班上課方式相同，班級人數不同。兩種都是影片講師加真人輔導老師的雙師上課方式；線上正式班一位老師帶 10 位學生，實體班一位老師帶 13 位。
上完 HTML5 網頁程式開發班之後接什麼課？
HTML5 網頁程式開發班之後接菁英第 7 階段《網路與資料庫應用班》。
延伸了解關於 HTML 網頁語言
HTML
HTML 是網頁的標準標記語言，
就像網頁的骨架。
另附證照與學習歷程文章。
網頁的標準標記語言 - HTML
我們一天會接觸到不計其數的網頁內容，而這些內容絕大部分都是使用 HTML 建構的，沒有 HTML 便無法在瀏覽器上呈現出我們平常看到的樣子！
HTML（Hypertext Markup Language）又名超文本標記語言，用於建立和呈現網頁的內容，包括文字、圖像、超連結等，對於網頁開發極為重要，網頁內容的檔案格式也都是 HTML。HTML5 是 HTML 的第 5 版；現在的 HTML 標準由 WHATWG 持續維護（HTML Living Standard），控制外觀的 CSS 標準則由 W3C 制定。想先查語法，可以看 MDN 的 HTML 中文文件。
HTML = 網頁的骨幹
HTML 是建構網頁的基礎結構，它就像房屋的骨架，為網頁的內容提供組織與佈局。
無論是簡單的個人部落格，還是複雜的電商網站，HTML 都扮演著關鍵角色，了解 HTML 語法，不僅是網頁設計的起點，更是開發者創造豐富互動體驗的必備技能。
橘蘋觀點・延伸閱讀
準備好免費體驗第一堂課了嗎？
費用依課程與上課形式不同，試聽後課程顧問會說明堂數與完整費用，可以帶回考慮，不需要當場決定。程式課費用怎麼評估 →
2012 起投入程式教育累計服務 10 萬+ 學生500+ 資深師資12 縣市實體教室
本頁最後更新：2026 年 11 月 5 日