内容 WWWとはブラウザ検索エンジン HTML 自分のホームページ作成

Size: px

Start display at page:

Download "内容 WWWとはブラウザ検索エンジン HTML 自分のホームページ作成"

ゆきさよせ
5 years ago
Views:

1 情報処理演習 WWW とホームページ

2 内容 WWWとはブラウザ検索エンジン HTML 自分のホームページ作成

3 WWW の生い立ち CERN : Conseil Europeen pour la Recherche Nucleaire 加速器を使った研究成果としてのデータを世界中で共用する仕組みが必要 1990 年頃に提案実装 (NeXT) 1990 年中頃から急速に普及

4 WWW の特徴使い易いので誰でも手軽に情報を入手できるサーバの立ち上げを簡単にできるテキストに加えて図形イメージ動画音などを含められる誰でも見栄えのするページを作成できる各種のブラウザを使用できる

5 キーワード URL : Uniform Resource Locator 情報の在処ドメイン名 : コンピュータの名前 HTML : Hyper Text Markup Language Web ページを書く言語プロトコル : 通信手順 HTTP : Hyper Text Transfer Protocol HTTPS : Hypertext Transfer Protocol Security

6 ブラウザ Safari:Mac OS に標準で搭載 Internet Explorer (IE):Microsoft の Windows に標準で搭載 Firefox: 急速に普及してきたブラウザ Linux などでは標準 Netscape Navigator:IE に対抗するブラウザで自分で他所から入手してインストールする必要 OPERA:Linux や Mac OS 用のものがあり愛好者は多い

7 Safari の基本機能戻る進む更新中止ブックマークバーブックマーク検索

8 Safari の設定について起動時のページ一時ファイル ( キャッシュ ) の削除 Cookiesの削除履歴の削除パスワードの記録

9 知っていると便利な機能文字列のコピーとペースト文字列の検索ソースコードの表示文字の大きさの変更

10 保存ページの保存 Webページはいつまでもあるとは限らない後から見たい場合には保存すべしイメージの保存イメージだけ保存することができる著作権には注意すべし

11 インターネット上の情報の特徴国境がない ( 国内国外を問わず情報を発信入手できる ) 情報の入手に時間がかからない発信も受信もコストが安いオンラインで検索できるしたがって再利用も容易である最新のデータを自分で保持する必要がない ( 各種統計データなど ) ただしものによってはその情報がいつなくなるか分からない情報は必ずしも正しいとは限らない

12 検索エンジン検索の仕方電話帳型 = 検索のキーワードが明確な場合カテゴリ型 = 曖昧な検索をしたい場合検索エンジンの種類ディレクトリ型人間が分類 Yahoo ロボット型自動的に情報収集 Google

13 検索エンジン使用上の注意キーワードを空白で区切って並べる除きたい場合にはマイナスをつける特定のフレーズを検索したい時はで挟む

14 引用の注意引用する部分を明確に区別出所を明示著作権に十分に注意情報がいつまであるか不明なので配慮課題でそのままペーストするなどということはしないように ( 読んだらすぐに分かる!)

</html> Web ページで使用する文字コードを明示する場合 <head> <meta http-equiv="content-type"

15 Web ページの構造 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> </title> </head> <body> </body> </html> Web ページで使用する文字コードを明示する場合 <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>information Processing</title> </head> meta タグの中に文字コードを記述する

16 Htmlタグ Headタグ Bodyタグ見出しのタグ

17 箇条書き (1) 行の先頭に黒丸などをつける場合基本形 : <ul> <li> </li><li> </li></ul> <ul> <li> 1 番目の項目 </li> <li> 2 番目の項目 </li> <ul> <li> 1 番目の項目 </li> <li> 2 番目の項目 </li> </ul> <li> 3 番目の項目 </li> </ul>

18 <ol> <li> 赤いリンゴ </li> <li> 青いリンゴ </li> <ol> <li> 青い海 </li> <li> 白い空 <lli> </ol> <li> 黄色いバナナ </li> </ol> 箇条書き (2) 行の先頭に数字などをつける場合

19 箇条書き (3) <dl> <dt> 1 番目の項目 </dt> <dd> 1 番目の説明 </dd> <dt> 2 番目の項目 </dt> <dd> 2 番目の説明 </dd> <dt> 3 番目の項目 </dt> <dd> 3 番目の説明 </dd> </dl>

20 テーブル <table border=1 width=60%> <tr><th>1 番目の見出し </th><td align=left>1 番目の内容 </td></tr> <tr><th>2 番目の見出し </th><td align=center>2 番目の内容 </td></tr> <tr><th>3 番目の見出し </th><td align=right>3 番目の内容 </td></tr> </table>

