1 / 18

HTML 5 與課程簡介

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

sai
Download Presentation

HTML 5 與課程簡介

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5與課程簡介 靜宜大學 資管系 楊子青

  2. 大綱 • HTML5 • 靜態網頁與動態網頁 • 關於本課程

  3. Rough Timeline of Web Technologies HTML5標準還在制定中

  4. 1. HTML 5 • HTML 5 • CSS 3 • JavaScript

  5. HTML5與HTML4差異(1) • 語法簡化，例如文件型態定義： • HTML4 • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML5 • <!DOCTYPE html>

  6. HTML5與HTML4差異(2) • 廢除一些舊有標籤，例如<font>、<center>、<frame>等 • <frame>由<iframe>取代 • 測試網址：http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe

  7. HTML5與HTML4差異(3) • 新增語意標籤，例如 <header>、<footer>、<section> 和 <article> • HTML5的設計是要更好的描繪網站的結構，讓搜尋引擎更容易擷取到網頁重點 • 位置可自由搭配

  8. 語意標籤實例

  9. HTML5與HTML4差異(4) • 全新的表單設計

  10. Form field types on mobile

  11. HTML5與HTML4差異(5) • 嵌入音訊和視頻檔，例如新的 <audio> 和 <video> 標記

  12. HTML5與HTML4差異(6) • 逐漸改用<canvas>標籤，取代flash • 實例：http://slides.html5rocks.com/#canvas-3d

  13. HTML5與HTML4差異(7) • CSS顯示效果

  14. 2. 靜態網頁與動態網頁 • 網頁的資料內容與顯示方式 • 瀏覽網站時 • 伺服器傳送給用戶端的網頁是『純文字的 HTML 文件』， HTML 標準定義了文字與排版的效果。 • 瀏覽器收到網頁後，解析其中的 HTML 標籤，將網頁依 HTML 標籤指示的效果顯示出來。 • 例如文字、圖片或多媒體資料 • 隨著網際網路的應用日漸廣泛，靜態的效果已無法滿足人們的需求，希望網頁的效果更豐富多樣。 • 讓網頁依照不同狀況，顯示不同的訊息 • 網站可以和使用者產生互動…

  15. 動態網頁技術 • 用戶端動態網頁技術 • 例如JavaScript • 在瀏覽器上執行程式，使用者可立即得到程式執行結果，並減輕伺服器的負擔 • 伺服器端動態網頁技術 • 例如：ASP.NET、PHP、JSP • 由伺服器執行程式，產生不同內容的網頁，再傳送給瀏覽器 • 程式設計的彈性相當大，還可以搭配資料庫系統，設計出複雜的應用

  16. 3. 關於本課程 • 課程內容： • 以HTML5為主 • HTML、CSS搭配JavaScript • JavaScript 的函式庫：JQuery • 以JQuery為基礎的跨平台手機應用函式庫：JQuery Mobile • 搭配介紹一些ASP.NET C#動態網頁技術 • 本系大二、大三有PHP及ASP.NET課程 • 開發環境 • 以「記事本」熟悉網頁標籤 • Microsoft Visual Studio Express 2013 Preview for Web • 可自行使用Dreamweaver CS6等軟體，進行網頁編輯

  17. Visual Studio Express 2013 Preview • 微軟公司的Visual Studio • 提供開發 ASP.NET 網站使用 • 除了付費的Visual Studio版本外，也提供免費版本Express • Microsoft Visual Studio Express 2013 Preview for Web • http://www.microsoft.com/visualstudio/cht/2013-downloads • 線上安裝，或是下載.iso燒錄成光碟再安裝 • 系統需求：支援的作業系統 • Windows 7 SP1 (x86 和 x64) • Windows 8 (x86 和 x64) • Windows 8.1 (x86 和 x64) • Windows Server 2008 R2 SP1 (x64) • Windows Server 2012 (x64)

  18. 參考資料 • 教科書 • 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：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之間的不同

More Related