Microsoft PowerPoint - 04WWWとHTML.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - 04WWWとHTML.pptx"

さみだいほうじ
5 years ago
Views:

1 船舶海洋情報学九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送インターネットクライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet Explore (Microsoft) Chrome (Google) Safari (Apple 社 ) など Web サーバ Web サーバ Web サーバ WWW で必要な 3 つの定義 : 1) 情報のアクセス手段と位置 URI (Uniform Resource Identifier) 2) 情報の表現フォーマット HTML (HyperText Markup Language) 3) 情報の転送などの操作の定義 ( 前回紹介 ) HTTP (HyperTexi Transfer Protocol)

URI (Uniform Resource Identifier) リソースを表す表記法 ( 識別子 ) URL やメールアドレスなど URL (Uniform Resource Locator) HTTP://sysplan.nams.kyushu-u.ac.jp/gen/index.

2 URI (Uniform Resource Identifier) リソースを表す表記法 ( 識別子 ) URL やメールアドレスなど URL (Uniform Resource Locator) URIスキームホスト名パスリソース名 IP アドレスでも OK Webサーバへ接続 Webサーバへ接続 FTP:// サーバへ接続してファイル転送 FILE:// ローカルホスト ( 自 PC) へのファイルアクセス以下のような書式も可能ホスト名 : ポート番号 / パス / リソース名ホスト名 / パス /? 問合わせ内容 # 部分情報

3 HTML (HyperText Markup Language) Web ページを記述するための言語 ( データ形式 ) タグを用いて表示する要素やブラウザに対する命令を意味付けテキストファイルとして作成し拡張子を.html とするタグには大文字 / 小文字の区別なしタグ中の属性で示すリソースのパスやファイル名には大文字 / 小文字の区別がある HTML ファイルの構成文書型宣言 :HTML のバージョン等を示す省略可 <!DOCTYPE HTML PUBLIC.//W3C//DTD HTML 4.01 Transitional//EN <html> ヘッダを示すタグ <head> </head> <title> ブラウザのタイトルバーに表示する文字列 </title> HTML 文書の始まりと終わりを示すタグ本体を示すタグ </html> <body> </body> <p> ブラウザ本体に表示する文字列 1 段落目 </p> <p> ブラウザ本体に表示する文字列 2 段落目 </p>

HTML のタグ一覧 (1) マーク付きリスト番号付きリスト改行 <br> 文章 11111111.

<h5> 小見出し (5) </h5> <h6> 小見出し (6) </h6> <UL> <LI> 項目 1

4 HTML のタグ一覧 (1) マーク付きリスト番号付きリスト改行 <br> 文章文章 <br> 文章 Html テキスト中の改行は無視される単独のタグ見出し <h1> 大見出し (1) </h1> <h2> 中見出し (2) </h2> <h3> 小見出し (3) </h3> <h4> 小見出し (4) </h4> <h5> 小見出し (5) </h5> <h6> 小見出し (6) </h6> <UL> <LI> 項目 1 <LI> 項目 2 <LI> 項目 3 </UL> 入れ子構造も可 <OL> <LI> 項目 1 <LI> 項目 2 <LI> 項目 3 </OL> 入れ子構造も可

png width= 256 > <img src=./abc/gen_dflm.

5 HTML のタグ一覧 (2) 画像を置く単独のタグ <img src= / パス / 画像ファイル名 > 大きさを指定して画像を置く <img src= / パス / 画像ファイル名 width= 幅ピクセル height= 高さピクセル > 例 ) <img src=./abc/nayami.png width= 256 > <img src=./abc/gen_dflm.jpg width= 256 height= 256 > 属性 (attribute) 絶対パス他のホストのリソース例 ) 相対パス <img src=./abc/nayami.png > <img src="

6 HTML のタグ一覧 (3) リンクを張る <a> タグで囲まれた文字列を青色で下線を引きクリックすると href 属性で示したページ ( リソース ) へ移動する <a href= / パス / リンク先リソース名 > リンク先に関連する文字列 </a> 属性 (attribute) 例 ) <a href=./abc/test2.html > test2のページへジャンプ </a> <a href= > 木村のホームページへ </a> 文字列をクリックするとリンク先へジャンプ

柳原准教授 </td> </tr> <tr> <td> 2 講座 </td> <td> 古川教授 </td> </tr> <tr> <td> 4 講座

7 HTML のタグ一覧 (4) <tr> </tr> のタグで囲まれた部分が表の 1 行分表を作る <table> 見出し要素のタグ見出し要素のタグ <tr> <th> 講座の番号 </th> <th> 教員 </th> </tr> 表の始まりと終わりを示すタグ <tr> <td> 1 講座 </td> <td> 柳原准教授 </td> </tr> <tr> <td> 2 講座 </td> <td> 古川教授 </td> </tr> <tr> <td> 4 講座 </td> <td> 安東教授 </td> </tr> </table> データ要素のタグデータ要素のタグ <table border> のような属性にすると罫線が入る

8 HTML のタグ一覧 (5) 文字フォントの色や大きさを指定する文字列を太字で強調する <strong> 文字列文字列文字列 </strong> 指定したい文字列を <font> </font> タグで囲む <font color= green size= 4 > 文字列文字列文字列 </font> 文字列を斜体で強調する <em> 文字列文字列文字列 </em> 属性 color で色を指定 red, blue, black など属性 size で大きさを指定 1 から 7 までの数字または数値の前に + や - を付けて相対値で指定することも可物理スタイルタグ水平な線を引く <hr> 単独のタグ <b> 文字列文字列 </b> <i> 文字列文字列 </i> <tt> 文字列文字列 </tt> <sup> 文字列文字列 </sup> <sub> 文字列文字列 </sub> <u> 文字列文字列 </u> <s> 文字列文字列 </s> : 太文字 : イタリック ( 斜体 ) : 等幅 ( タイプライタ ) : 上付添え字 : 下付き添え字 : アンダーライン : 取り消し線

