プログラミング基礎 I

第十回 (2008年 6月23日)

XHTML の応用

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

Martin J. Dürst

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

AGU

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

今日の予定

先週の宿題

本格的な Web ページを作って、
スタイルを用意してください。

アップロードの都合のため、
内部スタイルシートを使ってください。

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

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

先週のまとめ

XHTML の検証

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

必ず忘れないように!

リンクの指定

例: <a href='http://www.aoyama.ac.jp'
>青山学院大学</a>

画像の指定

例: <img src='fuji.jpg'
alt='冬の富士山と河口湖' />

Web アドレス (URI)

URI: Uniform/Universal Resource Identifier
(RFC 3986)

IRI

IRI: Internationalized Resource Identifier (RFC 3987)

ローマ字だけではなく、漢字なども使える
(現在まだ一部のブラウザを抜く)

IRI の例: http://ja.wikipedia.org/wiki/青山学院大学

(URI で書くと次になる: http://ja.wikipedia.org/wiki/%E9%9D%92%E5%B1%B1%E5%AD%A6%E9%99%A2%E5%A4%A7%E5%AD%A6)

ドメイン名の国際化の例: http://恵比須駅.jp

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

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分
住所 東京都渋谷区渋谷 神奈川県相模原市淵野辺

表の主な要素

表の活用と悪用

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

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

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

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

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

スタイルシートも合わせて拡張してください。

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

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

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