eil20080707A

情報リテラシー実習
Exercise in Information Literacy
World Wide Web
URL (Universal Resource Locator)


WWW (World Wide Web)をはじめとするインターネットアプリケーションにお
いて提供されるリソース（資源）の所在を表記したのも
つまり，URLはインターネット空間においてリソースの場所を特定する「住所」
のようなもの。インターネットアドレスという言葉は正確ではないので使用しな
い。
例）





http://www.cs.kumamoto-u.ac.jp/ Webページ用
ftp://ftp.cc.kumamoto-u.ac.jp/
FTP (File Transfer Protocol)用
インターネット：全地球規模で相互接続されたコンピュータ・ネットワーク
プロトコル：コンピュータ等の電子機器間で通信するための手段，通信規約
FTP：ファイルの転送を行うためのプロトコル
World Wide Web (WWW)






インターネット等で提供されるハイパーテキストシステムで，単にWebと呼ば
れることも多い
プロトコルは主にHTTP (HyperText Transfer Protocol)を使用する
ドキュメントの記述には主にHTML (HyperText Markup Language)などのハ
イパーテキスト記述言語が使用され，ドキュメントに別のドキュメントのURI
(Uniform Resource Identifier)への参照を埋め込むことで（ハイパーリンク）
インターネット上に散在するドキュメント同士を相互に参照可能にすることが
できる
そのつながり方が蜘蛛の巣を連想させることからこの名前（直訳すると「世界
中に広がる蜘蛛の巣」）がつけられた
ハイパーテキスト：複数の文章（テキスト）を相互に関連付け，結び付ける仕
組み
URI：URLの考え方を拡張したもの
WWWの仕組み

WWWサービスを提供するソフトウェア（WWWサーバソフトウェア）である
httpd (HyperText Transfer Protocol Daemon)が動いているWebサーバに，
HTMLで書かれたファイルを置くことで情報を公開する
WWWサーバ
1.URLを指定して
サービスを要求
WWWクライアント
ウェブブラウザ
（WWWブラウザ）
2.各種ファイル（文章，画像等）
を取得
3.取得したHTMLファイル
に従い，出力デバイスに
ドキュメントを表示
httpdが動作
HTMLファイル及び
画像ファイル等
HTMLファイルの作成準備

1.
2.
3.
4.
5.
6.

情報電気電子工学科計算機システムでは，自分のホームディレクトリに
HTMLファイルを置くことで，Webページを公開することができる
ssh -Y c8???@st1??.st.cs.kumamoto-u.ac.jp
chmod a+x ./
mkdir public_html
ホームディレクトリに必ずこの「public_html」という名前でディレクトリを作成
cd public_html
chmod a+rx ./
cp ~iga/public_html/index.html ./
このディレクトリにHTMLファイルや画像を追加していく
このようにして作成すると，自分のWebページのURLは
http://www.st.cs.kumamoto-u.ac.jp/~c8???/
となる（index.htmlは省略可）
HTMLファイルの構造




HTMLファイルの要素は以下の3つから成り立つ
 開始タグ
 内容
 終了タグ
開始タグ・終了タグは<，>で括られ，さらに終了タグについては＜の直後に/
を含めなければならない
属性（大きさや色等）は，開始タグの中において要素名の後ろから>の前まで
の間に記述する
終了タグを省略できる要素も存在し，内容を持たない空要素は同様に開始タ
グのみ書くことができる
HTMLタグ（ページの基本）




<html>,</html>：htmlの開始と終了を表し，この間に全ての内容を記述する
<head>,</head>：ページ情報を記述する
<title>,</title>：ページのタイトル（ブラウザのタイトルバーに表示される）
<body>,</body>：内容を記述する
<html>
<head>
<title>
</head>
<body>
</body>
</html>
</title>
HTMLタグ（背景，テキストカラーの変更）


テキスト，リンク，背景色の設定
 bgcolor：背景(background color)の色
 link：未訪問のリンクの色
 vlink：訪問済のリンクの色
 alink：リンククリック時の色
 background：背景の画像を指定
例）
<body bgcolor=“white” link=“red” vlink=“green” alink=“purple”>

色情報は
 ブラウザに登録されている代表的な色を名前で記述する
black, navy, blue, green, lime, aqua, purple, olive, gray, white,
brown, chocolate, red, magenta, pink, tomato, gold, snow, yellow,
 「#」+Red, Green, Blue をそれぞれ2byteで記述する (赤色は #ff0000)
参考URL）http://www.page.sannet.ne.jp/mtoga/html/bih-h_x1.htm
HTMLタグ（フォント）



<font>,</font>：フォントの色，サイズの設定
 size：サイズの変更（規定値は3）。数字を直接入力するか＋/－で規定値
からの変化量を指定する
 color：色の設定
例） <font size=“6” color=“#ff0000”>
強調
 <b>,</b>：太字
 <i>,</i>：斜体
 <strong>,</strong>：強い強調
 <u>,</u>：下線
 <s>,</s>：取り消し線
見出し文字
 <h1>,</h1> ～ <h6>,</h6>：数字が大きくなるにしたがって文字は小さ
くなる
HTMLタグ（レイアウト）






<br>：改行
<center>,</center>：中央寄せ
<div>,</div>：文章の一部分割・独立
 align：right（右寄せ），center（中央）, left（左寄せ）の指定
