HTML 5與課程簡介 靜宜大學 資管系 楊子青
大綱 HTML5 靜態網頁與動態網頁 關於本課程
Rough Timeline of Web Technologies 2014年10月完成HTML5標準制
1. HTML 5 HTML 5 CSS 3 JavaScript jQuery jQuery Mobile Bootstrap
網頁資源與工具 靜宜大學個人網頁空間 ftp工具: FileZilla 編輯工具： Notepad++ http://www1.pu.edu.tw/ ftp工具: FileZilla https://filezilla-project.org/download.php 編輯工具： Notepad++ https://notepad-plus-plus.org/zh/
網頁資源與工具
HTML5與HTML4差異(1) 語法簡化，例如文件型態定義： HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML5 <!DOCTYPE html>
HTML5與HTML4差異(2) 廢除一些舊有標籤，例如<font>、<center>、<frame>等 <frame>由<iframe>取代 實例：<!DOCTYPE html> <html> <body> <iframe src="http://www.pu.edu.tw/"> <p>Your browser does not support iframes.</p> </iframe> </body> </html>
HTML5與HTML4差異(3) 新增語意標籤，例如 <header>、<footer>、<section> 和 <article> HTML5的設計是要更好的描繪網站的結構，讓搜尋引擎更容易擷取到網頁重點 位置可自由搭配
語意標籤實例
HTML5與HTML4差異(4) 全新的表單設計 實例：http://www.w3schools.com/tags/att_input_type.asp
Form field types on mobile
嵌入音訊和視頻檔，例如新的 <audio> 和 <video> 標記 HTML5與HTML4差異(5) 嵌入音訊和視頻檔，例如新的 <audio> 和 <video> 標記 實例：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_audio http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video
逐漸改用<canvas>標籤，取代flash HTML5與HTML4差異(6) 逐漸改用<canvas>標籤，取代flash http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas 實例：9 Mind-Blowing Canvas Demos (可在行動裝置測試) https://davidwalsh.name/canvas-demos
HTML5與HTML4差異(7) CSS顯示效果 (漸層) (透明度)
2. 靜態網頁與動態網頁 網頁的資料內容與顯示方式 瀏覽網站時 伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』， HTML 標準定義了文字與排版的效果。 瀏覽器收到網頁後，解析其中的 HTML 標籤，將網頁依 HTML 標籤指示的效果顯示出來。 例如文字、圖片或多媒體資料 隨著網際網路的應用日漸廣泛，靜態的效果已無法滿足人們的需求，希望網頁的效果更豐富多樣。 讓網頁依照不同狀況，顯示不同的訊息 網站可以和使用者產生互動…
動態網頁技術 用戶端動態網頁技術 伺服器端動態網頁技術 例如JavaScript 在瀏覽器上執行程式，使用者可立即得到程式執行結果，並減輕伺服器的負擔 伺服器端動態網頁技術 例如：ASP.NET、PHP、JSP 由伺服器執行程式，產生不同內容的網頁，再傳送給瀏覽器 程式設計的彈性相當大，還可以搭配資料庫系統，設計出複雜的應用
3. 關於本課程 課程內容： 開發環境 以HTML5為主 HTML、CSS JQuery Mobile行動網頁 Bootstrap響應式網頁程式設計 開發環境 以「記事本」或「Notepad++」熟悉網頁標籤 可自行使用Dreamweaver等軟體，進行網頁編輯