Microsoft PowerPoint _1b-HTML.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint _1b-HTML.pptx"

ゆきひきぎ
5 years ago
Views:

1 HTML5 の XML 構文 (1) 整形式文書として記述する XML 文書として曖昧さのない記述にする (2) 名前空間宣言を入れる XML としての拡張性は名前空間によって実現される (3) XML 宣言を入れる XML 宣言は文字コードの判別に用いられる 14 (1) 整形式文書として記述する (a) 正しい木構造で記述する (b) 終了タグを省略しない (c) タグの大文字小文字を区別する (d) 属性の値は必ず引用符で囲む (e) ブーリアン属性の値を省略しない (f) 特別な文字は実体参照で記述する 15

2 (1) 整形式文書として記述する (a) 正しい木構造で記述するただ 1 つのルート要素を持つ HTML では,html 要素がルート要素となるすべての要素が正しい入れ子関係になっているどの親要素もその子要素全体を含む入れ子関係が交差しないようにする <b> 文書に <u> 意味 </u> を持たせる </b> <b> 文書に <u> 意味 </b> を持たせる </u> 親要素が子要素全体を含む入れ子関係の交差 ( 不可 ) 16 < 練習 1-7> 正しい木構造以下のタグ表記のうち正しい木構造の条件を満たすものはどれか答えなさい (1) <b><u><i></b></i><u> (2) <b><u></u></b><i></i> (3) <b><i><b></b></i></b> 17

3 (1) 整形式文書として記述する (b) 終了タグを省略しないブラウザによる省略タグの補完に頼らない HTML では, いくつかの要素で終了タグの省略が可能 ( 文法的に省略可能と規定されている ) XML として正しい書き方 ( 整形式 ) 整形式でない書き方 <ul> <li>1 番目の項目 </li> <li>2 番目の項目 </li> </ul> <ul> <li>1 番目の項目 <li>2 番目の項目 </ul> HTML の構文としては, どちらも正しい 18 空要素 : 内容を持たない要素 XML では終了タグは省略できない内容を持たない要素の例 (HTML): br( 改行 ),hr( 水平線 ),img( 画像 ) など終了タグを補うか, 開始タグを /> で閉じる例 : <br></br> または <br/> と表記する HTML5 の HTML 構文では終了タグを省略しなければならない開始タグを > または /> で閉じる例 : <br> または <br/> と表記する復習 <br/> 表記は,HTML 4.01 では定義されていないが, 多くのブラウザで適切に解釈される 19

4 (1) 整形式文書として記述する (c) タグの大文字小文字を区別する XML では大文字と小文字が区別される HTML では要素名, 属性名を大文字小文字どちらで表記してもよい img,img,img はどれも同じ要素名を表す HTML5 XML 構文では要素名, 属性名を小文字で表記しなければならない img( イメージ ) 要素を IMG,Img と表記するのは誤り src( ソース ) 属性を SRC,Src と表記するのは誤り 20 (1) 整形式文書として記述する (d) 属性の値は必ず引用符で囲む XML では属性値を引用符で囲まなければならない二重引用符 ( ダブルクォート ) " または一重引用符 ( シングルクォート ) ' で囲む誤正 <img src=photo.jpg /> <a href= リンク先 </a> <img src="photo.jpg" /> <a href=' リンク先 </a> HTML では属性値を引用符で囲まなくてもよい width=100 src=photo.jpg でも誤りではない 21

5 (1) 整形式文書として記述する (e) ブーリアン属性の値を省略しない XML では, 属性値を必ず指定する ( 省略不可 ) 例 : <option selected="selected"> </option> HTML では, ブーリアン属性 ( 値が true/false で解釈される ) の属性値を省略してもよい例 : <option selected> </option> 属性値として "selected" が指定されたと解釈される <select size="3"> <option>large</option> <option selected>medium</option> <option>small</option> </select> 22 (1) 整形式文書として記述する (f) 特別な文字の置き換え特別な意味をもつ文字 ( < & など ) は, 文字コードや実体名を用いて表す <p> タグ名は,< と > で囲む </p> XML では < と > ( 開始タグ?) 文字参照または実体参照を使用しなければならない HTML では, あいまいに解釈されていたテキストや属性値の中に < 等を用いても, その文字として解釈された 23

6 実体参照文字参照の例 XML で利用可能な実体参照文字説明実体参照文字参照 10 進数 16 進数 < 小なり記号 < < < > 大なり記号 > > > & アンパサンド & & & " 二重引用符 " " " ' アポストロフィ ' ' ' ' は HTML では使えない文字参照に使う文字コードは, ISO/IEC の一部 ( ユニコードに対応する部分 ) 24 実体参照と文字参照の書き方文字参照 : ユニコードのコード番号で置き換える書き方または &#10 進コード ; &#x16 進コード ; <p> タグ名は,< と > で囲む </p> 16 進コードの場合は x が付く実体参照 : 実体名で特別な文字を置き換える書き方 & 実体名 ; <p> タグ名は,< と > で囲む </p> 実体参照の方が直観的にわかりやすい 25

