平 成 18 年 度 学 校 Web ページ 作 成 研 修 講 座 HTML の 基 礎 Ⅰ ~メモ 帳 で Web ページを 作 ろう!!~ 今 回 の 勉 強 内 容 メモ 帳 /ファイルの 保 存 / 文 字 入 力 /ページタイトルの 設 定 文 字 色 の 設 定 / 文 字 サイズの 設 定 / 水 平 線 /リンクの 設 定 岩 手 県 立 総 合 教 育 センター 情 報 教 育 室
目 次 1 HTML の 概 要 2 メモ 帳 の 利 用 3 文 字 入 力 4 ページタイトルの 設 定 5 文 字 色 の 設 定 6 文 字 サイズの 設 定 7 水 平 線 8 リンクの 設 定 1 2 4 6 7 9 10 12 作 業 フォルダの 準 備 作 成 したファイルを 保 存 するフォルダとして デスクトップ 上 に websample フォル ダを 作 成 します ( 1) デスクトップ 上 で 右 クリックか ら [ 新 規 作 成 ]-[フォルダ] をクリックします ( 2) ファイル 名 を websample に 変 更 します 以 後 作 成 した ファイル 等 は このフォルダに 保 存 していきます 作 成 サンプル 本 テキストで 作 成 するサンプルページです ( index.html) ( sub.html)
1 HTML の 概 要 Web ページの 基 本 となるのが HTML( Hyper Text Mark-up Language) です HTML 文 書 が 普 通 の 文 書 と 異 なるのは タグ で 記 述 されていることです この タグ がブラウザ に 読 み 込 まれることにより テキスト( 文 字 ) 情 報 が 表 示 されたり 文 字 の 色 が 変 えられたり 大 きさを 変 えられたり 他 のページにジャンプすることができます 以 前 HTML の 作 成 にあ たっては タグを 直 接 入 力 して 作 成 していましたが 現 在 は 数 多 くの 作 成 専 用 のソフトウェアが 商 品 化 され 特 にもタグを 知 らなくともページを 作 成 することができるようになりました しかし これらの 専 用 ソフトウエアにはほとんど HTML モードが 搭 載 されており 直 接 タグ で Web ページを 作 成 できるようになっています この 理 由 は 専 用 ソフトウェアを 利 用 して 作 成 するよりも 直 接 HTML で 作 成 する 方 が 自 由 度 が 高 く 自 分 の 意 図 を 表 現 するのに 適 して いるからです ( 1) HTML の 始 まり 1989 年 スイスの CERN という 研 究 所 に 勤 務 していた Tim Berners-Lee 氏 によっ て HTML の 基 礎 が 築 かれました 当 時 は 研 究 資 料 や 論 文 は 書 類 やコンピュータにデータとして 蓄 積 されているだけの 状 況 でした 目 的 の 文 書 を 探 し 出 すには 膨 大 な 量 の 書 類 やデータの 中 から 探 し 出 さなけれ ばならず 労 力 と 時 間 を 費 やすものでした そこで Tim Berners-Lee 氏 は コンピュ ータにデータとして 保 存 されている 文 書 の 文 字 列 に 別 の 文 書 を 呼 び 出 す 仕 掛 けを 作 り 出 し この 仕 掛 けから 次 々と 文 書 を 呼 び 出 すことで 関 連 性 のある 情 報 をたどっていくしく みを 考 案 しました これが Hyper Text つまり HTML 文 書 の 始 まりです ただし 当 時 は 利 便 性 を 考 慮 して 必 要 な 情 報 を 早 く 取 り 出 す!! ために 画 像 や 動 画 は 扱 われ なかったようです ( 2) ブラウザの 進 化 1993 年 Mac Andreessen 氏 によって ブラウザ Mosaic が 開 発 されました Mosaic は 画 像 が 表 示 でき 世 界 中 のユーザが 一 気 に 増 えました そこで Mac Andreessen 氏 は Netscape 社 を 設 立 しました その 後 多 くのブラウザが 開 発 され それにともなって HTML に 新 しいタグが 取 り 入 れられてきましたが 世 間 に 受 け 入 れられるタグだけが 残 りました さらには 煩 雑 にな る HTML を 標 準 化 するために W3C( World Wide Web Consortium)なる 団 体 が 設 立 されました ブラウザのシェア 争 いの 結 果 Netscape 社 の Netscape Navigator と Microsoft 社 の InternetExplorer の2 社 に 絞 られてきました 両 者 は ユーザを 自 社 ブラウザへ 取 り 込 もうと 自 社 ブラウザでしか 表 示 できない 新 しいタグを 次 々と 投 入 しました その 結 果 Netscape Navigator でないと 閲 覧 できないページや InternetExplorer で ないと 見 られないページが 多 く 出 回 ってきました 1997 年 1 月 事 態 を 重 く 見 た W3C は HTML3.2 を 勧 告 しました これによって 予 想 された 混 乱 は 回 避 されましたが 依 然 としてブラウザ 独 自 のタグは 残 っており これ が 現 在 まで 続 くブラウザによる 表 示 / 非 表 示 や 対 応 / 非 対 応 の 問 題 を 残 しているのです その 後 1997 年 12 月 に HTML4.0 が 1999 年 12 月 には HTML4.01 が W3C に ょって 勧 告 されました 現 在 はこの HTML4.01 が 最 新 のバージョンとなります -1-
2 メモ 帳 の 利 用 Web ページ 作 成 を 専 用 ソフトを 用 いずに 行 うためには Windows に 標 準 添 付 してある メ モ 帳 などのテキストエディタを 利 用 します HTML ファイルはテキスト 形 式 のファイルです ので 一 太 郎 やワード 等 のワープロを 用 いて 保 存 する 際 の 形 式 を 変 えるだけでも 作 成 可 能 です ( 1) メモ 帳 の 起 動 [ スタート] ボタンをクリックし [ すべてのプログラム] -[ アクセサリ] -[ メモ 帳 ] をクリックします すると メモ 帳 が 起 動 します ( 2) タグの 入 力 以 下 のタグをメモ 帳 内 に 半 角 英 数 で 入 力 します < html> < head> < /head> < body> < /body> < /html> 印 は 新 規 入 力 する 部 分 ( ) 基 本 的 に 半 角 英 数 モードの 入 力 であれば 大 文 字 と 小 文 字 の 区 別 はありませんが ファ イル 名 等 は 大 文 字 小 文 字 を 区 別 する 場 合 があるので 作 成 したページが 閲 覧 できなくな る 場 合 があります -2-
( 3) ファイルの 保 存 メモ 帳 で 作 成 したファイルを 保 存 して みましょう ( a) メモ 帳 のメニューから[ファイル] -[ 名 前 を 付 けて 保 存 ]をクリックし ます ( b) [ 保 存 する 場 所 ]を 先 に 作 成 した websample フォルダに [ファ イル 名 ]を index.html に 設 定 し て [ 保 存 ] ボタンをクリックします ( 4) 作 成 したファイルの 閲 覧 今 保 存 した index.html のアイコンをダブルクリックする と ブラウザが 起 動 して ページ が 表 示 されます ただし まだペ ージ 内 には 特 にも 文 字 等 の 表 示 さ れません タグを 覚 えよう1 [ 書 式 ] < html > ~< /html> html ファイルであることの 明 示 [ 書 式 ] < head > ~< /head> ページの 本 文 には 関 わらない 設 定 部 分 であることの 明 示 [ 書 式 ] < body > ~< /body> ページの 本 文 であることの 明 示 ( 注 1)タグは 通 常 <~> で 記 述 される 開 始 タグと < / ~>で 記 述 される 終 了 タグを 対 で 記 述 します ( 注 2)タグは 入 れ 子 状 に 記 述 することによって 複 数 反 映 させることができます 上 記 に 入 力 した 内 容 は < html >~< /html>タグの 中 に< head >~< /head>と< body >~< /body>が 入 れ 子 状 に 記 述 さ れています -3-
3 文 字 の 入 力 それでは ページ 内 に 文 字 を 表 示 させてみましょう ( 1) 先 に 保 存 した index.html ファイ ルをメモ 帳 から 開 きます ( 2) < body>タグの 下 に 以 下 の 文 字 を 入 力 します < body> 岩 手 県 立 銀 河 の 森 高 等 学 校 < /body> 印 は 追 加 する 部 分 ( 3) 上 書 き 保 存 します [ファイル]-[ 上 書 き 保 存 ]をクリックします(ショートカットで Ctrl + s) ( 4) index.html をダブルクリックして ブラウザから 表 示 させて 確 認 してみましょう 入 力 した 学 校 名 が 表 示 されていることを 確 認 してください < memo> -4-
( 注 ) 文 字 列 を 表 示 させるためには < body >タグと< /body>タグの 間 に 文 字 を 記 述 します た だし 文 字 列 を 改 行 して 複 数 行 の 表 示 にするためには 改 行 タグ< br>を 入 れなければなりま せん 改 行 タグ< br>を 使 わない 場 合 ソース 上 では 改 行 しているが HTML 上 では 改 行 されていない 改 行 タグ< br>を 使 った 場 合 タグを 覚 えよう2 [ 書 式 ] < br> 改 行 する ( 注 )< br>タグには 終 了 タグがありません [ 書 式 ] < p >~< /p> 段 落 を 指 定 する ( 注 ) < p >~< /p >で 囲 まれた 文 字 列 は 段 落 として 扱 われ 自 動 的 に< /p> 以 降 の 文 字 列 は 改 行 されます ただし 改 行 の 際 は 1 行 の 空 欄 を 作 って 改 行 します 課 題 演 習 1 右 図 のような 表 示 になる HTML ページを 作 成 しなさい sample01.html -5-
4 ページタイトルの 設 定 右 下 図 のように ブラウザのタイトルバーにメッセージを 表 示 することができます ここに 表 示 される 文 字 列 は ページタイトル といいます 検 索 エンジン 等 で 最 もはじめに 抽 出 される 部 分 ですので 通 常 はページの 内 容 の 説 明 を 記 述 します ( 1) 先 に 作 成 した index.html ファイルをメ モ 帳 で 開 きます ( 2) < head >と< /head>タグの 間 に 次 のようなタグを 記 述 します < head> < title> 銀 河 の 森 高 等 学 校 Web ページ< /title> < /head> 印 は 追 加 する 部 分 ( 3) 上 書 き 保 存 をします メニューから[ファイル]-[ 上 書 き 保 存 ]をクリックします ( 4) index.html ファイルをダブルクリックします ブラウザから 表 示 させると ページ タイトルが 変 更 されていることが 分 かります タグを 覚 えよう3 [ 書 式 ] < font color=" " >~< /font> 文 字 を 色 にする ( 注 ) 開 始 タグ< font color ~>から< /font>で 囲 まれた 文 字 の 色 を 変 える に 指 定 する 方 法 は 16 進 数 による 方 法 とカラーネームによる 方 法 があります -6-
5 文 字 色 の 設 定 HTML ファイル 内 での 色 の 指 定 は 文 字 (テキスト)や 背 景 などに 対 して 行 うことができま す 指 定 方 法 は # + 16進 数 表 記 のカラーの 値 もしくは カラーネーム を 使 って 指 定 しま す その2つの 方 法 について 説 明 します 16 進 数 表 記 のカラーの 値 指 定 方 法 は パソコンで 色 表 示 に 使 用 する R( 赤 ) G( 緑 ) B( 青 )の 各 色 の 値 を 16 進 数 に 変 換 して 並 べます #44 44 44 ( 赤 ) ( 緑 ) ( 青 ) = ( ) 各 色 ( R G B)は 00 ~ FF までの 256 段 階 で 指 定 した 数 値 の 組 合 せによって さまざまな 色 を 表 現 します ( 例 ) 赤 - #FF0000 黄 色 - 緑 - #00FF00 水 色 - 青 - #0000FF 紫 - #FFFF00 #00FFFF #FF00FF ( 注 ) 詳 細 な 色 と 指 定 数 値 の 対 応 表 は color_sample.html を 参 照 してください 16 進 数 表 記 のカラーの 値 先 の 16 進 数 の 指 定 の 代 わりに 色 の 名 前 を 使 うこともできます 赤 指 定 であれば red 青 指 定 であれば blue と 記 述 するとその 表 示 になります ( 例 ) 赤 - red 黄 色 - 緑 - green 水 色 - 青 - blue 紫 - yellow aqua magenta ( 注 ) 詳 細 な 色 と 名 前 の 対 応 表 は color_sample.html を 参 照 してください ( ) ファイルをメモ 帳 で 開 1 index.html きます -7-
( 2) 本 文 の 学 校 名 ( 例 銀 河 の 森 高 等 学 校 )を 青 にしてみましょう < body>タグの 下 を 次 のように 記 述 します < body> < font color="#0000ff" > 銀 河 の 森 高 等 学 校 < /font>< br> 0123-45-6789 印 は 修 正 する 部 分 ( 3) 上 書 き 保 存 します [ファイル]-[ 上 書 き 保 存 ] をクリックします ( 4) index.html をダブルクリックして ブラウザから 表 示 させて 確 認 してみましょう 学 校 名 が 青 くなっているこ とを 確 認 してください タグを 覚 えよう4 [ 書 式 ] < font color=" " >~< /font> 文 字 を 色 にする ( 注 ) 開 始 タグ< font color ~>から< /font>で 囲 まれた 文 字 の 色 を 変 える に 指 定 する 方 法 は 16 進 数 による 方 法 とカラーネームによる 方 法 があります 課 題 演 習 2 電 話 番 号 の 文 字 列 の 色 を 赤 にしてみましょう sample02.html -8-
6 文 字 サイズの 設 定 本 文 に 表 示 される 文 字 ( 例 銀 河 の 森 高 等 学 校 )のサイズを 変 更 してみましょう ( 1) index.html ファイルをメモ 帳 で 開 きます ( 2) < body>タグ 以 下 を 次 のように 変 更 します < body> < font size="5" > < font color="#0000ff" > 銀 河 の 森 高 等 学 校 < /font> < /font> < br> 印 は 追 加 する 部 分 ( 3) 上 書 き 保 存 します [ファイル]-[ 上 書 き 保 存 ]をクリックします ( 4) index.html をダブルクリックして ブラウザから 表 示 させて 確 認 してみましょう 学 校 名 が 大 きくなっていることを 確 認 してください タグを 覚 えよう5 [ 書 式 ] < font size=" " >~< /font> 文 字 フォントの 大 きさを 変 更 する ( 注 ) 開 始 タグ< font size ~>から 終 了 タグ< /font>で 囲 まれた 文 字 フォントの 大 きさを 変 えます には1~7までの7 段 階 で 指 定 することができ 1を 指 定 すると 最 も 小 さな 文 字 7を 指 定 す ると 最 も 大 きな 文 字 を 表 示 できます -9-
7 水 平 線 ページの 内 容 を 区 切 る 際 に よく 水 平 線 で 区 切 る 場 合 があります それでは 実 際 にページ 内 に 水 平 線 を 挿 入 してみましょう ( 1) index.html ファイル をメモ 帳 で 開 きます ( 2) 以 下 のタグを 加 えます < font color="#ff0000" > 0123-45-6789 < /font> < hr> < /body> < /html> 印 は 追 加 する 部 分 ( 3 ) 上 書 き 保 存 します [ファ イル]-[ 上 書 き 保 存 ]を クリックします ( ) をダブルクリックして ブラウザから 表 示 させて 確 認 してみましょう 4 index.html 電 話 番 号 の 下 に 水 平 線 が 入 っていることを 確 認 してください -10-
タグを 覚 えよう6 [ 書 式 ] < hr> 水 平 線 を 表 示 します ( 注 )このタグには 終 了 タグがありません 以 下 のような 詳 細 な 設 定 をすることができます < hr> くぼんだ 線 < hr noshade> くぼみのない 線 < hr size="5" > 太 さが5ドットの 線 < hr width="30%" > ページの 30 %の 幅 の 線 < hr width="200" > 200 ドットの 幅 の 線 < hr width="30%" align="left" > ページの 30 %の 幅 の 線 ( 左 寄 せ) 課 題 演 習 3 水 平 線 を 右 図 のように 加 えて 見 ましょう < memo> -11-
8 リンクの 設 定 HTML 文 書 の 最 大 の 特 徴 は 関 連 するページにジャンプできることです この 機 能 をリンク 機 能 といいます それでは リンクの 設 定 をしてみましょう サブページの 作 成 ジャンプするサブページを 先 に 作 成 してみましょう ( 1 ) メモ 帳 を 開 き [ファイル]-[ 新 規 ]で 新 しいページを 開 きます ( 2) 以 下 のタグを 入 力 します < html> < head> < title >サブページ< /title> < /head> < body> サブページ < /body> < /html> 印 は 新 規 入 力 部 分 ( 3) [ファイル]-[ 名 前 を 付 けて 保 存 ]をクリックして ファイル 名 を[ sub.html]に 変 更 して 保 存 します これでジャ ンプ 先 のページが 完 成 です リンクの 設 定 index.html ファイル 内 にリンク 設 定 をしてみましょう ( 1) index.html ファイルを メモ 帳 で 開 きます ( 2) メニューとなる 以 下 の 文 字 列 を 加 えます < hr> 次 のページへ < /body> < /html> -12-
( 3) リンク 設 定 となる 次 のタグを 加 えます < hr> < a href="sub.html" > 次 のページへ< /a> < /body> < /html> ( 4) 上 書 き 保 存 をします [ ファイル] -[ 上 書 き 保 存 ]をクリックしま す ( 5) index.html をダブルクリ ックして ブラウザから 表 示 させ て 確 認 してみましょう リンク 設 定 された 文 字 ( 次 のページへ ) にアンカー( 下 線 )が 入 っている ことを 確 認 してください また そのアンカーをクリックして サ ブページが 表 示 されることを 確 認 してください タグを 覚 えよう7 [ 書 式 ] < ahref=" " >~< /a> リンク 設 定 をします ( 注 ) 開 始 タグ< a ~>と 終 了 タグ< /a>で 囲 まれた 文 字 列 ( 画 像 でも 可 )にリンク 設 定 をします なお リンク 先 のページを 表 示 する 方 法 の 指 定 を 以 下 のようにすることができます < a href=" " target="_blank" > 新 しいウィンドウで 表 示 < a href=" " target="_self" > 現 在 表 示 されているウィンドウに 表 示 課 題 演 習 4 先 に 作 成 したサブページ( sub.html)から TOP ページ( index.html)へリンクの 設 定 をしてみましょう その 際 に リンク 先 のページは 現 在 表 示 しているウィンドウ 内 に 表 示 で きるようにしましょう -13-
HTML の 基 礎 Ⅰ まとめ ページタイトル < title >~< /title> 水 平 線 < hr> 文 字 サイズ < font size=" " >~< /font> 文 字 色 < font color=" " >~< /font> リンク 設 定 < ahref=" " >~< /a> チェックリスト 1 項 目 はい いいえ メモ 帳 を 開 くことができる [スタート]-[すべてのプログラム]-[アクセサリ]-[メモ 帳 ] 2 拡 張 子 を html として ファイルを 保 存 できる [ファイル]-[ 名 前 を 付 けて 保 存 ] 3 4 5 6 7 8 9 文 字 を 入 力 することができる 文 字 を 改 行 することができる < br> 段 落 を 設 定 することができる < p >~< /p> ページタイトルを 設 定 することができる < title >~< /title> 文 字 の 色 を 設 定 することができる < font color=" " >~< /font> 文 字 のサイズを 設 定 することができる < font size=" " >~< /font> 水 平 線 を 挿 入 することができる < hr> 10 リンクを 設 定 することできる < ahref=" " >~< /a> -14-