Microsoft PowerPoint - 13info_WebStandatd_2.pptx

(1)

新しいWeb標準とXHTML

(No.2)

経営情報学科

2013/06/26-7/10

片山

敏之

１ . 国際的な標準化団体

２ . Webの基本的な概念

３ _{. Webブラウザの開発競争}

４ . Web標準

５ _{. HTML5の動向}

• ６. 文書構造の記述－ HTML5

• ７. 文書表現の記述－ CSS3

• ８.レイアウト技法

2013/6/26 2 3

6. 文書構造の記述

• 6.1 HTML記述の作法

• 6.2 head要素の書式

• 6.3 body要素の書式

– HTML5以前は

• ブロックレベル要素、インライン要素、グループ

化要素

– HTML5では

• コンテンツ・モデル（要素を７つのカテゴリに分

類）

• 6.4 テーブル関連要素

• 6.5 インライン要素

2013/6/26 2013/6/26 4

文書構造の記述(XHTML1.)

1. XML宣言 – XHTMLはXMLアプリケーションのひとつ – 最初にXML宣言をする • <?xml version="1.0" encoding="Shift_JIS"?> – Encoding属性：XHYMLの既定値は「UTF-8」または「UTF-16」 2. 文書型宣言（ XHTML ） – XHTML文書のバージョンと文書型定義(DTD)を指定する – 公開識別子：-//W3C//DTD XHTML 1.0 Strict//EN • W3C等標準化団体が指定のもの – システム識別子： http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd • 作成者が独自に定義したものでもよい • <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd"> • <html> <head> (そのページの基本情報、メタデータ、CSS、動作スクリプト) </head> • </html>

文書構造の記述(HTML5)

1. XML宣言

不要

2. 文書型宣言（ HTML5 ）

– HTML5のDOCTYPE宣言 • 役割り – XHTML、HTMLのどちらでシリアライズされたデータでも選 択可能に – 整形式XMLであること

• <!DOCTYPE html>

– 公式のDTDは未定義⇒使用しない

• シリアライズ

– データをネットワーク上で送受信できるように変換すること – ブラウザはHTMLやXHTMLデータ(つまり、シリアライズされたも の)を受信して表示する – メタ要素のMIMEタイプで記述 2013/6/26 5 2013/6/26 6

文書構造の記述(XHTML1.)

3. 名前空間と言語コード Html要素（文書のルート要素） – XHTMLではhtml要素に記述 – 名前空間： xmlns属性で指定 – 言語コード：xml:lang属性で指定、( lang属性ではhtml互換性配慮) • 規定はISO 639（日本語「ja」、英語「en」、米語「en-US」） • <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang="ja" lang="ja"> <head> (そのページの基本情報、メタデータ、CSS、動作スクリプト) </head> <body> (そのページの本文) </body> • </html>

(2)

2013/6/26 7

文書構造の記述(HTML5)

3. 名前空間と言語コード、文字コード – HTML5でもhtml要素に記述 – 名前空間：公式の仕様は未定義？ – 言語コード：lang属性で指定、(html4互換性、UTF-8を推奨)

• Html要素（ルート要素）

– 最初にhead要素を、次にbody要素を記述する • <html lang=“ja”> <head> <meta charset=“UTF-8” /> … 新規属性、先頭に <title>ページのタイトル</title> </head> <body> (そのページの本文) </body> • </html> 2013/6/26 8

XHTMLのDTD準拠

• XHTML 1.0 Strict

前のスライド

• XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trantional.dtd">

• XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

• XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2013/6/26 9

XHTML/HTML文書のDOM

• XHTMLやHTML文書はhtml要素をルー トとする木構造になっている • <html> • <head> （ページの基本情報） <title>例：XHTML文書の基本構造</titel> • </head> • <body> （ページの本文） <h1>例：要素名の書式</h1> • </body> • </html> • Head要素の内容はブラウザ画面に表示さ れない • Body要素に本文を構成する要素を記述す る ul html head title body h1 p DOMは、HTML文書やXML文書をアプリケーションから利用するためのAPI (W3Cの勧告 )

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

