HTML文章作成

HTML 文 章 作 成 Web ページは HTML(Hyper Text Markup Language) という 言 語 を 使 っ て 欠 かれた HTML ファイルでできています ここでは 簡 単 な HTML 文 章 を 実 際 につくっていきます 参 考 文 献 :エクスナレッジ HTML とスタイルシートによる Web サイト 作 成 術 1. 簡 単 なホームページをつくりましょう 1-1. html 用 フォルダの 作 成 D: home users Administrator の 中 に public_html という 名 前 のフォルダ を 作 成 する 1-2. html ファイルの 作 成 TeraPad でファイルを 新 規 作 成 (デスクトップ 上 の TeraPad をダブルク リックする) 枠 線 で 囲 まれた 内 容 を 記 述 する 終 わったら 保 存 する 保 存 先 は D: home users Administrator public_html で ファイル 名 は index.html とする ファイルの 確 認 をする ただし 現 在 の Windows の 設 定 では 拡 張 子 を 省 略 してファイルを 表 示 しています Web ページを 正 しく 作 成 するために 拡 張 子 を 含 んだファイル 名 を 表 記 する 必 要 があります < 拡 張 子 を 表 示 する 方 法 > (1) フォルダウインドウのメニューバーの ツール から フォルダオプション を 開 く (2) 表 示 タブを 選 択 する (3) 登 録 されている 拡 張 子 は 表 示 しない という 項 目 のチェックをはずす OK ボタンを 押 す [ 基 本 的 なタグ] :このファイルが html ファイルであることを 意 味 します :HTML 文 章 に 関 する 情 報 を 指 定 する 部 分 です <title>*** </title> :***に ページタイトルを 書 きます この 内 容 がブラウザ の 上 でに 表 示 され お 気 に 入 り(ブックマーク) の 名 前 等 に 使 用 されます :HTML 文 章 の 本 体 を 記 述 する 範 囲 を 指 定 します この 範 囲 1

に ブラウザのウインドウ 内 に 表 示 される 内 容 を 記 述 します タグは 一 つの HTML ファイルに 一 度 のみ との 間 に 記 述 します <br>: 改 行 (ファイルの 中 で 改 行 しても 表 示 の 際 には 改 行 されません ) <hr>: 水 平 線 <pre> </pre>:この 間 に 記 述 した 内 容 は 改 行 やスペースを 含 めてそのまま 表 示 される <b> </b>:この 間 に 記 述 した 内 容 は 太 字 で 表 示 される <a href= URL >***</a>: URL へのリンクの 記 述 表 示 されるのは***の 部 分 <h1> </h1>: 文 字 の 大 きさの 指 定 <h1>から<h6>まであり 数 字 が 小 さいほ ど 大 きくなります <p> </p>: 段 落 であることを 示 すタグです 長 い 文 章 を 段 落 わけするごとに <p>~</p>で 囲 むと それぞれの 別 の 段 落 という 扱 いになります <title>your Name s Portal</title> The Portal by Your Name. <br> <hr> <pre> <b>[ 検 索 エンジン]</b> <a href= http://www.google.co.jp/ >Googleへ</a> <a href= http://www.yahoo.co.jp/ >Yahooへ</a> <b>[ 大 学 ]</b> <a href= http://www.tohoku-gakuin.ac.jp/ > 東 北 学 院 へ</a> </pre> 1-3. ブラウザを 使 ってページを 確 認 index.html をダブルクリックする 内 容 を 確 認 する 2

