情 報 処 理 C (P.1) 情 報 処 理 C (2016 年 度 ) ホームページ 作 成 入 門 テキストエディタ(メモ 帳 TeraPad など)でHTMLファイルを 作 成 する HTML(Hyper Text Markup Language ) ホームページを 記 述 するための 言 語 のこと テキストエディタの 起 動 (TeraPad の 場 合 ) [スタート]-[プログラム]-[テキストエディタ]-[TeraPad] をクリック 入 力 サンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ホームページの 練 習 </title> </head> Welcome to My Homepage </body> </html> HTMLの 基 本 構 成 <html> <head> などをタグと 呼 ぶ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>タイトル</title> </head> </html> </body> 本 文 ----> HTML ファイルの 開 始 (HTML5 の 文 書 型 宣 言 ) ----> ヘッダ 部 文 字 コードの 種 類 やタイトルを 入 れる スタイルシートを 入 れることも 可 能 ----> ボディ 部 ホームページの 本 文 を 入 れる ----> HTML ファイルの 終 了 HTML の 最 新 バージョンは HTML5 HTML5 の 文 字 コードは Unicode( 文 字 エンコーディングで UTF-8 を 指 定 する) インデントを 使 って 字 下 げをすると 見 やすくなる
HTMLファイルを 保 存 する 情 報 処 理 C (P.2) TeraPad のメニュー [ファイル]-[ 名 前 を 付 けて 保 存 ] 保 存 する 場 所 マイドキュメントの 中 のフォルダ 保 存 するファイル 名 たとえば myweb.html ( 注 )1.ファイル 名 は 半 角 の 英 数 字 続 けてピリオド(.)と 拡 張 子 (html)を 付 ける ( 日 本 語 の 名 前 を 付 けてはいけない) 2.トップページの 名 前 は index.html と 付 けるのが 一 般 的 である 文 字 コードの 指 定 方 法 TeraPad メニュー [ファイル]-[ 文 字 / 改 行 コード 指 定 保 存 ] 文 字 コードの 中 から UTF-8 を 選 択 して OK をクリックする ブラウザの 表 示 とHTMLの 更 新 ホームページの 表 示 保 存 したフォルダの 中 にある xxxxx.html をダブルクリックする ホームページの 更 新 手 順 (1)テキストエディタ(TeraPad)を 開 き HTML ファイルを 修 正 する (2) 上 書 き 保 存 する (3)ブラウザの 更 新 ボタンをクリックする ホームページを 公 開 する( 文 教 大 学 のキャンパス 内 への 公 開 ) ホームページの 公 開 作 成 したホームページ(HTML ファイル)をデスクトップ 上 の HTML Home フォルダにコピーする (このフォルダにコピーした 時 点 で キャンパス 内 に 公 開 されます) 公 開 したページのブラウジング 次 の URL を 入 力 すると ホームページを 見 ることができる 1 トップページ(index.html)の 場 合 http://www.shonan.bunkyo.ac.jp/~bxn11xxx/ 2 それ 以 外 のページの 場 合 http://www.shonan.bunkyo.ac.jp/~bxn11xxx /HTML ファイル 名
タグの 基 本 ルール 情 報 処 理 C (P.3) タグとは <html> <head> のように 文 字 列 を< >で 囲 んだもの a. 必 ず 半 角 で 書 く ただし 大 文 字 と 小 文 字 の 区 別 はない <HTML> と <html> はどちらでもOK b. 開 始 タグと 終 了 タグがある スラッシュ(/) 付 きのタグを 終 了 タグという 開 始 タグから 終 了 タグまでが1つのまとまり <head> ~ </head> など c. 複 数 のタグの 包 含 関 係 タグの 中 に 別 のタグを 書 くときは 完 全 に 内 側 に 含 めるように 書 く ( 正 しい) ( 誤 り) <b>あああ <b>あああ <i>いいい <i>いいい </i> </b> </b> </i> d. 単 独 タグ 一 部 のタグには 終 了 タグがないものがある(タグを 単 独 で 用 いる) 改 行 タグ <br> 画 像 タグ <img> 水 平 線 <hr> など e. 改 行 の 意 味 テキストエディタ 上 で 改 行 しても ブラウザでは 改 行 されないことに 注 意 文 字 を<i> 一 部 だけ 斜 体 に</i>します 文 字 を <i> 一 部 だけ 斜 体 に</i> します 文 字 を 一 部 だけ 斜 体 にします 文 字 を 一 部 だけ 斜 体 に します 改 行 されない ホームページ 上 の 文 字 を 改 行 したい 場 合 は <br>タグを 入 れる 文 字 を<i> 一 部 だけ<br> 斜 体 に</i>します 文 字 を<br> <i> 一 部 だけ<br> 斜 体 に</i> します 文 字 を 一 部 だけ 斜 体 にします 文 字 を 一 部 だけ 斜 体 に します
HTMLの 主 な 構 成 要 素 情 報 処 理 C (P.4) 見 出 しと 段 落 hnタグ(nは1~6)とpタグ <h2>お 知 らせ 情 報 </h2> <p> 第 3 回 オープンキャンパスを 9 月 18 日 ( 日 )に 開 催 いたします 皆 様 のご 参 加 を お 待 ちしています </p> お 知 らせ 情 報 第 3 回 オープンキャンパスを 9 月 18 日 ( 日 )に 開 催 いたします 皆 様 のご 参 加 を お 待 ちしています 表 (テーブル) <table border="1" > <tr><th>まる</th><th>さんかく</th></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> ( 基 本 形 ) まる さんかく テーブルに 関 するいろいろな 設 定 線 の 太 さ(border) テーブル 内 の 背 景 色 (bgcolor) テーブルの 幅 (width) テーブルの 高 さ(height) 文 字 の 配 置 (align="center") など 行 の 指 定 (row) <tr> ~ </tr> 見 出 しの 指 定 (header) <th> ~ </th> セルの 指 定 (data) <td> ~ </td> 画 像 の 表 示 img タグ <img src="campus.jpg" alt="キャンパスの 全 景 写 真 " width="85" height="110"> src="xxxxxxxxxx" 画 像 ファイルの 名 前 (source) alt="xxxxxxxxxx" 画 像 データの 説 明 文 字 (alternate) width と height 画 像 の 幅 と 高 さ リンク a タグ <a href="xxxxxxxxxx">リンク 文 字 </a> 外 部 のサイトへジャンプするとき <a href="http://www.bunkyo.ac.jp/"> 文 教 大 学 のページ</a> サイト 内 のファイルへジャンプするとき <a href="photo.html"> 写 真 館 のページ</a> 文 教 大 学 のページ 写 真 館 のページ クリックして ジャンプ クリックして ジャンプ
スタイルシート(CSS)という 考 え 方 情 報 処 理 C (P.5) スタイルシート(Cascading Style Sheets)とは ウェブページのデザインや 装 飾 を 定 義 記 述 するためのもの スタイルシートを 利 用 するメリット 文 字 や 画 像 の 配 置 行 間 などを 細 かく 設 定 することができる ページの 内 容 (コンテンツ)とデザイン( 見 栄 え)を 別 々に 管 理 することができる デザインの 変 更 を 一 括 して 行 えるため ページの 管 理 が 楽 になる (スタイルシートの 例 ) <style type="text/css"> <!-- h2 { color : #ffffff ; text-align: center ; background-color : navy ; } p { line-height : 150% ; font-weight : bold ; } --> </style> 見 出 し(h2)の 文 字 白 色 センタリング 紺 色 の 網 かけ 文 章 (p)の 文 字 行 間 150% 太 文 字 (bold) <h2>お 知 らせ 情 報 </h2> <p> 第 3 回 オープンキャンパスを 9 月 18 日 ( 日 )に 開 催 いたします 皆 様 のご 参 加 をお 待 ちしています </p> </body> お 知 らせ 情 報 第 3 回 オープンキャンパスを 9 月 18 日 ( 日 )に 開 催 いたします 皆 様 のご 参 加 をお 待 ちしています
対 話 型 ページを 作 る ( 入 力 フォーム) 情 報 処 理 C (P.6) フォームを 使 うことで 対 話 型 のページを 作 成 できる <html> <head><title>フォームの 作 成 </title> </head> <h3> いろいろな 入 力 フォーム</h3> <form> ボタン<br> <input type="button" value=" 青 色 "> <input type="button" value=" 赤 色 "> <input type="button" value=" 白 色 "> <input type="button" value=" 緑 色 "> テキスト 入 力 ボックス<br> 名 前 :<input type="text" value="bunkyo" size="30"> パスワード 入 力 ボックス<br> パスワード:<input type="password"> ラジオボタン<br> 性 別 : <input type="radio" name="seibetu"> 男 <input type="radio" name="seibetu" checked> 女 学 年 : <input type="radio" name="gakunen" checked>1 年 <input type="radio" name="gakunen">2 年 <input type="radio" name="gakunen">3 年 <input type="radio" name="gakunen">4 年 チェックボックス<br> 趣 味 : <input type="checkbox" checked> 読 書 <input type="checkbox" checked> 音 楽 鑑 賞 <input type="checkbox" checked>パソコン <input type="checkbox">スポーツ <br> セレクトボックス<br> <select> <option> 青 色 </option> <option> 赤 色 </option> <option> 白 色 </option> <option> 緑 色 </option> </select> </form> </body></html>