• HTML5の機能が実装されているか

– 実装状況は各ブラウザに依存

• Wikipediaの記事 Comparison of layout

engines (HTML5)

• http://www.html5test.com/

(評点を示す)

• http://a.deveria.com/caniuse/

• W3CのHTML5 Test Suite (一部の機能)

2013/6/26 http://journal.mycom.co.jp/articles/2010/11/02/w3c-html5-test- 12 http://validator.w3.org/ http://html5.validator.nu/ http://www.html5.jp

(3)

HTMLのレンダリングのエンジン

• Trident

• Internet Explorer 9以降HTML5、CSS3対応

• Gecko

• Mozilla Firefox、Thunderbird2以降、

Netscape6以降

• WebKit

• Mac OSX以降のSafari、Unix系OSのブラウザ

• Presto

• Opera7以降、12.2.12で開発終了、Opera 14 は WebKit、Opera 15以降はBlinkに切り替え、開発支援

• Blink

• Chrome28以降、13.4.3Googleが主体となって開発を進めている 2013/6/26 13 2013/6/26 14

6.2 head要素の書式

• html要素の最初の要素として記述

<head> … … </head>

• 文字コード(Charset属性)

<meta charset=“UTF-8” />

• 文書のメタデータ(meta要素)

– meta要素は空要素

<meta …. />

Content属性が表すメタ情報を使い、コンテンツ属性(name, http-equiv)の値に応じて、メタ情報を表す。

• タイトル(titleタグ)

– 必須、一度だけ指定する（ meta要素の後ろ）

<head> <meta http-equiv=“Content-Type” content=“application/xhtml+xml; charset=UTF-8” /> <title>XHTML文書の基本構造</titel> </head> 2013/6/26 15

シリアライズの種類を指定

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

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=http://www.a-site.jp/” />

• その他

– Style要素、link要素、base要素

2013/6/26 17

ここまでの部分(XHTML)

<?xml version="1.0" encoding=“UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>Web書式の標準化</title>

ここまでの部分(HTML)

<!DOCTYPE html> <html lang="ja"> <head>

<title>Web書式の標準化</title>

(4)

2013/6/26 19

検索エンジンの制御

• 検索ロボットの収集対象にしない

<meta name=“ROBOTS” content=“NOINDEX, NOFOLLOW” />

– Googleのみを制御

<meta name=“GOOGLEBOT” content=“NOINDEX, NOFOLLOW” /> INDEX, NOINDEX 収集対象にする、しない FOLLOW, NOFOLLOW そのページに含まれるリンク先まで遡る、遡らない ALL（規定値） INDEX,FOLLOWを指定 NOME NOINDEX,NOFOLLOWを指定 2013/6/26 20

実習準備

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上で実行

– 注意！実行には必ずブラウザ側から呼び出す

3. Webサーバ（情報センターの）で公開

– 保存場所： Wドライブにフォルダ作成

• 例（英数字のみ） w:¥media¥web file:///S:/media/web/startx01.html 2013/6/26 21

実習

• ここまでの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は http://www.ipc.hokusei.ac.jp/~ユーザ

id/media/web/あるファイル名

– 外部の検査サイトで確認

2013/6/26 22

実習

• 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/26 23

6.3 body要素の書式

• Webページの本文の書き方

• 要素の分類(HTML5以前)

– ブロックレベル要素（独立した纏まり）

• テキストやインライン要素を含むことが可能 • ブロックレベル要素を含むことが可能

– インライン要素（行内の一部）

• リンク，画像，強調など，テキストと同格な要素 • ブロックレベル要素に含まれる形式で記述

• XHTML1.0/1.1, HTML辞典

•http://w3g.jp/xhtml/dic/

• HTML5

•http://www.html5.jp/tag/index.html • http://html5.imedia-web.net/