1-4. Mozilla Firefox のデフォルトページに 指 定 する a) 一 度 Mozilla Firefox を 閉 じます b) 作 成 した index.html をクリックして(Mozilla Firefox で) 開 きます c) ツール オプション を 選 択 する オプション ウィンドウが 開 く 左 側 フレームにある 全 般 と 書 かれたボタンをクリックする d) 右 側 のフレーム 内 の ホームページ 枠 内 の 現 在 のページを 使 用 ボタン をクリックする OK ボタンをクリックする e) ファイル 終 了 を 選 択 して Mozilla Firefox を 終 了 する f) 確 認 のため もう 一 度 Mozilla Firefox を 起 動 する 自 分 のページが 表 示 さ れれば OK です (デスクトップ 上 の Mozilla Firefox をボタンをダブル クリックする または スタート メニューから Mozilla Firefox をク リックする ) g) Mozilla Firefox は 開 いたままで 次 に 進 んでください 2. 内 容 を 修 正 しましょう TeraPad での HTML 文 章 の 入 力 保 存 更 新 ( 再 読 み 込 み) a) 起 動 :[スタート] [すべてのプログラム] [TeraPad] [TeraPad]を 選 択 b) ファイル 開 く で index.html を 選 択 します c) 内 容 を 変 更 します <a href= http://www.tohoku-gakuin.ac.jp/ > 東 北 学 院 大 学 </a>の 次 の 行 に <a href= http://www.cs.tohoku-gakuin.ac.jp/gakubu4/html/index.html > 教 養 学 部 へ</a> と 書 いてください d) HTML 文 章 の 保 存 :メニューバーの[ファイル] [ 上 書 き 保 存 ]を 選 択 する e) Mozilla Firefox の 再 読 み 込 みします ( 左 右 に 矢 印 があるボタンをクリック) f) Windows を 一 旦 シャットダウンし Linux を 立 ち 上 げましょう Mozilla Firefox を 立 ち 上 げて index.html を 開 きましょう g) このページを 現 在 のホームページとしましょう(Windows と 同 様 な 方 法 ) h) Mozilla Firefox と index.html を 閉 じましょう i) Linux をシャットダウンして Windowd に 戻 りましょう 3. 改 行 スペースはどのように 表 示 されるの? D: home users Administrator public_html の 中 に test.html という 名 前 のファイルを 作 成 する 3

a) 起 動 :[スタート] [すべてのプログラム] [TeraPad] [TeraPad]を 選 択 b) 枠 線 で 囲 まれた 内 容 を 記 述 する <title> タイトル </title> <p > 本 文 </p> c) test.html という 名 前 で 保 存 する d) Mozilla Firefox で test.html を 開 いて 内 容 を 確 認 する タグの 前 後 で 改 行 しても 表 示 結 果 は 変 わりません e) test.html を 以 下 のように 変 更 してみよう <title>かぐや 姫 </title> <p>たけとりのおじいさんがきらきらひかる 竹 を 見 つけました </p> <p > たけとりのおじいさんが きらきらひかる 竹 を 見 つけました </p> 4

f) test.html を 保 存 して Mozilla Firefox で 開 いてみよう 本 文 中 の 改 行 はスペースに 置 き 換 えられる g) test.html を 以 下 のように 変 更 してみよう <title> 全 角 / 半 角 スペースをどう 表 示 されるか</title> <p>[ ] 半 角 スペース 1 個 の 空 き</p> <p>[ ] 半 角 スペース 4 個 の 空 き( 半 角 スペースに 1 個 に 置 き 換 えられる) </p> <p>[ ] 全 角 スペース 1 個 の 空 き</p> <p>[ ] 全 角 スペース 4 個 の 空 き</p>(そのまま 表 示 される) h) test.html を 保 存 して Mozilla Firefox で 開 いてみよう i) test.html を 以 下 のように 変 更 してみよう <title> 未 対 応 なタグ</title> <p> <ruby> 桃 太 郎 <rt>ももたろう</ruby> </p> j) test.html を 保 存 して Mozilla Firefox で 開 いてみよう 5

