Microsoft PowerPoint kiso.ppt

Size: px

Start display at page:

Download "Microsoft PowerPoint kiso.ppt"

なごみのしろ
5 years ago
Views:

1 基礎情報処理 (F) 第 11 回 ( 最終回 ) 資料 Web ページの作成と公開 (2) 担当者 : 高久雅生 2007 年 7 月 7 日 ( 土 ) masao@nii.ac.jp 1

2 事務連絡課題 4 7 月 6 日時点で 48 名から提出 ( 全員に受領通知済み ) 提出済みにも関わらず受領通知のなかった者は必ず授業時間中に申し出て確認を受けること遅れ提出も受け付けるので必ず提出のこと講義本日が最終授業日になります 7 月 10 日に設定されている代替講義日は休講 2

3 前回のおさらい前回は HTML の基本と Web ページの公開方法を演習した HTML とは?( タグなど ) メモ帳によるHTMLファイルの記述作成 Webページとしての公開 3

4 本日のお品書き引き続き Web ページの作成を演習しますリンクの作成いくつかのタグを使ったHTML 作成最終課題として各自のWebページを作成する課題を出します 4

5 IE で表示する (HTML を自動的に解釈 ) HTML で記述する 5

6 メモ帳で HTML を書いてみよう! 最も基本的な構成 : 1 <html> 2 <head> 3 <title> 基礎情報処理 </title> 4 </head> 5 <body> 6 <h1> 基礎情報処理を学ぶにあたって </h1> 7 <p> 簡単な Web ページの作り方を演習します </p> 8 </body> 9 </html> 6

7 リンクとは? リンク (link) ハイパーリンク (hyperlink) WWW の基礎となる概念あるページから関連する別ページを参照ページ同士を結び付ける方法ブラウザは通常リンクをクリックすることでリンク先にジャンプする典型的には : 下線付きの青色文字列 ( アイコンが指の形になる ) 7

8 リンクとは?(2) アンカー (anchor) リンクを張ったときの始点終点文字列画像始点リンクの単位ページ間リンクページ内リンクページA リンクの種類画像リンク終点メールアドレスなどの他メディアでのリンクページ B 8

9 ページ間リンクページ同士でリンクを張る始点ページ A ページ B =終点 9

10 ページ内リンク同一ページ内の特定箇所にリンクを張る別ページの特定箇所にリンクを張る始点始点終点終点ページ A ページ A ページ B 10

11 URL URL: Uniform Resource Locator リンク先を指定するときのアドレス WWW で一意になるようなアドレス絶対指定 ( 絶対 URL) 相対指定 ( 相対 URL) ( 同じ階層にあるファイルを指定 ) link.html./profile.html ( 上の階層にあるファイルを指定 )../index.html../../top.html 11

12 リンクを張るには a タグ ( アンカータグ ) を使う : href 属性にURLを入れタグの中身に文字列を入れるとそのURLへのリンクを指定文字列で張ったことになる例 : <a href= > 慶應大学 </a> URL リンク文字列 12

13 ファイルと URL の関係基本的にはファイル名がそのまま URL に埋め込まれる例 : ただし index.html というファイル名は特別な扱いフォルダ内にこのファイル名のものがある場合 /( スラッシュ ) で終わるようなそのフォルダへのアクセスにおいては index.html の内容が表示される ( 場合によっては index.htm) つまり以下の 2 つの URL では同一の内容が表示される

14 その他のタグ指定など文字修飾用のタグ : <font></font> 文字の色を変える : <font color= red > 文字 </font> 文字のフォントサイズを変える : <font size= 3 > 文字 </font> 箇条書き : <ul><li>...</ul> <ul> <li>6 月 30 日 :Web ページ作成第一回 <li>7 月 7 日 :Web ページ作成第二回 </ul> ( 番号付き箇条書きの場合は <ol><li>... </ol>) 14

15 練習 test.html から外部 Web サイトへのリンクを張ってみよう <body> タグ内に以下のような記述を追加する : <h2> リンク </h2> <ul> <li><a href= > 慶應義塾大学 </a> <li><a href= > 基礎情報処理 </a> <li><a href= index.html >Top</a> </ul> test.html をブラウザで開いてリンクがきちんと辿れることを確認する 16

