Microsoft PowerPoint _1a-HTML.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint _1a-HTML.pptx"

けんじさかど
5 years ago
Views:

HTML 5 の設計思想誰もが自由に使い続けることができるオープンな Web 特定企業が定めた仕様 (API) や技術 ( プラグイン ) に頼らない例 : アドビの Flash, マイクロソフトの Silverlight HTML5 に追加された新しい要素 ( タグ ) video, audio 要素 ( 動画や音声を再生する ) canvas 要素 ( ビットマップグラフィックスの表示

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.

1 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 グラフィクスを表示プラグイン等のインストール不要

com/webgl-water/ 21 HTML5 で何が変わったのか定型句がシンプルになった

他のマークアップ言語の埋め込み書き方の自由度が高まったタグの省略空要素の表記属性値の省略

2 WebGL を用いたアプリの例ブラウザ上で 3D グラフィクスを表示プラグイン等のインストール不要 HTML5 で何が変わったのか定型句がシンプルになった DOCTYPE 宣言文字コードの指定利用可能な要素が増えた新たに追加された要素他のマークアップ言語の埋め込み書き方の自由度が高まったタグの省略空要素の表記属性値の省略 HTML5(HTML 構文 ) と HTML 4.01 の違い HTML5 には,HTML 構文と XML 構文がある (XML 構文については, 後ほど説明 ) 22

3 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" " <html> </html> HTML 4.01 <?xml version="1.0" encoding= UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" </html> XHTML 1.0 <html> </html> HTML 5 では表記法がシンプルになった HTML 5 24

Shift_JIS と shift_jis はコード名としてとしては同じ Web ブラウザは, 世界中の Web サーバにある HTML ファイルを, それぞれの文字コードに応じて切り替えて表示する

4 文字コードとはファイル内のデータを符号化する方式 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

5 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>

6 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 など ) で示す 29 言語コードの指定該当する要素に lang 属性を指定する同じページ内で複数の言語を用いる場合は, 要素ごとに言語コードを指定する <html lang= ja > </html> 言語コードの例 HTML 5,HTML 4.01 どちらも表記法は同じ言語日本語韓国語中国語英語フランス語言語コード ja kr zh en fr 言語コード名では大文字小文字を区別しない 30

contents > </div> <div id= footer > </div> </body> id 属性でに類似の値 (header, contents, footer 等 ) が用いられたが, 標準化されていなかった 31 例

7 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>

8 例 : 文書構造の表現 <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>

9 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> 順序付きリスト

記述リスト <dl> <dt> 用語 1 <dd> 説明 1 <dt> 用語 2 <dd>

html, head, body など (5 種類のみ ) 属性が指定された場合は,

10 終了タグのみ省略可能な例 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

11 W3C による文法チェッカー HTML/XHTML 文書が文法的に正しく記述されているかどうかを検証する文法チェックの条件 ( オプション ) は初期設定のまま 39 文法チェックの例 : ソースタグを直接入力 (1) 直接入力による検証タブを選択 (2) ソースタグを直接入力 ( コピーペースト ) No errors or warnings to show. と表示されれば文法チェック成功 (3) チェックボタンをクリックして検証 40

12 < 練習 1-3> 文法チェック以下の文書を文法チェッカーに直接入力し,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 要素をルートとする木構造で表しなさいテキストノードも省略せずに示すこと

( ブーリアン属性 ) ブーリアン ( 真偽値 ) 属性真 (true) または偽 (false) どちらかの値を取る属性例 : input 要素の

<input type="checkbox" checked> 選択肢 2 <input type="checkbox" checked=""> 選択肢 3

13 < 練習 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

Microsoft PowerPoint _1b-HTML.pptx

Microsoft PowerPoint _1b-HTML.pptx HTML5 の XML 構文 (1) 整形式文書として記述する XML 文書として曖昧さのない記述にする (2) 名前空間宣言を入れる XML としての拡張性は名前空間によって実現される (3) XML 宣言を入れる XML 宣言は文字コードの判別に用いられる 14 (1) 整形式文書として記述する (a) 正しい木構造で記述する (b) 終了タグを省略しない (c) タグの大文字小文字を区別する