プログラミング基礎 I

第八回 (2010年 6月 7日)

XHTML の基本

http://www.sw.it.aoyama.ac.jp/2010/PB1/lecture8.html

Martin J. Dürst

これからの展望

幅広く使われる XML 文書の種類を勉強
XHTML: XML で作られているウェブページ
SVG: XML で記述されている図形

HTML

HyperText Markup Language

1990 年当たりから Web ページの記述に使われている

Web ページは主に Text

Web ページがつながっているので Hypertext

HTML から XHTML へ

HTML の問題点:

正式には HTML は SGML の応用
ブラウザは HTML の構文のチェックを怠った
Web に出回った HTML はどんどんひどくなった
ブラウザはどんどんひどい HTML の対応に覆われた
XHTML は HTML を XML の文法を緊密に守るように作り直したもの

XHTML の外枠の例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
       "http://www.w3.org/TR/xhtml11/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 ...
</html>

XHTML の外枠の説明

<?xml ...: XML 宣言; encoding は普通の XML と同じ
<!DOCTYPE ...: 外部 DTD
PUBLIC: Web アドレス以前の仕組み
<html: 全体の要素は html
xmlns=...: XHTML の名前空間の指定

名前空間

世界中色々な XML が存在
複数のところに例えば <title> 要素が使われる可能性がある:
- 本の題名、章、節の見出し
- Web ページの title
- 肩書きとしての title
- 不動産などの権原証書
要素を区別・特定できるために名前空間が使用
複数の文書・データ形式の種類の組み合わせに名前空間が有効

XHTML の種類

Transitional: 過去の「ゴミ要素」も含まれる
Frameset: フレームを使用したいときに必要
Strict: 一番「普通」
1.1: Strict とほぼ同等が、ルビ (振り仮名など) が追加
Basic: 携帯などのための単純化
XHTML-Print: 非常に簡単な印刷用
2.0: 開発中、前のものと大きく異なる
XHTML 5: XML 構文を使った HTML 5

`<head>` と `<body>`

Web ページ全体の構造:

<html ... >
  <head> ...
  </head>
  <body> ...
  </body>
</html>

<head>: 直接見えない部分
Web ページについて色々な情報を記述
<body>: 直接見える部分

`<head>` 内の主な要素

<title>: Web ページの「題名」
- 必須な要素
- 様々なところに使われるので必ずよく検討
- <head> 内なのに見えるので、忘れず
<link>: スタイルシートなどをリンク
<style>: スタイルを直接 Web ページ内に記述
<meta>: 色々追加情報を記述

`<body>` の主な要素

<div> (division): 複数の段落などをまとめるもの
章、節などに使用
<p>: 段落 (paragraph)
<h1> から <h6>: 見出し
<ul>, <ol>, <dl>: 項目が列挙できるリスト
<table>: 表

要素ごとに覚えておきたいこと

名前や属性、部品の要素
用途、意味
スタイルシート無しの場合の見栄え

`<h1>` から `<h6>`

(heading 1 ~ heading 6)

<h1> は大見出し (普通一ページあたり一個)
<h2> は中見出し
<h3> は小見出し
<h4>~<h6> はそれより小さい見出し
ページに構造を付けるに便利

Heading 1 (`<h1>`)

Heading 2 (`<h2>`)

Heading 3 (`<h3>`)

Heading 4 (`<h4>`)

重要: heading 要素は見出し! 文字の大きさの調整に悪用しないこと

`<p>` と `<div>`

<p>: Paragraph (段落)
<div>: ブロックレベルの任意のまとまり (章、節など)

`<p>` と `<div>` の理想な使用例

<div>
  <h1>Chapter 1</h1>
  <p>This is the introduction to Chapter 1</p>
  <div>
    <h2>Section 1.1</h2>
    <p>Text of Section 1.1</p>
    <p>More text...</p>
  </div>
  <div>
    <h2>Section 1.2</h2>
    <p>Text for Section 1.2...</p>
  </div>
</div>

箇条書き

箇条書き (リスト) は XHTML に三種類:

<ul>: 番号無し箇条書き (unordered list)
<ol>: 番号付き箇条書き (ordered list)
<dl>: 定義用箇条書き (definition list)

箇条書きの例: `<ul>`

<ul>
  <li>Unordered List</li>
  <li>Ordered List</li>
</ul>

Unordered List
Ordered List

箇条書きの例: `<ol>`

<ol>
  <li>Unordered List</li>
  <li>Ordered List</li>
</ol>

Unordered List
Ordered List

箇条書きの例: `<dl>`

<dl>
  <dt>head</dt>
    <dd>文書についての情報 (そのままでは見えない)</dd>
  <dt>body</dt>
    <dd>文書そのもの (見える部分)</dd>
</dl>

head: 文書についての情報 (そのままでは見えない)
body: 文書そのもの (見える部分)

XHTML のチェック・検証

拡張子を .xml にし、IE 又は Opera で XML の文法をチェック
W3C の Validator (http://validator.w3.org) で Validate by File Upload を使う

来週への準備

ミニテスト (30分)

演習 1: XHTML で簡単な Web ページを作る

簡単な Web ページを作りなさい。head に title 、body に複数の見出し、複数の p、各種の箇条書きを使って下さい。

6月11日 (金曜日) の 22:00 までに Moodle に投稿。

演習 2: 本格的な Web ページの内容を考える

自分が作りたい本格的な Web ページの内容を考えて下さい

授業中の他の学生に見せてもいい内容にして下さい

良い Web ページはどういう Web ページなのかを考えて下さい

(提出は現在不要)

プログラミング基礎 I

第八回 (2010年 6月 7日)

XHTML の基本

Martin J. Dürst

目次

これからの展望

HTML

HTML から XHTML へ

XHTML の外枠の例

XHTML の外枠の説明

名前空間

XHTML の種類

<head> と <body>

<head> 内の主な要素

<body> の主な要素

要素ごとに覚えておきたいこと

<h1> から <h6>

Heading 1 (<h1>)

Heading 2 (<h2>)

Heading 3 (<h3>)

Heading 4 (<h4>)

<p> と <div>

<p> と <div> の理想な使用例