データ解析

Size: px

Start display at page:

Download "データ解析"

せいごろうよしくに
5 years ago
Views:

1 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部

2 情報教育基礎研修会 ( 平成 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 回生 ) 奈良産業大学情報学部奈良県生駒郡三郷町立野北 Tel: Fax: info@io.nara-su.ac.jp Url: 1

3 準備 1 ウェブページの編集手順 1 エディタで開く 1 ブラウザで, メニューの [ 表示 ] をクリックする 1 2 サブメニューの [ ソース ] をクリックする 2 2 編集内容を保存する 1 エディタでウェブページを編集する 2 メニューの [ ファイル ] をクリックする 3 サブメニューの [ 上書き保存 ] をクリックするブラウザの表示を更新する 1 ブラウザで, ツールバーの更新ボタンをクリックする 1 2

4 情報教育基礎研修会 ( 平成 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

5 第 1 部簡単なウェブページの作成目標エディタを使ってウェブページを編集しますウェブページで改行や画像表示などを指示するのがタグですここでは基本的なタグの機能と使い方を学びます 1 作業計画下図のようなウェブページを作るためにファイル index.html を編集しますタイトルバー表示 ( ウェブページ名 ) 画像表示 ( flag.gif ) 背景色の指定画像表示 ( school.jpg ) 改行画像表示 ( mark2.gif ) 改行水平線の表示改行センタリング 4

6 情報教育基礎研修会 ( 平成 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

下図のようなテーブルを作成します図中の数値はセルの横幅を示します (pixel 単位 ) index.html club.

7 第 2 部テーブルを使ったレイアウトの指定目標表を作成するためのタグが <table> ですウェブページでは表そのものを作成するためだけではなく文章や画像のレイアウトを指定するために <table> タグが使われますここでは <table> タグの使い方について学びます 1 作業計画下図のようなテーブルを作成します図中の数値はセルの横幅を示します (pixel 単位 ) index.html club.html テーブルテーブルテーブル 5 テーブルテーブル 3 テーブル 6 図ではわかりやすいようにテーブルの罫線を赤色で表示しています 6

8 情報教育基礎研修会 ( 平成 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

ちょっと賑やかなウェブページを作成してみます 1 作業計画まずリンクスイッチを用意しますウェブページ index.html 1 クラブ活動 club.

9 第 3 部リンクとフリーウェア素材の利用目標 1. リンクスイッチを用意することで関連するウェブページにユーザーを誘導することができますここではリンクスイッチを作成する方法を学びます 2. 文字と写真だけでなくイラストを貼り付けて親しみやすいページにしたいときがありますでも自分でイラストを描くのは大変ですそこでウェブ上で公開されているフリーウェアの素材を利用してちょっと賑やかなウェブページを作成してみます 1 作業計画まずリンクスイッチを用意しますウェブページ index.html 1 クラブ活動 club.html へのリンクスイッチ 2 メールソフトの起動ウェブページ club.html 3 戻る index.html へのリンクスイッチ次にフリーウェアのアイコンをダウンロードし club.html に貼り付けます index.html club.html フリーウェアのアイコンリンクリンクリンク 8

情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 リンクスイッチの設定リンクスイッチ <a href=" リンク先のファイルのパス "> </a> リンク先のファイルのパスはリンク元からの相対パスで指定しますリンク先として下記のようにメールアドレスを指定すると自動的にメールソフトが起動しそのアドレス宛てのメールが作成できます <a href="mailto:

10 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 2 リンクスイッチの設定リンクスイッチ <a href=" リンク先のファイルのパス "> </a> リンク先のファイルのパスはリンク元からの相対パスで指定しますリンク先として下記のようにメールアドレスを指定すると自動的にメールソフトが起動しそのアドレス宛てのメールが作成できます <a href="mailto: 送り先のメールアドレス "> </a> 別のウィンドウを開いてリンク先のウェブページを表示させるには <a href=" リンク先のファイルのパス " target="_blank"> </a> 3 フリーウェア素材の利用サーチエンジンでフリー, アイコンなどをキーワードとして検索するとフリーウェアの素材を公開しているウェブページを見つけることができます本研修では School Icons Club( ) で公開されているフリーウェアのアイコンを利用しますアイコンやイラストをダウンロードする場合はウェブページに掲載されている利用上の注意や利用規約などを読み利用上の制限について確認してくださいダウンロードの方法 1 ダウンロードする画像を右クリックする 2 プルダウンメニューから [ 名前を付けて画像を保存 ] をクリックする 3 保存先のフォルダへ移動し [ 保存 ] ボタンをクリックする 1 2 本研修でダウンロードした画像は i: pic に保存してください 9

第 4 部 Javascript によるイベント処理目標 Javascript を使うとユーザーのアクション ( 例えばクリック ) に応じて表示内容を変えることができますここでは Javascript によるイベント処理の方法について学びます 1 作業計画学校案内, クラブ活動, 保護者の方へ

11 第 4 部 Javascript によるイベント処理目標 Javascript を使うとユーザーのアクション ( 例えばクリック ) に応じて表示内容を変えることができますここでは Javascript によるイベント処理の方法について学びます 1 作業計画学校案内, クラブ活動, 保護者の方へのリンクスイッチをポイントしたとき各リンクスイッチの左側にある画像を mark2.gif( 青 ) から mark1.gif( 赤 ) に変えますまたリンクスイッチからポイントが外れたとき mark1.gif( 赤 ) から mark2.gif( 青 ) に戻します mark2.gif mark1.gif mark2.gif クラブ活動をポイントしたとき 10

12 情報教育基礎研修会 ( 平成 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

13 補遺 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 ファイルのアップロード概要本学のウェブサーバに

フォルダをダブルクリックする 2 アップロード 1 デスクトップのをダブルクリックする 2 ホーム内のファイルとフォルダをドラッグし

14 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 補遺 2 HTML ファイルのアップロード概要本学のウェブサーバに HTML ファイルをアップロードし外部に公開してみましょう 1 ウェブサーバを開く 1 デスクトップのをダブルクリックする 2 アドレスに ftp://neumann.io.nara-su.ac.jp/ を入力し [Enter] キーを押す 3 ユーザ名とパスワードを入力し [ ログイン ] ボタンをクリックするフォルダをダブルクリックする 2 アップロード 1 デスクトップのをダブルクリックする 2 ホーム内のファイルとフォルダをドラッグし 1 で開いたウェブサーバに落とす... ファイルのコピー 2 3 ブラウザで表示する 1 ブラウザのアドレスにユーザ名 / を入力し [Enter] キーを押す 1 13

15 資料 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"> 奈良県生駒郡三郷町奈良産業中等学校 Tel (56) nsj@ ac.jp </center> </body> </html> 14

16 情報教育基礎研修会 ( 平成 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

17 資料 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"> 奈良県生駒郡三郷町奈良産業中等学校 Tel (56) nsj@ ac.jp </center> </body> </html> 16

18 情報教育基礎研修会 ( 平成 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

19 資料 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"> 奈良県生駒郡三郷町奈良産業中等学校 Tel (56)-7890 <a href="mailto:nsj@ ac.jp"> nsj@ ac.jp </a> </center> </body> </html> 18

20 情報教育基礎研修会 ( 平成 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

21 資料 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

22 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) <hr width="350" size="1" color="#008888"> 奈良県生駒郡三郷町奈良産業中等学校 Tel (56)-7890 <a href="mailto:nsj@ ac.jp"> nsj@ ac.jp </a> </center> </body> </html> club.html( 変更なし ) 21

23 資料 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"> 奈良県生駒郡三郷町奈良産業中等学校 Tel (56)-7890 <a href="mailto:nsj@ ac.jp"> nsj@ ac.jp</a> </center> </body> </html> 22

24 情報教育基礎研修会 ( 平成 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

25 奈良産業大学情報学部奈良県生駒郡三郷町立野北 Tel: Fax: Url: ( 大学本部 ) ( 情報学部 ) 24

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ

(3) 本文を書く実際にページを開いたときに表示される本文を書いてみましょうからの間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存するここで一度ページを保存してみましょうテキストエ 1. はじめの準備 (1) フォルダの作成ホームページ作成の基礎これから作るホームページのデータをホームページ用として保存 ( 保管 ) するフォルダを作成しますホームページで使う作成したファイル画像写真音楽などファイルはすべて同じフォルダに保存しますデスクトップやマイドキュメントの中 ( 任意 ) で右クリック新規作成 (N) フォルダ (F) で新しいフォルダができます (