<hr>：横線
 witdh：線の長さ（数値かブラウザの横幅に対する割合を%で記述）
 align：right（右寄せ），center（中央）, left（左寄せ）の指定
 size：太さ
 color：色
例） <hr widht=“200” aligh=“center” size=“3” color=“black”>
<pre>,</pre>：書いた形のまま表示
：コメント文（ブラウザには表示されない）
HTMLタグ（リスト）



<ul>,</ul>：リスト（箇条書き）を行う
<ol>,</ol>：番号付リスト
<li>：リスト項目の追加
今日の議題
<ul>
<li>C言語
<li>html言語
<ul>
<li>リンク
<li>画像貼り付け
</ul>
</ul>
今日の議題
●C言語
●html言語
□リンク
□画像貼り付け
HTMLタグ（リンク・画像）




<a href=“URL”>,</a>：リンクを張る
 target：リンクの方法を指定
 _blank：別ウィンドウにリンクを開く
 _top：リンク対象がフレームを使っている場合，全てのフレームを取り
扱う
例) <a href=“http://www.cs.kumamoto-u.ac.jp/” target=“_blank”>情報電
気電子工学科</a>
<img src=“画像URL>：画像を張る
 width,height：画像の横/縦のサイズを指定する（ピクセル数orパーセント）
 align：画像に文字を回り込ませる
 top, middle, bottom：画像と文字の位置を指定
 left, right：画像の位置を指定し，文字の回りこみを許可する
<a href=“URL”><img src=“画像URL>,</a>：画像リンク
<a href=“mailto:メールアドレス>,</a>：メールリンク
HTMLタグ（テーブル）



<table>,</table：テーブル（表）を作る
 border：外枠の太さを指定
 cellspacing：すべての枠の太さを指定
 cellpandding：枠内の余白を指定
 width, height：表の大きさを指定
 align：表の位置を指定
 caption：表にタイトルをつける
<tr>,</tr>：行の追加
<td>,</td>：セルの追加
<Table Border>
<Tr>
</Tr>
<Td>1列1行</Td><Td>2列1行</Td>
1列2行 2列2行
<Tr>
</Tr>
</Table>
1列1行 2列1行
<Td>1列2行</Td><Td>2列2行</Td>
HTMLタグ（テーブル）

<td colspan=“n”>：横にセルn個を結合する
<Table Border>
横2セルと結合
<Tr>
</Tr>
<Td colspan=“2”>横2セルと結合</Td>
1列2行
2列2行
<Tr>
</Tr>
縦2セルと結合 2列1行
<Td>1列2行</Td><Td>2列2行</Td>
2列2行
</Table>

<td rowspan=“n”>：縦にセルをn個結合する
<Table Border>
<Tr>
</Tr>
<Td rowspan=“2”>縦2セルと結合</Td><Td>2列1行</Td>
<Tr>
</Tr>
</Table>
<Td>2列2行</Td>
HTMLタグ（テーブル）

<table bgcolor=“color”>：テーブル全体に色を付ける
<td bgcolor=“color”>：セル毎に色を付ける
<tr bgcolor=“color”>：行ごとに色を付ける

<table bordercolor=“color”>：枠線に色を付ける

<table background=“画像ファイルURL”>：背景を表示する


課題
A組は7月14日（月）8：40まで
B組は7月15日（火）8：40までに，
個人のWebページを作成し，公開する
テーマ：おすすめWebページへのリンク集
（今後はこのページを自分のホームページにしよう）
ただし，以下の内容を満たす必要がある
 （プライバシーに支障がない範囲で）自己紹介を書く
 1つ以上の画像を載せる（イラストでも可だが著作権に注意）
 1つ以上の表を作る
 他のWebページへのリンクは10個以上（おすすめする理由も書くこと）
注意事項
 ホームページビルダー等のWebページ作成ソフトは使用しない
 言語は「日本語」もしくは「英語」
 本学科の友達のWebページへのリンクを10個はダメ
Webページを作成上の注意




個人が特定できるような情報は載せない（自分，他人にかかわらず）
 住所
 電話番号（携帯電話等も含む）
 車やバイクのナンバー
他人を誹謗中傷するような内容は載せない
公序良俗上好ましくない内容は載せない
HTMLタグの解説Webページはたくさんあるので検索をしてみてほしい
 みんなのタグ辞書/HTMLタグ辞書 http://www.heo.jp/tag/
ファイルを転送する方法



Webでフリー素材を見つけてくる
外部メディア（USBメモリ等）を使って学校に持ってくる
携帯等で撮影した写真をメールに添付して，自分の学校のメールに送信する
いずれの方法でも，必ず
情報電気電子工学科の各々のホームディレクトリ下のpublic_html
というディレクトリにファイルを保存する
学科の計算機システム以外からファイルを転送する場合は
 sftpコマンド
 scpコマンド
を利用する必要がある
ファイルを転送する方法
sftpコマンドの使い方
（総合情報基盤センターにログインし，GNOME端末を開いてから）
$ sftp c8???@st1??.st.cs.kumamoto-u.ac.jp
Passwd:
（学科計算機のパスワード）
sftp> cd public_html
（ファイルを置きたいディレクトリへ移動）
sftp> put ファイル名
（ファイルを転送）
sftp> bye
（sftpを終了する）


追加したファイルは
chmod a+rx ファイル名
として、すべてのユーザが読み込み(r)、実行(x)できるようにアクセス権限を
設定しておくこと

Download Report