プログラミング基礎 I

第九回 (2011年 6月6日)

ハイパーリンク

http://www.sw.it.aoyama.ac.jp/2011/PB1/lecture9.html

Martin J. Dürst

今日の予定

前回の宿題とまとめ
HTML と CSS: class 属性と id 属性
ハイパーリンクの指定
画像の使用と配置
URI と IRI
素片識別子

先週の演習: 本格的な Web ページとスタイル

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

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

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

授業で習ってない要素は使う必要がない。

前回のまとめ: XHTML と CSS

外部スタイルシートは <head> 内の <link> 要素で指定:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
内部スタイルシートは <head> 内の <style> 要素で指定
要素固有のスタイルは style 属性で指定
style 属性より内部スタイルシート、内部スタイルシートより外部スタイルシートが好ましい

XHTML の `class` 属性

XHTML の要素が限定されているが、XML みたいな自由度が欲しい
そのために XHTML に class 属性がある
class 属性によって、XHTML の要素を更に使い分けることが可能
class 属性に複数のクラスの列挙が可能
例: <p class='warning important'>これは重要な警告です。</p>
クラスの名前は見栄えではなく、構造、内容の意味で決定:
悪い例: class='red'
良い例: class='warning'

CSS のクラス選択子

class はスタイルの出発点にも使用可能

CSS のクラス選択子は . で開始:

.warning   { color: red; }
 .important { font-size: 150%; }

クラス選択子は他の選択子と組み合わせ可能:

p.warning  { color: red; }
h1.warning { color: purple; }

XHTML の `id` 属性

一つだけの要素を識別したいときがある
XHTML に id 属性が使用可能
同じ id 属性値はある Web ページ内に一回しか使えない
例: <div id='header'></div>
属性値としてよく使うもの:
- 番号みたいなもの (例: ab2349874)
  (注: 先頭は数字ではなく、文字)
- ページ内の役割を示す名前 (例: header)
- 要素の内容に関するもの
id は構造、内容の意味で決定:
悪い例: id='top'
良い例: id='navigation'

CSS の `id` 選択子

CSS の id 選択子は # で開始:

#navigation { float: left; color: blue; }
#ab2349874  { font-size: 120%; }

id 選択子は他の選択子と組み合わせ可能:

div#navigation { float: left; }

XHTML と CSS のまとめ

上向き (bottom-up) スタイル設計の流れ:

style 属性
内部スタイルシート (internal stylesheet)
- 識別子 (id) 選択子
- クラス (class) 選択子
外部スタイルシート (external stylesheet)

画像の指定

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

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

ハイパーリンクの指定

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

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

Web アドレス (URI)

URI: Uniform/Universal Resource Identifier
(RFC 3986)

URI の種類:

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

URI の構造

scheme://domain.name/path1/path2/path3/document.ext?query=string#fragment

scheme: プロトコル・機能の指定 (http:, ftp:, mailto: など)
domain.name: ドメイン名 (例: moo.sw.it.aoyama.ac.jp, www.google.com)
path1/path2/path3: フォルダーに見立てた構造
document: 文書の名前
ext: 拡張子、文書の種類と関係
query=string: 検索などのためのデータ
fragment: 文書内の部分の指定 (素片識別子)

path1 から query=string はサーバが勝手に決められる

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

素片識別子

(fragment identifier)

文書内の部分や場所を指定
id 属性の識別子を使用
例: <h1 id='top'>ページの題名</h1>
CSS の選択子と同様、# で使用
例: <a href='#top'>ページの最初にもどる</a>
ページ内からでもページ外からでも使用可能

`<a>` と `<img>` の違い

<a> の場合:
- リンクはユーザによって作動
- 行先は別物
- 参照と同じなので行き先の許可は不必要
<img> の場合:
- リンクは自動的に作動
- 画像は元のウェブページに組み込まれ、その一部とみられる
- 画像の著作権所有者の許可がなかったら違法
- 再利用可能な画像の検索: Creative Commons (日本語での説明)

ページ内の画像の配置

画像の幅と高さ: width: 50pt; height: 50pt;
float: left; 又は float: right; で画像を左・右揃え
clear: left;、clear: right; 又は clear: both; でフロートの後、全幅を使用したいことを指定

演習: スタイルとリンクを生かしたウェブページ

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

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

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