HTML 5 の設計思想 誰もが自由に使い続けることができるオープンな Web 特定企業が定めた仕様 (API) や技術 ( プラグイン ) に頼らない 例 : アドビの Flash, マイクロソフトの Silverlight HTML5 に追加された新しい要素 ( タグ ) video, audio 要素 ( 動画や音声を再生する ) canvas 要素 ( ビットマップグラフィックスの表示 ) section, header, footer 要素 ( 文書の構造を表す ) など 高度なアプリケーション開発のための API WebGL ( ブラウザ上で 3D グラフィックスを表示 ) Geolocation API ( 端末から位置情報を読み取る ) File API ( ローカルファイルの内容を読み取る ) など 19 canvas 要素による描画例 <canvas id= box1" width="400" height="400"></canvas> <script> var cnvs = document.getelementbyid( box1'); if(cnvs && typeof(cnvs.getcontext) === 'function') { var ctx = cnvs.getcontext('2d'); if(ctx) { ctx.clearrect(0, 0, 300, 300); (50,50) ctx.fillstyle = "lime"; ctx.fillrect(50, 50, 200, 200); ctx.strokestyle = "green"; ctx.linewidth = 3; ctx.strokerect(50, 50, 200, 200); }} </script> 矩形を描画 枠線を描画 (200,200) API の例 描画処理を実行するメソッド : fillrect( ), strokerect( ) 描画時のスタイルを設定する変数 : fillstyle, linewidth 20
WebGL を用いたアプリの例 ブラウザ上で 3D グラフィクスを表示 プラグイン等のインストール不要 http://helloracer.com/webgl/ http://madebyevan.com/webgl-water/ 21 HTML5 で何が変わったのか 定型句がシンプルになった DOCTYPE 宣言 文字コードの指定 利用可能な要素が増えた 新たに追加された要素 他のマークアップ言語の埋め込み 書き方の自由度が高まった タグの省略 空要素の表記 属性値の省略 HTML5(HTML 構文 ) と HTML 4.01 の違い HTML5 には,HTML 構文と XML 構文がある (XML 構文については, 後ほど説明 ) 22
HTML5 : 定型句がシンプルに DOCTYPE 宣言 その文書がどのバージョンの HTML で記述されているかをブラウザに伝える 文書中に最初に出現する html 要素の開始タグより前に記述する HTML5 での記述例 <html> <head> <meta charset= UTF-8 > <title>html の基礎 </title> </head> <body> </body> </html> 23 HTML のバージョンの見分け方 HTML ファイル先頭の DOCTYPE 宣言を確認 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> </html> HTML 4.01 <?xml version="1.0" encoding= UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </html> XHTML 1.0 <html> </html> HTML 5 では表記法がシンプルになった HTML 5 24
文字コードとは ファイル内のデータを符号化する方式 0 1のビット列を個々の文字 ( 漢字, アルファベットなど ) に対応付ける 日本語を表記できる文字コードは複数ある シフトJIS JIS 日本語 EUC Unicode Shift_JIS ISO-2202-JP EUC-JP UTF-8 文字コード名では大文字と小文字を区別しない 例.Shift_JIS と shift_jis はコード名としてとしては同じ Web ブラウザは, 世界中の Web サーバにある HTML ファイルを, それぞれの文字コードに応じて切り替えて表示する 25 ブラウザでの文字コードの変更 IE の場合, ページ上で右クリックすると表示されるポップアップメニューから エンコード を選択して文字コードを変更 UTF-8 での表示を前提に作成された HTML ファイル 文字コードをシフト JIS に変更すると文字化けする 26
HTML5 : 定型句がシンプルに 文字コードの指定 meta 要素の属性を用いて記述する 文字コードを UTF-8 に指定する場合の表記 HTML 5 <html> <head> <meta charset= UTF-8 > <title>htmlの基礎 </title> </head> 文字コードを指定する meta 要素より前にテキストノードが現れないようにする <!DOCTYPE html > HTML 4.01 <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 > <title>htmlの基礎 </title> </head> 27 ユニコード (Unicode) とは 全世界の文字を包含する文字コード体系 多言語の内容や特殊記号を用いた表記が可能 当初 (UTF-16) は全ての文字を 16 ビット (2 バイト ) で表わそうとしたが, 65536(=2 16 ) 文字では足りなかった 中国語, 韓国語, 日本語の類似する文字に同じコードが割り当てられていたため見直された UTF-8 16 ビットの Unicode を 8 ビット単位の可変長の文字コードで表わす 文字の種類によって 1 バイト (8 ビット ) から 4 バイト (32 ビット ) までのコードが割り当てられる 最近は日本語にも (Shift_JIS,EUC-JP などより )UTF-8 が多く用いられている 28
UTF-8 を用いた多言語ページの例 文字コード UTF-8 を用いれば, 多種類の文字を文字化けさせずに混在させることができる <div lang= ja dir= ltr > <a href= > <strong> 日本語 </strong> </a> </div> <div lang= ru dir= ltr > <a href= > <strong>русский</strong> </a> </div> テキスト内容がどの国の言語で書かれているかは, 言語コード (ja, ru など ) で示す http://wikipedia.org/ 29 言語コードの指定 該当する要素に lang 属性を指定する 同じページ内で複数の言語を用いる場合は, 要素ごとに言語コードを指定する <html lang= ja > </html> 言語コードの例 HTML 5,HTML 4.01 どちらも表記法は同じ 言語日本語韓国語中国語英語フランス語 言語コード ja kr zh en fr 言語コード名では大文字 小文字を区別しない 30
HTML5 : 利用可能な要素 新たに追加された要素 HTML5 では, 文書の構造を表す要素が追加された header, footer, main, aside, nav, section, article 従来の HTML では div 要素で文書構造のまとまり ( ブロック ) を表わす id 属性の値で各ブロックの役割を区別する div 要素は, それ自身が具体的な意味を持たない <body> <div id= header > </div> <div id= contents > </div> <div id= footer > </div> </body> id 属性でに類似の値 (header, contents, footer 等 ) が用いられたが, 標準化されていなかった 31 例 : ウエブページの文書構造 グローバルナビゲーション (nav 要素 ) ヘッダエリア (header 要素 ) ローカルナビゲーション (nav 要素 ) メインコンテンツ (main 要素 ) フッタエリア (footer 要素 ) 32
例 : 文書構造の表現 <body> 従来のHTML <div id= header > </div> <div id= contents > </div> <div id= footer > </div> </body> body 要素内の文書構造 header nav( グローバルナビゲーション ) <body> HTML5 <header> <nav> </nav> </header> <main> <nav> </nav> </main> <footer> </footer> </body> nav ( ローカルナビゲーション ) main footer 33 他のマークアップ言語の埋め込み HTML5 では, 文書内に他のマークアップ言語 (MathML と SVG) の要素を埋め込むことができる MathML : 数式を記述する SVG : ベクトルグラフィックスを表現する SVG を HTML5 に埋め込んだ例 <title>svg を HTML5 に埋め込んだ例 </title> <svg> <circle cx= 30" cy= 30" r= 50" fill="blue"/> </svg> HTML5 : 利用可能な要素 SVG の要素 (svg, circle) は, XML 文書として HTML5 内に埋め込まれている 34
HTML5 : 書き方の自由度 タグの省略 HTML では終了タグを省略できる場合がある 文法的に正しい書き方 ( ブラウザにも適切に表示される ) <html> <head> <title> タイトル </title> </head> <body> <p> 順序なしリスト <ul> <li> 項目 1 <li> 項目 2 <li> 項目 3 </ul> </body> </html> 省略可能なタグは,HTML 4.01, HTML5 それぞれの文法で定められている 35 HTML5 におけるタグの省略 終了タグのみ省略可能な要素 p, li, dt, dd など (HTML 4.01 でも省略可 ) 開始タグと終了タグどちらも省略可能な要素 html, head, body 属性が指定された場合は, 開始タグの省略不可 終了タグを省略しなければならない要素 空要素 ( 内容を持つことができない要素 ) 上記区分に該当しない要素 開始 / 終了タグとも ( 文法的には ) 省略不可 h1 ~ h6, title, ul, ol, div, table など 空要素 は HTML5 で利用可能となった (HTML 4.01 までの HTML には存在しない ) 36
終了タグのみ省略可能な例 HTML による記述 ブラウザ上の表示 <p> 順序付きリスト <ol> <li> 項目 1 <li> 項目 2 <li> 項目 3 </ol> <p> 記述リスト <dl> <dt> 用語 1 <dd> 説明 1 <dt> 用語 2 <dd> 説明 2 </dl> p, li, dt, dd 要素は, 終了タグのみ省略可 ol, dl 要素は, 開始 / 終了タグとも省略不可 37 開始タグ / 終了タグどちらも省略可能な要素 HTML5 で新たに追加された考え方 該当する要素 : html, head, body など (5 種類のみ ) 属性が指定された場合は, 開始タグの省略不可 html, head, body を省略した文書例 <title> タイトル </title> <p> 段落 HTML5 として文法的に正しい 文書の構造をわかりやすく示すために, html, head, body は用いる方がよい ( ユーザのためでなく, 開発者のため ) 38
W3C による文法チェッカー http://validator.w3.org/ HTML/XHTML 文書が文法的に正しく記述されているかどうかを検証する 文法チェックの条件 ( オプション ) は初期設定のまま 39 文法チェックの例 : ソースタグを直接入力 (1) 直接入力による検証 タブを選択 (2) ソースタグを直接入力 ( コピーペースト ) No errors or warnings to show. と表示されれば文法チェック成功 (3) チェック ボタンをクリックして検証 40
< 練習 1-3> 文法チェック 以下の文書を文法チェッカー http://validator.w3.org/ に直接入力し,HTML5 として文法的に正しいかどうか確認しなさい (1) <title> タイトル (2) <p> 段落 </p> (3) <title> タイトル </title> 41 終了タグを省略しなければならない要素 HTML5 : 書き方の自由度 内容を持つことができない要素 br ( 改行 ),hr ( 水平線 ),img,meta,input など HTML 5 では 例 : <br> または <br/> と表記する 開始タグは > または /> で閉じる 終了タグを書くことは文法的に誤り /> で閉じる記法は HTML5 で採用された ( もともとは XML の記法だった ) HTML 4.01 では, 終了タグを省略してもよい 例 : <br> <hr> <img src= photo.jpg > 終了タグを書いてもよい ( 文法的に誤りではない ) <br></br> と <br> は等価 42
< 練習 1-4> 空要素 以下に示した HTML5 の文書 ( 一部 ) を body 要素をルートとする木構造で表しなさい テキストノードも省略せずに示すこと <body> <p> 文書に付加的な意味 <br/> を持たせる </p><hr/> </body> body 43 HTML5 : 書き方の自由度 属性の省略 ( ブーリアン属性 ) ブーリアン ( 真偽値 ) 属性 真 (true) または偽 (false) どちらかの値を取る属性 例 : input 要素の checked 属性 属性が省略されると 偽 とみなされる <input type="checkbox"> 選択肢 1 属性が指定されると 真 とみなされる <input type="checkbox" checked> 選択肢 2 <input type="checkbox" checked=""> 選択肢 3 <input type="checkbox" checked="checked"> 選択肢 4 指定方法 : 属性名のみ, 属性名と値 ( 空文字列または属性名と同じ値 ) 44