OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

Size: px

Start display at page:

Download "OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2"

榆郁
5 years ago
Views:

1 HTML5 網頁設計簡介 Location: 東海大學電算中心 Speaker: 麥毅廷 Date:2014/07/17 Contact Info.:

2 OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

3 HTML5 簡介 HTML5 的發展史 HTML4.0 HTML4.01 XHTML1.0 XHTML1.1 (W3C) 2004, WHATWG (Web Hypertext Application Technology Working Group) 2007, W3C, HTML WG, HTML5 2009/7 終止制定 XHTML2.0 WHATWG 估計 HTML5 規格達到 W3C 的推薦標準在 2022 年 3 3 3

4 HTML5 簡介 HTML4 之前, 主要用來定義 Richtext Hyperlink 的呈現 HTML5 繼承 HTML4 偏重 Web 應用程式更好的呈現內容 HTML5 規範的全稱是 HTML5 -- A Vocabulary and associated APIs for HTML and XHTML 4 4

5 HTML5 特色 HTML5 標準還在制定中 5

6 HTML5 市場接受度 YouTube 提供 HTML5 撥放器 Jobs 宣布放棄 flash 電子書商 (Scribd) 往 HTML5 發展所有電子書改以 HTML5 格式電子書格式支援行動載具 ( 手機平板 ) Amazon Kindle 電子書改用 HTL5 6

7 HTML5 特色 HTML5 用於呈現 Web 應用程式的新增功能用於繪圖的 Canvas element 支援 Drag Editable Undo & Redo 擴充的 HTMLDOM API 離線儲存 Web SQL 資料庫 Web Workers 最佳化 JavaScript 執行 Geolocation 7 7

8 HTML5 特色 (cont.) HTML5 用於更好的呈現內容的新增元素用於影音播放的 video 和 audio 用於描述檔案結構的 article footer header nav section 新的表單控制項 8 8

9 HTML5 呈現型態 9

10 歷年來網頁設計流行過什麼? 方法 2 : 2012 年使用網頁方法來設計 Android, iphone 各廠牌手機 20 年前網頁設計 15 年前 Flash 動畫 10 年前 Java 程式跨平台 7 年前 VS.NET 程式跨平台方法 1 : 使用 Java 設計 Android 手機 2~3 年前智慧型手機設計 2014 年

11 何謂 HTML5 廣義定義 : HTML5 是由 HTML+ CSS+ JavaScript 所組成, 目標就是減少瀏覽器對外掛程式的需求基礎技術 : 使用 Html5 + CSS + javascript 進階技術 : 使用 jquery + PhoneGap 11

12 HTML5 與 HTML4 差異 (1) 語法簡化, 例如文件型態定義 : HTML4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML5 <!DOCTYPE html> 12

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

14 HTML5 普及狀況瀏覽器的相容性瀏覽器之間實作上的相容性也是 HTML5 的重要課題 W3C 於 2010/11/02 公佈 IE Chrome Firefox 下一版本對 HTML5 的支援程度

15 Feature Internet Explorer 9 Release Candidate Chromium (73967) Firefox 4.0 Beta 11 WebKit Nightly Build r70732 Attributes 100% 100% 100% 100% Audio 100% 100% 100% 100% 勝勝 Video 100% 92.31% 76.92% 85.71% Canvas 95.57% 89.18% 84.09% 94.34% Foreign Content 90.91% 90.91% 100% 100% 勝勝 getelementsbyclass Name 勝 83.33% 100% 88.89% 100% 勝勝 XHTML 100% 50% 100% 42.86% 勝資料來源 : /11/02 15

16 16

17 如何編寫符合 HTML5 的檔案使用 XML 語法編寫 HTML5 檔案使用 HTML 語法編寫 HTML5 檔案 17 17

18 使用 XML 語法編寫 HTML5 檔案傳統使用 XHTML1.0, 需在起始位置加入 <!DOCTYPE html PUBLIC -//w3c//dtd XHTML 1.0 Strict//EN strict.dtd > HTML5 只需要寫為 <?xml version= 1.0 encoding= UTF-8?> <html xmlns= > 此寫法也直接指定編碼為 UTF-8, 不需在 meta tag 另外宣告 18 18