ブラウザが 未 対 応 のタグ(<ruby>,<rt>)の 場 合 ブラウザは 無 視 して 表 示 します k) test.html を 以 下 のように 変 更 してみよう <title>タイトル</title> <p> 本 文 </p> <-- 本 文 終 わり--> <!-- <p>コメントのタグに 囲 まれた 部 分 </p> --> l) test.html を 保 存 して Mozilla Firefox で 開 いてみよう ブラウザに 表 示 されないメモを 入 れるときは <!-- -->で 囲 む 4. HTML の 基 本 を 復 習 しましょう 開 始 タグと 終 了 タグで 意 味 を 指 定 する 範 囲 を 決 める HTML では ここからここまでが HTML 文 章 である といった 指 定 を などのタグで 行 います 指 定 する 範 囲 の 前 後 に 開 始 タグ と 終 了 タグ を 記 述 すれば 指 定 は 完 了 です ここで 開 始 タグから 終 了 タグまでの 範 囲 を 要 素 と 呼 び タグで 囲 まれ た 範 囲 を 内 容 と 呼 びます 例 えば <title> 第 一 章 </title> は 全 体 が title 要 素 第 一 章 の 部 分 が title 要 素 の 内 容 にあたります タグとタグは 入 れ 子 構 造 になるよう 記 述 する HTML では 開 始 タグ 終 了 タグを 入 れ 子 にするのがルールです 例 えば ~ と2つの 開 始 タグを 記 述 したら 終 了 タグは ~ の 順 で 記 述 します が HTML 文 章 の 基 本 的 な 構 造 を 作 る 6

,,の3つのタグは HTML ファイルの 最 も 基 本 的 な 構 造 を 作 っています ~ に HTML 文 章 そのものの 情 報 を ~に HTML 文 章 の 具 体 的 な 内 容 をそれぞれ 記 述 し これら2つ のタグは~の 範 囲 に 記 述 する という 構 造 です 属 性 と 属 性 値 index.html 内 の <a href= http://www.cs.tohoku-gakuin.ac.jp > という 部 分 は a という 要 素 名 と それに 関 する 細 かな 指 定 から 成 り 立 っています このようにタグの 中 に 書 かれる 細 かい 指 定 は 属 性 と 属 性 値 といいます [href]が 属 性 で http://www.cs.tohoku-gakuin.ac.jp が 属 性 値 です 属 性 値 は (ダブルコーテーション)で 繰 り 返 します 注 意 :<p>は 前 後 に 一 行 あけるタグ ではありません 一 般 的 なブラウザは <p>~</p>タグの 前 後 に 一 行 あけて 表 示 されます この ことから <p>タグは 前 後 に 一 行 空 けるタグである と 誤 解 されがちですが <p> タグはあくまで 段 落 を 定 義 するタグ です 一 行 空 けて 表 示 されるのは ブ ラウザが 段 落 を 段 落 らしく 表 示 しようとした 結 果 です 段 落 の 前 後 に 行 があか ないようにするにはスタイルシートのところで 記 述 します 5. 画 像 をリンクし その 画 像 の 大 きさを 変 えてみよう a) ftp.cs.tohoku-gakuin.ac.jpの/tg-local/notepc/notepc2005/htmlフォル ダから 2005 フォルダを D: users Administrator Public_html フォ ルダにダウンロードする b) kyoyo_text.txt と izumicampus.jpg を 一 つ 上 のフォルダ (D: users Administrator Public_html)にコピーする c) kyoyo_text.txt を TeraPad で 開 く d) 以 下 のように 変 更 して 名 前 を 付 けて 保 存 する で ファイル 名 は test1.html とする e) Mozila Firefox で test1.html を 開 く f) TeraPad 上 で 図 (ファイル 名 :izumicampus.jpg)で 読 み 込 む <h1> 教 養 学 部 へようこそ</h1> の 次 の 行 に 以 下 を 挿 入 する <img src= izumicampus.jpg > g) Mozilla Firefox で 再 読 み 込 みする 図 の 上 にマウスを 移 動 しても 何 も 変 化 がないことを 確 認 する h) <img src= izumicampus.jpg > を <img src= izumicampus.jpg alt= 泉 キャンパス > に 変 更 する 7

