課題 14 ホームページを作る（基礎）
1. WWW の仕組みと HTML ファイル（１） WWW（（World Wide Web）の仕組みと基礎用語 通常 Web ページを閲覧する際には，Web ブラウザと 呼ばれるアプリケーションを使用し，閲覧したい HTML1 ファイルの送信を，そのファイルを持つ Web サーバ （WWW サーバ）に依頼する（（図１①）。Web サーバは， 依頼元に該当するファイルを送信し（（図１②），Web ブ ラウザは受信したファイルの HTML タグを解析して表 示する（図１③）。ブラウザとサーバのやりとりは， HTTP2というプロトコル（（通信の決まりごと）を用いて 行われる場合が多い。どういうプロトコルを用いて，ど この Web サーバに，どのファイルの送信を依頼するか は，URL（Uniform Resource Locator）と呼ばれる書式を 用いて指定する。これは，ブラウザの（ アドレス」とか 場所」という欄に記述する。例えば，麗澤大学におい て taro というログイン名（（ユーザ ID）を有する学生が 作成したトップページ（（通常，index.html というファイ ル名を使用する3）の URL は，図 2 のように表記される。 プロトコルと Web サーバ名（（ドメイン名）の間は（ ://」 （コロン,スラッシュ,スラッシュ）で区切る。Web サー バ名とディレクトリ名，ディレクトリとファイル名の 間は（ /」で区切る。ドメイン名とは，インターネット 上でのマシンやサービス提供者を一意に識別するもの で ， 学 生 が 使 用 す る マ シ ン に は 1 HTML: Hyper Text Markup Language 2 HTTP: Hyper Text Transfer Protocol
3 index.html というファイル名は省略可能である。一般的に，URL u.ac.jp」という名前が付与されている。なお，（~taro」 という表記は，本学の Web サーバの設定によって， taro さんのホームディレクトリの下にある，www と いうディレクトリ」を指している。~taro の「
~
」は「 チ ルダ」と読む。 （２） Web ページの外部公開制限について Web ページを作成した場合，通常はインターネット からそのページにアクセスできるようになる。しかし， 本学では，授業で作成する Web ページは学外非公開と なっている。学外に公開する場合は，申請が必要である。 （３） HTML とはHTML とは，Hyper Text Markup Language のことであ る。ハイパーテキスト（（Hyper Text）とは，文書間にリ ンクを張り，リンク先にジャンプすることができる文 書を示す。また，マークアップ言語（（Markup Language） とは，文書を修飾（（色をつける・罫線を引くなど）した り，構造を表現（（タイトルや段落の指定）したりするた めの言語を示す。Web ページを構成する HTML は，こ れら 2 つの機能を併せ持つものである。 HTML ファイルに用いる文字には，ブラウザ上に表示 する文字と，それらの表示方法等を指定する文字（（タグ， < >で囲まれた命令文字列）がある。このタグを使用し て，画像等の取込みや文書間のリンクを指定する。 の最後をディレクトリ名で終了した場合には，index.html，又は， index.htm などが自動的に補填される（サーバの設定に依存する）。 図 1 WWW の動作の仕組み
2. ホームページを作る（練習） ステップ 1 www ディレクトリを作る (1) 準備として，ホームページに関連するファイルを 収納するための www ディレクトリを個人領域(X:) に作成する。次のようにする。 (2) ファイルエクスプローラを起動する → 左のリソース一覧表で個人領域(X:)を見つける → X:を右クリック → メニュー 新規作成」 → フォルダー」→ 新しいフォルダー → 名称を www とする（必ず
半角小文字
） (3) 名称を再編集するとき F2 キー(編集キー)をたたく。 (4) ファイルエクスプローラは，そのままにしておく。 ステップ 2 トップページを作る index.html (1) トップページは常に index.html という名称であ る。ここではテキストエディタ EmEditor を使っ て作成する。以下，ひな形の教材を使って HTML 文書の書き方を学んでいこう。 (2) スタートボタン → EmEditor を選択 → EmEditor が起動する → ファイル → 新規作 成 → HTML を選択する → HTML の編集画面に なる → デフォルトの HTML 文が表示されたら全 部削除する (3) 授業のホームページの第 14 回の ホームページ 教材」を開く → トップページのひな形 教材 1」がある→ 範囲選択 → コピー(Ctrl+C) → EmEditor に貼り付け(Ctrl+V) (4) HTML 文書は下記のような構成になっている。 ● < >をタグという。文書の構成や表示方法を 決める要素。web ページには表示されない。 ● 英字，数字，記号，空白はすべて半角文字。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>私の自己紹介</title> </head> <body> <h1>Web デザイナーを目指して</h1> <hr> <h2>出身地</h2> <p> 北陸の金沢です。ふるい城下町です。 京都のようなイケズではないです。</p> <h2>将来の抱負</h2> <p> お仕事ドラマで吉高がやってたアレ， Web デザイナーっつうのやってみたい！ </p> <p>以上</p> </body> </html> (5) HTML 文書を構成する基本要素のタグ。 タグ 説明 <!DOCTYPE> HTML ドキュメントを宣言する。 <html>～ </html> HTML ドキュメントの始まりと終わりを表 す。 <head>～ </head> 各種設定の始まりと終わりを表す。ブラウ ザに表示されない。例：CSS，Javascript <body>～ </body> Web 本文の始まりと終わりを表す。ブラウ ザに表示される。文章や画像など。 (5) <head>で設定するタグ <meta> いろいろな設定をするメタタグ。ここでは Web 本文の文字コード utf-8 を指定。 <title>～ </title> ブラウザのタブに表示される Web ページの タイトル。 (6) <body>で文章のレベル等を指定するタグ <h1>～</h1> レベル1 の見出し。最も大きい太字。 <h2>～</h2> レベル2 の見出し。次に大きい太字。 <p>～</p> 段落の始まりと終わりを表すタグ。 <br> 改行を行うタグ。 <hr> ラインを表示するタグ。 (7) ファイル → 名前をつけて保存 → 保存する場所 X: ¥www」 → ファイルの種類 HTML」 → ファイル名 index.html」必ず半角小文字
→ エンコード UTF-8(BOM 無し)」→ 保存。 (8) index.html は開いたままにしておく。 (9) 次に IE を起動する。 ・ ファイル → 開く → X: ¥www ¥index.html を見つけて開く。いま 作ったホームページが表示される。 (10) EmEditor で index.html を修正する→（ 上書き保存 (11) IE に戻り F5 キー(更新キー)をたたく。表示が更新 される。 (12) このように（ EmEditor で修正（ →（ 上書き（ →（ IE で更新表示(F5)して確認」を繰り返してトップペー ジを完成する。 ステップ 3 地元紹介ページを作る jimoto.html 次に地元紹介ページ（jimoto.html）をつくる。 (1) EmEditor で，ファイル → 新規作成 → HTML を 選択する → HTML の編集画面になる → デフォ ルトの HTML 文が表示されたら全部削除する (2) 授業のホームページの第 14 回の ホームページ 教材」を開く → 地元紹介ページのひな形 教 材 2」がある→ 範囲選択 → コピー(Ctrl+C) → EmEditor に貼り付け(Ctrl+V) (3) ファイル → 名前をつけて保存 → 保存する場所 X: ¥www」 → ファイルの種類 HTML」 → ファイル名 jimoto.html」必ず
半角小文字
→ エンコード UTF-8(BOM 無し)」→ 保存。 (4) IE で X: ¥www ¥jimoto.html を見つけて開く。い ま作ったホームページが表示される。 (5) EmEditor で jimoto.html を修正する→上書き保存 (6) IE に戻り F5 キー(更新キー)をたたく。表示が更 新される。 (7) 修正 →（ 上書き（ →（ 更新表示」を繰り返して地 元紹介ページを完成する。 ステップ 4 リンクを設定する ２つのホームページから相互にリンクを設定する。 つまりクリックすると別のページにジャンプできるよ うにする。 (1) EmEditor で index.html を開く。 (2) <h1>私の４つのポイント</h1>」の上に，以下 を入力する。または 教材 3」の赤字部分をコピ ー&ペーストする。 ─────────────────────── <ul> <li><a href="./jimoto.html">地元紹介</a></li> </ul> ─────────────────────── （解説） 地元紹介」をクリックすると jimoto.html にジャン プするようにする。 それには<a>タグで（ 地元紹介」を（ <a>地元紹介</a>」 のようにはさむ。 <a>タグの属性 href にリンク先のアドレスを割り当て るため，href="./jimoto.html"と書く。 ./jimoto.html」は，同じディレクトリ内（./）の jimoto.html というファイルを示している。 <ul>～</ul>は箇条書き（リスト）を構成するタグ。 <li>～</li>はリストの 1 項目を指定している。 (3) index.html を上書き保存する。開いたままにする。 (4) 次に，EmEditor で jimoto.html を開く。 (5) <h1>私の地元のポイント</h1>」の上に，以下 を入力する。または 教材 4」の赤字部分をコピ ー&ペーストする。 ─────────────────────── <ul><li><a href="./index.html">トップページ</a></li> </ul> ─────────────────────── (6) jimoto.html を上書き保存し開いたままにする。 (7) IE で 2 つのページの間をジャンプできるか確認！ (8) トップページにさらにリンクを追加してみよう。 EmEditor で index.html を開く。 (9) <h1>私の４つのポイント</h1>」の上のリスト に，友達紹介と麗澤大学へのリンクを追加してみ よう。以下を入力する。または 教材 5」の赤字 部分をコピー&ペーストする。 ─────────────────────── <ul> <li><a href="./jimoto.html">地元紹介</a></li> <li><a href="http://www.cs.reitaku-u.ac.jp/~a19999z/"> 友達紹介</a></li> <li><a href="http://www.reitaku-u.ac.jp/"> 麗澤大学</a></li> </ul> ─────────────────────── (10) 友達紹介と麗澤大学では，href に URL を記述する。
ステップ 5 地図の画像を貼り込む 地元紹介ページに地図の画像を表示させよう。 (1) 準備として， 教材 6」の地図画像を表示する。 → 画像を右クリック → 名前をつけて画像を保 存 → ファイル保存のウィンドウが開く → 保存 先には X:¥www を指定する → ファイル名は kanazawa.jpg のまま → 保存 （注）画像ファイルの名称の拡張子は jpg， png，gif」である。 bmp」は使えない。 (2) EmEditor で jimoto.html を開く。 (3) 私の出身地の金沢は，」の上に次のように記述す る。または（ 教材 7」の赤字部分をコピー&ペース トする。 ──────────────────────
<img src="./kanazawa.jpg" alt="金沢位置図" style="float:right;"> ────────────────────── （解説） 画像を表示するタグは<img>タグである。終わりのタグ </img>はない。 属性 src には画像ファイルのアドレス"./kanazawa.jpg"を 割り当てる。 属性 alt には，画像が表示されないときの代替表示の文字 列を指定する。 属性 style にはスタイルシートと呼ばれる書式を記述する。 スタイルシートでは（ プロパティ:値;」という書き方をす る。ここではプロパティ float で（ 画像に対し文字を回り 込みさせる」ことを宣言している。さらにプロパティ float に right という値を割り当てて（ 画像を右寄せにする」こ とを指定している。左寄せのときは left と書けばよい。 (4) さらに， <h2>回転ずし発祥の地</h2>」の上に次 のように記述する。または（ 教材 8」の赤字部分を コピー&ペーストする。 ────────────────────── <br style="clear:both;"> ────────────────────── これは， 回り込み解除」を意味している。<br>タグ の中のスタイルシートで 回り込み解除（clear）」， 4 標準では学内にあるコンピュータ以外から，公開した Web ページ 左右どちらも（both）」と指示している。 (5) 上書き保存 → IE で F5 をたたいて更新表示 → 地 図画像が右寄せに配置されるか確認する。 ステップ 6 Web サーバにアップロードして公開する これまではローカルに HTML ファイルを作成しただ けで，作成者しか見ることができない。そこで次に，作 成したホームページを Web サーバにアップロードして 学内限定で公開することにしよう4。FFFTP というフリ ーソフトを使用する。 注意！： FFFTP ではサーバ側のファイルを操作できるが， 間違ってファイルを削除しないように注意すること。UNIX の環境ファイル（（.login,（.cshrc 等）を削除するとログインで きなくなる。メール用のディレクトリ（（.Maildir）を削除する とメールを失う。PC ディレクトリを削除すると X ドライブ の内容を失う。失ったファイルは復活できない。 ※「 必ず，教員の指示に従って操作を行うこと。 先走って色々とやったりはしない！！ (1) スタート → FFFTP を選択し て起動する。 (2) 接続する Web サーバの名前が表示される → www.cs.reitaku-u.ac.jp を選択 → 接続 を閲覧することはできないようになっている。
(3) Web サーバにログインするため，学内で使用して いるユーザ名とパスワードを入力する。 (4) 接続すると，初期画面が出る。下図。 ● 左側に自分のパソコンの X:ドライブのファイ ルとディレクトリが表示される。（ローカル側） ● 右側に Web サーバの自分のホームディレクト リにあるファイルとディレクトリが表示される （リモート側）。 (5) 左画面の X:ドライブに www ディレクトリがある ことを確認する。 (6) ファイルの転送モードを指定するためツールバー の中の 3 つのボタンをクリックする。下図。 (7) 左画面で www フォルダを右クリック → メニュ ー アップロード」→ www フォルダと中のファ イルがすべてサーバに転送される。確認。 (8) IE に移る。次の URL をアドレスバーに入れて [Enter]キーを押す。 （ （ http://www.cs.reitaku-u.ac.jp/~foo/ （ （ （注）foo には自分のユーザ ID を書く。 (9) 自分が作成したページが表示されれば OK であ る！また，友人へのリンクを押すと友人のページ に移動できることも確認する。 (11) アップロードしたファイルを更新したい場合は， ローカルでホームページを更新」 → （ サーバに アップロード」を繰り返す。 (12) このときサーバ側には既に www」ディレクトリ が存在しており（ 上書きしても良いか』と FFFTP に 聞かれるが 上書き」， 以降全て」を選択する。 注意！：www フォルダを Web サーバにアップロードする作業 以外は決して行わないこと！！ 3. 仮登録してみる (1) 授業のホームページの（ ホームペ ージを登録する」を開いて，指示 に従ってあなたが作成したホー ムページを仮登録しなさい。 (2) タイトルには（ 仮登録」という語 をつけなさい。
4. 自分のホームページを作る（本番） ステップ 7 コンテンツを自分の内容に変える (1) 本文，画像などのコンテンツを，あなたの自己紹介 の内容に変えなさい。 (2) 授業のホームページにある ホームページをつく る（（発展）」を参考に，できる範囲で表現をスキル アップしたものに更新しなさい。 (3) 完成させるホームページの条件は以下の通りです。 前提条件： (1) ホームページ（トップページ）が存在してい ること(index.html)。 http://www.cs.reitaku-u.ac.jp/~foo/ という URL でアクセスできること。ただし foo は自分のユーザ ID である。 トップページ作成における条件と注意点： (1) トップページには，最低限，次のものが記載 されていること。 (2) 学籍番号，氏名，よみ (3) 最終更新日 (4) 自分が作成した他のページへのリンク (5) 友達のページへのリンク (6) 麗澤大学のホームページ http://www.reitaku-u.ac.jp/ へのリンク その他のページ作成における条件と注意点： (1) トップページ以外に，1 ページ以上のページ を作成すること。 (2) 自分について紹介したページが，１ページ以 上存在していること。 ただし，顔写真，住所（・電話番号など，プライ バシーに関わる情報は掲載しないこと。 (3) 必ず，自分のトップページへのリンク（（ ホー ムページに戻る」など）が存在していること。 (4) 必ず，写真，図，イラストなどの画像が入って いること。 ただし，著作権や肖像権に注意すること。漫 画・アニメのキャラクター，アイドルや芸能 人の写真などは，出典を明記しても使用でき ないと考えたほうがよい。 画像サイズにも注意をはらうこと。 評価のポイント： (1) 適切に自己紹介されているか。 (2) ページに記載されている情報が有用で充実し ているか。 (3) 著作権や肖像権などに配慮し，ネチケットが 守られているか（出典の明記等）。 (4) プライバシーの開示など危険なことをしてい ないか。 (5) その他（デザインなど，ただし主ではない）。 5. 本登録する (1) 授業のホームページの（ ホームページを登録する」 を開いて，あなたが作成したホームページを正式 に登録しなさい。 (2) タイトルからは（ 仮登録」という語を削除しなさい。 (3) タイトルは，内容を表す適切なものをくふうしな さい。 以上