コンテンツ・モデル

• 要素をカテゴリに分類(HTML5)

1. メタデータ・コンテンツ

2. フロー・コンテンツ

– 文書内のコンテンツ全般

3. セクショニング・コンテンツ

4. ヘディング・コンテンツ

5. フレージング・コンテンツ

– インライン要素に近い概念

6. エンベディッド・コンテンツ

– 文書に組込まれる外部のリソース、HTML以外の言語

7. インタラクティブ・コンテンツ

– ユーザが操作できるコンテンツ 2013/6/26 24 フローフレージング 6. 4. 3.

(5)

コンテンツ・モデル

• 多くの要素は属するカテゴリで定義

• 複数のカテゴリに属する要素がある

• 特定の要素に制限したモデル

• hgroup要素には1個以上のh1～h6要素のみ

• 要素の直下に入れる要素(子要素)を制限

• address要素は子孫まで制限

• トランスペアレントな要素

• 親要素のモデルを継承する

• a要素, video, audio要素など

2013/6/26 25 <hgroup> <p>誤った例</p> </hgroup> <address> <div>正しい例</div> <div> <section>誤った例</section> </div> </address> <em> <a href=“sample.html”> <section>em要素により誤った例</section></a> </em> 2013/6/26 26

ブロックレベル要素

• アウトライン(階層構造)

– 従来はh1~h6要素でアウトラインを判別

• 見出し（h1~h6要素）

– h1~h6要素のアウトラインを守る

– 原則として１文書にh1要素はひとつ

<h1>アウトライン</h1> <h2>h2 要素の見出し</h2> <p>見出しはh1から使う。h1の次のh2，その次はh3</p> <h3> h3 要素</h3> <h3>HTML4やXHTML1</h3> <p>１文書に h1 要素はひとつ</p> <h2>セクション</h2> <p> h1~h6要素はセクションの始まり</p>

HTML5のアウトラインの判別

• XHTML2.0草案

h要素とsection要素

階層構造を自ら構成できる

• HTML5草案

section要素

章や節の単位で使う

_(必須)

セクション要素を続けると１つ上のセクションからアウトラインレベルが下がる

• アウトラインの確認

2013/6/26 27 <section> <h1>アウトライン</h1> <section><h2>h2 要素の見出し</h2> <p>見出しはh1から使う。h1の次のh2，その次はh3</p> <section><h3> h3 要素</h3> </section><section> <h3>HTML4やXHTML1</h3> <div>１文書に h1 要素はひとつ</div> </section> </section><section> <h2>セクション</h2> <p> h1~h6要素はセクションの始まり</p> </section> </section> HTML5 Outliner http://..../outliner

連絡先情報

• address要素[変更]

– ブロックレベル要素は含めない

• 親要素はbody, blockquote, div, form,

object, footer, article要素など

• 子要素にimg, object, map要素は禁止

– 作成者情報から連絡先情報に変更

• Article要素の中ではその著者への連絡先

• それ以外はページまたはサイトの連絡先情報

– 日時で「平成」等は非推奨、時刻表示には時差を付ける 2013/6/26 28 <address> 公開日：2010年4月1日、更新日： 2010年5月10日 T15:30+09:00<br /> 作成者：北星太郎 (Taro Hokusei)<br />

連絡先：<a href=“http://www.hokusei.com”> [email protected]

