プログラミング基礎 I

第十回 (2010年 6月21日)

ハイパーリンク

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

Martin J. Dürst

今日の予定

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

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

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

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

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

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

先週のまとめ: XHTML と CSS

外部スタイルシートは <head> 内の <link> 要素で指定:
<link href="mystyle.css" rel="stylesheet" type="text/css" />
内部スタイルシートは <head> 内の <style> 要素で指定
要素固有のスタイルは style 属性で指定
style 属性より内部スタイルシート、内部スタイルシートより外部スタイルシートが好ましい
class 属性や id 属性によってスタイルは細かく指定可能
- class は要素の種類の小分け
- id はページ内の一個の要素の特定
CSS で .class と #id でクラスや識別子ごとにスタイル指定が可能

ハイパーリンクの指定

<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 の種類:

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

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> の場合:
- リンクは自動的に作動
- 画像は元のウェブページに組み込まれる
- 画像の著作権所有者の許可がなかったら違法とみられる

ページ内の画像の配置

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

演習: リンクを生かしたウェブページ

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

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

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