Web ページ 作 成 2011/ 5/31 Web ページとは IT 用 語 事 典 e-words より Web ページ web page 読 み 方 : ウェブページ WWW システムを 使 ってインターネット 上 で 公 開 されている 文 書 Web ブラウザに 一 度 に 表 示 されるデータのまとまりで テキストデータや HTML によるレイアウト 情 報 文 書 中 に 埋 め 込 まれた 画 像 や 音 声 動 画 などから 構 成 される インターネット 上 では 本 のよう に 複 数 の Web ページをひとまとめに 公 開 するのが 普 通 で そのような Web ページのまとま りを Web サイトという Web サイトは 本 の 表 紙 や 目 次 に 当 たるトップページ(ホームペ ージ)とそこからリンクされた 他 の Web ページで 構 成 される 情 報 発 信 の 道 具 として Web ページは 使 われる Webページと 言 っても 目 的 はさまざまである 個 人 の 趣 味 を 扱 ったWebページもあれば 企 業 の 運 営 する 販 売 を 目 的 としたWebペー ジなど Webページの 目 的 も 多 種 多 様 だ Webページの 制 作 ソフトウエアもあり Webページの 作 成 自 体 は 難 しくない ただそのホームページを 多 くの 人 に 見 てもらうこと 継 続 して 見 てもらうことは 容 易 な ことではない ここでは Web ページを 作 ることを 中 心 に 進 める 作 成 手 順 テーマ 設 定 Webページ 作 成 改 善 ファイル 転 送 評 価 公 開 準 備 ( 必 要 なもの) 1.テキストエディタ(メモ 帳 など) 2.ブラウザ(Internet Exprorer など) 1
HTML は 本 来 文 書 の 構 造 を 定 義 文 書 の 見 栄 えはスタイルシートで 記 述 HTML HyperText Markup Language 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ HTML) は ウェブ 上 のドキュメントを 記 述 するためのマークアップ 言 語 である ウェブの 基 幹 的 役 割 を 持 つ 技 術 の 一 つで HTML でマークアップされたドキュメントは ほかのドキュメントへのハイパーリンクを 設 定 できるハイパーテキストであり 画 像 リ スト 表 などの 高 度 な 表 現 力 を 持 つ HTML は 現 在 W3C による 標 準 規 格 であるが 最 近 では 後 継 規 格 である XHTML への 置 き 換 えが 進 められている CSS Cascading Style Sheets 出 典 : フリー 百 科 事 典 ウィキペディア(Wikipedia) Cascading Style Sheets(カスケーディング スタイル シート CSS)とは HTML や XML の 要 素 をどのように 修 飾 ( 表 示 )するかを 指 示 する 仕 様 であり W3C による 勧 告 の 一 つ カスケード スタイル シートとも 呼 ばれる 文 書 の 構 造 と 体 裁 を 分 離 させるとい う 理 念 を 実 現 する 為 に 提 唱 されたスタイルシートの 具 体 的 な 仕 様 の 一 つ CSS は HTML で 表 現 可 能 と 考 えられるデザインの 大 部 分 を 実 現 できる 要 素 を 取 り 入 れつつ 新 たなデザイン 機 能 を 備 える また 以 下 のような 特 徴 を 持 つ ページを 表 示 するメディアに 合 わせてスタイルシートを 切 り 替 えることで メディアご とに 表 示 を 変 化 させることができる 実 習 HTML 準 備 1 実 習 のフォルダを 作 成 する 半 角 で HTML フォルダを 作 成 する 作 成 した 文 書 はすべてこのフォルダに 保 存 する つぎに HTML フォルダの 中 に img フォルダを 作 成 する 画 像 はこの 中 に 保 存 す る 2ファイルの 拡 張 子 を 表 示 するように 設 定 する ツール-フォルダオプション- 表 示 - 登 録 されている 拡 張 子 は 表 示 しない のチェック をはずす 2
実 習 1 test1.htm 基 本 的 な 構 成 <html> <title>ホームページの 練 習 1ページ 目 </title> </head> <body> 初 めてのホームページです </body> </html> 保 存 したらブラウザで 読 み 出 してみる 実 習 2 修 正 <html> <title>ホームページの 練 習 </title> </head> <body> 私 の 初 めてのホームページです </body> </html> ブラウザで 読 み 出 してみる 実 習 3 改 行 私 の 初 めてのホームページです 実 習 4 水 平 線 実 習 5 太 字 私 の 初 めての<b>ホームページ</b>です 実 習 6 文 字 色 red,blue,green 私 の 初 めての<font color=red>ホームページ</font>です 実 習 7 文 字 サイズ(1~7) テキストの 一 部 分 を<font size=5> 大 きな 文 字 </font>にします 実 習 8 斜 体 テキストの 一 部 分 を<i> 斜 体 文 字 </i>にします 3
実 習 9 表 組 (テーブル) <table border=1> <tr><td> </td><td> </td><td> </td></tr> <tr><td> </td><td> </td><td> </td></tr> </table> 実 習 10 リンク 他 のサイト <a href="http://www.yahoo.co.jp/">yahoo!</a> 実 習 11 リンク 他 のページ test2.htm <html> <title>ホームページの 練 習 2ページ 目 </title> </head> <body> <a href=test1.htm> test1.htm にリンクします </a> </body> </html> 実 習 12 画 像 貼 り 付 け img フォルダを 作 成 しその 中 に 画 像 を 保 存 する test.htm に 次 の 行 を 加 える <img src="****-1.jpg" alt="ロゴ1"> 実 習 13 画 像 リンク <a href="test1.htm"><img src="****-1.jpg " border=0 alt="ロゴ1"></a> * 以 上 とほほのWWW 入 門 を 参 考 にしています http://www.tohoho-web.com/www.htm 4
スタイルシート HTML の 構 造 化 HTML の 持 つ 本 来 の 役 割 は 文 書 の 論 理 構 造 をあらわすことである 文 書 (テキスト)に 対 して 見 出 し 段 組 表 リスト リンクなどといった 役 割 をマ ーク 付 けして 文 書 を 構 造 化 することが HTML の 提 供 するメイン 機 能 である 現 在 では HTML を 使 って 見 栄 えを 記 述 することが 普 通 になってしまったがもともと HTML は 見 栄 えではなく 文 書 構 造 のみを 定 義 するマークアップ 言 語 なのである そのため 見 え 方 についてはスタイルシートを 使 うのが 現 在 の 流 れである 見 出 し ページ 内 のいちばん 大 きな 文 字 であるタイトルには<h1>タグを 使 い 以 下 中 見 出 しに <h2>タグ 小 見 出 しに<h3>タグといったように 割 り 当 てていく ページ 内 の 見 出 しの 順 番 や 構 造 を 踏 まえ<h1>タグから 順 番 に 指 定 することで ページの 構 造 がわかりやすくなる 見 出 しは<h1>から<h6>まである スタイルシートとは-Web ページの 見 え 方 を 詳 細 に 設 定 するための 技 術 1HTML 文 書 のサイズを 大 幅 に 縮 小 できる 2 複 数 のページを 一 括 で 管 理 できる 3 緻 密 なデザインを 実 現 できる 4 印 刷 用 携 帯 用 PDA 用 などのさまざまなプラットフォームで 情 報 を 共 有 できる 5 非 推 奨 の HTML タグを 使 わなくてすむ 6アクセシビリティの 向 上 スタイルシートの 記 述 方 法 セレクタ スタイルを 適 用 する 対 象 (スタイルシートを 適 用 したい HTML タグ) プロパティ 色 フォントなど 値 赤 150%など セレクタ{プロパティ: 値 ; h2 { color : red; 1つのセレクタに 複 数 のプロパティを 適 用 することもできる その 場 合 には ; のあとにそのまま プロパティ: 値 を 指 定 する 5
スタイルシートを HTML 文 書 に 適 用 する 方 法 1 埋 め 込 み 式 タグ 内 に<style>タグを 記 述 して スタイルシートを 記 述 する <meta http-equiv= Content-Type content= text/html; charset=shift_jis > <title>コンピュータ 活 用 </title> <style type= text/css > <! p { font-size: 13px; line-hight: 150% --> </style> </head> 2インライン 方 式 <body>タグの 中 にある 個 別 のタグに 対 して 直 接 スタイルシートを 適 用 する <meta http-equiv= Content-Type content= text/html; charset=shift_jis > <body> <h1 style= font-size: 18px;line-heigt: 150% ; >コンピュータ 活 用 </h1> 3 外 部 リンク HTML ファイルとは 別 にスタイルシートのファイルを 用 意 し HTML ファイルからスタイ ルシートのファイルにリンクする タグ 内 の 情 報 として <link>タグでスタイルシートファイルのパス( 場 所 )を 記 述 し スタイルシートファイルへのリンクであることを 示 すために rel 属 性 と type 属 性 も 合 わせて 記 述 する 同 じスタイルを 複 数 ページに 対 して 使 う 場 合 に 便 利 6
[ 実 習 ]CSS インライン 方 式 ( 例 )<h1 style= font-size: 18px;line-heigt: 150% ; >コンピュータ 活 用 </h1> <font size=n>よりも 柔 軟 なフォントサイズを 指 定 する <span style="font-size:20pt"> 大 きなフォント</span> テキストの 背 景 色 を 指 定 する <span style="background:silver"> 背 景 色 </span> 下 線 の 無 いリンクテキストを 表 示 する <a href="xxx.html" style="text-decoration:none">リンク</a> 余 白 の 挿 入 <span style="margin:20px">20px の 余 白 </span> <font size=n>よりも 柔 軟 なフォントサイズを 指 定 する <span style="font-color:#00ff00">フォントの 色 の 指 定 </span> 7
実 習 スタイルシート ここでは 3 外 部 リンク 方 式 で CSS を 適 用 する WEB サーバ リクエスト HTML CSS レスポンス HTML 文 書 <meta http-equiv= Content-Type content= text/html; charset=shift_jis > <title>コンピュータ 活 用 </title> <link href= design.css rel= stylesheet type= text/css > </head> スタイルシートファイル(design.css) p { font-size: 13px ; line-height: 150% ; 記 述 例 h2 { color: red; font-size: 150%; body { color: green; background-color: #DED; 8
201106-1.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>ここにタイトルを 入 れる</title> <link href="20101108.css" rel="stylesheet" type="text/css"> </head> <body> <!-- 見 出 し --> <h1>いちばん 大 きな 見 出 しを 入 れる</h1> <!-- 見 出 し --> <hr> <h2>2 番 目 に 大 きな 見 出 しを 入 れる</h2> <p> 本 文 <br> 本 文 <br> 本 文 </p> <h2>2 番 目 に 大 きな 見 出 し</h2> <p> 本 文 </p> </body> </html> 201106-2.css body { color: green; background-color:#ded; 代 表 的 なブロック 要 素 <h1> ~ <h6> 見 出 しタグ <p> 段 落 タグ <blockquote> 引 用 タグ <ul>,<ol>,<li> リストに 関 するタグ <div> ブロック 要 素 を 作 るタグ 9
*フリーソフトウエア フリーソフトウエアは コンピュータウイルスの 感 染 の 危 険 などセキュリティ 上 の 問 題 からやたらなところから 持 ってこない また 使 用 に 際 しては 著 作 権 上 の 問 題 を 起 こさな いように 注 意 する ez-html 多 彩 な 機 能 を 備 えたタグ 挿 入 型 HTML エディター 1 窓 の 杜 からローカルディスクにダウンロードする http://www.forest.impress.co.jp/lib/inet/homepage/htmleditor/ezhtml.html 10
2 自 己 解 凍 形 式 なのでローカルディスク D の 中 のフォルダ 上 でダブルクリックすると 解 凍 する 解 凍 ( 展 開 ) 先 を 指 定 する 3 新 しくできたフォルダの 中 に 実 行 ファイルがあるのでショートカットを 作 り デスク トップにおく 4デスクトップのショートカットをダブルクリックするとプログラムが 実 行 される 5 表 示 -スペシャルサイドバーの 中 のスタイルシートをチェックする これで スタイル シートの 入 力 でも 使 えるようになる * 通 常 は 以 上 のようにするが 管 理 者 権 限 がないとインストールできないので 講 義 用 Web ページからダウンロードする 11
ez-html を 使 ってみる 1 起 動 する 2ファイル- 新 規 作 成 編 集 - 折 り 返 しの 設 定 [ 実 習 ] 練 習 問 題 1 HTMLとCSSの 構 成 を 確 かめる 12
[HTML] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>コゲラ</title> <link rel="stylesheet" type="text/css" href="kogera.css"> </head> <body> <h1>20101109</h1> <p> 家 を 出 てすぐのことだ <br> 変 わった 鳥 の 鳴 き 声 が 聞 こえた <br>しかも すぐそばだ <br>フェンスとブロック 塀 ではさまれた 細 い 路 地 だったが 足 を 止 めて 声 の 方 向 を 見 た ( 中 略 ) <br> 姿 は 産 毛 のような 柔 らかい 羽 毛 が 多 い 幼 鳥 のようだった <br>ひょっこりと 顔 を 出 した 様 子 がかわいい </p> </body> </html> [CSS] body { background-color:#eee ; width:640px ; margin-left: 200px; h1 { font-size: 100%; color: blue; background: #ccc; p { font-size: small; 13
練 習 問 題 2 HTML CSSを 完 成 させる *ファイル 名 はすべて 半 角 にする ( 全 角 文 字 が 使 えないサーバがある) [body 部 分 CSS] body {background-color: #99FFFF; margin: 5em; h1 {font-size:font-size: x-large; color: #FF3333; p {width: 50%; line-height: 150%; img {float: left; margin-right: 10px; margin-bottom: 10px; /*ボディの 幅 を 指 定 */ body { width: 850px; [ナビバー 部 分 CSS] /*ナビバー*/ li { float: left; margin-right: 5px; margin-left: 0px; background-color: #f0f0f0; border: 1px solid #000; text-align: center; width: 130px; height: 22px; 14