HTML 文書内にタグを表示するタグの表記をそのままブラウザに表示する水平線が実際に表示される ( タグの記号が示せない ) <p> 水平線は <hr/> で表示する </p> < と > ( 実体参照 ) を使うことで, タグの記号が表示できるようになる <p> 水平線は <hr/> で表示する </p> 26 < 練習 1-8> 行儀の良い HTML 以下の文書について, 整形式の

7 HTML 文書内にタグを表示するタグの表記をそのままブラウザに表示する水平線が実際に表示される ( タグの記号が示せない ) <p> 水平線は <hr/> で表示する </p> < と > ( 実体参照 ) を使うことで, タグの記号が表示できるようになる <p> 水平線は <hr/> で表示する </p> 26 < 練習 1-8> 行儀の良い HTML 以下の文書について, 整形式の HTML5 として正しくない箇所を指摘しなさい <!DOCTYE html> <html> <head><title> 練習問題 </title></head> <body> <h1> 行儀の良い HTML</h1> <ul> <li> 入れ子関係が交差しないようにする <li> タグを省略しない </ul> <p>html5 XML 構文では, 要素名と属性名を小文字で表記しなければならない </p> <p> 特別な意味をもつ文字 ( &,< など ) をブラウザ上で表示するには実体参照を用いる </P> <hr> <a href= 関西大学 </a> </body> </html> ブラウザ上の表示では特に問題ない 27

8 名前空間による複数タグセットの区別 XML では独自のマークアップ言語 ( タグセット ) が定義できる異なるタグセットで同じ要素名が用いられる可能性がある例 : name 氏名, 製品名例 : title 書名, 肩書き <?xml version= 1.0?> <main xmlns:book=" xmlns:job= > <book:title> 入門 HTML5</book:title> <book:author> 山田太郎 </book:author> <job:company>xyz 株式会社 </job:company> <job:title> 主任 </job:title> </main> XML 文書での名前空間宣言の利用例特別な属性 xmlns を用いて, 名前空間を宣言する名前空間の接頭辞 (book, job) によってタグセットを区別する 28 (2) 名前空間宣言を入れる XHTML5(HTML5 XML 構文 ) では, 名前空間の接頭辞を省略し, ルート (html) 要素に記述 html 要素内の他の要素 (head, body 等 ) は, 接頭辞を持たなくても XHTML の名前空間に属する接頭辞が省略された名前空間はデフォルト名前空間 <?xml version="1.0"?> <html xmlns=" <head> <title>html5 の例 </title> </head> <body> </body> </html> XHTML の名前空間宣言 29

例 : XHTML 文書への XML データ ( グラフィックス ) の埋め込み svg 要素内で circle 要素を用いて 3 つの円を描画 <?xml version="1.0"?> <html xmlns="http://www.w3.

org/2000/svg" width="200" height="200"> <circle cx="50" cy="30" r="10" fill="orange" /> <circle cx="90" cy="30" r="20" fill="red" /> <circle cx="150"

9 例 : XHTML 文書への XML データ ( グラフィックス ) の埋め込み svg 要素内で circle 要素を用いて 3 つの円を描画 <?xml version="1.0"?> <html xmlns=" <head> </head> <body> <p>xhtml 文書でのグラフィックス表示 </p> <svg xmlns=" width="200" height="200"> <circle cx="50" cy="30" r="10" fill="orange" /> <circle cx="90" cy="30" r="20" fill="red" /> <circle cx="150" cy="30" r="30" fill="blue" /> </svg> </body> </html> この範囲に出現する要素と属性は,svg の名前空間に属する 30 名前空間 URI の正体名前空間 URI (Unified Resource Identifier) はグローバルで一意に決まる識別名として用いられる URI のリンク先にあるページやデータが用いられる訳ではない XHTML の名前空間 URI のページ 31

10 (3) XML 宣言を入れる XML 文書では先頭 (1 行目 ) に XML 宣言を入れる XML 宣言より前に空白や空行があってはならない文字コードの判別に用いられる encodingが省略されると, 文字コードは UTF-8 と解釈される XML 宣言の例 version : XMLのバージョン (1.0 とする ) encoding : 文書の文字コード ( 省略時は UTF-8 となる ) <?xml version="1.0" encoding="shift_jis"?> <html> </html> XML 文書では, ファイルの文字コードに合わせて,XML 宣言で文字コードを指定する 32 文字コードと言語コードの指定 XHTML5 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns=" <head> <title>xhtml5の例 </title> </head> </html> xml:lang="ja"> HTML5 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>html5 の例 </title> </head> </html> 33

文字コードと言語コードの違い復習文字コード ( ファイル内のデータを符号化する方式 ) 0 1 のビット列と個々の文字 ( 漢字, アルファベットなど ) の対応付け言語コード ( テキストがどの言語で書かれているか ) 文字列をどの言語の言葉 ( 単語など ) とみなすかを指定する言語コードの例言語名日本語韓国語中国語英語フランス語言語コード ja kr zh en fr

