Microsoft PowerPoint - 13info_WebStandatd_2.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - 13info_WebStandatd_2.pptx"

えりかしばもと
5 years ago
Views:

新しい Web 標準と XHTML (No.2) 経営情報学科 2013/06/26-7/10 片山敏之目次 1. 国際的な標準化団体 2. Web の基本的な概念 3. Web ブラウザの開発競争 4. Web 標準 5. HTML5 の動向 6. 文書構造の記述 - HTML5 7. 文書表現の記述 - CSS3 8. レイアウト技法 2013/6/26 2 6. 文書構造の記述 6.

1 新しい Web 標準と XHTML (No.2) 経営情報学科 2013/06/26-7/10 片山敏之目次 1. 国際的な標準化団体 2. Web の基本的な概念 3. Web ブラウザの開発競争 4. Web 標準 5. HTML5 の動向 6. 文書構造の記述 - HTML5 7. 文書表現の記述 - CSS3 8. レイアウト技法 2013/6/ 文書構造の記述 6.1 HTML 記述の作法 6.2 head 要素の書式 6.3 body 要素の書式 HTML5 以前はブロックレベル要素インライン要素グループ化要素 HTML5 では文書構造の記述 (XHTML1.) 1. XML 宣言 XHTMLはXMLアプリケーションのひとつ最初にXML 宣言をする <?xml version="1.0" encoding="shift_jis"?> Encoding 属性 :XHYMLの既定値は UTF-8 または UTF 文書型宣言 ( XHTML ) XHTML 文書のバージョンと文書型定義 (DTD) を指定する公開識別子 : -//W3C//DTD XHTML 1.0 Strict//EN W3C 等標準化団体が指定のものシステム識別子 : strict.dtd 作成者が独自に定義したものでもよい <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 コンテンツモデル ( 要素を7つのカテゴリに分 Strict//EN" " strict.dtd"> 類 ) <html> 6.4テーブル関連要素 ( そのページの基本情報メタデータ CSS 動作スクリプト) 6.5インライン要素 2013/6/ /6/26 4 文書構造の記述 (HTML5) 1. XML 宣言不要 2. 文書型宣言 ( HTML5 ) HTML5 の DOCTYPE 宣言役割り XHTML HTML のどちらでシリアライズされたデータでも選択可能に整形式 XML であること <!DOCTYPE html> 公式の DTD は未定義使用しないシリアライズデータをネットワーク上で送受信できるように変換することブラウザは HTML や XHTML データ ( つまりシリアライズされたもの ) を受信して表示するメタ要素の MIME タイプで記述文書構造の記述 (XHTML1.) 3. 名前空間と言語コード Html 要素 ( 文書のルート要素 ) XHTML では html 要素に記述名前空間 : xmlns 属性で指定言語コード :xml:lang 属性で指定 ( lang 属性では html 互換性配慮 ) 規定は ISO 639( 日本語 ja 英語 en 米語 en-us ) <html xmlns= xml:lang="ja" lang="ja"> ( そのページの基本情報メタデータ CSS 動作スクリプト ) <body> ( そのページの本文 ) </body> 2013/6/ /6/26 6 1/6

2 文書構造の記述 (HTML5) 3. 名前空間と言語コード文字コード HTML5 でも html 要素に記述名前空間 : 公式の仕様は未定義? 言語コード :lang 属性で指定 (html4 互換性 UTF-8 を推奨 ) Html 要素 ( ルート要素 ) 最初に head 要素を次に body 要素を記述する <html lang= ja > <meta charset= UTF-8 /> <title> ページのタイトル </title> <body> ( そのページの本文 ) </body> 新規属性先頭に 2013/6/26 7 XHTML の DTD 準拠 XHTML 1.0 Strict 前のスライド XHTML 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " trantional.dtd"> XHTML 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " 2013/6/26 8 XHTML/HTML 文書の DOM DOM は HTML 文書や XML 文書をアプリケーションから利用するための API (W3C の勧告 ) html XHTMLやHTML 文書はhtml 要素をルートとする木構造になっている head <html> title ( ページの基本情報 ) <title> 例 :XHTML 文書の基本構造 </titel> <body> body ( ページの本文 ) <h1> 例 : 要素名の書式 </h1> </body> h1 p Head 要素の内容はブラウザ画面に表示されない Body 要素に本文を構成する要素を記述す ul る 2013/6/ HTML 記述の方法タグの基本的書式 < 要素名 > 内容のテキスト </ 要素名 > 要素の記述 HTML5 では XHTML シリアライゼーションも認める空要素自身にコンテンツを持たない要素 Area, base, br, col, embed, hr, img, input, link, meta, param, source, krygen, command, HTML では <br> または <br /> のように記述 ( XHTML では <br /> ) 終了タグの省略条件付きで <p> や <li> 等は </p> や </li> を省略可 ( XHTML では省略不可 ) 2013/6/26 10 コンテンツ属性の記述引用符なしの構文も可値に空白 = < > が含まれていない場合 <input type=radio name=gn value=male> ( XHTMLでは <input /> ) 引用符 ( ) 値に ( ) が含まれていなければ ( ) を使う終端の / その前に空白を入れても入れなくても ( 値を引用符で囲む場合 ) 構わない 2013/6/26 11 確認構文チェック W3C Validator.nu アドオンの追加 :Firebug HTML5の機能が実装されているか実装状況は各ブラウザに依存 Wikipediaの記事 Comparison of layout engines (HTML5) ( 評点を示す ) W3CのHTML5 Test Suite ( 一部の機能 ) 2013/6/ /6

