プログラミング基礎 I

第八回 (2012年 5月28日)

XHTML の基本

http://www.sw.it.aoyama.ac.jp/2012/PB1/lecture7.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 の種類

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

XHTML 1.1 の外枠

<?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
- 不動産などの権原証書
要素を区別・特定できるために名前空間を使用
複数の文書・データ形式の種類の組み合わせに名前空間が有効

`<head>` と `<body>`

Web ページ全体の構造:

<html ... >
  <head>

Web ページについての情報、直接は見えない

  </head>
  <body>

Web ページ本体、直接見える

  </body>
</html>

`<head>` 内の主な要素

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

`<body>` の主な要素

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

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

要素の名前と属性
使用可能な子要素
意味、用途
スタイルシート無しの場合の見栄え

`<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>
  <li>Definition List</li>
</ul>

Unordered List
Ordered List
Definition List

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

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

Unordered List
Ordered List
Definition List

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

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

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

XHTML のチェック・検証

拡張子を .xml にし、IE 又は Opera で XML の文法をチェック
W3C Markup Validator File Upload を使用
(授業中は学内のコピーを使用すること!)

来週への準備

ミニテスト (30分)

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

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

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

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

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

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

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

(提出は現在不要)