21 文字飾り

22 文字の大きさ

23 見出し

24 改行と段落

25 もろもろ線を引く <hr> <hr size=10pt> <hr width=50% align=left> バックグラウンドの色 <body bgcolor="#ffffff"> <body bgcolor= red">

26 リンク基本形 : <a href="filename.html"> 他のファイルへのリンク </a> <a href= filename.html target= 窓の名前 >HTML 用の別の窓 </a><p> <a href= > 他のコンピュータへのリンク </a> <a href= target=name> 別窓を開いて表示 </a> <img src= filename.jpg > イメージ ( 写真 ) の張り付け <a href=big.gif><img src=small.gif width=128></a>

27 そのまま表示

28 自分のページの作成 Finderでpublic_htmlを確認 Index.htmlを作成中身は簡単で良い

29 自分のページの見本 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>html の見本 </title> </head> <BODY BGCOLOR="#ffffc0"> <font size=4> <h2> 藤村直美 </h2> 私の趣味は久住登山です <p> </body> </html>

30 テキストエディタを使用する方法

31 自分の HP の作成手順 Dock からテキストエディタを起動中身を作成する File から別名で保存を選択 Index.html という名前と public_html という場所を選択する保存で保存する次からはファイル開くで読み出すか index.html をダブルクリックする

32 テキストエディタを起動

33 リッチテキストから標準テキストへ

34 HTML のタグを無視する設定

35 中身を入力

36 保存

37 保存場所を指定

38 ブラウザで表示

39 emacs を使用する方法

40 自分の HP の作成手順 Finder のアプリケーションから emacs を起動 Emacs を Dock に入れておくとこれから楽 File から Visit New File Index.html という名前と public_html という場所を選択する中身を作成する Save で保存する次からは File Open File で読み出す

41 Emacs の起動

42 Emacs の起動画面

44 ファイルと場所の指定

45 中身を入力

46 保存

47 Safari で表示する URL

48 表示例

49 6. WWW 6.1. WWW WWW (World Wide Web) CERN (Organisation europeenne pour la recherche nucleaire European Organization for Nuclear Research ( )) Conseil Europeen pour la Recherche Nucleaire CERN CERN 27km WWW (ftp) NeXT Mosaic WWW WWW WWW CERN NCSA Microsoft Netscape Firefox Mozilla WWW URL Uniform Resource Locator :// / / 1

50 WWW WWW WWW WWW index.html index.php ftp://ftp.kyushu-u.ac.jp/pub/gnu/prep/emacs-21.3.tar.gz HTML Hyper Text Markup Language HTTP Hyper Text Transfer Protocol WWW WWW WWW HTML 6-1 telnet HTTPS : Hypertext Transfer Protocol Security WWW SSL 2

51 telnet sample.design.kyushu-u.ac.jp http Trying Connected to sample.design.kyushu-u.ac.jp ( ). Escape character is '^]'. GET /class/index.html HTTP/1.1 host: sample.design.kyushu-u.ac.jp HTTP/ OK Date: Sun, 10 May :00:23 GMT Server: Apache/2.2.3 (CentOS) Last-Modified: Thu, 16 Apr :55:52 GMT ETag: "1b181cb-3e6-3b2fd600" Accept-Ranges: bytes Content-Length: 998 Connection: close Content-Type: text/html <html> <head> <meta http-equiv="content-type" CONTENT="text/html;CHARSET=EUC-JP"> <title>list of Lecture materials</title> </head> <body> Updated on 2009/04/16<br> Copyright : fujimura design.kyushu-u.ac.jp<br> <hr> <H2> </H2> <HR> <P> <hr> </font> </body> Connection closed by foreign host. [fujimura@sample]$ exit 6-1 HTTP 6.2. WWW World Wide Web WWW 3