11 文字コードと言語コードの違い復習文字コード ( ファイル内のデータを符号化する方式 ) 0 1 のビット列と個々の文字 ( 漢字, アルファベットなど ) の対応付け言語コード ( テキストがどの言語で書かれているか ) 文字列をどの言語の言葉 ( 単語など ) とみなすかを指定する言語コードの例言語名日本語韓国語中国語英語フランス語言語コード ja kr zh en fr 言語コード名, 文字コード名では大文字小文字を区別しない日本語文字コードの例コード名シフトJIS JIS 日本語 EUC Unicode 文字コード Shift_JIS ISO-2202-JP EUC-JP UTF-8 日本語を表記できる文字コードは複数ある 34 < 練習 1-9> XML 文書の読込エラー以下の XML 文書をブラウザで表示したところ, 文字コードに関するエラー (Encoding error) が出力された. この原因を推測し, その解消法を答えなさい Q1-9.xml ブラウザでの表示 35

12 HTML4.0 における文書型定義 3 種類のタグセットがある Strict ( 厳密な ) 構造記述の要素に限定 ( レイアウト系の要素を排除 ) Transitional ( 過渡的な ) 過去との互換性を保つためのバージョン視覚表現のための要素が含まれる Frameset ( フレームセット ) HTML フレームを使うための特殊なバージョン XHTML 1.0 (2000 年 1 月 ) HTLM 4.0 と同様に 3 種類の文書型定義がある 36 HTML4.0 から XHTML1.1 への展開 : 文書型定義の集約 XHTML 1.1 XHTML 1.0 Strict とほぼ同じ過渡的な措置であった Transitional,Frameset が廃止された HTML 4.0 (1997/12) Strict Transitional Frameset XHTML 1.0 (2000/01) Strict Transitional Frameset XHTML 1.1 (2001/05) 文書の構造を表す要素のみ利用可 ( 見栄えを調整する要素は廃止 ) 表示上の見栄えは HTML タグ,CSS のどちらでも設定可能従来の HTML との互換性を維持 ( 過渡期 ) CSS によるスタイル設定が必須となった 37

Web ブラウザが受信する様々なファイル [F12] で Chrome の開発ツールを表示

サーバやブラウザがデータの種類を区別するために用いる識別子 text/html HTML

文書として扱われる (IE6,7,8 では非対応 ) MIMEタイプ HTML 4

1 text/html application/ xhtml+xml : 用いるべき (

13 Web ブラウザが受信する様々なファイル [F12] で Chrome の開発ツールを表示開発ツールで Network タブを選択ブラウザに読み込まれたファイルの種類 (MIME タイプ ) 38 XHTML 1.1 が普及しなかった理由 XHTML を採用した多くのサイトでは XHTML 1.1 ではなく XHTML 1.0 が用いられた MIME タイプの問題 MIME タイプ : Web サーバやブラウザがデータの種類を区別するために用いる識別子 text/html HTML 文書と互換性がある application/xhtml+xml 厳密に XML 文書として扱われる (IE6,7,8 では非対応 ) MIMEタイプ HTML 4 XHTML 1.0 XHTML 1.1 text/html application/ xhtml+xml : 用いるべき ( 推奨 ) : 用いてもよい ( 可能 ) : 用いるべきでない ( 非推奨 ) : 用いてはならない ( 禁止 ) その他の MIME タイプ text/plain テキストファイル (sample.txt) application/vnd.ms-excel エクセルファイル (sample.xls) 39

14 XHTML の普及が試みられた当時の主要ブラウザのリリース状況 Web 標準年主なブラウザ HTML IE5 XHTML IE5~IE8 の間,IE のシェアは60~90% XHTML IE6 (2004 年 92.3%) Sa1 CSS FF FF1.5 Sa IE7 FF Sa3 HTML5 初期草案 2008 FF3 GC1 (XHTML2.0 策定停止 ) 2009 IE8 FF3.5 Sa4 GC FF3.6 Sa5 GC4 HTML5 最終草案 2011 IE9 FF4 GC IE10 FF10 Sa6 GC IE11 FF18 Sa7 GC27 HTML5 勧告 2014 IE: Internet Explorer FF: Firefox Sa: Safari GC: Google Chrome IE5 は XML 宣言を正しく解釈できない IE6,7,8 では,XHTML の MIME タイプが正しく解釈できない ( ダウンロードダイアログがポップアップする ) 40 XHTML5 HTML5 を XML 構文に基づいて記述した文書ファイルタイプ ( 拡張子 ) の設定によって, ブラウザには XHTML5 (XML 文書 ) として処理されるファイルタイプ *.xhtml *.xml MIME タイプ application/xhtml+xml application/xml 古いブラウザ (IE8 以前など ) では上記 MIME タイプが正しく解釈できないため, 利用範囲が制限される場合もある 41

Microsoft PowerPoint _1a-HTML.pptx

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