3 HTML のレンダリングのエンジン Trident Gecko Internet Explorer 9 以降 HTML5 CSS3 対応 Mozilla Firefox Thunderbird2 以降 Netscape6 以降 WebKit Mac OSX 以降の Safari Unix 系 OS のブラウザ Presto Opera7 以降で開発終了 Opera 14 は WebKit Opera 15 以降は Blink に切り替え開発支援 Blink 6.2 head 要素の書式 html 要素の最初の要素として記述文字コード (Charset 属性 ) <meta charset= UTF-8 /> 文書のメタデータ (meta 要素 ) meta 要素は空要素 <meta. /> Content 属性が表すメタ情報を使いコンテンツ属性 (name, http-equiv) の値に応じてメタ情報を表すタイトル (title タグ ) 必須一度だけ指定する ( meta 要素の後ろ ) <meta http-equiv= Content-Type content= application/xhtml+xml; charset=utf-8 /> <title>xhtml 文書の基本構造 </titel> Chrome28 以降 Google が主体となって開発を 2013/6/ /6/26 14 進めているシリアライズの種類を指定 MIMEタイプと文字コードセット必須最初に指定する ( 日本語など非 ASCIIコードの場合 ) XHTML1.0と1.1では <meta http-equiv= Content-Type content= application/xhtml+xml; charset=utf-8 /> http-equiv 属性は Webサーバに対してHTTP 応答告知ヘッダと等しい情報を追加的または優先的に出力するよう指示するための指定 http-equiv 属性で Content-Type content 属性で MIMEタイプを指定する XHTML 文書のMIMEタイプは一般的に application/xhtml+xml HTML4 文書では content= text/html ; HTML5でHTMLシリアライズするには不要タグの基本的書式で MIMEタイプ HTML 4 XHTML1.0 ( 互換性 ) XHTML1.0 ( 厳格他 ) HTML5 text/html, (text/xml) 推奨可能非推奨可能 Application/xhtml+xml 禁止推奨推奨推奨 Application/xml 禁止可能可能可能 2013/6/26 15 head 要素の書式説明文とキーワード ( 検索エンジン対応 ) <meta name= description content= ページの概要説明, 説明文を重視する検索エンジンがある /> <meta name= keyword content= XHTML, meta 要素, CSS2, キーワードを重視する検索エンジン向け /> 優先スタイルシートブラウザ側が選択できる <meta http-equiv= default-style content= sty1 /> <link rel= stylesheet href= sty1.css type= text/css title= style1 /> <link rel= 第 2 第 3のcss /> ページ移動 Refreshはページの再読み込みを表す例では10 秒後にURLのページの読込みが発生する <meta http-equiv= refresh content= 10; URL= /> その他 2013/6/26 Style 要素 link 要素 base 要素 16 ここまでの部分 (XHTML) <?xml version="1.0" encoding= UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="ja" lang="ja">  <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <title>web 書式の標準化 </title> <meta name="description" content="xhtmlの標準的な記述法 URIなどWeb の基本概念 " /> <body> <h1>head 要素 </h1> <p> この文書はXHTML1.0で記述されています </p> </body> </html> 2013/6/26 17 ここまでの部分 (HTML) <!DOCTYPE html> <html lang="ja">  <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>web 書式の標準化 </title> <meta name="description" content="html5の標準的な記述法 URIなどWeb の基本概念 " /> <body> <h1>head 要素 </h1> <p> この文書はHTML5.0で記述されています </p> </body> </html> 2013/6/ /6

