1.HTML5基本網頁架構
(1)參考線上教學網站
https://www.w3schools.com/html/default.asp
(2)HTML5文件基本組成
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
(3)<head> ...</head>:主要是文件設定說明或引用其他資源。
(4)<body> ...</body>:主要是網頁內容的呈現與互動。
2.縣上體驗式學習HTML5基本網頁設計
(1)進入 https://www.w3schools.com/html/default.asp
(2)HTML5網頁文字內容，線上編輯互動學習
A.進入線上HTML5學習網站，點選【HTML Basic】
B.點選右邊內容【Try it Yourself】
C.輸入文字內容於左邊體驗網頁，然後點選【Run】，測試效果。
D.參考網頁基本標籤意義
<h1>...</h1>:文字資料顯示，可分為6级大小呈現。
<pre>...</pre>:放在<pre>與</pre>之間的文字會以原本的格式顯示出來。
<center>...</center>:將文字或圖片置中呈現。
<br>:將資料跳下一行呈現。
<p>...</p>:自動跳到下一段落，並隔一空行。
(3)HTML5網頁圖片內容，線上編輯互動學習
A.進入線上HTML5學習網站，點選【HTML Images】
B.點選【Tyr it Yourself】進入HTML5圖片應用學習
C.查詢並輸入相關線上圖片網址
D.參考相關圖片標籤意義
<img src="圖片名稱" alt="圖片說明" width="圖片寬度" height="圖片高度">
(4)HTML5網頁影音內容，線上編輯互動學習
A.進入線上HTML5學習網站，點選【HTML Video】
B.點選【Try it Yourself】，進入HTML Video 互動學習網頁
C.參考 HTML Video 標籤意義說明
C-1:崁入網頁的影音標籤
<video width="400" controls>
<source src="影音名稱.mp4" type="video/mp4">
</video>
C-2:超連結式的影音連結
<a href="影音名稱.mp4" target="_blank">超連結顯示文字</a>
3.安裝網頁設計軟體，實機測試
(1)安裝免費 Microsoft Expression Web 4 軟體
(2)開啟網頁設計軟體
(3)參考線上互動學習編輯內容，可於
A.指令區：直接輸入 HTML5標籤內容。
B.設計區：直接輸入文字或圖片或影音資料。
C.分割區：可分割瀏覽指令和設計資料，同步編輯設計。
4.請完成自己的個人網頁設計。