プログラミング基礎 I

第十一回 (2010年 6月28日)

XHTML の応用

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

Martin J. Dürst

今日の予定

先週の宿題とまとめ
段落内の要素
XHTML の表 (活用と悪用)

前回の演習: リンクを生かしたウェブページ

先週までに作った本格的な Web ページにリンクを追加:

ページ外へのハイパーリンク
素片識別子によるページ内のハイパーリンク
画像 (アップロードの都合上、特別の例外して他者の画像も使っていいが、必ずページ内に出所を明記のこと)
ページ内の画像の色々な配置
各種のリンクを一つのではなく、複数

前回のまとめ

(X)HTML では Web アドレスがよくつかわれる
ハイパーリンク: a 要素の href 属性、 img 要素の src 属性など
Web アドレスは URI (Uniform Resource Identifier) 又は IRI (Internationalized Resource Identifier) で指定
Web アドレスの部分としてはスキーム、ドメイン名、パス等がある

段落内 (`<p>` 内) の要素

<span>: 一般の要素、属性 (class, lang/xml:lang) で区別
例: 東京は中国語で<span lang='zh' xml:lang='zh'>东京</span>と書く
<em>: 強調
<strong>: 強く強調
<code>: プログラムなど
<var>: 変数
<ins>/<del>: 導入/削除
<abbr>/<acronym>: 略語; 例: <abbr title='青山学院大学'>青学</abbr>
<sup>/<sub>: 上付き^添字、下付き_添字

XHTML の表の単純な例

<table>
  <caption>青山学院大学のキャンパス</caption>
  <tbody>
    <tr><th>&nbsp;</th><th>青山</th>
      <th>相模原</th></tr>
    <tr><th>最寄りの駅</th><td>表参道</td>
      <td>淵野辺</td></tr>
    <tr><th>歩行</th><td>5分</td>
      <td>10分</td></tr>
    <tr><th>住所</th><td>東京都渋谷区渋谷</td>
      <td>相模原市中央区淵野辺</td></tr>
  </tbody>
</table>

例の表示

青山学院大学のキャンパス
	青山	相模原
最寄りの駅	表参道	淵野辺
歩行	5分	10分
住所	東京都渋谷区渋谷	相模原市中央区淵野辺

表の主な要素

<table>: 表全体
<caption>: 表の見出し
<tbody> (table body): 表の本体
<tr> (table row): 表の一行
<th> (header table cell): 見出し用の表のコマ
<td> (data table cell): データ用の表のコマ

表の活用と悪用

活用: 表の構造をしているデータの記述
悪用: Web ページの内容の配置

参考のため: Throwing Tables Out the Window
(日本語)

Web ページの内容の配置に使える CSS

応用例: 二段のウェブページ

解決案 1: float (前回参照)

解決案 2: position

これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。

これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。これは例文です。

`position` の解決案の構造

<div>: position: relative
(これがないと absolute でページ全体が基本)
- <div>: width: 50%
  (両方とも absolute だと高さが取れない)
- <div>: width: 50%; position: absolute; left: 50%;
  (left: 50%; により右半分に移動)

`position` の特性値

static: 従来通り
relative: 従来通り場所を確保、その後移動
(例: <span style='position: relative; top: -1em'>これは例文です。</span>)
absolute: 場所は確保しない
fixed: ページに対してではなくウィンドウに対しての配置
場所の詳細の指定のための特性: top, bottom, left, right, width, height

XHTML の検証

W3C の Validator (http://validator.w3.org) で
Validate by File Upload を使う

必ず忘れないように!

演習: 本格的な Web ページの拡張

今まで作った Web ページに今日習った要素などを
追加してもっと充実なものにして下さい。

スタイルシートも合わせて拡張してください。特に二段組みに挑戦してください。

アップロードの都合上、内部スタイルシートを使い、リンクは公開された絶対 URI にして下さい。

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

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