Download presentation
Presentation is loading. Please wait.
1
第１回 HTML5入門
2
やること HTML5とは？ どう変わるのか？ 新機能のデモ 参考になるサイト紹介
3
HTML5とは？
4
HTML(Hyper Text Markup Language) の新しいバージョン
5
今までの流れ 既に浸透しているHTMLのverupをすべき→HTML5誕生 1998年 HTMLをこれ以上アップデートしない宣言
年月 仕様 説明 1993年6月 HTML 1.0 IETF Internet Draft 1995年11月 HTML 2.0 RFC 1866 1997年1月 HTML 3.2 W3C 勧告 1997年12月 HTML 4.0 1998年2月 XML 1.0 1998年10月 DOM Level 1 1999年12月 HTML 4.01 2000年1月 XHTML 1.0 2000年11月 DOM Level 2 Core 1998年 HTMLをこれ以上アップデートしない宣言 厳格な文法で処理しやすいXHTMLの普及を勧めるが浸透せず 既に浸透しているHTMLのverupをすべき→HTML5誕生
6
どう変わるのか？
7
HTML5の主な新機能 ①リッチなWebアプリケーション ②セマンティックなマークアップ ③高いアクセシビリティ ④高い互換性
8
①リッチなWebアプリケーション 「文書作成」が目的だったHTMLに、 「Webアプリケーション」機能を追加
動画/音声の再生、グラフィックス描画、 オフライン動作、バックグラウンド処理、 ローカルファイルの読み込み…等々 例) ページ内に動画を埋め込む <video src="sample.mp4"></video>
9
②セマンティックなマークアップ 文書構造の意味を明確に するための仕様が追加された。 今まではクラス属性などで 文書構造のどの部分にあたるか
を示していた。 →人間にしか理解できない 文書構造を明確化する、新しく 追加された要素を使う →機械でもアウトラインを 理解できる <htm> <body> <header> ヘッダー </header> <section class=“content”> … </section> <footer> フッター </footer> </body> </html>
10
②セマンティックなマークアップ 新しく追加・変更・廃止された要素や属性は、 一度チェックしておくこと。
■HTML5 における HTML4 からの変更点 – 言語
11
③高いアクセシビリティ アクセシビリティ 高齢者・障害者を含む誰もがサービスなどを支障なく 利用できるか （音声読み上げ、キーボードのみで全ての操作ができるか） セマンティックな新要素により、アクセシビリティアップ。 さらにWAI-ARIAという仕様を取り込んでいる。 →任意の要素に対して役割と状態を表すための属性を付与
12
ブラウザごとの挙動の違いが生まれてきた。
④高い互換性 今までは仕様があいまいな部分があり、 その解釈の違いによって ブラウザごとの挙動の違いが生まれてきた。 HTML5では、詳細な処理規則を定義！！
13
新機能のデモ
14
デモサイト HTML5 ROCKS HTML5 Showcase
Similar presentations
