WWW の 仕 組 みと HTML ファイル 1.WWW(World Wide Web)の 仕 組 みと 基 礎 用 語 通 常 Web ページを 閲 覧 する 際 には Web ブラウザと 呼 ばれるアプリケーションを 使 用 し 閲 覧 したい HTML 1 ファイルの 送 信 を そのファイルを 持 つ Web サーバ(WWW サーバ)に 依 頼 する( 図 11) Web サー バは 依 頼 元 に 該 当 するファイルを 送 信 し( 図 12) Web ブラウザは 受 信 したファイルの HTML タグを 解 析 して 表 示 する( 図 13) ブラウザとサーバのやりとりは HTTP 2 というプロトコル( 通 信 の 決 まりごと) を 用 いて 行 われる 場 合 が 多 い どういうプロトコルを 用 いて どこの Web サーバに どのファイルの 送 信 を 依 頼 するかは URL(Uniform Resource Locator)と 呼 ばれる 書 式 を 用 いて 指 定 する これは ブラウザ 上 の ア ドレス とか 場 所 という 欄 に 記 述 する 例 えば 麗 澤 大 学 において taro というログイン 名 を 有 する 学 生 が 作 成 したトップページ( 通 常 index.html というファイル 名 を 使 用 する 3 )の URL は 以 下 のように 表 記 される Web サーバ 上 のディレクトリ 名 http://www.cs.reitaku-u.ac.jp/ ~ taro/index.html プロトコル Web サーバ 名 (ドメイン 名 ) ファイル 名 プロトコルと Web サーバ 名 (ドメイン 名 )の 間 は :// (コロン,スラッシュ,スラッシュ)で 区 切 る Web サーバ 名 とディレクトリ 名 ディレクトリとファイル 名 の 間 は / で 区 切 る ドメイン 名 とは インターネ ット 上 でのマシンやサービス 提 供 者 を 一 意 に 識 別 するもので 学 生 が 使 用 するマシンには www.cs.reitaku-u.ac.jp という 名 前 が 付 与 されている なお ~ taro という 表 記 は 本 学 の Web サー バの 設 定 によって taro さんのホームディレクトリの 下 にある www というディレクトリ を 指 している ~taro の ~ は チルダ と 読 む 3HTML タグを 解 析 して 表 示 1HTML ファイル 要 求 HTML ファイル 学 内 の PC ブラウザ The Internet Web サーバ 仮 想 端 末 世 界 のどこかの 端 末 2HTML ファイル 転 送 学 内 LAN 図 1 WWW の 動 作 の 仕 組 み 2.Web ページの 外 部 公 開 制 限 について Web ページを 作 成 した 場 合 通 常 はインターネットからそのページにアクセス できるようになる しかし 本 学 では 授 業 で 作 成 する Web ページは 外 部 ( 学 外 ) 非 公 開 となっている 外 部 に 公 開 する Web ページを 作 成 したい 場 合 は 個 人 的 に 外 部 の 商 用 プロバイダを 利 用 することが 原 則 となる 1 HTML: Hyper Text Markup Language 2 HTTP: Hyper Text Transfer Protocol 3 index.html というファイル 名 は 省 略 可 能 である 一 般 的 に URL の 最 後 をディレクトリ 名 で 終 了 した 場 合 には index.html 又 は index.htm などのファイル 名 が 自 動 的 に 補 填 される(ただしサーバの 設 定 に 依 存 する) 1
3.HTML とは HTML とは Hyper Text Markup Language のことである ハイパーテキスト(Hyper Text)とは 文 書 間 にリンクを 張 り リンク 先 にジャンプすることができる 文 書 を 示 す また マークアップ 言 語 (Markup Language)とは 文 書 を 修 飾 ( 色 をつける 罫 線 を 引 くなど)したり 構 造 を 表 現 (タイトルや 段 落 の 指 定 ) したりするための 言 語 を 示 す Web ページを 構 成 する HTML は これら 2 つの 機 能 を 併 せ 持 つものである HTML ファイルに 用 いる 文 字 には ブラウザ 上 に 表 示 する 文 字 と それらの 表 示 方 法 等 を 指 定 する 文 字 (タ グ,< >で 囲 まれた 命 令 文 字 列 )がある このタグを 使 用 して 画 像 等 の 取 込 みや 文 書 間 のリンクを 指 定 する タグには 多 くの 種 類 があり HTML のバージョンが 進 んで 新 しいタグが 追 加 されることもあるので 色 々な タグを 使 用 して 凝 った Web ページを 作 成 したい 場 合 は 自 ら 適 切 な 参 考 書 を 探 して 調 べなければならない 基 本 的 なタグは 授 業 教 材 はじめての HTML 改 定 版 にまとめられている http://www.cs.reitaku-u.ac.jp/infosci/netwk/html-v12.html コラム 近 年 では blog や SNS Twitter など 簡 単 に 情 報 発 信 できる 場 が 整 備 されつつあることから 個 人 で Web サイトをゼロから 自 作 する 機 会 は 徐 々になくなりつつある しかし Web ページがどのようにしてブ ラウザの 画 面 上 に 表 示 されるのかという 詳 しい 知 識 を 身 に 付 けておけば Web インタフェースに 存 在 するバ グをずっと 簡 単 に 見 つけられるようになるだけでなく blog 上 で HTML ベースでの 編 集 も 可 能 になる( 例 えば アメブロではタグ 編 集 エディタがブラウザ 上 に 装 備 されている) いずれにしても Web ページがどのような 構 造 を 持 ち どのように 表 示 されているのかを 覚 えておくこと は 決 して 損 ではない 4.Web ページ 作 成 の 流 れ まずは 自 分 の X ドライブ(ローカル)に HTML ファイルを 作 成 することから 始 めてみよう HTML ファ イルは(Web ページ)はテキストファイルであり メモ 帳 を 含 む 一 般 的 なテキストエディタで 作 成 編 集 が 可 能 である それではプログラムにある EmEditor を 起 動 させて 次 のような 内 容 を 入 力 する <html> <head> <title>se をめざして 千 葉 太 郎 </title> </head> <body> <p> 私 の 自 己 紹 介 <br> SE をめざして</p> <hr> </body> </html> 情 報 科 学 A で 作 成 する Web サイトは プレゼンテーションの 回 で 作 成 したコンテンツと 同 じものにする 例 えば 地 元 の 紹 介 趣 味 休 日 の 過 ごし 方 の 3 つに 関 する 自 己 紹 介 のプレゼンテーションを 作 成 した 学 生 であれば その 内 容 を Web ページの 演 習 で も 使 いまわすことを 推 奨 する(ただし 必 ずそうしなければならないというわけではない) 2
タグ <html>~</html> <head>~</head> <title>~</title> <body>~</body> <p>~</p> <br> <hr> 説 明 Web ページ 全 体 を 現 すタグです Web ページ 上 では 見 えない 効 果 などを 記 入 する 場 所 です ( 例 :CSS javascript) 表 示 しているウィンドウの 一 番 左 上 部 分 に 表 示 される Web ページタイトルです Web ページで 実 際 表 示 されるメインの 場 所 です ここに 文 字 を 入 力 したり 画 像 の 配 置 やデザインをしていきます 段 落 をあらわすタグです 改 行 を 行 うタグです ラインを 表 示 させるタグです EmEditor に 入 力 したら X ドライブに 半 角 で www という 名 前 でフォルダを 作 成 し 保 存 する その 際 ファイル 名 は index.html とし ファイルの 種 類 に すべてのファイル(*.*) と 指 定 する この 指 定 を 怠 る と ブラウザで 閲 覧 できないので 気 をつけること! このとき EmEditor は 開 いたままにしておくこと 保 存 したフォルダを 開 き 作 った Web ページを 閲 覧 する title タグで 囲 んだ 文 字 body タグの 中 に 入 力 した 文 字 がどのように 表 示 されているかを 確 認 する 3
プレゼンテーションの 内 容 に 基 づいて もう 少 しコンテンツを 追 加 してみよう <hr>の 下 に 次 の 内 容 を 追 加 する 入 力 が 終 わったら 上 書 き 保 存 をして ブラウザに 戻 り F5 キーを 押 して 内 容 を 更 新 する <p> 麗 澤 大 学 経 済 学 部 の 千 葉 太 郎 です SE を 目 指 しています </p> <p>ん? SE ってシステムエンジニアのことかって </p> <p>そう だよ!</p> <p>ん? 文 系 でなれるのかって?</p> <p>バカだな, 文 系 だからなるんじゃないか</p> <p>ん? ナンデかって?</p> <p> 金 融, 流 通,マーケティングなど, 情 報 システムの 役 割 がわかってるからサ</p> 左 側 に EmEditor 右 側 にブラウザを 表 示 しておき ファイルを 書 き 換 えたらブラウザで 更 新 し 内 容 を 確 認 できるようにしておく と 良 い 次 に 異 なるページ 同 士 にリンクを 張 って 相 互 に 行 き 来 するために 他 のページを 作 成 する EmEditor の 新 規 ページを 作 成 して 次 の 内 容 を 入 力 する なお index.html ファイルの 内 容 をコピー&ペーストしてから 作 成 すると 良 い <html> <head> <title>se をめざして 千 葉 太 郎 > 地 元 紹 介 </title> </head> <body> <p> 私 の 地 元 紹 介 <br> 出 身 地 : 金 沢 で 食 べる</p> <hr> <p> 金 沢 ってどこ?</p> <p> 食 べるなら 近 江 町 市 場 海 鮮 どん 屋!</p> </body> </html> 4
作 成 し 終 えたら 先 ほどと 同 様 に jimoto.html と 名 前 をつけて www フォルダに 保 存 する 次 に 以 下 の 内 容 のリンクを 設 定 する 入 力 を 終 えたら 上 書 き 保 存 をして ブラウザで 確 かめてみること! 1 はじめての HTML を 参 考 に 自 分 の index.html と jimoto.html を 相 互 にリンクするタグを 各 々 のファイルに 記 述 しなさい(はじめての HTML のページの 一 番 下 にリンクの 説 明 がある) ( 例 えば jimoto.html へのリンクは <a href="./jimoto.html"> 地 元 紹 介 </a> となる) 2 同 様 に index.html 中 に 麗 澤 大 学 のトップページへのリンク 情 報 システムセンタートップページ へのリンクを 作 成 しなさい ( 例 えば 麗 澤 大 学 へのリンクは <a href="http://www.reitaku-u.ac.jp/"> 麗 澤 大 学 </a> となる) 3 index.html 中 に 友 人 の Web ページ(index.html)へのリンクを 作 成 しなさい 友 人 と 相 談 し 相 互 にリンクを 記 述 するとよい( 現 段 階 だとまだ 友 人 のページを 見 ることはできない) ( 例 えば ユーザーID が foo さんであれば <a href="http://www.cs.reitaku-u.ac.jp/~foo/">foo</a>となる) 5
出 来 上 がりは 前 ページのようになる 点 線 以 下 のリンクは 他 のサイトへのリンクであり リスト 表 示 のタ グを 利 用 している リスト 表 示 のタグ(ul タグ)については はじめての HTML を 参 考 にすること このままだと 味 気 ないので 次 に 色 を 変 えたりするなどデザインを 変 更 してみよう Web ページのデザイ ンは 今 ではほとんどスタイルシートと 呼 ばれるもので 管 理 されている スタイルシートでは HTML タグで は 表 現 できない 効 果 や 複 数 の 効 果 を 簡 単 にまとめるなどの 細 かい 設 定 ができる ここでは 次 のスタイルを 作 成 し 作 成 したスタイルは 各 自 好 きなところに 設 定 する 文 字 の 大 きさと 色 背 景 の 色 段 落 内 の 文 字 の 配 置 と 色 リンクの 色 具 体 的 には index.html ファイルのヘッダ 内 に 次 のように 入 力 する <head> <title>se をめざして 千 葉 太 郎 </title> 色 の 前 には 必 ず#が 入 る 色 は 3 原 色 をそれぞれ 16 進 数 で 指 定 している <style type="text/css">.titlemoji {font-size:18px; color:#0000ff}.kyoutyoumoji {font-size:14px;} a:link {color:#0000ff;} a:visited {color:#0000ff;} a:hover {color:#ffffff; background-color:#0000ff;} body {font-size:12px; background-color:#eeeeee;} </style> </head> font-size は 文 字 の 大 きさ color は 文 字 の 色 background-color は 背 景 の 色 px は 大 きさの 単 位 で ここでは 文 字 サイズ を px で 指 定 している 半 角 のセミコロン ; はスタイル 内 の 区 切 りを 意 味 している class でスタイルシートを 呼 び 出 す 場 合 haed 内 のスタイルシートは.abc という 風 に 書 く( は 任 意 の 英 数 字 ) 名 前 の 後 の { } 内 にスタイル シートを 書 いていき 複 数 指 定 する 場 合 は ; で 区 切 る ( 例 ).abc { font-size:14px; color:#ffaaaa; } そして 実 際 にスタイルシートに 反 映 するときは タグなどに class=" 指 定 した 名 前 "とする ( 例 ) <p class="abc">ほげほげほげ</p> ただし body と a:xxx の 2 つについては 既 にタグとして 定 義 されているので 上 記 のような 設 定 は 必 要 な い 記 述 した 段 階 で ボディ 全 体 とリンクについてはデザインが 自 動 的 に 変 更 される なお リンクのスタイルについての 意 味 は 次 のようになっている a:link まだ 訪 れていないリンク a:visited 一 度 訪 れたことがあるリンク a:hover カーソルがリンクの 上 にあるとき 試 しに index.html ファイルの 本 文 に 対 して 次 のようにスタイルを 設 定 してみよう <p class="titlemoji"> 私 の 自 己 紹 介 <br> SE をめざして</p> : : <p>ん? 文 系 でなれるのかって?</p> <p class="kyoutyoumoji">バカだな, 文 系 だからなるんじゃないか</p> 6
スタイルを 設 定 した 段 落 の 文 字 が 変 わ っていることを 確 認 すること body 全 体 リンク 箇 所 タイトル 文 字 列 バカだな~~ の 文 章 その 他 のスタイルについては スタイルシート と 検 索 すると 解 説 のページが 出 てくるので 興 味 のある 学 生 は 自 分 で 調 べて 色 々なスタイルを 設 定 すると 良 い 画 像 の 貼 り 込 み 現 在 文 字 だけの Web ページとなっているので 画 像 を 表 示 させたい 以 下 の 手 順 で jimoto.html の 中 に 画 像 を 表 示 するようにしなさい その 際 画 像 ファイルの 種 類 ( 拡 張 子 )については 最 大 限 注 意 する 必 要 がある ファイル 名 が 同 じであっても 画 像 の 種 類 ( 拡 張 子 )が 異 なれば Web ページ 内 に 表 示 することはできない な お Word のようにファイルの 中 に 画 像 を 貼 り 付 けるというものではなく 他 に 存 在 する 画 像 ファイルを Web ページ 内 に 表 示 させていることに 注 意 すること 1 /kadai/info-sci/ 情 報 科 学 A/ 以 下 にある kanazawa.jpg と kaisendon.jpg を 各 自 の www フォルダにコピーする 2 はじめての HTML を 参 考 に 画 像 ファイルを 表 示 できるよ うにする 必 要 なタグは jimoto.html 中 に 記 述 して 右 図 のよう に 表 示 されれば OK! <p> 金 沢 ってどこ?</p> <p><img src="./kanazawa.jpg"></p> <p> 食 べるなら 近 江 町 市 場 海 鮮 どん 屋!</p> <p><img src="./kaisendon.jpg"></p> パワーポイントのファイルから 画 像 だけを 抜 き 出 した 保 存 する 方 法 1 2 スライド 内 の 画 像 を 右 クリックして 図 として 保 存 をクリックする ファイル 形 式 を JPEG 形 式 として X ドライブの www フォルダに 半 角 で 英 数 字 のみの 名 前 で 保 存 する 7
Web ページの 公 開 これまでは X ドライブ 内 に HTML ファイルを 作 成 しただけであり ユーザー 自 身 以 外 見 ることはできな い(この 段 階 を 経 ると 友 人 のページを 見 ることができる) そこで FFFTP というソフトを 利 用 して 作 成 し た Web ページを 学 内 限 定 で 公 開 する 4 FFFTP は GUI ベースのアプリケーションである FFFTP はフリーソ フトで インターネット 上 などで 公 開 されている 注 意!:FFFTP からサーバ 側 のファイル 操 作 ができるので 間 違 ってファイルを 削 除 しないようにすること UNIX の 環 境 ファイル(.login,.cshrc 等 )を 削 除 するとログインできなくなる メール 用 のディレクトリ (.Maildir)を 削 除 するとメールを 失 う PC ディレクトリを 削 除 すると X ドライブの 内 容 を 失 う 失 ったフ ァイルは 復 活 できない 必 ず 教 員 の 指 示 に 従 って 操 作 を 行 うこと 先 走 って 色 々とやったりはしない!! FFFTP の 利 用 ( 起 動 と 接 続 切 断 ) スタート FFFTP にて FFFTP を 起 動 する 接 続 ボタン を 押 すと 以 下 のような 画 面 が 出 る 接 続 する Web サーバの 名 前 が 表 示 されているので www.cs.reitaku-u.ac.jp を 選 択 して[ 接 続 (S)]ボタンを 押 す 次 のウィンドウに コンピュータにログイン するためのユーザ 名 とパスワードをそれぞれ 入 力 して Web サーバにログインする 接 続 されると 右 側 に 自 分 のホームディレクトリ 上 のファイル ディレクトリが 表 示 される(リモート 側 ) 左 側 が 自 分 のパソコン(ローカル 側 )のファイル ディレクトリである 切 断 するには 切 断 ボタン を 押 し 画 面 の 指 示 に 従 う FFFTP の 利 用 (ファイルの 転 送 ) 画 面 左 側 で 転 送 したいファイルのある 場 所 (X: )へ 移 動 する 移 動 すると X ドライブの 中 身 が 表 示 される www フォルダを 右 側 (サーバ 側 )にドラッグする 2.Web サーバに 接 続 する 4 標 準 では 学 内 にあるコンピュータ 以 外 から 公 開 した Web ページを 閲 覧 することはできないようになって いる 8
ブラウザを 起 動 して 次 の URL をアドレスバーに 入 れて[Enter]キーを 押 して 移 動 する 自 分 が 作 成 したペー ジが 表 示 されれば OK である! また 友 人 へのリンクを 押 すと 友 人 のページに 移 動 できることも 確 認 する http://www.cs.reitaku-u.ac.jp/~foo/ なお ~ はチルダと 呼 び foo の 箇 所 には 自 分 のユーザーID が 入 る 終 わったら 接 続 を 切 断 し FFFTP を 終 了 する Web ページの 更 新 Web サーバにアップロードしたファイルを 更 新 したい 場 合 は 先 ほどと 同 じ 作 業 を 繰 り 返 す サーバ 側 に は 既 に www ディレクトリが 存 在 しており 上 書 きしても 良 いか と FFFTP に 聞 かれるが 無 視 して 次 のダイアログボックスにおいて 以 降 全 て(A) を 選 択 する 注 意!:www フォルダを Web サーバにドラッグする 作 業 以 外 は 決 して 行 わないこと!! 9
Web ページ 課 題 の 内 容 前 提 条 件 : (1) ホームページ(トップページ)が 存 在 していること(index.html) http://www.cs.reitaku-u.ac.jp/~ 自 分 のユーザー 名 / でアクセスできること トップページ 作 成 における 条 件 と 注 意 点 : (1) トップページには 最 低 限 次 のものが 記 載 されていること (2) 誰 のホームページであるのか ということ (3) 最 終 更 新 日 (4) 自 分 が 作 成 した 他 のページに 対 するリンク (5) 麗 澤 大 学 のホームページ(http://www.reitaku-u.ac.jp/)に 対 するリンク その 他 のページ 作 成 における 条 件 と 注 意 点 : (1) トップページ 以 外 に 最 低 2 ページ オリジナルなページが 存 在 すること (2) ページ 作 成 者 について 紹 介 したページが 1ページ 以 上 存 在 していること ただし 顔 写 真 住 所 電 話 番 号 など プライバシーに 関 わる 情 報 を 開 示 しないように 注 意 (3) 自 分 が 作 成 した 各 ページには 必 ず 自 分 のトップページに 対 するリンク( ホームページに 戻 る など)が 存 在 していること (4) 必 ず 写 真 や 図 イラストなどの 画 像 が 入 ってこと ただし 著 作 権 や 肖 像 権 に 注 意 する 漫 画 アニメのキャラクター アイドルや 芸 能 人 の 写 真 などは 出 典 を 明 記 しても 使 用 できないと 考 えたほうがよい 画 像 サイズにも 注 意 をはらう 評 価 のポイント: (1) 適 切 に 自 己 紹 介 されているか (2) ページに 記 載 されている 情 報 が 有 用 で 充 実 しているか (3) 著 作 権 や 肖 像 権 などに 配 慮 し ネチケットが 守 られているか( 出 典 の 明 記 等 ) (4) プライバシーの 開 示 など 危 険 なことをしていないか (5) 画 像 ファイルに 適 切 な 修 正 が 成 されているか(サイズやファイル 形 式 など) (6) その 他 (デザインなど ただし 主 ではない) 10