プログラミング基礎 I

第七回 (2011年 5月23日)

XHTML の基本

http://www.sw.it.aoyama.ac.jp/2011/PB1/lecture7.html

Martin J. Dürst

AGU

© 2006-11 Martin J. Dürst 青山学院大学

目次

これからの展望

HTML

HyperText Markup Language

1990 年頃から Web ページの記述に使用

Web ページは主に Text

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

HTML から XHTML へ

HTML の問題点:

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 の外枠の説明

名前空間

XHTML の種類

<head> と <body>

Web ページ全体の構造:

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

<head> 内の主な要素

<body> の主な要素

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

<h1> から <h6>

(heading 1 ~ heading 6)

Heading 1 (<h1>)

Heading 2 (<h2>)

Heading 3 (<h3>)

Heading 4 (<h4>)

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

<p> と <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>

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

箇条書きの例: <ol>

<ol>
  <li>Unordered List</li>
  <li>Ordered List</li>
  <li>Definition List</li>
</ol>
  1. Unordered List
  2. Ordered List
  3. Definition List

箇条書きの例: <dl>

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

XHTML のチェック・検証

来週への準備

ミニテスト (30分)

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

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

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

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

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

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

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

(提出は現在不要)