HTML 5與課程簡介 靜宜大學 資管系 楊子青
大綱 HTML5 靜態網頁與動態網頁 關於本課程
Rough Timeline of Web Technologies HTML5標準還在制定中
1. HTML 5 HTML 5 CSS 3 JavaScript
HTML5與HTML4差異(1) 語法簡化,例如文件型態定義: HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML5 <!DOCTYPE html>
廢除一些舊有標籤,例如<font>、<center>、<frame>等 HTML5與HTML4差異(2) 廢除一些舊有標籤,例如<font>、<center>、<frame>等 <frame>由<iframe>取代 測試網址:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
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 實例:8 Crazy Animations With WebGL and HTML5 Canvas (可在行動裝置測試) http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas
HTML5與HTML4差異(7) CSS顯示效果 (漸層) (透明度)
2. 靜態網頁與動態網頁 網頁的資料內容與顯示方式 瀏覽網站時 伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』, HTML 標準定義了文字與排版的效果。 瀏覽器收到網頁後,解析其中的 HTML 標籤,將網頁依 HTML 標籤指示的效果顯示出來。 例如文字、圖片或多媒體資料 隨著網際網路的應用日漸廣泛,靜態的效果已無法滿足人們的需求,希望網頁的效果更豐富多樣。 讓網頁依照不同狀況,顯示不同的訊息 網站可以和使用者產生互動…
動態網頁技術 用戶端動態網頁技術 伺服器端動態網頁技術 例如JavaScript 在瀏覽器上執行程式,使用者可立即得到程式執行結果,並減輕伺服器的負擔 伺服器端動態網頁技術 例如:ASP.NET、PHP、JSP 由伺服器執行程式,產生不同內容的網頁,再傳送給瀏覽器 程式設計的彈性相當大,還可以搭配資料庫系統,設計出複雜的應用
3. 關於本課程 課程內容: 開發環境 以HTML5為主 HTML、CSS搭配JavaScript JavaScript 的函式庫:JQuery 以JQuery為基礎的跨平台手機應用函式庫:JQuery Mobile 開發環境 以「記事本」熟悉網頁標籤 可自行使用Dreamweaver CS6等軟體,進行網頁編輯
參考資料 教科書 網路資源 榮欽科技、陳婉凌,網頁設計必學的程式實作技術:HTML5+CSS3+JavaScript,2012年,博碩。 Chap 04: HTML入門 網路資源 http://slides.html5rocks.com/#timeline-slide http://www.dotblogs.com.tw/yuan0716/archive/2011/11/10/html5newtag.aspx http://w3design.pixnet.net/blog/post/14352301-10個HTML5和HTML4之間的不同