Lecture/CompPracR2003/12th 2016 年 7 月 17 日 コンピュータ 演 習 ( 再 ) 第 12 回 (1) Webページの 作 成 (1) Webページを 作 成 する 道 具 (1) テキストエディタを 使 うメリット デメリット (2) HTML (2) HTMLとは (2) HTMLの 書 き 方 (3) HTMLファイルの 構 造 (3) 空 白 と 改 行 の 扱 い (4) 記 号 の 入 力 (4) HTML 文 書 の 作 成 (4) 雛 形 の 作 成 (4) 見 出 し (5) 段 落 と 改 行 (5) 文 書 の 装 飾 (6) 箇 条 書 き (6) リンク (7) 署 名 (7) 参 考 リンク (8) 授 業 のページへ 戻 る コンピュータ 演 習 ( 再 ) 第 12 回 Webページの 作 成 Webページを 作 成 する 道 具 アプリケーションソフト ワープロソフトなど 本 来 は 別 の 目 的 に 使 用 するソフトの 中 には 簡 単 なWebページを 作 る ための 機 能 があるものがあります ホームページ 作 成 ソフト Webページを 作 成 専 用 のソフトで 作 成 編 集 するためのさまざまな 機 能 をもっています また サーバへのデータの 転 送 や 画 像 データの 作 成 編 集 機 能 がある 高 機 能 なものもあり ます Lecture/CompPracR2003/12th - 1
テキストエディタ Webページはテキストファイルですので 専 用 のソフトがなくても 作 成 することができま す Windowsの メモ 帳 やMacintoshの Simple Text でも 十 分 作 成 することができます テキストエディタを 使 うメリット デメリット HTML メリット HTMLなどのWWWに 関 する 技 術 の 勉 強 になる 余 計 なデータが 勝 手 に 書 き 込 まれない( 見 やすいファイル) ブラウザによる 表 示 の 違 いなどを 意 識 して 作 成 できる デメリット HTMLなどのWWWに 関 する 技 術 をある 程 度 理 解 する 必 要 がある 作 業 に 慣 れるまで 作 るのに 時 間 がかかる 専 用 ソフトとは 違 い... HTMLを 自 分 で 入 力 しなければならない 入 力 中 に 出 来 上 がりを 確 認 できない(ソフトの 切 り 替 えが 必 要 ) HTMLとは Hyper Text Markup Languageの 略 で Webページを 作 るためのコンピュータ 言 語 文 書 にマーク(タグ)をつけて... 文 章 の 意 味 ( 役 割 )を 指 定 から までを 見 出 しにする 表 示 のしかたを 指 定 から までを 太 字 にする ハイパーリンクを 設 定 ほかのファイルへジャンプする HTMLの 例 HTML(<b>や</b>は 太 字 というタグ) これは<b>HTML</b>のサンプルです ブラウザで 表 示 これはHTMLのサンプルです ファイル 名 は 必 ず 半 角 文 字 で 拡 張 子 は.html か.html 2 - コンピュータ 演 習 ( 再 ) 第 12 回
HTMLの 書 き 方 タグ(tag) 文 章 に 意 味 や 表 示 の 仕 方 を 指 定 するために 使 うマークを 使 う < と > で 囲 まれた 文 字 列 (タグ 名 ) タグ 名 は 半 角 文 字 で 大 文 字 と 小 文 字 の 区 別 なし 開 始 タグ(<...>)と 終 了 タグ(</...>)で 囲 まれた 部 分 が 指 定 される <h1> 今 回 の 内 容 </h1> 終 了 タグのないものもある <hr>, <br> タグの 入 れ 子 ができる 字 下 げを 使 って タグの 組 み 合 わせがわかりやすく <body> <p> この 中 は<b> 段 落 </b>です </p> </body> 属 性 (attribute) タグの 機 能 を 細 かく 設 定 するもの( 属 性 のないタグもある) 文 字 の 大 きさや 色 線 の 太 さや 色 など 複 数 の 属 性 を 指 定 することができる( 属 性 名 =" 値 ") これは<font size="5" color="red"> 重 要 </font>です HTMLファイルの 構 造 HTMLファイルの 構 造 は たいてい 次 のようになっています <html> <head> <title>タイトル</title> </head> <body> コンテンツ </body> </html> <html>...</html>(html 要 素 ) そのファイルがHTML 文 書 であることを 示 す <head>...</head>(ヘッダ 要 素 ) HTML 文 書 の 情 報 ( 本 でいえば 題 名 や 著 者 発 行 日 など) Lecture/CompPracR2003/12th - 3
<title>...</title> Webページのタイトル 名 (タイトルバーに 表 示 ) <body>...</body>(ボディ 要 素 ) Webページとして 表 示 される 内 容 (コンテンツ) 空 白 と 改 行 の 扱 い 空 白 半 角 スペースは 何 文 字 入 力 しても ブラウザでは 一 文 字 の 空 白 文 字 として 表 示 全 角 スペースは 入 力 した 数 だけの 空 白 文 字 ( 全 角 )としてて 表 示 改 行 <br>タグで 改 行 する 位 置 を 指 定 する HTMLファイルの 中 で 改 行 しても ブラウザでは 一 文 字 の 空 白 文 字 として 表 示 ここで 改 行 します<br>ここで 改 行 します 記 号 の 入 力 < は > などは タグなどのHTMLが 使 用 する 記 号 とみなされてしまいます そこで 次 の ようにして 一 部 の 記 号 を 入 力 します 記 号 HTMLでの 入 力 < < > > & & " ( 空 白 ) HTML 文 書 の 作 成 雛 形 の 作 成 まず Webページを 保 存 するフォルダを 作 成 しましょう マイドキュメント の 中 に public_html というフォルダを 作 成 してください メモ 帳 を 使 って 次 のような 雛 形 を 作 りましょう 4 - コンピュータ 演 習 ( 再 ) 第 12 回
見 出 し <html> <head> <title>welcome tomywebpage!</title> </head> <body> </body> </html> <title>...</title> Webページのタイトルを 設 定 します タイトルに わたし の 街 と 設 定 してください <hn>...</hn>(nには1 6の 数 字 が 入 る) 見 出 しを 設 定 します 大 きさが 最 も 大 きいh1から 最 も 小 さいh6までの6 段 階 あります 本 で 例 えると h1は 題 名 や 章 見 出 し h2は 節 見 出 し h3は 項 見 出 し 次 のように 見 出 しを 設 定 しましょう <h1> わたし の 街 </h1> <h2>はじめに</h2> <h2>メニュー</h2> 段 落 と 改 行 <p>...</p> 段 落 を 設 定 します ひとまとまりの( 意 味 のある) 文 章 に 使 います 改 行 や 連 続 した 半 角 文 字 の 空 白 は 半 角 文 字 の 空 白 一 文 字 にしかならないことに 注 意 し ましょう <br> 改 行 を 設 定 します 段 落 のなかで 強 制 的 に 改 行 するときに 使 います <h2>はじめに</h2> のあとに 次 のように 入 力 しましょう <p>このwebページは コンピュータ 演 習 の 授 業 で 作 成 したものです </p> <h2>メニュー</h2> のあとに 次 のように 入 力 しましょう( には 自 分 の 名 前 や 出 身 地 を 入 力 ) Lecture/CompPracR2003/12th - 5
<p> ここでは わたし が 育 った<br> 県 市 について 紹 介 します </p> </body> の 前 の 行 に 区 切 り 線 を 入 れましょう 文 書 の 装 飾 <b>...</b> 太 字 を 設 定 します <i>...</i> 斜 体 を 設 定 します <hr> 指 定 した 行 に 区 切 り 線 ( 水 平 線 )を 設 定 します 自 分 の 名 前 や 出 身 地 の 名 前 を 太 字 や 斜 体 に 設 定 してみましょう <b> 兵 庫 太 郎 </b>, <i> 兵 庫 県 加 古 川 市 </i> 箇 条 書 き <ul>...</ul> <ol>...</ol> 箇 条 書 きを 設 定 します ulタグは 番 号 なし olタグは 番 号 つきの 箇 条 書 きに 使 います <li>...</li> 箇 条 書 きの 中 の 項 目 を 設 定 します liタグは 次 のようにul olのタグの 中 の 項 目 に 使 います <ol> <li>ひとつめ</li> <li>ふたつめ</li> </ol> <dl>...</dl>, <dt>...</dt>, <dd>...</dd> 説 明 つき 箇 条 書 きを 設 定 します dlタグの 中 に 項 目 名 (dtタグ)とその 説 明 (ddタグ)を 書 きます <dl> <dt> 項 目 1</dt> <dd> 項 目 1の 説 明 </dd> <dt> 項 目 2</dt> <dd> 項 目 2の 説 明 </dd> </dl> ついて 紹 介 します </p> のあとに 次 のように 入 力 しましょう 6 - コンピュータ 演 習 ( 再 ) 第 12 回
<ul> <li> わたし について</li> <li> 街 について</li> <li> わたし と 街 </li> </ul> リンク 署 名 <a href="...">...</a> 他 のWebページにジャンプするリンクを 設 定 します href=" と " の 間 にリンク 先 のURLを 指 定 し "> と </a> の 間 にリンクさせ る 文 字 を 設 定 します 次 のようにすると Yahoo! JAPAN にジャンプします <ahref="http://www.yahoo.co.jp/">yahoo! JAPAN</a> 次 のようにすると メーラーが 起 動 して hoge@aaa.bbb.cc.jpへのメールを 送 るウィンド ウが 開 きます <ahref="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ <hr> の 下 の 行 に 次 のように 大 学 のサイトへのリンクを 設 定 しましょう <ahref="http://www.hyogo-dai.ac.jp/"> 兵 庫 大 学 のペー 箇 条 書 きの 項 目 に 次 のようなリンクを 設 定 してください わたし について:prefile.htmlへのリンク 街 について:town.htmlへのリンク わたし と 街 :memory.htmlへのリンク <address>...</address> 制 作 者 の 名 前 やメールアドレスなどの 連 絡 先 著 作 権 に 関 する 情 報 を 設 定 します </body>の 前 の 行 に 次 のように 入 力 してください( は 自 分 のメールアドレス) <hr> <address> 制 作 年 月 日 :2003-12-17; 更 新 年 月 日 :2003-12-17<br> <ahref="mailto: "> ^</a> </address> Lecture/CompPracR2003/12th - 7
参 考 リンク とほほのWWW 入 門 http://tohoho.wakusei.ne.jp/ Academic HTML http://www.tg.rim.or.jp/~hexane/ach/ The Quick Color Table http://www.kanzaki.com/docs/colortable-t.html 0からHTML http://www.zerokara.com/html/ 8 - コンピュータ 演 習 ( 再 ) 第 12 回