情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30 ~ 10:40 1 簡単なウェブページの作成 1032 教室 10:50 ~ 12:10 2 テーブルを使ったレイアウトの指定 同上 12:10 ~ 13:00 昼食 13:00 ~ 14:20 3 リンクとフリーウェア素材の利用 1032 教室 14:30 ~ 15:30 4 Javascript によるイベント処理 同上 15:30 ~ 15:40 まとめ 同上 講師大西菊太郎 ( 情報学部教授 ) 講師向井厚志 ( 情報学部助教授 ) 補助員大野功二 ( 情報学部 4 回生 ) 奈良産業大学情報学部 636-8503 奈良県生駒郡三郷町立野北 3-12-1 Tel: 0745-73-7800 Fax: 0745-72-0822 E-mail: info@io.nara-su.ac.jp Url: http://www.nara-su.ac.jp/ 1
準備 1 ウェブページの編集手順 1 エディタで開く 1 ブラウザで, メニューの [ 表示 ] をクリックする 1 2 サブメニューの [ ソース ] をクリックする 2 2 編集内容を保存する 1 エディタでウェブページを編集する 2 メニューの [ ファイル ] をクリックする 3 サブメニューの [ 上書き保存 ] をクリックする 2 3 3 ブラウザの表示を更新する 1 ブラウザで, ツールバーの更新ボタン をクリックする 1 2
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 準備 2 ウェブページの基本構造 1 ウェブページの特徴 エディタを使ってウェブページを作成する場合 ワープロとは異なり 改行位置には改行命令 を記入し 画像を貼り付けるには画像表示用の命令を記入する必要があります こうした命令の ことをタグと呼びます 2 タグの基本構造 タグは半角英字で表記され 必ず < と > で囲まれています タグには 大きく分けて次の 2 種類が存在します (a) < タグ名 > (b) < タグ名 > </ タグ名 > 記入された箇所に作用するタグ [ 例 ] 改行 囲まれた範囲内に作用するタグ [ 例 ] <font size="+3"> 文字サイズ指定 </font> 3 ウェブページの基本構造 <html> <head> <title> </title> タイトルバー ヘッダ情報 <script> </script> Javascript ウェブページ <style> </style> </head> 書式定義 本文 <body> </body> </html> ブラウザに表示される文章 必ずしも <head> </head> に書く必要はありませんが 一般にこの位置に記述されます 3
第 1 部 簡単なウェブページの作成 目標 エディタを使って ウェブページを編集します ウェブページで改行や画像表示などを指示す るのがタグです ここでは 基本的なタグの機能と使い方を学びます 1 作業計画 下図のようなウェブページを作るために ファイル index.html を編集します タイトルバー表示 ( ウェブページ名 ) 画像表示 ( flag.gif ) 背景色の指定 画像表示 ( school.jpg ) 改行 画像表示 ( mark2.gif ) 改行 水平線の表示 改行 センタリング 4
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 基本的なタグ 1 ウェブページの範囲 <html> </html> 2 ヘッダ情報の範囲 <head> </head> 3 タイトルバー表示 <title> タイトルバーの文字 </title> 4 本文の範囲 <body> </body> オプションとして 背景色が指定できます <body bgcolor="#rrggbb"> </body> ここで rr = 赤色の強さ (00~ff:16 進数 ) gg = 緑色の強さ (00~ff:16 進数 ) bb = 青色の強さ (00~ff:16 進数 ) 5 改行 6 画像表示 <img src=" 画像ファイルのパス "> 画像ファイルのパス は相対パスで指定します 本研修で flag.gif の場合 <img src="pic/flag.gif"> 7 文字サイズの変更 <font size=" 文字サイズ "> </font> 文字サイズ に符号付きの数字 (+1 など ) を指定すると 相対的なサイズ 変更となります 符号がない場合は 絶対的な文字サイズの指定です 8 水平線 <hr> オプションとして 水平線の長さ, 太さ, 色が指定できます <hr width=" 長さ " size=" 太さ " color="#rrggbb" > 9 センタリング <center> </center> 5
第 2 部 テーブルを使ったレイアウトの指定 目標 表を作成するためのタグが <table> です ウェブページでは 表そのものを作成するためだけではなく 文章や画像のレイアウトを指定するために <table> タグが使われます ここでは <table> タグの使い方について学びます 1 作業計画 下図のようなテーブルを作成します 図中の数値は セルの横幅を示します (pixel 単位 ) index.html club.html テーブル 1 50 300 100 200 100 テーブル 4 100 200 200 12 150 テーブル 5 テーブル 2 100 200 200 テーブル 3 テーブル 6 図では わかりやすいようにテーブルの罫線を赤色で表示しています 6
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 テーブルの基本構造 ソース例 <table> セル A セル B セル C セル D セル E セル F そのブラウザ表示 セル A セル B セル C セル D セル E セル F 1 テーブルの範囲 <table> オプションとして 罫線の太さ, セルの余白サイズが指定できます <table border=" 太さ " cellpadding=" 余白サイズ "> 2 行の開始 3 セルの範囲 オプションとして セルの横幅, セル内の文字や画像の配置が指定できます <td width=" 横幅 " align=" 横の配置 " valign=" 縦の配置 "> ここで 横の配置 : left( 左寄せ ),center( 中央 ),right( 右寄せ ) 縦の配置 : top( 上寄せ ),middle( 中央 ),bottom( 下寄せ ) オプションとして 隣接するセルを結合することができます <table> セル A セル B <td colspan="2"> セル C <table> <td rowspan="2"> セル A セル B セル C セル A セル C セル B セル A セル B セル C 7
第 3 部 リンクとフリーウェア素材の利用 目標 1. リンクスイッチを用意することで 関連するウェブページにユーザーを誘導することができます ここでは リンクスイッチを作成する方法を学びます 2. 文字と写真だけでなく イラストを貼り付けて親しみやすいページにしたいときがあります でも 自分でイラストを描くのは大変です そこで ウェブ上で公開されているフリーウェアの素材を利用して ちょっと賑やかなウェブページを作成してみます 1 作業計画 まず リンクスイッチを用意します ウェブページ index.html 1 クラブ活動 club.html へのリンクスイッチ 2 E-mail メールソフトの起動ウェブページ club.html 3 戻る index.html へのリンクスイッチ次に フリーウェアのアイコンをダウンロードし club.html に貼り付けます index.html club.html フリーウェアのアイコン リンク リンク リンク 8
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 リンクスイッチの設定 リンクスイッチ <a href=" リンク先のファイルのパス "> </a> リンク先のファイルのパス は リンク元からの相対パスで指定します リンク先として 下記のようにメールアドレスを指定すると 自動的にメール ソフトが起動し そのアドレス宛てのメールが作成できます <a href="mailto: 送り先のメールアドレス "> </a> 別のウィンドウを開いて リンク先のウェブページを表示させるには <a href=" リンク先のファイルのパス " target="_blank"> </a> 3 フリーウェア素材の利用 サーチエンジンで フリー, アイコン などをキーワードとして検索すると フリーウェアの素材を公開しているウェブページを見つけることができます 本研修では School Icons Club( http://www.schoolicons.com/ ) で公開されているフリーウェアのアイコンを利用します アイコンやイラストをダウンロードする場合は ウェブページに掲載されている 利用上の注 意 や 利用規約 などを読み 利用上の制限について確認してください ダウンロードの方法 1 ダウンロードする画像を右クリックする 2 プルダウンメニューから [ 名前を付けて画像を保存 ] をクリックする 3 保存先のフォルダへ移動し [ 保存 ] ボタンをクリックする 1 2 本研修でダウンロードした画像は i: pic に保存してください 9
第 4 部 Javascript によるイベント処理 目標 Javascript を使うと ユーザーのアクション ( 例えば クリック ) に応じて表示内容を変える ことができます ここでは Javascript によるイベント処理の方法について学びます 1 作業計画 学校案内, クラブ活動, 保護者の方へ のリンクスイッチをポイントしたとき 各リンク スイッチの左側にある画像を mark2.gif( 青 ) から mark1.gif( 赤 ) に変えます また リンク スイッチからポイントが外れたとき mark1.gif( 赤 ) から mark2.gif( 青 ) に戻します mark2.gif mark1.gif mark2.gif クラブ活動 をポイントしたとき 10
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 リンクスイッチに対するイベントを拾う リンクスイッチのタグ <a> に イベント名とイベント発生時に実行する関数を記入します <a href=" リンク先 " onmouseover=" 関数 A( 引数 )" onmouseout=" 関数 B( 引数 )"> </a> リンクスイッチをポイントした リンクスイッチからポイントが外れた 3 画像の識別 イベント発生時に変更する画像を特定するために <img> タグに識別子を設定します <img src=" 画像ファイル " name=" 識別子 "> 4 関数 イベント発生時に呼び出される関数を ヘッダ情報として記述します <script language="javascript"> function 関数名 ( 引数 ) { 命令文 ; 関数 } </script> Javascript の記述範囲 画像を変更する命令文 1 上記 3 の識別子を直接使用する場合 <img> タグの識別子.src = " 画像ファイルのパス "; 2 上記 2 で 関数の引数に上記 3 の識別子を指定した場合 引数.src = " 画像ファイルのパス "; 11
補遺 1 スタイルによる書式設定 概要 <style> タグを使うと ブラウザの [ 文字のサイズ ] を変更しても 文字サイズを一定に保つこ とができます レイアウトを崩したくない場合に利用します 1 スタイルの定義 文字サイズや文字色などの書式を ヘッダ情報として記述します <style>. クラス名 { 設定項目 A: 設定値 ; 設定項目 B: 設定値 ; } </style> 例えば 以下で定義されたクラス a は 24 ポイント ( 文字サイズ ), 青色 ( 文字色 ),MS P ゴシック ( フォント ) を示します <style>.a { font-size:24pt; color:#0000ff; font-family:"ms P ゴシック " } </style> 下記のような定義を行なうと リンクスイッチの文字列をポイントしたときの文字色を 指定することができます <style> a:hover { color:#rrggbb } </style> 2 スタイルの指定 本文中で class オプションを使用してスタイルを指定します テーブルで使用する場合 <td class=" クラス名 "> <a> タグで使用する場合 <a class=" クラス名 "> </a> 12
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 補遺 2 HTML ファイルのアップロード 概要 本学のウェブサーバに HTML ファイルをアップロードし 外部に公開してみましょう 1 ウェブサーバを開く 1 デスクトップの をダブルクリックする 2 アドレスに ftp://neumann.io.nara-su.ac.jp/ を入力し [Enter] キーを押す 3 ユーザ名とパスワードを入力し [ ログイン ] ボタンをクリックする 2 3 4 フォルダ をダブルクリックする 2 アップロード 1 デスクトップの をダブルクリックする 2 ホーム内のファイルとフォルダをドラッグし 1 で開いたウェブサーバに落とす... ファイルのコピー 2 3 ブラウザで表示する 1 ブラウザのアドレスに http://www.io.nara-su.ac.jp/ ユーザ名 / を入力し [Enter] キーを押す 1 13
資料 1 第 1 部のソース例 ( 簡単なウェブページの作成 ) index.html <html> <head> <title> 奈良産業中等学校 </title> </head> <body bgcolor="#aaffff"> <center> <img src="pic/flag.gif"> <font size="+3"> 奈良産業中等学校 </font> <img src="pic/school.jpg"> <img src="pic/mark2.gif"> 学校案内 <img src="pic/mark2.gif"> クラブ活動 <img src="pic/mark2.gif"> 保護者の方へ <hr width="350" size="1" color="#008888"> 123-456 奈良県生駒郡三郷町 1-2-3 奈良産業中等学校 Tel. 1234-(56)-7890 E-mail nsj@123456.ac.jp </center> </body> </html> 14
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) club.html( 変更なし ) <html> <head> <title> 奈良産業中等学校 - クラブ活動 -</title> </head> <body bgcolor="#aaffff"> <center> <font size="+3" color="#0000ff"> クラブ活動 </font> <hr width="500" size="1" color="#008888"> 美術部 <img src="pic/art.jpg"> あれや これを描いてます <hr width="500" size="1" color="#008888"> 工作部 <img src="pic/model.jpg"> あれや これを作ってます <hr width="500" size="1" color="#008888"> 戻る </center> </body> </html> 15
資料 2 第 2 部のソース例 ( テーブルを使ったレイアウトの指定 ) index.html <html> <head><title> 奈良産業中等学校 </title></head> <body bgcolor="#aaffff"> <center> <td width="50"> <img src="pic/flag.gif"> <td width="300"> <font size="+3"> 奈良産業中等学校 </font> <td colspan="2"> <img src="pic/school.jpg"> <table border="0" cellpadding="3"> <td width="12"> <img src="pic/mark2.gif"> <td width="150"> 学校案内 <img src="pic/mark2.gif"> クラブ活動 <img src="pic/mark2.gif"> 保護者の方へ <hr width="350" size="1" color="#008888"> 123-456 奈良県生駒郡三郷町 1-2-3 奈良産業中等学校 Tel. 1234-(56)-7890 E-mail nsj@123456.ac.jp </center> </body> </html> 16
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) club.html <html> <head><title> 奈良産業中等学校 - クラブ活動 -</title></head> <body bgcolor="#aaffff"> <center> <td width="100" align="center">? <td width="200" align="center"> <font size="+3" color="#0000ff"> クラブ活動 </font> <td width="100" align="center">? <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2">? <td width="200" valign="top"> <font size="+2"> 美術部 </font> <td width="200" valign="top" align="center" rowspan="2"> <img src="pic/art.jpg"> <td valign="top"> あれや これを描いてます <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2">? <td width="200" valign="top"> <font size="+2"> 工作部 </font> <td width="200" valign="top" align="center" rowspan="2"> <img src="pic/model.jpg"> <td valign="top"> あれや これを作ってます <hr width="500" size="1" color="#008888"> 戻る </center> </body> </html> 17
資料 3 第 3 部のソース例 ( リンクとフリーウェア素材の利用 ) index.html <html> <head><title> 奈良産業中等学校 </title></head> <body bgcolor="#aaffff"><center> <td width="50"><img src="pic/flag.gif"> <td width="300"><font size="+3"> 奈良産業中等学校 </font> <td colspan="2"><img src="pic/school.jpg"> <table border="0" cellpadding="3"> <td width="12"> <img src="pic/mark2.gif"> <td width="150"> <a href="#"> 学校案内 </a> <img src="pic/mark2.gif"> <a href="club.html"> クラブ活動 </a> <img src="pic/mark2.gif"> <a href="#"> 保護者の方へ </a> <hr width="350" size="1" color="#008888"> 123-456 奈良県生駒郡三郷町 1-2-3 奈良産業中等学校 Tel. 1234-(56)-7890 <a href="mailto:nsj@123456.ac.jp"> E-mail nsj@123456.ac.jp </a> </center> </body> </html> 18
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) club.html <html> <head><title> 奈良産業中等学校 - クラブ活動 -</title></head> <body bgcolor="#aaffff"><center> <td width="100" align="center"> <img src="pic/boy01_1.gif"> <td width="200" align="center"> <font size="+3" color="#0000ff"> クラブ活動 </font> <td width="100" align="center"> <img src="pic/girl01_1.gif"> <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2"> <img src="pic/sketch2.gif"> <td width="200" valign="top"> <font size="+2"> 美術部 </font> <td width="200" valign="top" align="center" rowspan="2"> <img src="pic/art.jpg"> <td valign="top"> あれや これを描いてます <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2"> <img src="pic/scissors_r.gif"> <td width="200" valign="top"> <font size="+2"> 工作部 </font> <td width="200" valign="top" align="center" rowspan="2"> <img src="pic/model.jpg"> <td valign="top"> あれや これを作ってます <hr width="500" size="1" color="#008888"> <a href="index.html"> <img src="pic/cj_back.gif" border="0"> </a> </center> </body> </html> 19
資料 4 第 4 部のソース例 (Javascript によるイベント処理 ) index.html <html> <head> <title> 奈良産業中等学校 </title> <script language="javascript"> function over(x) { x.src = "pic/mark1.gif"; } function out(x) { x.src = "pic/mark2.gif"; } </script> </head> <body bgcolor="#aaffff"> <center> <td width="50"> <img src="pic/flag.gif"> <td width="300"> <font size="+3"> 奈良産業中等学校 </font> <td colspan="2"> <img src="pic/school.jpg"> <table border="0" cellpadding="3"> <td width="12"> <img name="s1" src="pic/mark2.gif"> <td width="150"> <a href="#" onmouseover="over(s1)" onmouseout="out(s1)"> 学校案内 </a> <img name="s2" src="pic/mark2.gif"> <a href="club.html" onmouseover="over(s2)" onmouseout="out(s2)"> クラブ活動 </a> <img name="s3" src="pic/mark2.gif"> <a href="#" onmouseover="over(s3)" onmouseout="out(s3)"> 保護者の方へ </a> 20
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) <hr width="350" size="1" color="#008888"> 123-456 奈良県生駒郡三郷町 1-2-3 奈良産業中等学校 Tel. 1234-(56)-7890 <a href="mailto:nsj@123456.ac.jp"> E-mail nsj@123456.ac.jp </a> </center> </body> </html> club.html( 変更なし ) 21
資料 5 補遺 1 のソース例 ( スタイルによる書式設定 ) index.html <html> <head> <title> 奈良産業中等学校 </title> <style> a:hover { color:#ff0000 }.a { font-size:24pt; color:#000000; font-family:"ms P ゴシック " }.b { font-size:12pt; color:#000000; font-family:"ms P ゴシック " } </style> <script language="javascript"> function over(x) { x.src = "pic/mark1.gif"; } function out(x) { x.src = "pic/mark2.gif"; } </script> </head> <body bgcolor="#aaffff"><center> <td width="50"><img src="pic/flag.gif"> <td width="300" class="a"> 奈良産業中等学校 <td colspan="2"><img src="pic/school.jpg"> <table border="0" cellpadding="3"> <td width="12"><img name="s1" src="pic/mark2.gif"> <td width="150" class="b"> <a href="#" onmouseover="over(s1)" onmouseout="out(s1)"> 学校案内 </a> <img name="s2" src="pic/mark2.gif"> <td class="b"> <a href="club.html" onmouseover="over(s2)" onmouseout="out(s2)"> クラブ活動 </a> <img name="s3" src="pic/mark2.gif"> <td class="b"> <a href="#" onmouseover="over(s3)" onmouseout="out(s3)"> 保護者の方へ </a> <hr width="350" size="1" color="#008888"> <td class="b"> 123-456 奈良県生駒郡三郷町 1-2-3 奈良産業中等学校 Tel. 1234-(56)-7890 <a href="mailto:nsj@123456.ac.jp"> E-mail nsj@123456.ac.jp</a> </center> </body> </html> 22
情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) club.html <html> <head> <title> 奈良産業中等学校 - クラブ活動 -</title> <style>.a { font-size:24pt; color:#0000ff; font-family:"ms P ゴシック " }.b { font-size:18pt; color:#000000; font-family:"ms P ゴシック " }.c { font-size:12pt; color:#000000; font-family:"ms P ゴシック " } </style> </head> <body bgcolor="#aaffff"><center> <td width="100" align="center"><img src="pic/boy01_1.gif"> <td width="200" align="center" class="a"> クラブ活動 <td width="100" align="center"><img src="pic/girl01_1.gif"> <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2"> <img src="pic/sketch2.gif"> <td width="200" valign="top" class="b"> 美術部 <td width="200" align="center" valign="top" rowspan="2"> <img src="pic/art.jpg"> <td valign="top" class="c"> あれや これを描いてます <hr width="500" size="1" color="#008888"> <td width="100" valign="top" align="center" rowspan="2"> <img src="pic/scissors_r.gif"> <td width="200" valign="top" class="b"> 工作部 <td width="200" align="center" valign="top" rowspan="2"> <img src="pic/model.jpg"> <td valign="top" class="c"> あれや これを作ってます <hr width="500" size="1" color="#008888"> <a href="index.html"><img src="pic/cj_back.gif" border="0"></a> </center> </body> </html> 23
奈良産業大学情報学部 636-8503 奈良県生駒郡三郷町立野北 3-12-1 Tel: 0745-73-7800 Fax: 0745-72-0822 E-mail: info@io.nara-su.ac.jp Url: http://www.nara-su.ac.jp/ ( 大学本部 ) http://www.io.nara-su.ac.jp/ ( 情報学部 ) 24