16 課題 5: 内容自分のサイトとなるようなWebページを作成し公開する Webページには最低限以下の内容を含むこと : 自己紹介リンク集また最低一つ以上の画像ファイルを張り付けたページを必ず設けること画像を用意できない人は以前紹介したフリー画像素材のサイトなどを利用するなお日吉の各自のWebページ用スペースにはあらかじめテスト用の index.html と sample.jpg が置かれているこれらの内容を書き換えることで各自のWebサイトを作成することができるなお外部へ公開しても大丈夫な内容であること ( 著作権を侵害していない表現や内容に問題がない大学生として恥ずかしくない内容に責任が持てる等 ) を確認すること考察 1: 自分の HTML 文書の作成方針考察 2: 自分の HTML 文書に対する評価 ( 他の Web ページとの比較など ) 参照文献参考文献 18 感想コメント

17 課題 5: 提出方法〆切〆切 : 7 月 21 日 ( 土 ) 提出先 : メールで masao@nii.ac.jp まで件名 : [kiso-f report5] 学籍番号本文には以下を必ず明記のこと学籍番号氏名公開した Web ページ URL レポート考察内容等は本文にそのまま記載するか Word 等にまとめる Word 等の場合は report5- 学籍番号.doc のようなファイル名としてメールに添付すること Web ページの内容を確認するので少なくとも 7 月末までは公開しておくこと 19

18 ( 補足 ) Web で公開する内容は世界中に向けて公開するものであるため不適切な内容を公開したり不用意な個人情報を出すことは避けましょう住所や電話番号は書かないよう注意課題で提出された各自の公開ページには授業ページからリンクを張る場合もあります 20

19 まとめ今日は Web ページの作成の演習 (2) を行ったリンクの作成方法本授業全体を通じて Windows PC を使う上での基礎的な利用法の向上を目的とした PC はあくまでも道具であり ( 道具そのものを研究対象とするのではない限り ) 習うよりも慣れることが肝要本授業では最低限の利用法に親しんでもらう目的で演習と課題を組み合わせ手を動かしてもらうことを優先して授業を行ってきたさらなる情報については日吉 ITC のマニュアル等を参照してほしい 21

20 本日の出席授業担当者 ( 高久 ) 宛にメールを送ってください : 宛先は masao@nii.ac.jp 件名 (Subject) は [kiso-f ] 学籍番号 ( 上記の件名はすべて半角英数字にしてください ) 内容 : 氏名学籍番号授業の感想 ( これまでの授業全体を振り返っての感想コメントも歓迎します ) 22

21 付録 ( 課題 4 講評 ) 課題 4 の評価返却を行います以下のような要件を満たさないものがありました : 画像の添付がないウィンドウ単位のスクリーンショットとなっていない 4 種類 4 形式分全てのデータが記載されていない考察がないファイルサイズが一定要件を満たさないと判断したものについては減点対照としました詳細な分析例は付表 ( グラフ ) を参照のことなお実験結果を見るため画像を貼付したファイルをメールで提出するよう求めましたが BMP など非圧縮形式の場合はファイルサイズが巨大となってしまいメール送信が拒絶されるなどの現象も発生したようです今回はあくまで演習授業の課題ということでメールを使用しましたがあまり巨大なデータをメールで送るのはエチケットに反しますので注意してください圧縮形式のファイルを送ったり数回に分けて送るなどするようにしてください 23

22 画像幅高さ面積 JPEG PNG GIF BMP 圧縮率 JPEG 圧縮率 PNG 圧縮率 GIF 圧縮率 BMP ( 元画像 ) ,844,949 8,065,144 1,036,561 15,116, % 46.6% 79.4% 0.0% ( 加工後 ) ,691 55,849 10, , % 58.1% 76.9% -0.2% デスクトップ ,912 1,180, ,460 3,072, % 61.6% 78.6% 0.0% アプリケーション , ,037 58,238 1,260, % 89.7% 86.1% -0.1% ファイルサイズ圧縮率 16,000,000 14,000,000 12,000,000 10,000,000 8,000,000 6,000,000 4,000,000 2,000,000 0 JPEG PNG GIF BMP ( 加工後 ) アプリケーションデスクトップ ( 元画像 ) 100.0% 80.0% 60.0% 40.0% 20.0% 0.0% -20.0% 圧縮率 JPEG 圧縮率 PNG 圧縮率 GIF 圧縮率 BMP ( 元画像 ) ( 加工後 ) デスクトップアプリケーション

Microsoft PowerPoint kiso.ppt

Microsoft PowerPoint kiso.ppt 基礎情報処理 (F) 第 9 回資料画像を扱う担当者 : 高久雅生 2007 年 6 月 23 日 ( 土 ) masao@nii.ac.jp 1 事務連絡 : 課題 3 提出 6 月 23 日 0 時時点で 46 名 ( 遅れ提出含む ) から提出受領通知済み受領通知を受け取っていない人は授業時間中に申し出て確認を受けること遅れ提出も受け付けますので必ず提出すること 2 前回のおさらい