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