CGI (Common Gateway Interface) ブラウザから web サーバ側のプログラムを実行単なる静的なデータの閲覧ではなく状況に応じた反応を返す仕組み (1) HTML で簡単に記述 ( サーバ側はプログラム言語とサーバソフトに依存 ) URL (Uniform Resource Locator) に直接プログラム名を指示通常はHTMLの <a>

9 CGI (Common Gateway Interface) ブラウザから web サーバ側のプログラムを実行単なる静的なデータの閲覧ではなく状況に応じた反応を返す仕組み (1) HTML で簡単に記述 ( サーバ側はプログラム言語とサーバソフトに依存 ) URL (Uniform Resource Locator) に直接プログラム名を指示通常はHTMLの <a> タグのリンク先として呼び出す HTTP リクエスト文字列必要に応じてプログラム名の後ろに? 変数名 = 値 & 変数名 = 値 & の形式でパラメータを渡す実際にはブラウザの URL に直接このようなパラメータを手入力することは現実的ではない (<a> タグも同様 ) ユーザがブラウザ上で簡単にパラメータを入力して CGI を呼び出せる <form></form> タグがある指示されたプログラムを実行 ( サーバ上で動作する ) プログラムの標準出力 ( 文字列 ) がそのままクライアント PC への応答となるクライアント PC HTTP レスポンス文字列 WEB サーバ HTMLテキスト画像データ (MIMEでエンコードされたテキストデータ) など webページにアクセスカウンタの数字画像表示を埋め込む場合 HTML 文書の埋め込みたい場所に例えば <img src="/cgi-bin/count2.cgi?"> のようにすればよい (cgi 実行結果の画像データが埋め込まれる )

CGI (Common Gateway Interface) の例クライアント PC の web ブラウザ表示 <form> タグ <html> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> <title> ハンドル制御実験 </title> </head> <body> <h1> 台

py を起動する <input type="text" name="xgain" size="6" value="0" style="font-size:200%;"> 位置偏差フィードバックゲイン k1<br> <input type="text" name="thetagain" size="6" value="0" style="font-size:200%;">

10 CGI (Common Gateway Interface) の例クライアント PC の web ブラウザ表示 <form> タグ <html> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> <title> ハンドル制御実験 </title> </head> <body> <h1> 台のハンドル制御実験装置 WEB 操作パネル </h1> <form method="post" action="start.py" > ハンドル度制御フィードバックゲインの設定 <Br> </form> </body> </html> フォーム入力と CGI プログラム起動を実現する web 画面の HTML HTTP の POST リクエストを使いサーバの CGI プログラム start.py を起動する <input type="text" name="xgain" size="6" value="0" style="font-size:200%;"> 位置偏差フィードバックゲイン k1<br> <input type="text" name="thetagain" size="6" value="0" style="font-size:200%;"> 度偏差フィードバックゲイン k2<br> <Br> <select name="movedirection" size="2"> <option value="forward" selected> 前進 <option value="backward"> 後進 </select> 台の進向 ( ステアリング輪があるが前 )<Br> <BR> <input type="submit" value="start"> HTTP リクエスト文字列フォーム入力後ボタンを押すと CGI プログラム起動クライアント PC ブラウザに表示 CGI プログラム実行結果 HTML テキスト WEB サーバ

JavaScript HTML にプログラムを埋め込んで状況に応じて反応する仕組み (2) クライアントのブラウザ上でプログラムを実行 (CGI はサーバ側で実行している違いに注意 ) <html> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> </head> <body> <script

11 JavaScript HTML にプログラムを埋め込んで状況に応じて反応する仕組み (2) クライアントのブラウザ上でプログラムを実行 (CGI はサーバ側で実行している違いに注意 ) <html> <head> <meta http-equiv=content-type content="text/html; charset=utf-8"> </head> <body> <script type="text/javascript"> // ここに javascript を書きます </script> </body> </html> インラインスクリプト : HTML に直接埋め込む場合 <html> <head> <script type="text/javascript" src= sample.js"></script> </head> <body> </body> </html> 外部スクリプトを HTML 内で読み込むボタンを押したりマウスを合わせたり文字をクリックしたときに JavaScript を実行できるフォームに入力されたデータの計算やチェックサーバと通信しながらリアルタイムに情報表示 ( 通常は更新ボタンを押したときのみ情報更新 ) ユーザのマウスやキーボード操作に合わせて画像を動かすなどが可能

12 まとめ (1) 情報のアクセス手段と位置 URI (Uniform Resource Identifier) (2) 情報の表現フォーマット HTML (HyperText Markup Language) タグいろいろ (3) CGI: ブラウザからサーバのプログラムを実行する仕組み (4) javascript: HTML に埋め込んでブラウザ上でプログラムを実行レポート課題 : 自分のホームページをイメージした HTML を作成しブラウザで表示して確認せよ少なくとも 2 つ以上の HTML ファイルで構成し互いのページにリンクしてジャンプできることページには画像を埋め込むこと (CGI はサーバが無いと無理なので考えなくて良い ) 各自なるべく魅力的なコンテンツを用意すること提出方法上記のHTMLファイルと画像データなどをまとめて九大全学ファイル共有システムで各自のフォルダへアップロードしメールに公開 URLを添付して kimura@nams.kyushu-u.ac.jp 宛てに第 4 回船舶海洋情報学レポートとのタイトルで送信せよ

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のことテキストエディタの起動 (TeraPad の場合