プログラミング基礎 I

第十回 (2007年 6月25日)

XHTML の応用

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

Martin J. Dürst

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

今日の予定

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

先週の宿題

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

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

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

6月24日 (日曜日) の 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='references.html'>参考文献</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://www.伊藤一成.jp/ (研究室の伊藤助教の個人ページ)

段落内の要素

<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 にして下さい。

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

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