第 4&5 回 HTML & MIFES 入 門 水 野 りか ここでは,いわゆるホームページを 作 成 する 方 法 の 基 礎 を 学 びます ホームページを 作 るための 言 語 は,HTML (Hyper Text Makeup Language)と 呼 ばれています この 言 語 を 書 くためのテキスト エディタが MIFES です HTML で 書 かれたページは,Netscape や Internet Explorer 等 の,ブラウザ (browser)という 閲 覧 ソフトで 見 ることができます ここではごく 初 歩 的 なことだけに 触 れますが,これをきっかけに 水 野 のホームページの HTML 入 門 (Appendix:http://psy.isc.chubu.ac.jp/~mizunor/cai0/mokuji.html) などを 参 照 し ながら, 様 々なフォーマットのページを 作 ったり, 動 くアニメを 貼 り 付 けたり,リンク 集 を 作 ったり,フレームに 挑 戦 したり,クリックすればメールを 送 ることができるようなページ を 作 ったり, 音 楽 を 流 したりする 方 法 を 学 んで, 楽 しい,ユニークな, 自 分 自 身 のホームペ ージを 作 ってみることをおすすめします 目 次 1. 最 も 簡 単 なホームページを 作 る 2. 書 式 を 変 える 3.イメージを 貼 りつける 4.リンクする 5. 背 景 を 工 夫 する 6. 最 後 に 参 考 URL - 1 -
1. 最 も 簡 単 なホームページを 作 る ここでは, 図 2のページを 作 ります スタート すべてのプログラム から,MIFES を 起 動 します 下 の 通 りに 書 いてみてください <***>や</***>は タグ と 呼 ばれ, 前 者 は 開 始, 後 者 は 終 了 を 表 します 図 2のタグの 中 身 の 意 味 と 使 い 方 は, 次 の 通 りです 1. <html>~</html>で,html で 書 かれた 文 書 を 囲 みます 2. <head><title>~</title></head>で,ブラウザの 上 部 に 表 示 されるタイトルを 囲 みます 3. <body>~</body>で, 本 文 を 囲 みます - 2 -
これを, 下 の 図 のように, 名 前.html ( 自 分 の 名 字 にしておく)という 名 前 で MO に 保 存 し ます.html は,これが HTML で 書 かれたぺージであることを 示 す 識 別 子 です MO にできた 上 のファイルを マイコンピュータ で 探 し,それをダブルクリックしてみて ください 以 下 のような 画 面 が 開 きましたか? その 画 面 の 上 部 を 見 てください これが<head><title></title></head>で 囲 まれたタイトルです 白 い 画 面 の 中 の 部 分 が<body></body>で 囲 まれた 本 文 です いかがでしょうか ホームページはとても 簡 単 に 作 れるものだということがわかったと 思 いま す 後 は, 様 々なタグを 覚 えて,というよりもむしろ,どのような 機 能 を 持 ったタグがあるのか を 知 って,それを 使 ってホームページをより 洗 練 されたものにしてゆくだけです - 3 -
2. 書 式 を 変 える ここでは, 文 字 やページの 書 式 をいろいろ 変 えてみます 2.1 文 字 の 大 きさを 変 える 下 のように, 先 ほどのページのタイトルを 文 字 の 大 きさを 変 える にしてから, ***のホ ームぺージ を, 文 字 サイズを 指 定 するタグ,<font size=1></font>で 囲 み, 最 後 に 改 行 タグ, <br>をつけてください 次 に,その 行 をコピー,ペーストを 繰 り 返 して7 行 分 作 り,その 中 の 数 字 を 下 のように 順 番 に 書 き 換 えてください - 4 -
これを ファイル 名 前 を 付 けて 保 存 で, 今 度 は, 名 前 2.html ( 例 : rika2.html )と してさっきと 名 前 を 変 えて 保 存 してください その 上 で マイコンピュータ で 名 前 2.html を 探 し,それをダブルクリックしてみてください 以 下 のような 画 面 が 開 きましたか? このように<font size= 数 ></font>タグで 文 字 を 囲 むと, 数 が 大 きいほど 大 きな 文 字 になります 2.2 文 字 の 色 を 変 える 下 のように<font color= #********( 色 によって 違 うカラーコード) ></font>で, 先 ほどの 文 字 の 大 きさの<font size=**></font>で 囲 みます 何 色 かがわかるよう 文 字 色 も 画 面 に 表 示 される よう 付 け 加 えます - 5 -
2.1と 同 じ 手 順 で 上 書 き 保 存 してから,ファイル 名 をクリックすると, 下 のような 画 面 が 現 れるはずです <font color= #******** ></font>タグの 色 を 指 定 する 数 字 記 号 は,カラーコードと 呼 ばれる もので,16 進 6 桁 の 値 で 表 し,2 桁 ずつ 赤, 緑, 青 の 量 を 指 定 するものです どんな 色 でも 指 定 できるのでいろいろ 試 してみるとよいでしょう 主 なものは 以 下 の 通 りです gray 灰 色 #808080 green 緑 #008000 maroon 栗 色 #800000 navy ネイビーブルー #000080 olive オリーブ #808000 purple 紫 #800080 silver 銀 色 #C0C0C0 teal 薄 い 青 緑 #008080 white 白 #FFFFFF lightcyan 薄 い 空 色 #E0FFFF - 6 -
3.イメージを 貼 りつける 画 面 に 画 像 を 貼 り 付 けて, 楽 しいホームページにしましょう 水 野 HP のフレッシュマン ゼミ B の 画 面 のバナナ 画 像 を 右 クリックし, 画 像 に 名 前 を 付 け て 保 存 を 選 択 してから,MO に banana.gif を 保 存 しておきます さきほどのページの 最 後 に,<img src = banana.gif >という1 行 を 加 えます - 7 -
上 書 き 保 存 したファイルをダブルクリックすると, 以 下 のような 画 面 が 現 れるはずです 4.リンクする リンクする とは,クリックするとそのページに 飛 べるよう 関 連 づけることです 4.1 テキストから 同 じディレクトリの 他 のファイルにリンクする ここでは,テキストをクリックすると, 最 初 に 作 った 名 前.html というページに 飛 べるよう リンクしてみます 下 のように, 最 後 の 行 の 水 野 ホームページ7 水 色 という 文 字 を,<a href= 名 前.html >と </a>で 囲 んでください - 8 -
これを 上 書 き 保 存 してから 先 と 同 じ 手 続 きでダブルクリックすると 下 のような 画 面 が 現 れます その 下 線 部 分 (ホット テキストと 呼 ばれる)をクリックしてみてください 下 のように, 最 初 に 作 ったページに 飛 ぶことができましたか? - 9 -
先 ほどの<a href= 名 前.html >と</a>で, 今 度 は,<img src= banana.gif >を 囲 んでみてください そのファイルを 上 書 き 保 存 してから,またダブルクリックしてみてください 下 のようなペー ジが 開 きましたか? - 10 -
今 度 はバナナの 画 像 をクリックしてみましょう 先 ほどと 同 様, 最 初 のページに 飛 べました か? 4.2 テキストから 他 の Web サイトにリンクする リンクできるのは,ページだけではありません 他 の Web サイトにリンクすることもできま す ここでは, 中 部 大 学 人 文 学 部 心 理 学 科 のホームページ というテキストをクリックすると, 中 部 大 学 人 文 学 部 心 理 学 科 に 飛 べるように 設 定 してみましょう マイコンピュータで 最 初 に 作 った 名 前.html を 見 つけ,その 上 でマウスを 右 クリックして MIFES で 開 く を 選 択 します - 11 -
そのタイトルと 本 文 を 以 下 のように 書 き 換 えてから, 一 旦, 名 前 3.html という 新 しい 名 前 を 付 けて MO に 保 存 してください 次 に, 下 のように, 中 部 大 学 人 文 学 部 心 理 学 科 を<a href= http:psy.isc.chubu.ac.jp ></a>で 囲 みます 4.1では<a href= ファイル 名 ></a>でしたが,このファイル 名 の 部 分 を URL と 置 き 換 えるだけでよいのです - 12 -
では,これを 上 書 き 保 存 して, 前 と 同 じようにマイコンピュータで 見 つけてダブルクリックし てみてください このホットリンクをクリックしてみてください 下 のように, 中 部 大 学 人 文 学 部 心 理 学 科 のホ ームページに 飛 べましたか? - 13 -
5. 背 景 を 工 夫 する 5.1 背 景 の 色 を 変 える 今 度 は, 今 作 ったページ( 名 前 3.html)の 背 景 をもう 少 しきれいにしましょう 背 景 を,2.2の 表 の 最 後 にあったような, 薄 い 空 色 にします そのためには,<body>とい うタグの 中 に,bgcolor= #E0FFFF と 指 定 するだけでよいのです これを 上 書 き 保 存 してから,また 前 と 同 じようにマイコンピュータでダブルクリックしましょ う 下 のように 背 景 が 薄 いブルーになりましたか? - 14 -
5.2 背 景 にイメージを 使 う もっとこりましょう でも,やり 方 はとても 簡 単 です まず,その 壁 紙 用 の kabegami.gif を 手 に 入 れます 先 ほどの 水 野 のフレッシュマン ゼミ B のページのバナナの 画 像 のとなりにあったブルーの 四 角 の 上 で 右 クリックし, 画 像 に 名 前 を 付 けて 保 存 を 選 択 して MO に, kabegami.gif を 保 存 します その 上 で, 先 ほどの bgcolor= #E0FFFF の 代 わりに background= kabegami.gif と 書 きます - 15 -
これを 上 書 き 保 存 したら, 先 ほどと 同 様,マイコンピュータでダブルクリックしてください 下 のようになりましたか? 6. 最 後 に どうでしたか? 思 ったより 簡 単 にホームページが 書 けることがわかったと 思 います ホームページをもっと 楽 しくするためのタグ, 美 しく 見 せるためのタグが 最 初 に 紹 介 した 水 野 の HP の HTML 入 門 にはたくさん 紹 介 されています これを 参 考 にして,できるだけオリジナルで 楽 しく 美 しい 自 分 のホームページを 作 ってみてく ださい 参 考 URL 水 野 りか 2005 HTML 入 門 (http://psy.isc.chubu.ac.jp/~mizunor/cai0/mokuji.html) - 16 -
Appendix. 水 野 HP の HTML 入 門 の 目 次 (http://psy.isc.chubu.ac.jp/~mizunor/cai0/mokuji.html) - 17 -