i) Mozilla Firefox で 再 読 み 込 みする 図 の 上 にマウスを 移 動 した 結 果 をみる j) <img src= izumicampus.jpg alt= 泉 キャンパス > を <img src= izumicampus.jpg alt= 泉 キャンパス width= 200 height= 175 > に 変 更 する k) Mozilla Firefox で 再 読 み 込 みする <title> 教 養 学 部 </title> <h1> 教 養 学 部 へようこそ</h1> <h2> 教 養 学 部 の 理 念 </h2> <p> 発 足 して 16 年 教 養 学 部 はまだ 若 芽 のような 瑞 々しい 学 部 です この 学 部 が 2005 年 に 大 きな 飛 躍 を 遂 げます 専 攻 に 昇 格 する 人 間 科 学 科 言 語 文 化 学 科 情 報 科 学 科 に 加 え 新 たに 地 域 構 想 学 科 を 設 置 します 少 人 数 教 育 によるきめ 細 かい 指 導 を 通 して 培 ったこれまでの 研 究 教 育 の 成 果 を 地 域 という 具 体 的 な 場 で 検 証 し 種 々の 連 携 を 模 索 しようと 思 います </p> <p> 教 養 学 部 は 学 科 間 の 敷 居 も 低 く 諸 学 問 を 交 流 させて 学 びの 視 野 を 広 げる 機 会 が 豊 富 です これまで 以 上 に 多 彩 な 学 問 群 に 出 会 い 豊 かで 深 い 教 養 の 果 実 を 実 らせてもらいたいと 願 っています </p> <h2> 教 養 学 部 の 構 成 </h2> <p> 情 報 科 学 科 <br> 言 語 文 化 学 科 <br> 人 間 科 学 科 <br> 地 域 構 想 学 科 <br></p> <hr> 8

6. 箇 条 書 きの 作 り 方 a) test1.html を 以 下 のように 変 更 してみよう 情 報 科 学 科 から 地 域 構 想 学 科 までを 以 下 のように 変 更 する b) test1.html を 保 存 して Mozilla Firefox で 開 いてみよう <ol> </ol>: 番 号 入 りのリストを 定 義 します <li> </li>:リストの 各 行 を 定 義 します c) <ol>を<ul>にかえてみよう <title> 教 養 学 部 </title> <h1> 教 養 学 部 へようこそ</h1> <img src= izumicampus.jpg alt= 泉 キャンパス > <h2> 教 養 学 部 の 理 念 </h2> <p> 発 足 して 16 年 教 養 学 部 はまだ 若 芽 のような 瑞 々しい 学 部 です この 学 部 が 2005 年 に 大 きな 飛 躍 を 遂 げます 専 攻 に 昇 格 する 人 間 科 学 科 言 語 文 化 学 科 情 報 科 学 科 に 加 え 新 たに 地 域 構 想 学 科 を 設 置 します 少 人 数 教 育 によるきめ 細 かい 指 導 を 通 して 培 ったこれまでの 研 究 教 育 の 成 果 を 地 域 という 具 体 的 な 場 で 検 証 し 種 々の 連 携 を 模 索 しようと 思 います </p> <p> 教 養 学 部 は 学 科 間 の 敷 居 も 低 く 諸 学 問 を 交 流 させて 学 びの 視 野 を 広 げる 機 会 が 豊 富 です これまで 以 上 に 多 彩 な 学 問 群 に 出 会 い 豊 かで 深 い 教 養 の 果 実 を 実 らせてもらいたいと 願 っています </p> <h2> 教 養 学 部 の 構 成 </h2> <ol> <li> 情 報 科 学 科 </li> <li> 言 語 文 化 学 科 </li> <li> 人 間 科 学 科 </li> <li> 地 域 構 想 学 科 </li> </ol> <hr> 9

7. index.html に お 気 に 入 り の Web ページを 追 加 していみよう 例.( 自 分 なりにアレンジしてください) <title>your Name s Portal</title> The Portal by Your Name. <br> <hr> <pre> <b>[ 検 索 エンジン]</b> <a href= http://www.google.co.jp/ >Googleへ</a> <a href= http://www.yahoo.co.jp/ >Yahooへ</a> <b>[ 大 学 ]</b> <a href= http://www.tohoku-gakuin.ac.jp/ > 東 北 学 院 へ</a> <a href= http://www.cs.tohoku-gakuin.ac.jp/gakubu4/html/index.html > 教 養 学 部 へ</a> <b>[お 気 に 入 り]</b> <a href= http://www.asahi.com/ > 朝 日 新 聞 へ</a> </pre>!!ここでひとまず 終 了!! 次 はスタイルシートを 学 びます 10