プログラミング基礎 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号室

今日の予定

先週の宿題とまとめ
XHTML の検証
ハイパーリンク
Web アドレス
段落内の要素
XHTML の表 (活用と悪用)

先週の宿題

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

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

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

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

先週のまとめ

外部スタイルシートは <head> 内の <link> 要素で指定:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
内部スタイルシートは <head> 内の <style> 要素で指定
要素固有のスタイルは style 属性で指定
固有スタイル、内部スタイルシートはできるだけ使用しないように
class 属性や id 属性によってスタイルを細かく指定可能
- class は要素の種類の小分け
- id はページ内の一個の要素の特定

XHTML の検証

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

必ず忘れないように!

リンクの指定

<a> 要素 (anchor 要素) で指定
href 属性でリンク先の Web アドレスを指定
<a> 要素の内容でリンクの文書を指定

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

画像の指定

<img> 要素 (image 要素) で指定
src 属性で画像の Web アドレスを指定
alt 属性で画像に代わる文書を指定 (必須)

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

Web アドレス (URI)

URI: Uniform/Universal Resource Identifier
(RFC 3986)

絶対 URI (例: http://www.w3.org/TR/xhtml1) と相対 URI (例: fuji.jpg)
使うプロトコルによる区別:
- http: Hypertext Transfer Protocol (HTTP)
- ftp: File Transfer Protocol (FTP)
- mailto: メール送信

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>` 内) の要素

<span>: 一般の要素 (<div> と似ている)
<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

float: left など: Web ページの一部を左寄せ
position: absolute

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

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

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

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