情報処理演習 WWW とホームページ
内容 WWWとは ブラウザ 検索エンジン HTML 自分のホームページ作成
WWW の生い立ち CERN : Conseil Europeen pour la Recherche Nucleaire 加速器を使った研究成果としてのデータを世界中で共用する仕組みが必要 1990 年頃に提案 実装 (NeXT) 1990 年中頃から急速に普及
WWW の特徴 使い易いので 誰でも手軽に情報を入手できる サーバの立ち上げを簡単にできる テキストに加えて 図形 イメージ 動画 音などを含められる 誰でも見栄えのするページを作成できる 各種のブラウザを使用できる
キーワード URL : Uniform Resource Locator 情報の在処 ドメイン名 : コンピュータの名前 HTML : Hyper Text Markup Language Web ページを書く言語 プロトコル : 通信手順 HTTP : Hyper Text Transfer Protocol HTTPS : Hypertext Transfer Protocol Security
ブラウザ Safari:Mac OS に標準で搭載 Internet Explorer (IE):Microsoft の Windows に標準で搭載 Firefox: 急速に普及してきたブラウザ Linux などでは標準 Netscape Navigator:IE に対抗するブラウザで 自分で他所から入手してインストールする必要 OPERA:Linux や Mac OS 用のものがあり 愛好者は多い
Safari の基本機能 戻る 進む 更新 中止 ブックマークバー ブックマーク 検索
Safari の設定について 起動時のページ 一時ファイル ( キャッシュ ) の削除 Cookiesの削除 履歴の削除 パスワードの記録
知っていると便利な機能 文字列のコピーとペースト 文字列の検索 ソースコードの表示 文字の大きさの変更
保存 ページの保存 Webページはいつまでもあるとは限らない 後から見たい場合には保存すべし イメージの保存 イメージだけ保存することができる 著作権には注意すべし
インターネット上の情報の特徴 国境がない ( 国内 国外を問わず情報を発信 入手できる ) 情報の入手に時間がかからない 発信も受信もコストが安い オンラインで検索できる したがって 再利用も容易である 最新のデータを自分で保持する必要がない ( 各種統計データなど ) ただしものによっては その情報がいつなくなるか分からない 情報は必ずしも正しいとは限らない
検索エンジン 検索の仕方 電話帳型 = 検索のキーワードが明確な場合 カテゴリ型 = 曖昧な検索をしたい場合 検索エンジンの種類 ディレクトリ型 人間が分類 Yahoo ロボット型 自動的に情報収集 Google
検索エンジン使用上の注意 キーワードを空白で区切って並べる 除きたい場合にはマイナスをつける 特定のフレーズを検索したい時は で挟む
引用の注意 引用する部分を明確に区別 出所を明示 著作権に十分に注意 情報がいつまであるか不明なので配慮 課題でそのままペーストするなどということはしないように ( 読んだらすぐに分かる!)
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 タグの中に文字コードを記述する
Htmlタグ Headタグ Bodyタグ 見出しのタグ
箇条書き (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>
<ol> <li> 赤いリンゴ </li> <li> 青いリンゴ </li> <ol> <li> 青い海 </li> <li> 白い空 <lli> </ol> <li> 黄色いバナナ </li> </ol> 箇条書き (2) 行の先頭に数字などをつける場合
箇条書き (3) <dl> <dt> 1 番目の項目 </dt> <dd> 1 番目の説明 </dd> <dt> 2 番目の項目 </dt> <dd> 2 番目の説明 </dd> <dt> 3 番目の項目 </dt> <dd> 3 番目の説明 </dd> </dl>
テーブル <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>
文字飾り
文字の大きさ
見出し
改行と段落
もろもろ 線を引く <hr> <hr size=10pt> <hr width=50% align=left> バックグラウンドの色 <body bgcolor="#ffffff"> <body bgcolor= red">
リンク 基本形 : <a href="filename.html"> 他のファイルへのリンク </a> <a href= filename.html target= 窓の名前 >HTML 用の別の窓 </a><p> <a href= http://machine/file > 他のコンピュータへのリンク </a> <a href= http://machine/file target=name> 別窓を開いて表示 </a> <img src= filename.jpg > イメージ ( 写真 ) の張り付け <a href=big.gif><img src=small.gif width=128></a>
そのまま表示
自分のページの作成 Finderでpublic_htmlを確認 Index.htmlを作成 http://www.s.kyushu-u.ac.jp/~1ab09123x/ 中身は簡単で良い
自分のページの見本 <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>
テキストエディタを使用する方法
自分の HP の作成手順 Dock からテキストエディタを起動 中身を作成する File から別名で保存を選択 Index.html という名前と public_html という場所を選択する 保存 で保存する 次からは ファイル 開く で読み出すか index.html をダブルクリックする
テキストエディタを起動
リッチテキストから標準テキストへ
HTML のタグを無視する設定
中身を入力
保存
保存場所を指定
ブラウザで表示
emacs を使用する方法
自分の HP の作成手順 Finder のアプリケーションから emacs を起動 Emacs を Dock に入れておくとこれから楽 File から Visit New File Index.html という名前と public_html という場所を選択する 中身を作成する Save で保存する 次からは File Open File で読み出す
Emacs の起動
Emacs の起動画面
ファイルと場所の指定
中身を入力
保存
Safari で表示する URL http://www.s.kyushu-u.ac.jp/~1ab09123x/
表示例
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) 1989 3 1990 10 1991 3 NeXT 1991 10 1993 1 Mosaic 1992 9 30 http://www.tsukuba.org/www/ 1993 WWW 1994 5 WWW WWW CERN NCSA Microsoft Netscape Firefox Mozilla WWW URL Uniform Resource Locator :// / / 1
WWW WWW WWW WWW index.html index.php http://www.design.kyushu-u.ac.jp/ 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
[fujimura@sample]$ telnet sample.design.kyushu-u.ac.jp http Trying 133.5.123.45... Connected to sample.design.kyushu-u.ac.jp (133.5.123.104). Escape character is '^]'. GET /class/index.html HTTP/1.1 host: sample.design.kyushu-u.ac.jp HTTP/1.1 200 OK Date: Sun, 10 May 2009 09:00:23 GMT Server: Apache/2.2.3 (CentOS) Last-Modified: Thu, 16 Apr 2009 08: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
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://www.jartic.or.jp/ 4
6-2 Safari 6-2 Safari return 5
URL Safari URL URL URL Control HTML PDF PDF 6
Web HTML 0 1 8 16 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.jp/ Safari Gmail Gmail Safari Gmail 6-5 Web Java JavaScript Cookies Safari 8
6-4 Safari 6-5 Safari Cookie 9
Cookie Cookies Cookies Cookie Cookies Safari URL URL 6.5. Control Command+C Control Command V 10
return HTML (Hyper Text Mark-Up Language) Web HTML HTML Microsoft PowerPoint Web 6.6. WWW WWW TV 11
XX WWW URL WWW Yahoo WWW Google (http://www.google.co.jp/) Yahoo Google Google 12
- "Love is over" Google Google "and" Google URL http://www.archive.org/ www.kyushu-id.ac.jp Take Me Back http://web.archive.org/web/19961221022727/http://kyushu-id.ac.jp/ 2100 6.7. WWW 13
Google 500 and/or 5 1 5 URL WWW Google 6.8. WEB Web HTML (Hyper Text Markup Language) HTML Web 14
HTML 1999 12 4.01 http://www.w3.org/tr/html401/ 2009 4 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
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="http://www.google.co.jp"> Google </a> </li> <li> <a href="http://www.yahoo.co.jp"> Yahoo </a> </li> <li> <a href="http://webct.kyushu-u.ac.jp/">webct</a> </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
6-9 <ol> <li> <li> </ol> <ol> <li> </li> <Li> </li> <ol> <li> </li> <Li> </li> </ol> <Li> </li> </ol> (b) (a) 6-9 6-10 <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
</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) 6-11 1 2 1 <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
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
<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="http://machine/file"> </a> <a href="http://machine/file" 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
<pre> 5 public class app { public static void main(string[ ] args) { System.out.println("Hello from Java!"); } } 5 <pre> <pre> 6.10. Finder public_html index.html http://www.s.kyushu-u.ac.jp/~ ID/ URL 6-12 6-13 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> 6-12 21
6-13 6.11. URL WWW 22