4 検索エンジンの制御検索ロボットの収集対象にしない <meta name= ROBOTS content= NOINDEX, NOFOLLOW /> Google のみを制御 <meta name= GOOGLEBOT content= NOINDEX, NOFOLLOW /> INDEX, NOINDEX FOLLOW, NOFOLLOW ALL( 規定値 ) NOME 収集対象にするしないそのページに含まれるリンク先まで遡る遡らない INDEX,FOLLOW を指定 NOINDEX,NOFOLLOW を指定 2013/6/26 19 実習準備 1. XHTML 文書ファイルの作成テキストエディタ :TeraPad, 秀丸保存場所 :Sドライブにフォルダ作成例 ( 英数字のみ ) S: media web 名前をつけて保存 startx01.html 2. XHTMLファイルの実行 Webブラウザ :IExplorer 8, Firefox3.6, Opera 10.5, (Safari 4, Chrome 4.1,) まず, 個人のPC 上で実行 file:///s:/media/web/startx01.html 注意! 実行には必ずブラウザ側から呼び出す 3. Webサーバ ( 情報センターの ) で公開保存場所 : Wドライブにフォルダ作成例 ( 英数字のみ ) w: media web 2013/6/26 20 実習ここまでの Web ページをファイル名 startx02.html で作成検索ロボットの収集対象にしないを追加 Web ブラウザで開く ( 実行 ) Internet Explorer 8., Opera 10.0., Firefox 3.6., Safari 4.0., Chrome 4.1. Web サーバ ( 情報センターの ) で公開保存場所 : W ドライブのフォルダ w: media web S ドライブのファイルを,W ドライブの w: media web へコピー URI はユーザ id/media/web/ あるファイル名外部の検査サイトで確認 2013/6/26 21 実習 body の部分 <body> <h1>head 要素 </h1>   <p> この文書は XHTML1.0 で記述されています </p> <p> この文書は HTML 5 で記述されています </p> <ul>  <li> 名前 </li> <li> 学籍番号 </li> </ul> </body> 操作 PC のローカル (S) ドライブの startx02.html に上書きで保存し公開 Web ドライブ (W) へコピー Web ブラウザで他人の公開 Web ページを開く 2013/6/ body 要素の書式 Webページの本文の書き方要素の分類 (HTML5 以前 ) ブロックレベル要素 ( 独立した纏まり ) テキストやインライン要素を含むことが可能ブロックレベル要素を含むことが可能インライン要素 ( 行内の一部 ) リンク, 画像, 強調など, テキストと同格な要素ブロックレベル要素に含まれる形式で記述 XHTML1.0/1.1, HTML 辞典 HTML /6/ コンテンツモデル要素をカテゴリに分類 (HTML5) 1. メタデータコンテンツ 2. フローコンテンツ文書内のコンテンツ全般 3. セクショニングコンテンツ 4. ヘディングコンテンツ 5. フレージングコンテンツインライン要素に近い概念 6. エンベディッドコンテンツ 3. フロー 4. フレージング文書に組込まれる外部のリソース HTML 以外の言語 7. インタラクティブコンテンツ 2013/6/26 ユーザが操作できるコンテンツ /6

