筑 波 大 学 情 報 処 理 実 習 Webページによる 情 報 の 発 信 情 報 処 理 実 習 用 手 引 き P.193~234
World Wide Web (WWW) インターネット 上 のハイパーテキストシステム 1989 年 にCERNの 物 理 学 者 Tim Berners-Leeが 発 明 WWWはインターネットとも 呼 ばれるが, 両 者 は 同 義 語 ではない WebページのアドレスURL ハイパーテキストの 文 法 HTML インターネット 上 の 通 信 プロトコルHTTP WebサーバとWebブラウザ
WWWシステム ページリクエスト http://www.tsukuba.ac.jp/index.html ページ Webサーバ (Webサイト) http://www.tsukuba.ac.jp/ Webブラウザ (Internet Explorer,Firefox,...) http://www.mext.go.jp/ http://www.nih.gov/
Webサーバの 利 用 Webサーバ 利 用 申 請 http://www.u.tsukuba.ac.jp/user/user.html z: www 以 下 にWebページを 置 く URL http://www.u.tsukuba.ac.jp/~s10xxxxx/
Webページの 参 照 (1) ファイル 名 の 拡 張 子 は.htm,.html,,.php,, 拡 張 子 とはファイル 名 に 続 きドットから 始 まる 名 前 通 常 表 示 されないが [ 整 理 ] [フォルダと 検 索 オプション ] [ 表 示 ]タブ 詳 細 設 定 の[ 登 録 されている 拡 張 子 は 表 示 しない]のチェックをはずす [OK] http://www.u.tsukuba.ac.jp/~s10xxxxx/は z: wwwディレクトリを 指 している ディレクトリが 指 定 された 場 合 index.htm,index.html, welcome.htmなど 決 められたファイルが 参 照 される なければディレクトリの 内 容 (ファイル 名 )か 設 定 により エラーとなる 5
Webページの 参 照 (2) z: www 以 下 のパス 名 を 追 加 すると 特 定 のWebペ ージが 参 照 可 能 z: www abc.htm http://www.u.tsukuba.ac.jp/~s10xxxxx/abc.htm z: www local_only efg.htm http://www.u.tsukuba.ac.jp/~s10xxxxx/local_only/efg.htm local_only 以 下 のファイルは 筑 波 大 内 でのみ 参 照 可 能 6
Dreamweaver Adobe 社 のWebデザインソフトウェア
Webページの 作 成 (1) [ 新 規 作 成 ]-[HTML]をクリック 保 存 場 所 : z: www
Webページの 作 成 (2) Webページ 編 集 画 面 HTML 表 示 ブラウザでの 実 際 の 表 示 直 接 この 画 面 で Webページの 編 集 が 可 能
ページの 編 集 (1) 文 字 入 力 Enterは 改 段 落,Shift+Enterが 改 行 画 像 の 挿 入 [ 挿 入 ]-[イメージ] Exercise: 筑 波 大 のロゴの 挿 入, 代 替 テキストの 設 定 見 出 し [フォーマット]-[ 段 落 フォーマット]-[ 見 出 し1] リンクの 作 成 文 字 列 を 選 択 [ 挿 入 ]-[ハイパーリンク] Exercise:http://www.tsukuba.ac.jp/へのリンク 作 成
ページの 編 集 (2) リスト( 箇 条 書 き, 番 号 付 リスト) リストにしたい 複 数 行 を 選 択 [フォーマット]-[リスト]-[リス ト] 表 (テーブル) [ 挿 入 ]-[テーブル] Exercise: 以 下 の 表 を 挿 入 数 学 国 語 英 語 筑 波 太 郎 100 80 90 土 浦 次 郎 90 95 100
ページの 編 集 (3) 行 揃 え( 左 揃 え, 中 央 揃 え, 右 揃 え, 整 列 ) [フォーマット]-[ 行 揃 え]-[ 中 央 ]
HTMLについて Webページの 作 成 はDreamweaver,FrontPage, Wordなどで 簡 単 にできる HTMLはWWWにおける 標 準 言 語 言 語 を 理 解 して 欲 しい DreamweaverなどはHTMLを 出 力 WebブラウザはHTMLを 解 釈 し 表 示 HTMLを 直 接 扱 うのは 大 変 なため, 便 利 に 使 うため のツール 群 他 の 例 :Java Javaバイトコード 機 械 語
HTML 文 書 を 書 く メモ 帳 Webページ
HTML 文 書 を 書 く 流 れ メモ 帳 を 起 動 HTML 文 書 を 書 く.htmlとして 保 存
HTML 文 書 記 述 例 テキスト 文 書 タグで 構 造 を 表 す <html>など 大 文 字 小 文 字 の 区 別 なし 半 角 英 字 で 開 始 タグと 終 了 タグ <html>~</html> ネスト 可 能 <html><body></body></html> <html><body></html></body>
HTML 文 書 の 構 造 HTML 文 書 ヘッダ 部 本 文 <html> <head> <title>タイトル</title> </head> <body> 本 文 </body> </html>
.htmlとして 保 存 名 前 を 付 けて 保 存 をクリック ~.html
見 出 し 見 出 し1 <h1>...</h1> 見 出 し2 <h2>...</h2>... <h6>...</h6> <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> </HEAD> <BODY> <h1> 筑 波 太 郎 のWebページ</h1> 筑 波 太 郎 のWebページにようこそ </BODY> </HTML>
段 落, 改 行 段 落 <p>...</p> 改 行 <br> <h1> 筑 波 太 郎 のWebページ</h1> <p> 筑 波 太 郎 のWebページにようこそ</p> <p> 筑 波 大 学 は 緑 に 囲 まれた <br> とても 広 くてすばらしい 大 学 です </p> 注 意 :HTML 文 書 内 の 改 行 は 関 係 ない
画 像 書 式 <img src=" 画 像 ファイル 名 " alt=" 代 替 テキスト" width=" 横 幅 " height=" 高 さ"> <h1> 筑 波 太 郎 のWebページ</h1> <p> 筑 波 太 郎 のWebページにようこそ</p> <img src="http://www.tsukuba.ac.jp/common/images/h_logo.gif"> <p> 筑 波 大 学 は 緑 に 囲 まれた <br> とても 広 くてすばらしい 大 学 です </p>
リンク 書 式 <a href="リンク 先 のアドレス">...</a> <h2>リンク</h2> <a href="http://www.tsukuba.ac.jp/"> 筑 波 大 学 </a><br> <a href="http://www.md.tsukuba.ac.jp/md-school/"> 医 学 類 </a>
リスト( 箇 条 書 き, 番 号 付 リスト) 箇 条 書 き <ul> <li> 項 目 1</li> <li> 項 目 2</li> </ul> 番 号 付 リスト <ol> <li> 項 目 1</li> <li> 項 目 2</li> </ol>
表 書 式 <table> <tr><th> 項 目 名 </th>...</tr> <tr><td> 値 </td>...</tr> </table> <table border=2> <tr><th> 名 前 </th><th> 英 語 </th><th> 数 学 </th></tr> <tr><th> 筑 波 太 郎 </th><td>70</td><td>80</td></tr> </table>
スタイルシート1 書 式 <STYLE TYPE= test/css > <!-- セレクタ{ 宣 言 } --> </STYLE> <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> <STYLE TYPE= text/css > <!-- P{color:#FF0000} H1{font-syze:120%} --> </STYLE> </HEAD> <BODY> <P>スタイルシートの 適 用 で 赤 字 になる</P> <H1>スタイルシートの 適 用 で 大 字 になる</H1> </BODY> </HTML>
スタイルシート2
HTMLの 参 考 資 料 SUPER HTML4.0 REFERENCE http://www.zspc.com/html40/index.html とほほのWWW 入 門 http://www.tohoho-web.com/ ホームページ 入 門 http://www.tohoho-web.com/wwwbeg.htm HTMLリファレンス http://www.tohoho-web.com/html/index.htm
Markup Validation Service http://validator.w3.org/ 文 法 チェックをしたいページのURI(URL)を 指 定
Webページ 作 成 時 の 注 意 点 ファイル 名 の 記 述 間 違 い 基 本 的 に 半 角 英 数 文 字 ファイルのパーミッション 他 人 (Webサーバ)に 読 込 許 可 ネットワークを 使 ったファイル 転 送 Webのアクセス 制 御
ファイルのパーミッション Linuxシステムにログインしてファイルアクセス 権 限 を 変 更 他 人 が 変 更 できないように 他 人 (Webサーバ)が 読 込 可 能 に サーバ 名 :unix01.u.tsukuba.ac.jp % ls l % chmod 644 index.html...
ネットワークを 使 ったファイル 転 送 作 成 したWebページをインターネットで 閲 覧 する ためにWinSCPなどを 使 ってファイルを 転 送 する
WinSCPの 使 い 方
学 外 からの 利 用 パスワード 認 証 は 危 険 パスワードの 漏 洩 の 危 険 パスワードアタックの 危 険 性 多 くのクラック 事 件 は 安 易 なパスワードによる 公 開 鍵 認 証 系 の 利 用 が 必 須 公 開 する 公 開 鍵 と 秘 密 にする 秘 密 鍵 秘 密 鍵 は 手 元 のノートPCやデスクトップPCで 生 成 し ネットワー クを 転 送 しない 平 文 秘 密 鍵 暗 号 文 暗 号 文 公 開 鍵 平 文 暗 号 化 と 復 号 化 に 異 なる 鍵 を 用 いる 34
秘 密 鍵 公 開 鍵 ペアの 作 成 Puttygenを 起 動 Actions Generate a public/private key pair [Generate] 乱 数 生 成 のためウインドウの 空 白 エリアでマウスを 動 かす Key commentに 鍵 のコメントを 入 力 名 前 と 場 所 など tatebe@u.tsukuba.ac.jp Key passphraseとconfirm passphraseを 入 力 Save private key ファイル 名 tatebe.ppk Save public key ファイル 名 tatebe.pub 35
公 開 鍵 の 登 録 WinSCPでtatebe.pubをunix01.u.tsukuba.ac.jpに 転 送 ここはパスワード 認 証 なので 学 内 で 形 式 を 変 更 し.ssh/authorized_keysに 追 加 Puttyでunix01.u.tsukuba.ac.jpにログイン % mkdir.ssh #.sshディレクトリ 作 成 (なければ) % chmod 700.ssh #.sshディレクトリのパミッション 変 更 % ssh-keygen -i -f tatebe.pub >>.ssh/authorized_keys % rm tatebe.pub # もう 必 要 ないため 消 去 36
パスフレーズの 一 次 的 記 憶 Pageantを 利 用 することによりパスフレーズのタイプ を 一 度 にすることが 可 能 となる pageantを 起 動 タスクトレイのpageantを 右 クリック Add key 秘 密 鍵 を 指 定 パスフレーズをタイプ 以 降 は パスフレーズを 打 つことなくログイン 可 能 37
Webのアクセス 制 御 学 内 のみアクセス 許 可 local_onlyディレクトリの 下 にファイルを 作 成 z: www local_only.htaccessで 制 御 該 当 ディレクトリに 以 下 のような.htaccessファイルを 置 く.htaccessの 記 述 例 <limit> order deny, allow deny from all allow from.tsukuba.ac.jp </limit>
補 足 スライド
背 景 に 色 を 付 ける 書 式 <BODY BGCOLOR="color"> <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> </HEAD> <BODY BGCOLOR=yellow> 背 景 が 黄 色 になる </BODY> </HTML>
背 景 に 画 像 を 貼 り 付 ける 書 式 <BODY BACKGROUND=" 画 像 ファイル 名 "> <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> </HEAD> <BODY BACKGROUND="img.jpg"> 背 景 に 画 像 が 貼 られる </BODY> </HTML> サンプル 画 像 http://www.u.tsukuba.ac.jp/~tatebe.osamu.gt/local_only/sample/
文 字 の 表 示 位 置 の 指 定 書 式 <DIV ALIGN=xxx> </DIV> <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> </HEAD> <BODY> <DIV ALIGN=left> 左 揃 え</DIV> <DIV ALIGN=center> 中 央 揃 え</DIV> <DIV ALIGN=right> 右 揃 え</DIV> </BODY> </HTML>
フォント1 書 式 <FONT SIZE="n" COLOR="xxx" > </FONT> <HTML> <HEAD><TITLE> 私 のWebページ</TITLE></HEAD> <BODY> <FONT SIZE="5"> 文 字 を 大 きくしたり</FONT><BR> <FONT COLOR="#FF0000"> 文 字 の 色 を 変 えたり</FONT><BR> することができる.<BR> </BODY> </HTML>
フォント2
カラーの 指 定 1.カラーネーム 色 の 名 前 で 指 定 する HTML 4.01で 定 められている 色 2.#rrggbb 赤 (red), 緑 (green), 青 (blue)の3 色 をそれぞれ16 進 数 2 桁 で 表 す Red Lime Blue White Maroon Green Navy Silver Yellow Aqua Fuchsia Gray Olive Teal Purple Black 256 3 =16,777,216 通 りの 色 指 定
修 飾 文 字 ( 物 理 的 な 指 定 ) 書 式 <B> </B> <I> </I> <U> </U> <S> </S> 太 字 イタリック アンダーライン 打 ち 消 し 線 <HTML> <HEAD> <TITLE> 私 のWebページ</TITLE> </HEAD> <BODY> <B>Bold 太 字 </B><BR> <I>Itaric イタリック</I><BR> <U>Underline アンダーライン</U><BR> <S>Strike through 打 ち 消 し 線 </S><BR> </BODY> </HTML>
HTMLについての 補 足 開 始 タグ, 終 了 タグは 必 ずペアで 利 用 <html><head></head><body></body></html> 表 中 のセルの 行 揃 え, 縦 方 向 の 位 置 はTR,TH, TDのalign,valign 属 性 で 指 定 fontのsize 属 性 1~7の 整 数, 現 在 の 値 に 対 し+n,-n 実 際 の 大 きさはブラウザ 依 存