19 使用 XML 語法編寫 HTML5 檔案一個以 XML 語法編寫的基本網頁 <?xml version="1.0" encoding="utf-8"?> <html xmlns=" <head> <title> 基本的 HTML5 檔 - 使用 XML</title> </head> <body> <p> 基本的 HTML5 檔內文 - 使用 XML</p> </body> </html> 19 19

20 使用 HTML 語法編寫 HTML5 檔案一個以 HTML 語法編寫的基本網頁 <!doctype html> <html> <head> <meta charset="utf-8"> <title> 基本的 HTML5 檔 - 使用 HTML</title> </head> <body> <p> 基本的 HTML5 檔內文 - 使用 HTML</p> </body> </html> 20 20

21 Tag 名稱 applet dir frame, frameset, noframes 替代方案改用 embed/object ul 改用 iframe 與 CSS 廢除的 TAG isindex listing, xmp noembed plaintext rb bgsound 用 form 與文字欄位的組合改用 pre 和 code 必須處理補救時, 可以使用 object 用 text/plian 的 MIME type 改用 ruby audio 21 21

22 廢除的 TAG basefont, big, blink, center, font, marquee, s, spacer, strike, tt, u 改用 CSS 設定 22 22

23 新增的 TAG 分類與文件結構有關 tag section, article, aside, nav, footer, header, hgroup 內嵌外部內容 figure, video, audio, source, canvas, embed 表單 keygen, output, progress, meter, mark, ruby/rt/rp, time, command, details, datalist 23 23

24 描述內容結構的 TAGS HTML5 加入了 header, nav, section, article, aside, footer 等的 tag 來描述頁面及檔案結構這些 tag 對網頁 layout 不具任何意義, 若要指定 layout, 需使用 CSS 24 24

25 描述內容結構的 TAGS section : general 的 block article : 獨立的內容, 如網誌本文回應 ( 例如可以做為 RSS 傳送的一個單位 ) aside : 跟本文內容較無關, 如網誌側欄其它文章的列表 nav : 用來放網站其它頁面的連結 header footer : 與一般網站放置 title 聯絡資料等習慣相同 25 25

26 如何製作相容於各瀏覽器的 HTML5 網頁將原有 div tag 中具有特別的意義的, 如 header footer article 等, 改以對應的 tag 表示在 HTML5 中, 描述內容結構的新 tag 其預設的 display 值為 block, 因此為了在舊版瀏覽器可排出一樣的效果, 要指定讓這些新 tag 的 CSS display 屬性為 block article, aside, figure, footer, header, hgroup, menu, nav, section{ display:block; } 加入 HTML5shiv (  使用 IETester 來驗證頁面是否在 IE6~IE9 都相同 26 26

27 HTML5 Demo 目前 HTML5 的相關範例很多, 但是並非所有的 Browser 都支援!! 27

28 設計智慧型手機主要方法 (1). 採用應用程式設計法 : 例如 : 使用 JAVA 程式來撰寫 android 手機程式或是 Objective-C 和 Xcode 來撰寫 iphone 程式, 或使用 Visual Studio VB.NET 和 silverlight 來撰寫微軟 Window Phone 手機程式缺點 : 程式技術較困難, 無法跨越各種平台各種廠牌各種解析度

29 設計智慧型手機主要方法 (2). 採用網頁程式設計方法 : 使用 Html5+CSS+javascript, 結合 jquery+phonegap 優點 : 網頁程式較為簡單, 寫好的程式可以廣泛應用, 可跨越各種平台各種廠牌

30 採用網頁程式來設計手機因為網頁程式較為簡單寫好的程式可以廣泛應用, 可跨越各種平台各種廠牌未來可能會造成大流行!!

OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2 響應式網站設計簡介 Location: 東海大學電算中心 Speaker: 麥毅廷 Date:2015/03/08 Contact Info.: wkb@wkb.idv.tw OUTLINE HTML5 簡介何謂響應式網站設計如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2 HTML5 簡介 HTML5 的發展史 HTML4.0 HTML4.01

OUTLINE HTML5 簡介 如何編寫符合 HTML5 的檔案 新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2

OUTLINE HTML5 簡介如何編寫符合 HTML5 的檔案新增和廢除的 tag 如何製作相容於各瀏覽器的 HTML5 網頁 2 2