5 コンテンツモデル多くの要素は属するカテゴリで定義複数のカテゴリに属する要素がある <hgroup> <p> 誤った例 </p> </hgroup> 特定の要素に制限したモデル hgroup 要素には 1 個以上の h1~h6 要素のみ要素の直下に入れる要素 ( 子要素 ) を制限ブロックレベル要素アウトライン ( 階層構造 ) 従来は h1~h6 要素でアウトラインを判別見出し (h1~h6 要素 ) h1~h6 要素のアウトラインを守る原則として 1 文書に h1 要素はひとつ <h1> アウトライン </h1> <address> address 要素は子孫まで制限 <div> 正しい例 </div> <div> <h2>h2 要素の見出し </h2> トランスペアレントな要素 <section> 誤った例 </section> <p> 見出しはh1から使う h1の次のh2, その次はh3</p> 親要素のモデルを継承する </div> </address> <h3> h3 要素 </h3> a 要素, video, audio 要素など <h3>html4やxhtml1</h3> <em> <a href= sample.html > <p>1 文書に h1 要素はひとつ </p> <section>em 要素により誤った例 </section></a> <h2> セクション </h2> 2013/6/26 </em> /6/26 26 <p> h1~h6 要素はセクションの始まり </p> HTML5 のアウトラインの判別 XHTML2.0 草案 h 要素とsection 要素階層構造を自ら構成できる HTML5 草案 section 要素章や節の単位で使う ( 必須 ) セクション要素を続けると 1 つ上のセクションからアウトラインレベルが下がるアウトラインの確認 HTML5 Outliner <section> <h1> アウトライン </h1> <section><h2>h2 要素の見出し </h2> <p> 見出しは h1 から使う h1 の次の h2, その次は h3</p> <section><h3> h3 要素 </h3> </section><section> <h3>html4やxhtml1</h3> <div>1 文書に h1 要素はひとつ </div> </section> </section><section> <h2> セクション </h2> <p> h1~h6 要素はセクションの始まり </p> 2013/6/26 </section> </section> 27 連絡先情報 address 要素 [ 変更 ] ブロックレベル要素は含めない親要素は body, blockquote, div, form, object, footer, article 要素など子要素に img, object, map 要素は禁止作成者情報から連絡先情報に変更 Article 要素の中ではその著者への連絡先それ以外はページまたはサイトの連絡先情報日時で平成等は非推奨時刻表示には時差を付ける <address> 公開日 :2010 年 4 月 1 日更新日 : 2010 年 5 月 10 日 T15:30+09:00<br /> 作成者 : 北星太郎 (Taro Hokusei)<br /> 連絡先 :<a href= > hokuseitaro@info.hokusei.com 2013/6/26 </a> </br > All Rights Reserved. 28 </address> セクション関連要素 (HTML5) Body 要素 Section 要素 Nav 要素 [ 新 ] ナビゲーション Article 要素 [ 新 ] ブログやニュースの記事 Aside 要素 [ 新 ] 関連が薄いコンテンツサイドバー広告等 H1~h6 要素 Hgroup 要素 [ 新 ] 1 個以上の H1~h6 要素をグループ化 header 要素 [ 新 ] セクションのヘッダ header 要素 [ 新 ] セクションのフッタ address 要素 [ 変更 ] 2013/6/26 29 グループ化要素 (HTML5) P 要素 Hr 要素 Br 要素 Blockquate 要素 Pre 要素 ( 整形済みテキスト ) Div 要素 Figure 要素 [ 新 ] figcaption 要素 [ 新 ] 説明文付きの図や写真 Ol 要素 Ul 要素 Li 要素 Dl 要素 Dt 要素 Dd 要素 <figure> <img src= sample.jpg > 舵の説明です /> <figcaption> 図 1 帆船 </figcaption> </fingure> 2013/6/ /6

6 ブロックレベル要素パラグラフ (p 要素 ) 段落 ( 文章を纏める ) を構成例外 : 下位にブロックレベル要素を含めないパラグラフの途中での改行 (br 要素 ) br は空要素 (<br />) 廃止候補復活例 :<p> パラグラフの <br /> 途中で強制改行 </p> line(l) 要素 XHTML2.0 草案の改行例 : hr 要素 ( 空要素 <hr />) <p> <l> パラグラフの途中で改行には, br 要素は廃止され,</l> <l> l 要素が提案されている </l> </p> HTML4 では横罫線 HTML5 草案では, 主題テーマの区切り ( 構造 ) 2013/6/26 31 ブロックレベル要素引用文は (blockquate 要素 ) で引用元は cite 属性で URI または書籍の ISBN を明示引用元のタイトルは tite 属性で引用元は cite 要素で <cite> は <blockquate> の外に置く <p> 自動バックアップが推奨される理由は次のとおり </p> <blockquate cite= urn:isbn: x tite= PC 活用術 > <p> 手作業でする場合は, 面倒やトラブルの危険性がある ( 中略 ) が快適な方法だ </p></blockquate> <p> これは A 氏の最近の書籍からの引用である </p> <blockquate cite= tite= PC 活用術 > <p> 手作業で ( 中略 ) が快適な方法だ </p></blockquate> <p> これは A 氏の最近の解説 <cite><a href= > </a></cite> からの引用である </p> 一般的なコンテナ (div 要素 ) 他に適切なセクション要素が無い場合に使う 2013/6/26 32 箇条書きリスト ul 要素と li 要素一般, 番号なしリスト ol 要素と li 要素番号付きリスト ul 要素と ol 要素は li 要素以外を含めず li 要素は内にブロックレベル要素をも含むことが可能 <ul> 最近の Web ブラウザ <li>opera 10</li> <li>internet Explorer</li> <ol> <li>ie 7.0</li> <li>ie 8.0</li> </ol> <li>mozilla Firefox</li> <ul> <li>firefox 3.5.3</li> </ul> <li>apple Safari 4</li> </ul> 2013/6/ /6/ /6

Microsoft PowerPoint _1b-HTML.pptx

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