技 術 センター HP 講 習 会 ( 第 2 回 ) 広 島 大 学 技 術 センター HP 運 用 WG
本 日 の 講 習 会 の 流 れ FTPソフトの 使 い 方 ファイルをサーバにアップロードする 方 法 前 回 ( 第 1 回 )の 復 習 とその 応 用 フォルダ(ディレクトリ)とリンクの 関 係 リンクの 仕 組 み: 絶 対 パスと 相 対 パス パスワードによるアクセス 制 限 について 特 定 のフォルダ 下 におけるアクセス 制 限
FTPソフトによるログイン 方 法 広 島 大 学 IMCのhomeサーバの 場 合 登 録 する 基 本 設 定 は 以 下 の 通 り 接 続 先 のサーバ login.hiroshima-u.ac.jp ユーザID(アカウント) IMCで 登 録 した 個 人 アカウントの 名 前 パスワード 上 記 アカウントのパスワード( 広 大 パスワードと 同 じ) ログインしたホームフォルダの 下 にある public_html へアクセス(ここがHPの 置 き 場 所 )
RootFTPの の 使 用 例 広 島 大 学 IMC IMCのhomeサーバにログインした 場 合 接 続 切 断 ルート(ホーム) フォルダ public_html/ (マイ コンピュータ) リモート (サーバ 側 ) アップ ダウン ロード ロード ローカル ( 自 分 側 )
public_htmlの の 内 部 構 造 */ * = 個 人 アカウント 名 public_html/ index.html http://home.hiroshima-u.ac.jp/*/(index.html) hiroshima ac html) HOME link.html http://home.hiroshima-u.ac.jp/*/link.html photo/ index.html car.html http://home.hiroshima-u.ac.jp/*/photo/(index.html) html) http://home.hiroshima-u.ac.jp/*/photo/car.html car01.jpg http://home.hiroshima-u.ac.jp/*/photo/car01.jpg
HTMLファイルの 基 本 構 造 <html> <head> <title> </head> <body> (ブラウザ 上 部 に 表 示 されるタイトル 名 ) 表 示 させる 物 の 中 身 はここに 記 述 </body> </html> < > </ >の </ >の 形 (タグ)で 囲 むのが 基 本 </title>
文 字 のサイズ 色 & タグの 設 定 文 字 のサイズ <font size= n > </font> ( 一 括 設 定 について) (nは1~7の 整 数 etc) <hn> </hn> ( 見 出 しの 場 合 : nは1~6の 整 数 ) 文 字 の 色 <font color= # xx xx xx > </font> (xは1~fの16 進 数 ) 赤 (R), 緑 (G), 青 (B)の 順 に, 各 2 桁 で 表 示 デフォルトは 黒 (#000000) 背 景 色 のデフォルトは 白 (#FFFFFF) タグ(fontに 限 らず)では, 一 括 設 定 することも 可 能 例 : <font size= n color= #xxxxxx > </font>
文 字 の 装 飾 ( 強 調, 斜 体, 上 付 き 下 付 き,フォント 変 更 ) 強 調 ( 太 字 ) <strong> </strong> </ t > または <b> </b> </b> 斜 体 (イタリック 文 字 ) <em> </em> または <i> </i> 上 付 き 文 字 下 付 き 文 字 上 付 き: <sup> </sup> ; 下 付 き: <sub> </sub> フォント( 種 類 )の 変 更 例 : <font face= MS 明 朝, 平 成 明 朝, serif > </font> Windows Mac CSS
テーブル( 表 ) 枠 の 太 さ(0の 場 合 は 枠 なし) 背 景 色 <tr> </tr>: : 行 <td> </td>: 列 ( 個 々のセル) <table border= 1 bgcolor= #FFFFFF > <tr valign= top /center/bottom > <td align= center /left/right > ( 文 章 or 画 像 or リンク) </td> </tr> <tr> <td> </td> </tr> </table>
結 合 したセルを 含 むテーブル <table border= 1 > <tr> <td colspan= 2 > 1 </td> </tr> <tr> <td rowspan= 2 > 2 </td> <td> 3 </td> </tr> <tr> <td> 4 </td> </tr> </table> rowspan= n n 行 のセルを 結 合 colspan= n n 列 のセルを 結 合 1 2 3 4
リンク 先 の 指 定 方 法 ( 絶 対 パスと 相 対 パス) 絶 対 パス http:// から 始 まるリンク 先 (=URL 自 体 ) 相 対 パス 閲 覧 しているページを 起 点 としたリンク 先 例 : フォルダXの 子 (サブ)フォルダA 内 に, 現 在 閲 覧 しているページ (ex0.html)があるとき, 同 一 フォルダA 内 の ex1.html へのパスは, ex1.html Aの 子 フォルダA-1 内 の ex2.html へのパスは, A-1/ex2.html Xの 子 フォルダB 内 の ex3.html へのパスは,../B/ex3.html Xの 親 フォルダS 内 の ex4.html へのパスは,../../ex4.html
相 対 パスとリンク 先 の 関 係 */ * = 個 人 アカウント 名 public_html/ index.html../index.html link.html ( 単 純 に../ でも 可 ) photo/ index.html car.html car01.jpg../link.html car.html photo/car.html
リンクの 設 定 基 本 形 <a href= リンク 先 > > </a> 例 1: 演 習 で 使 う photo/index.html からの 内 部 リンク( 相 対 パス)の 場 合 <a href= car.html > 車 のページ</a> <a href=../index.html >HOME(トップページ)に 戻 る</a> 例 2: 外 部 リンク( 絶 対 パス)の 場 合 <a href= http://www.hiroshima-u.ac.jp/index-j.html > 広 島 大 学 </a> 別 ウィンドウを 起 動 させて 表 示 する 場 合 <a href= リンク 先 target= blank > </a> 画 像 をリンクに 設 定 する 場 合 <a href= リンク 先 ><img src= 画 像 ファイル 名 alt= ></a>
( 補 足 ) 補 足 1: 表 示 させる 画 像 のサイズについて 1つのページに ジ 何 枚 もの 画 像 を 一 覧 表 示 させる 場 合 は, 読 み 込 みに 時 間 がかからないようにするために, 表 示 させる 画 像 の 容 量 を 小 さくしておく 必 要 がある (もとの 画 像 の 縮 小 版 を 用 意 する etc) 補 足 2: URLの 変 更 ( 移 動 )について 対 応 するリンクは,すべて 変 更 しなければならない (テキストエディタの 一 括 置 換 機 能 を 利 用 すれば 便 利 ) 外 部 サイトからリンクされている 場 合 は, 移 動 前 のページ から 移 動 後 のページにリンクできるような 配 慮 が 必 要
アクセス 制 限 の 仕 組 み */ * = 個 人 アカウント 名 public_html/ index.html private/.htaccess index.html.htpasswd.htaccessファイル アクセス 制 限 の 情 報 を 記 述 このファイルが 存 在 するフォルダ 内 のすべて のファイル(サブフォルダ 内 のファイルも 含 む) に,アクセス 制 限 が 適 用 される (これらのファイルのパーミッション 設 定 に 注 意 ).htpasswdファイル(パスワードによる 制 限 の 場 合 ) ユーザ 名 とパスワードの 組 を 記 述 必 ずpublic_htmlの 外 に 置 く ( 外 部 からアクセスできないように)
.htaccessの の 設 定 ドメインまたはIPアドレスによる 制 限 の 場 合 以 下 の 内 容 を 記 述 して,ファイルの 種 類 を 指 定 しないで 保 存 AuthType Basic AuthUserFile /dev/null AuthGroupFile /dev/null <Limit POST GET PUT> order deny,allow deny from all allow from ドメイン or IPアドレス allow from </Limit> (この 部 分 のコンマの 前 後 は 空 けない) = 拒 否 (deny), 許 可 (allow)の 順 で 実 行 の 場 合 = すべてのホストからのアクセスを 一 旦 拒 否 許 可 するホストを 設 定 例 : hiroshima-u.ac.jp 133.41. ErrorDocument 403 リンク 先 =(エラーページをカスタムする 場 合 に 追 記 )
パスワードによる 制 限 の 場 合 の.htaccessの の 設 定 以 下 の 内 容 を 記 述 して,ファイルの 種 類 を 指 定 しないで 保 存 AuthType Basic 個 人 アカウントの 絶 対 パス AuthUserFile または 相 対 パス /.htpasswd = パスワードファイル ( 設 置 場 所 の 変 更 は 可 能 ) AuthGroupFile /dev/null/ AuthName Input UserName & Password = 入 力 画 面 の 文 字 列 <Limit POST GET PUT> require valid-user </Limit> it ( 日 本 語 を 使 用 してもOK) ErrorDocument 403 リンク 先 =(エラーページをカスタムする 場 合 に 追 記 ) この 場 合 は,ユーザーとそれに 対 応 する( 暗 号 化 した)パスワードの 組 を 記 述 した.htpasswd が 必 要
パスワードによる 制 限 の 場 合 の.htpasswdの の 設 定 ユーザ 名 : 暗 号 化 したパスワード の 組 を, 以 下 のように1 行 ずつ 記 述 ( 登 録 )して,ファイルの 種 類 を 指 定 しないで 保 存 user:ukgent2rzkj9g guest:ykmz1f08abjyk パスワードの 暗 号 化 パスワードを,DESで 暗 号 化 した 場 合 の 例 暗 号 化 されていない( 平 文 の) 文 字 列 の 状 態 では, パスワードに 設 定 することが 不 可 能 (=ログオンできな い) http://www.misskita.com/crypt/ で 提 供 されているシステム 等 を 利 用 することによって, 文 字 列 の 暗 号 化 が 可 能 DES(Data Encryption Standard) 完 全 解 読 が 実 証 された= 危 険? DES(Data Encryption Standard) 完 全 解 読 が 実 証 された 危 険? MD5(Message Digest Algorithm 5)
( 参 考 情 報 ) HP 作 成 全 般 ( 参 考 になるサイト) とほほのWWW 入 門 (http://hokupon.hp.infoseek.co.jp/html/tohoho/www.htm) ホームページ 作 成 教 習 所 (http://www2t.biglobe.ne.jp/~zipangu/) ホームページお 役 立 ち 小 技 集 (http://www.sky.sannet.ne.jp/masapine/homepage/) etc アクセス 制 限 の 方 法 について IPアドレスによる 制 限 (http://www.yuzuriha.sakura.ne.jp/~akikan/kaigai/kaigai6.html) p y g g ユーザー 名 とパスワードによる 制 限 (http://www.misskita.com/cgi/hi-ho/htaccess/) etc さらに 高 度 なHPを(より 便 利 に) 作 成 できるソフト Adobe Dreamweaver (http://www.adobe.com/jp/products/dreamweaver/) IBM ホームページ ビルダー (http://www-06 06.ibm.com/jp/software/internet/hpb/) etc
第 2 回 HP 講 習 会 補 足 資 料 (1/2) car.html のソース <html> <head> <title> 車 の 紹 介 ページ</title> </head> <body bgcolor="#cccccc"> <center> <h2><font color="#333333"> 車 の 紹 介 </font></h2> <p> <table border="1" bgcolor="#ffffff"> <tr> <td colspan="2" bgcolor="#333333"><font color="#ffffff"><strong>toyota </strong>( )</font></td> </tr> <tr> <td rowspan="2"><img src="car01.jpg" width="200" height="150" alt=" 車 の 画 像 (その 1)"></td> <td width="360" bgcolor="#c0c0c0">2006 年 式 ( 新 車 ),4AT<br> 総 排 気 量 : 1794cc( )<br>10 15 モード 走 行 燃 料 消 費 率 : 13.0km/L</td> </tr> <tr> <td width="360" bgcolor="#a9a9a9">1999 年 のデトロイトショーで 公 開 されたコンセプトカー XXR をほぼそのまま 市 販 化 ボディは, </td> </tr> </table> <p> <table border="1" bgcolor="#ffffff"> 上 記 のようなテーブルの 繰 り 返 し </table> <p> <table width="250" border="0"> <tr></tr> <tr> <td align="center"><a href="./"> 写 真 集 INDEX へ 戻 る</a></td> </tr> </table> </center> </body> </html>
第 2 回 HP 講 習 会 補 足 資 料 (2/2) リンク 設 定 についての 補 足 (Web サーバが,フォルダ 名 の 指 定 で index.html にリンクできるような, 通 常 の 設 定 になっている 場 合 ) <a href="./"> 写 真 集 INDEX へ 戻 る</a> 現 在 地 のフォルダ(photo) 内 にある index.html にリンク <a href="../">home へ 戻 る</a> 現 在 地 のフォルダ(photo)の 1 階 層 上 位 のフォルダ( 親 フォルダ)にある index.html にリンク ちなみに../../ は,2 階 層 上 位 のフォルダにある index.html にリンク アクセス 制 限 のファイルについて.htaccess や.htpasswd のように, 先 頭 にピリオドを 付 けることで, 表 面 上 外 部 から 見 えなくすることができる これらのファイルを FTP でアップロードしたら,リモート 先 のフォルダに 表 示 されないが,そこにはファイルが 生 成 されている home.hiroshima-u.ac.jp(imc サーバ)の 場 合 のパスワードによるアクセス 制 限 について (パスワードファイルの 場 所 を 指 定 する 方 法 ) ( 例 ) アカウント xxxx の 人 が,パスワード 登 録 ファイル(.htpasswd)をホームディレクトリ 直 下 に 置 く 場 合,.htaccess 内 の AuthUserFile は 絶 対 パスで 記 述 する AuthUserFile /home/usern/xxxx/.htpasswd (ただし,N は 1~9 のうち, 自 分 のアカウントが 存 在 するフォルダの 番 号 ) RootFTP のウィンドウの 中 で, 先 頭 にピリオドが 付 いたファイル( 隠 しファイル)を 表 示 させる 方 法 接 続 設 定 ( サーバー 設 定 ) 登 録 時 に, 接 続 タブを 環 境 タブに 変 更 して,その 中 の LIST でファイル 一 覧 取 得 のチェックを 外 す