第 10 & 11 回 HTML 入 門 水 野 りか ここでは,いわゆるホームページを 作 成 する 方 法 の 基 礎 を 学 びます ホームページを 作 るための 言 語 は,HTML (Hyper Text Markup Language)と 呼 ばれています この 言 語 はどんなエディタやワープロ ソフトでも 書 くことができますが, 本 講 では, Windows 標 準 のメモ 帳 を 利 用 してみます HTML で 書 かれたページは,Internet Explorer, Firefox, Netscape 等 の,ブラウザ (browser)と いう 閲 覧 ソフトで 見 ることができます ここではごく 初 歩 的 なことだけに 触 れますが,これをきっかけに 水 野 のホームページの 左 のメニューの web 言 語 資 料 をクリックして 現 れるメニューの 中 の HTML 入 門 (Appendix 参 照 ) などを 参 照 しながら, 様 々なフォーマットのページを 作 ったり, 動 くアニ メを 貼 り 付 けたり,リンク 集 を 作 ったり,フレームに 挑 戦 したり,クリックすればメールを 送 ることができるようなページを 作 ったり, 音 楽 を 流 したりする 方 法 を 学 んで, 楽 しい,ユ ニークな, 自 分 自 身 のホームページを 作 ってみることをおすすめします 目 次 1. 最 も 簡 単 なホームページを 作 る 2. 書 式 を 変 える 3.イメージを 貼 りつける 4.リンクする 5. 背 景 を 工 夫 する 6. 最 後 に 参 考 URL - 1 -
1. 最 も 簡 単 なホームページを 作 る 1) スタート すべてのプログラム アクセサリ から,メモ 帳 を 起 動 します 2) ~~( 自 分 の 名 前 を 書 く) を 自 分 の 名 前 に 直 す 以 外 は, 下 の 通 りに 書 いてみてください 3)<***>や</***>は タグ と 呼 ばれ, 前 者 は 開 始, 後 者 は 終 了 を 表 します 図 2のタグの 中 身 の 意 味 と 使 い 方 は, 次 の 通 りです 1. <html>~</html>で,html で 書 かれた 文 書 を 囲 みます 2. <head><title>~</title></head>で,ブラウザの 上 部 に 表 示 されるタイトルを 囲 みます 3. <body>~</body>で, 本 文 を 囲 みます 注 意 注 意 すべきことは, 本 文 以 外 は, 半 角 英 数 字 の 小 文 字 で 書 かれていることで す そうでないと 正 しく 認 識 してくれないサーバがあります よって,これからはすべて, 本 文 以 外 は,フォルダ 名 も,ファイル 名 も, 何 もかも, 半 角 英 数 字 の 小 文 字 で 書 いてくだ さい 日 本 語 や 全 角 文 字, 大 文 字 などは, 使 ってはいけません - 2 -
4)これを, 下 の 図 のように,1 自 分 の USB メモリ 等 の 記 憶 媒 体 に 自 分 の 学 籍 番 号 の 名 前, 例 えば, hw12345 というフォルダを 作 り,2 その 中 に 学 籍 番 号 の 最 後 に no1 をつけ, 識 別 子,. html (ドットと html)をつけ, hw12345no1.html というようなファイル 名 にして 保 存 します. html は,これが HTML で 書 かれたぺージであることを 示 す 識 別 子 です 全 部 の 名 前 を 半 角 英 数 字 で 書 きましたか? - 3 -
5) USB メモリに 保 存 した 上 のファイルを コンピュータ で 探 し,それをダブルクリックし てみてください 以 下 のような 画 面 が 開 きましたか? 6)その 画 面 の 上 部 を 見 てください 最 も 簡 単 なホームページ とあります これが <head><title></title></head>で 囲 まれたタイトルです 白 い 画 面 の 中 の 部 分 が<body></body>で 囲 まれた 本 文 です いかがでしょうか ホームページはとても 簡 単 に 作 れるものだということがわかったと 思 いま す 後 は, 様 々なタグを 覚 えて,というよりもむしろ,どのような 機 能 を 持 ったタグがあるのか を 知 って,それを 使 ってホームページをより 洗 練 されたものにしてゆくだけです - 4 -
2. 書 式 を 変 える ここでは, 文 字 やページの 書 式 をいろいろ 変 えてみます 2.1 文 字 の 大 きさを 変 える 1) 下 のように, 先 ほどのページのタイトルを 文 字 の 大 きさを 変 える にしてから, ~のホ ームぺージ を, 文 字 サイズを 指 定 するタグ,<font size=1></font>で 囲 み, 最 後 に 改 行 タグ, <br>をつけてください 2) 次 に,その 行 をコピー,ペーストを 繰 り 返 して7 行 分 作 り,その 中 の 数 字 を 下 のように 順 番 に 書 き 換 えてください - 5 -
3)これを ファイル 名 前 を 付 けて 保 存 で, 今 度 は, 先 ほどのファイル 名 の no1 を no2 に 変 え, hw~no2.html のようにしてから 保 存 してください 4)その 上 で コンピュータ でそれを 探 し,ダブルクリックしてください 下 のような 画 面 が 開 きましたか?このように<font size= 数 ></font>タグで 文 字 を 囲 むと, 数 が 大 きいほど 大 きな 文 字 になります - 6 -
2.2 文 字 の 色 を 変 える 1) 下 のように<font color= #********( 色 によって 違 うカラーコード) ></font>で, 先 ほどの 文 字 の 大 きさの<font size=**></font>で 囲 みます 何 色 かがわかるよう 文 字 色 も 画 面 に 表 示 され るよう 付 け 加 えます 2)これを, ファイル 上 書 き 保 存 してから,コンピュータで 表 示 される 先 と 同 じ hw~no2.html のファイル 名 をクリックすると, 下 のような 画 面 が 現 れるはずです - 7 -
3)<font color= #******** ></font>タグの 色 を 指 定 する 数 字 記 号 は,カラーコードと 呼 ばれ るもので,16 進 6 桁 の 値 で 表 し,2 桁 ずつ 赤, 緑, 青 の 量 を 指 定 するものです どんな 色 でも 指 定 できるのでいろいろ 試 してみるとよいでしょう 主 なものは 以 下 の 通 りで, 実 は, 主 なものだけは<font color="red">のように 名 称 で 指 定 することができます カラーコード の 方 が 様 々な 色 を 指 定 できるので, 練 習 のため, 本 講 ではカラーコード 指 定 を 練 習 しました - 8 -
3. 画 像 を 貼 りつける 画 面 に 画 像 を 貼 り 付 けて, 楽 しいホームページにしましょう 3.1 画 像 の 貼 り 付 け 1) 水 野 HP のフレッシュマン ゼミ B の 画 面 のバナナ 画 像 を 右 クリックし, 画 像 に 名 前 を 付 けて 保 存 を 選 択 してから, 先 ほどと 同 様 USB メモリの"hw~( 自 分 の 学 籍 番 号 )"フォルダ に banana.gif を 保 存 しておきます - 9 -
2)さきほどのページの 最 後 に,<img src = banana.gif >という1 行 を 加 えます 3)もう 一 度 ファイル 上 書 き 保 存 してから hw~no2.html をダブルクリックする と, 以 下 のような 画 面 が 現 れるはずです 3.2 利 用 してよい 画 像 ネット 上 のどの 画 像 も 勝 手 にダウンロードして 自 分 の Web ページなどで 利 用 してよいと 考 え てはいけません 著 作 権 フリーであると 明 記 していない 限 り, 勝 手 にダウンロードして 公 開 した りするのは 違 法 です 著 作 権 フリーで 自 由 に 利 用 してよいと 明 記 していない 画 像 や 写 真 は, 絶 対 に 利 用 しないこと 自 分 の Web ページなどで 利 用 できる 画 像 は,ネット 上 のフリーの 素 材 集 等 にあるものに 限 ら れます フリーの 素 材 を 検 索 して 探 し, 利 用 するようにしましょう - 10 -
4.リンクする リンクする とは,クリックするとそのページに 飛 べるよう 関 連 づけることです 4.1 テキストから 他 の Web サイトにリンクする ここでは, 中 部 大 学 人 文 学 部 心 理 学 科 のホームページ というテキストをクリックすると, 中 部 大 学 人 文 学 部 心 理 学 科 に 飛 べるように 設 定 してみましょう 1)メモ 帳 で 最 初 に 作 った hw~no1.html を 開 きます 最 初 は 何 も 見 えませんが 右 下 の すべてのファイル を 選 択 すると ファイルが 表 示 されますので これを 選 びます - 11 -
2)そのタイトルと 本 文 を 以 下 のように 書 き 換 えてから, 一 旦, hw~no3.html という 新 しい 名 前 をつけて 保 存 してください - 12 -
3) 次 に, 下 のように, 中 部 大 学 人 文 学 部 心 理 学 科 を<a href= http://psy.isc.chubu.ac.jp >と </a>で 囲 みます 4)これを 上 書 き 保 存 して, 前 と 同 じようにコンピュータで 見 つけてダブルクリックしてみてく ださい 5) 上 のホットリンクをクリックしてみてください 下 のように, 中 部 大 学 人 文 学 部 心 理 学 科 の ホームページに 飛 べましたか? リンク 集 などは, 基 本 的 に,このような 簡 単 な 方 法 で 作 られています 簡 単 ですね - 13 -
4.2 同 じディレクトリの 他 のファイルへのリンクをはる A. 文 字 列 にリンクをはる ここでは,テキストをクリックすると, 最 初 に 作 った"hw~no1.html"というページに 飛 べるよ うリンクしてみます リンク 付 きのテキストは, ホットテキスト と 呼 ばれています 1)もう1 度 "hw~no2.html"を 開 き, 下 のように, 最 後 の 行 の 水 野 ホームページ7 水 色 とい う 文 字 を<a href="hw~no1.html >と</a>で 囲 んでください 今 度 は, 飛 びたいファイル 名 だけを "" 内 に 書 くことに 注 意 してください よく,ブラウザのアドレスをコピー&ペーストする 人 がいます しかしそうすると, <a herf="c:\ 心 理 コンピュータリテラシー\hw~no1.html">などとなってしまい," C:\ 心 理 コンピ ュータリテラシー\"という 余 計 な 情 報 が 含 まれてしまいます これでは,ブラウザを 見 た 人 自 身 のコンピュータの C ドライブの 心 理 コンピュータリテラシー というディレクトリの hw~ no1.html というファイルにリンクができてしまいますので,そんなファイルは 見 た 人 のコンピュ ータにはありませんから,エラーになってしまいます ですので,ファイル 名 を 指 定 する 場 合 は,アドレスをコピーするのではなく, 必 ずファイル 名 を 書 く ようにしてください - 14 -
2)これを 上 書 き 保 存 した 後 先 と 同 じ 手 続 きでダブルクリックすると 次 のような 画 面 が 現 れます 3)その 下 線 部 分 (ホット テキストと 呼 ばれる)をクリックしてみてください 下 のように, 最 初 に 作 ったページに 飛 ぶことができましたか? - 15 -
B. 画 像 にリンクをはる 今 度 は 画 像 ををクリックすると, hw~no1.html というページに 飛 べるようにしてみます 1)"hw~no2.html"を 開 いて,<img src= banana.gif >を,<a href= hw~no1.html >と</a>で 囲 ん でみてください 2)そのファイルを 上 書 き 保 存 してから,またダブルクリックしてみてください 下 のようなペ ージが 開 きましたか? 3)そのバナナの 画 像 をクリックしてみましょう 最 初 のページに 飛 べましたか? - 16 -
-------- ------------------------------------------------------------------------------ < a href=" ココ ">は,どんな 時 でも,ブラウザの 上 に 表 示 されているアドレスをコピーして 貼 り 付 ければいいと 思 った 人 はいませんか? それは 誤 りです! URL(Web 上 のアドレス)の 時 はいいのですが,ファイルを 参 照 させる 時 は 絶 対 にだめです 学 生 のやった 誤 りの 例 を 書 きます <a href="e: 心 理 コンピュータリテラシー hw123456 hw123456no1.html"> これでは, E ドライブの USB メモリに 心 理 コンピュータリテラシ,hw123456 というフォルダ に hw123456no1.html というファイルがある 場 合 だけしか リンクできません ファイルを 参 照 させる 場 合 は,コピー&ペーストは 絶 対 にだめです ------------------------------------------------------------------------------------------------------------------------------- 4.3 違 うディレクトリの 他 のファイルへのリンクをはる 飛 びたい 他 のファイルがもとのファイルと 違 うディレクトリ(フォルダ)にある 場 合 は,そ のフォルダの 位 置 名 称 等 ( 相 対 パス)を 指 定 しなければ 飛 ぶことができません 1)フォルダの 構 造 が 以 下 のようになっていると 仮 定 します 作 成 しているファイルは"x.html" です computer literacy a.html hw12345 x.html b.html homework c.html sub d.html 作 成 している, リンク 元 のファイル - 17 -
2)x.html から a~d.html の 各 々にリンクする 際 のファイル 名 の 書 き 方 は 以 下 の 通 りです a. 上 のフォルダ 内 のファイル "a.html"にリンクする:<a href="../a.html">~</a> b. 同 じフォルダ 内 のファイル"b.html"にリンクする:<a href="b.html">~</a> c. 隣 のフォルダ 内 のファイル"c.html"にリンクする:<a href="../homework/c.html">~</a> d. 下 のフォルダ 内 のファイル"d.html"にリンクする:<a href="sub/d.html">~</a> 3) 実 際 にやってみましょう 左 下 メニューのコンピュータをクリックして 現 在 ある 自 分 の"hw ~"という 学 籍 番 号 名 のフォルダを 開 き, 上 のメニューの 新 しいフォルダ をクリックし, 作 成 された 新 しいフォルダの 名 称 を"sub"としてください 4) 前 に 作 った,"hw~no1.html"をドラッグして"sub"フォルダに 移 動 させます - 18 -
5)"sub"フォルダをクリックして, 中 に"hw~no1.html"ファイルだけがあることを 確 認 してく ださい 6)メモ 帳 で"hw~no2.html"ファイルを 開 いてください そして,2)の d のように, 現 在 の 書 き 方 を, 下 の"sub"フォルダ 内 の"hw~no1.html"ファイルにリンクする 書 き 方 に 修 正 し,ファイ ル 上 書 き 保 存 してください 7)"hw~no2.html"をクリックして 開 き,バナナをクリックしてください ~のホームぺー ジ と 書 いた"hw~no1.html"に 飛 べましたか? 飛 べない 人 は 挙 手 して 指 導 を 仰 いでください - 19 -
5. 背 景 を 工 夫 する 5.1 背 景 の 色 を 変 える 今 度 は, 前 に 作 ったページ( hw~no3.html")の 背 景 をもう 少 しきれいにしましょう 1)"hw~no3.html"を 開 いて,<body>というタグの 中 に,bgcolor= #E0FFFF と 書 きます 2)これを 上 書 き 保 存 してから,また 前 と 同 じようにマイコンピュータでダブルクリックしまし ょう 下 のように 背 景 が 薄 いブルーになりましたか? - 20 -
5.2 背 景 にイメージを 使 う もっとこりましょう でも,やり 方 はとても 簡 単 です 1)まず,その 壁 紙 用 の kabegami.gif を 手 に 入 れます 先 ほどの 水 野 のフレッシュマン ゼミ B のページのバナナの 画 像 のとなりにあったブルーの 四 角 の 上 で 右 クリックし, 画 像 に 名 前 を 付 けて 保 存 を 選 択 して USB メモリの"hw~( 自 分 の 学 籍 番 号 )" フォルダに, kabegami.gif を 保 存 します 2)その 上 で, 先 ほどの bgcolor= #E0FFFF の 代 わりに background= kabegami.gif と 書 きます - 21 -
3)これを 上 書 き 保 存 したら, 先 ほどと 同 様,マイコンピュータでダブルクリックしてくださ い 下 のようになりましたか? 4) 背 景 も 画 像 と 同 様,フリーの 素 材 を 探 して 使 うことができます あくまでも 著 作 権 フリーの ものしか 利 用 できないことは, 画 像 の 場 合 と 同 じですので, 注 意 してください 6. 最 後 に 最 後 に,まず,6.1のチェックリストをチェックしてください 全 部 チェックし, 正 しいこ とを 確 認 した 後,Tora-Net のライブラリの, 心 理 コンピュータリテラシの 第 11 回 のレポート 提 出 フォルダーに, 学 生 番 号 のフォルダを6.2に 示 す 方 法 で1つの zip ファイルに 圧 縮 した 後, アップロードしてください 6.1 チェックリスト 1) 自 分 の 学 籍 番 号 を 半 角 英 数 字 小 文 字 で 書 いたフォルダ( 例 :hw012345) は あるか 2) 1) のフォルダの 中 に, 半 角 英 数 字 小 文 字 の" 学 籍 番 号 no2.html", " 学 籍 番 号 no3.html"の2つのファイルと,"sub"という 名 のフォルダがあるか 3) 2)の"sub"というフォルダの 中 に" 学 籍 番 号 no1.html"という 名 のファイルはあるか 4) 1) のフォルダの 中 に,2)のファイルで 使 用 した 全 ての 画 像 ファイルがあるか 5) 4)の 画 像 ファイルは,すべて 半 角 英 数 字 小 文 字 で 書 かれているか 6) " 学 籍 番 号 no2.html"のファイルの 中 のホットリンクをクリックすると," 学 籍 番 号 no1.html"に 飛 ぶことができるか 7) " 学 籍 番 号 no3.html"のファイルの 中 のホットリンクをクリックすると, 心 理 学 科 の ホームページに 飛 ぶことができるか - 22 -
6.2 Zip ファイルの 作 り 方 Zip ファイルとは,いくつかのファイルを1つに 圧 縮 して 作 成 されるファイルのことです こ れまで 作 成 したファイルはみな,"hw~( 自 分 の 学 籍 番 号 )" フォルダに 入 っているはずです こ れを"hw~( 自 分 の 学 籍 番 号 ).zip"という1つのファイルに 圧 縮 します そのためには, 下 図 にあ るように コンピュータ で 自 分 の USB メモリの"hw~( 自 分 の 学 籍 番 号 )" フォルダの 入 ったフ ォルダを 開 きます 下 図 の 例 ではそのフォルダ 名 は"hw12345"となっています その 上 でマウス を 右 クリックすると, 右 側 に 下 図 中 央 のようなメニューが 出 るので 送 る を 選 び,その 右 のメ ニューから 圧 縮 (zip 形 式 )フォルダー を 選 んでください すると, 下 の 図 に 示 すように,"hw~( 自 分 の 学 籍 番 号 ).zip"というファイルができあがります このファイルを, 心 理 学 科 の 課 題 提 出 ページ(tora-net の ID, PW が 必 要 )から 提 出 してください - 23 -
どうでしたか? 思 ったより 簡 単 にホームページが 書 けることがわかったと 思 います ホームペ ージをもっと 楽 しくするためのタグ, 美 しく 見 せるためのタグが 最 初 に 紹 介 した 水 野 の HP の HTML 入 門 にはたくさん 紹 介 されています これを 参 考 にして,できるだけオリジナルで 楽 しく 美 しい 自 分 のホームページを 作 ってみてください Appendix 水 野 HP の 左 のメニューの Web 言 語 資 料 の 中 の HTML 入 門 の 目 次 - 24 -