セクション関連要素(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要素

2013/6/26 30 <figure> <img src=“sample.jpg”>舵の説明です /> <figcaption>図１帆船</figcaption> </fingure>

(6)

2013/6/26 31

ブロックレベル要素

• パラグラフ（p要素）

– 段落（文章を纏める）を構成

• 例外：下位にブロックレベル要素を含めない

• パラグラフの途中での改行（br要素）

– brは空要素（<br />）

⇒廃止候補⇒復活

• 例：<p>パラグラフの<br />途中で強制改行</p>

– line(l)要素

• XHTML2.0草案の改行 • 例：

• hr要素（空要素<hr />）

– HTML4では横罫線

– HTML5草案では，主題・テーマの区切り(構造)

<p> <l>パラグラフの途中で改行には， br要素は廃止され，</l> <l> l要素が提案されている。</l> </p> 2013/6/26 32

ブロックレベル要素

• 引用文は（blockquate要素）で

– 引用元はcite属性でURIまたは書籍のISBNを明示

• 引用元はcite要素で

• 一般的なコンテナ（div要素）

– 他に適切なセクション要素が無い場合に使う

<p>自動バックアップが推奨される理由は次のとおり。</p> <blockquate cite=“urn:isbn:4-7973-3183-x” tite=“PC活用術”> <p>手作業でする場合は，面倒やトラブルの危険性がある。（…中略…）が快適な方法だ。</p></blockquate>

<p>これはA氏の最近の書籍「○○○」からの引用である。</p>

<blockquate cite=“http://www.o-name.jp/d/” tite=“PC活用術”> <p>手作業で（…中略…）が快適な方法だ。</p></blockquate> <p>これはA氏の最近の解説「<cite><a href=“http://www.o-name.jp/d/”>○○○</a></cite>」からの引用である。</p> <cite>は <blockquate> の外に置く引用元のタイトルはtite属性で 2013/6/26 33

箇条書きリスト

• ul要素とli要素

– 一般，番号なしリスト

• ol要素とli要素

– 番号付きリスト

• ul要素とol要素はli要素

以外を含めず

• li要素は内にブロックレ

ベル要素をも含むことが

可能

<ul>最近のW ebブラウザ <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>

Microsoft PowerPoint - 13info_WebStandatd_2.pptx

新しいWeb標準とXHTML

経営情報学科

2013/06/26-7/10

片山

敏之

目次

１

. 国際的な標準化団体

２

. Webの基本的な概念

３

. Webブラウザの開発競争

４

. Web標準

５

. HTML5の動向

• ６. 文書構造の記述－ HTML5

• ７. 文書表現の記述－ CSS3

• ８.レイアウト技法

6. 文書構造の記述

• 6.1 HTML記述の作法

• 6.2 head要素の書式

• 6.3 body要素の書式

– HTML5以前は

• ブロックレベル要素、インライン要素、グループ

化要素

– HTML5では

• コンテンツ・モデル（要素を７つのカテゴリに分

類）

• 6.4 テーブル関連要素

• 6.5 インライン要素

文書構造の記述(XHTML1.)

文書構造の記述(HTML5)

1. XML宣言

2. 文書型宣言（ HTML5 ）

• <!DOCTYPE html>

• シリアライズ

文書構造の記述(XHTML1.)

文書構造の記述(HTML5)

• Html要素（ルート要素）

XHTMLのDTD準拠

• XHTML 1.0 Strict

• XHTML 1.0 Transitional

• XHTML 1.0 Frameset

• XHTML 1.1

XHTML/HTML文書のDOM

6.1 HTML記述の方法

• タグの基本的書式

• 要素の記述

• 空要素

• 終了タグの省略

• コンテンツ属性の記述

– 引用符なしの構文も可

• <input type=radio name=gn value=male>

• （ XHTMLでは<input … /> ）

– 引用符（ ”、’）

– 終端の「/」

確認

• 構文チェック

– W3C

– Validator.nu

– アドオンの追加：Firebug 1.7.3

• HTML5の機能が実装されているか

– 実装状況は各ブラウザに依存

• Wikipediaの記事 Comparison of layout

engines (HTML5)

•

http://www.html5test.com/

(評点を示す)

•

http://a.deveria.com/caniuse/

• W3CのHTML5 Test Suite (一部の機能)

HTMLのレンダリングのエンジン

•

Trident

•

Internet Explorer 9以降HTML5、CSS3対応

•

Gecko

_{. Webブラウザの開発競争}

_{. HTML5の動向}