プログラミング基礎 I

第八回 (2008年 6月 9日)

XHTML の基本

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

Martin J. Dürst

duerst@it.aoyama.ac.jp, O 棟 529号室

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 アドレス以前の仕組み
Strict: 複数の種類の DTD があるが、Strict が普通
<html: 全体の要素は html
xmlns=...: XHTML 名前空間の指定

名前空間

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

XHTML の種類

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

`<head>` と `<body>`

Web ページ全体の構造:

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

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

`<head>` の主な要素

<title>: Web ページの「題名」
唯一必須な要素
様々なところに使われるので必ずよく考える
<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> はそれより小さい見出し
ページに構造を付けるに便利

`<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月13日 (金曜日) の 22:00 までに Moodle に投稿。

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

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

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

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

(提出は現在不要)