プログラミング基礎 I

第十回 (2006年 6月26日)

XHTML の応用

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

Martin J. Dürst

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

先週の宿題

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

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

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

6月25日 (日曜日) の 23:55 までに Moodle に投稿。

先週のまとめ

XHTML の見出しとしては <h1> から <h6> がある
<div> は章、節みたいに複数の <p> を囲める
外部スタイルシートは <head> 内の <link> 要素で指定:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
内部スタイルシートは <head> 内の <style> 要素で指定
要素固有のスタイルは style 属性で指定
固有スタイル、内部スタイルシートはできるだけ使用しないように
class 属性や id 属性によってスタイルを細かく指定可能

XHTML の検証

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

リンクの指定

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

例: <a href='references.html'>参考文献</a>

画像の指定

<img> 要素 (image 要素) で指定
src 属性で画像を指定
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/青山学院大学

ドメイン名の国際化の例: http://www.伊藤一成.jp/ (研究室の伊藤助手の個人ページ)

箇条書き

箇条書き (リスト) は XHTML に三種類:

<ul>: 番号無し箇条書き (unordered list)
<ol>: 番号付き箇条書き (ordered list)
<dl>: 定義用箇条書き (definition list)

箇条書きの例

<ul>  <!-- ol は同様 -->
  <li>Unordered List</li>
  <li>Ordered List</li>
</ul>

<dl>
  <dd>URI</dd>
  <dt>Uniform/Universal Resource Identifier</dt>
  <dd>IRI</dd>
  <dt>Internationalized Resource Identifier</dt>
</dl>

段落内の要素

<span>: 一般の要素 (<div> と似ている)
<em>: 強調
<strong>: 強く強調
<code>: プログラムなど
<var>: 変数
<ins>/<del>: 導入/削除
<abbr>/<acronym>: 略語; 例: <abbr title='青山学院大学'>青学</abbr>
<sup>/<sub>: 上付き添字、下付き添え字

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

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

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

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