52 Web NCSA Mosaic Microsoft Internet Explorer Mosaic Netscape Communications Netscape Communicator (Navigator) Netscape Mozilla.org Mozilla Firefox Opera Software Opera Web w3m lynx Macintosh Safari WWW Internet Explorer (IE Microsoft Windows Firefox Linux Netscape Navigator IE Windows OPERA Linux Mac OS Google Mosaic 6.3. Safari ( ) ttp:// 4

53 6-2 Safari 6-2 Safari return 5

54 URL Safari URL URL URL Control HTML PDF PDF 6

55 Web HTML EUC-JIS UNIX Linux SHIFT-JIS JIS UTF-8 UTF Unicode Text Format Windows WWW Safari UNIX LF (0x0a) Mac OS CR (0x0d) Windows CR+LF (0x0d, 0x0a ) CR Carriage Return LF Line Feed CR+LF Control 6-3 7

6-3 6.4. Safari 6-4 Web http://www.s.kyushu-u.ac.

56 Safari 6-4 Web Safari Gmail Gmail Safari Gmail 6-5 Web Java JavaScript Cookies Safari 8

57 6-4 Safari 6-5 Safari Cookie 9

58 Cookie Cookies Cookies Cookie Cookies Safari URL URL 6.5. Control Command+C Control Command V 10

59 return HTML (Hyper Text Mark-Up Language) Web HTML HTML Microsoft PowerPoint Web 6.6. WWW WWW TV 11

60 XX WWW URL WWW Yahoo WWW Google ( Yahoo Google Google 12

61 - "Love is over" Google Google "and" Google URL Take Me Back WWW 13

62 Google 500 and/or URL WWW Google 6.8. WEB Web HTML (Hyper Text Markup Language) HTML Web 14

63 HTML HTML5 HTML ) : <TAG > </TAG > <h1> </h1> 6.9. HTML HTML HTML HTML HTML 6-6 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title> </title> </head> <body> </body> </html> 6-6 HTML 6-7 Header UTF-8 JIS UTF-8 SJIS <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>information Processing</title> </head> <body bgcolor="#ffffff"> 15

64 16 8 RGB 16 red blue 6-7 Web <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta content="text/html; charset=shift_jis" http-equiv="content-type"> <title> My Home Page </title> </head> <body> <h1> </h1> <h2><img src="favarit.gif"> </h2> <ul> <li> <a href=" Google </a> </li> <li> <a href=" Yahoo </a> </li> <li> <a href=" </li> </ul> </body> </html> 6-7 Web 6-8 <ul> <li> <li> </ul> <ul> <li> </li> <Li> </li> <ul> <li> </li> <Li> </li> </ul> <Li> </li> </ul> 6-8 (b) 16

65 6-9 <ol> <li> <li> </ol> <ol> <li> </li> <Li> </li> <ol> <li> </li> <Li> </li> </ol> <Li> </li> </ol> (b) (a) <dl> <dt> xx </dt><dd> yy </dd> </dl> <dl> <dt> </dt><dd> </dd> <dt> </dt><dd> </dd> <dt> </dt><dd> </dd> </dl> (a) (b) 6-10 table 6-11 <table border width=75%> <tr><th> hh </th> <td> xx </td> <td> yy </td> </tr> </table> 17

66 </table> <table border=1 width=60%> <tr><th> </th><td align=left> </td></tr> <tr><th> </th><td align=center> </td></tr> <tr><th> </th><td align=right> </td></tr> </table> (a) (b) <i>italic</i> <b>bold</b> <tt>typewriter</tt> <S>Strike String</S> <font color=blue> </font> X<sup>2</sup> H<sub>2</sub>O <marquee>scroll</marquee> 18

67 2 <font size=1> </font><br> <font size=2> </font><br> <font size=3> </font><br> <font size=4> </font><br> <font size=5> </font><br> <font size=6> </font><br> <font size=7> </font><br> 1 <h1> </h1> 3 <h1> </h><br> <h2> </h><br> <h3> </h><br> <h4> </h><br> <h5> </h><br> <h6> </h><br> HTML 4 <p> </p> 19

68 <br> 4 <p align=left> </p> <p align=center> </p> <p align=right> </p> <center> </center> nbsp; ( nbsp ) WWW URL href target= <a href="filename.html"> </a> <a href="filename.html" target= >HTML </a><p> <a href=" </a> <a href=" target=name> </a> <img src="filename.jpg"> <a href=big.gif><img src=small.gif width=128></a> <hr> <hr> <hr size=10pt> <hr width=50% align=left> HTML <pre> <pre> </pre> 20

69 <pre> 5 public class app { public static void main(string[ ] args) { System.out.println("Hello from Java!"); } } 5 <pre> <pre> Finder public_html index.html ID/ URL ID <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>html </title> </head> <BODY BGCOLOR="#ffffc0"> <font size=4> <h2> </h2> <p> </body> </html>

70 URL WWW 22

untitled

untitled 2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp

内容 WWWとは ブラウザ 検索エンジン HTML 自分のホームページ作成

内容 WWWとはブラウザ検索エンジン HTML 自分のホームページ作成