船舶海洋情報学

九州大学 工学府海洋システム工学専攻 講義資料 担当：木村

04. WWWとHTML

WWW（World Wide Web）
インターネットの情報をハイパーテキスト形式で参照できる情報提供システム
HTMLなどのコンテンツをHTTPプロトコルで転送

Webサーバインターネット

WebサーバWWW で必要な３つの定義：
１） 情報のアクセス手段と位置
URI （Uniform Resource Identifier）
２） 情報の表現フォーマット
HTML （HyperText Markup Language）

クライアントPC
WWWの情報を画面に表示するクライアントソフトウエア：WEBブラウザ
Internet Explore (Microsoft)
Chrome (Google)
Safari （Apple社）など

３） 情報の転送などの操作の定義（前回紹介）
HTTP （HyperTexi Transfer Protocol）

WebサーバURI （Uniform Resource Identifier） リソースを表す表記法（識別子）
URL （Uniform Resource Locator）

HTTP://sysplan.nams.kyushu-u.ac.jp/gen/index.html
URIスキーム

ホスト名URL や メールアドレスなど

以下のような書式も可能

パス リソース名ＩＰアドレスでもＯＫ

HTTP://
Webサーバへ接続
HTTPS:// Webサーバへ接続
FTP:// サーバへ接続してファイル転送
FILE:// ローカルホスト（自ＰＣ）へのファイルアクセス

ＨＴＴＰ：//ホスト名：ポート番号/パス/リソース名
ＨＴＴＰ：//ホスト名/パス/？問合わせ内容＃部分情報

ＨＴＴＰ（HyperText Transfer Protocol) 前回紹介
HTMLなどのコンテンツの送受信に用いられるリクエスト-レスポンス型の通信プロトコル
ポート番号80をデフォルトとして使用
HTTP/1.1 広く利用されている
HTTP/2
大規模通信
HTTPリクエスト
GET /gen/index.html HTTP/1.1
HOST: 133.5.136.170/gen/index.htmlを送って！

ステータスコードはいよ！
データのタイプは…
データの大きさは…

クライアントPC
IPアドレス:
192.168.3.20
ブラウザでwebサーバへTCP接続

WebサーバIPアドレス133.5.136.170
80番ポート
レスポンス後、接続を切断

HTTP/1.1 200 OKContent-type: text/html
Content-Length: 1020

レスポンスヘッダ<html><body>H.Kimura’s homepage….

レスポンスボディ
書式は HTML （HypertextMarkup Language）に従う（空行：ヘッダとの境界）

HTML （HyperText Markup Language）･ Webページを記述するための言語（データ形式）･ 「タグ」を用いて表示する要素やブラウザに対する命令を意味付け･ テキストファイルとして作成し、拡張子を「.html」とする

タグには大文字／小文字の区別なし
タグ中の属性で示すリソースのパスやファイル名には大文字／小文字の区別がある

HTMLファイルの構成
文書型宣言：HTMLのバージョン等を示す
省略可<!DOCTYPE HTML PUBLIC “.//W3C//DTD HTML 4.01 Transitional//EN”
HTTP://www.w3.org/TR/html4/loose.dtd><html>
ヘッダを示すタグ

HTML文書の始まりと終わりを示すタグ<head><title> ブラウザのタイトルバーに表示する文字列 </title></head><body>

本体を示すタグ<p> ブラウザ本体に表示する文字列 １段落目 </p><p> ブラウザ本体に表示する文字列 ２段落目 </p></body></html>HTMLのタグ一覧（１）
改行 <br>

単独のタグ

文章１１１１１１１１．
文章２２２２２２２２．<br>
文章３３３３３３３３．
Ｈｔｍｌテキスト中の改行は無視される

見出し <h1> 大見出し(1) </h1><h2> 中見出し(2) </h2><h3> 小見出し(3) </h3><h4> 小見出し(4) </h4><h5> 小見出し(5) </h5><h6> 小見出し(6) </h6>

マーク付きリスト

番号付きリスト<UL><LI> 項目１<LI> 項目２<LI> 項目３
</UL>

<OL>
<LI> 項目１<LI> 項目２<LI> 項目３</OL>「入れ子」構造も可「入れ子」構造も可HTMLのタグ一覧（２）
画像を置く

単独のタグ

<img src=“/パス/画像ファイル名”>
属性(attribute)

大きさを指定して画像を置く<img src=“/パス/画像ファイル名” width=“幅ピクセル” height=”高さピクセル”>
例）<img src=“./abc/nayami.png” width=“256”><img src=“./abc/GEN_DFLM.jpg“ width=“256”height=“256”>

絶対パス
相対パス例）
他のホストのリソース<img src=“./abc/nayami.png”><img src="http://sysplan.nams.kyushu-u.ac.jp/gen/hobby/GEN_DFLM.jpg">

HTMLのタグ一覧（３）リンクを張る<a>タグで囲まれた文字列を青色で下線を引き、クリックするとhref属性で示したページ（リソース）へ移動する<a href=“/パス/リンク先リソース名”> リンク先に関連する文字列 </a>
属性(attribute)

相対パス

絶対パス例）
他のホストのリソース<a href=“./abc/test2.html”> test2のページへジャンプ </a><a href=“http://sysplan.nams.kyushu-u.ac.jp/gen/index.html”> 木村のホームページへ </a>

文字列をクリックするとリンク先へジャンプ

<tr>…</tr>のタグで囲まれた部分が表の１行分HTMLのタグ一覧（４）表を作る<table>

見出し要素のタグ

見出し要素のタグ<tr> <th> 講座の番号 </th> <th> 教
表の始まりと終わりを示すタグ</table>員 </th> </tr><tr> <td> １講座</td> <td> 柳原准教授 </td> </tr><tr> <td> ２講座</td> <td> 古川教授 </td> </tr><tr> <td> ４講座</td> <td> 安東教授 </td> </tr>

データ要素のタグ

データ要素のタグ<table border> のような属性にすると罫線が入る

HTMLのタグ一覧（５）文字フォントの色や大きさを指定する

文字列を太字で強調する<strong> 文字列文字列文字列 </strong>

指定したい文字列を<font> </font>タグで囲む

文字列を斜体で強調する<em> 文字列文字列文字列 </em><font color=“green” size=“4”> 文字列文字列文字列 </font>
属性 colorで色を指定
red, blue, black など

属性 size で大きさを指定
１から７までの数字、または数値の前に＋や－を付けて相対値で指定することも可

水平な線を引く
<hr>

単独のタグ

物理スタイルタグ<b> 文字列文字列 </b>
：太文字<i> 文字列文字列 </i>：イタリック（斜体）<tt> 文字列文字列 </tt>：等幅（タイプライタ）<sup> 文字列文字列 </sup> ：上付添え字<sub> 文字列文字列 </sub> ：下付き添え字<u> 文字列文字列 </u>：アンダーライン
 文字列文字列 
：取り消し線

CGI （Common Gateway Interface）

ブラウザからwebサーバ側のプログラムを実行

単なる「静的なデータの閲覧」ではなく、状況に応じた反応を返す仕組み（１）HTMLで簡単に記述 （サーバ側はプログラム言語とサーバソフトに依存）
実際にはブラウザのＵＲＬに直接このようなパラメータを手入力することは現実的ではない（<a>タグも同様）

URL （Uniform Resource Locator）に直接プログラム名を指示
通常はHTMLの<a>タグのリンク先として呼び出す

必要に応じて、プログラム名の後ろに？変数名=値＆変数名＝値＆…の形式
でパラメータを渡す

ユーザがブラウザ上で簡単にパラメータを入力してCGIを呼び出せる <form></form>タグがある

HTTPリクエスト文字列指示されたプログラムを実行（サーバ上で動作する）
プログラムの標準出力（文字列）がそのままクライアントPCへの応答となる

クライアントPC

ＨＴＴＰレスポンス文字列

WEBサーバHTMLテキスト
画像データ（MIMEでエンコードされたテキストデータ）など
webページにアクセスカウンタの数字画像表示を埋め込む場合
HTML文書の埋め込みたい場所に例えば<img src="/cgi-bin/Count2.cgi?">のようにすればよい（cgi実行結果の画像データが埋め込まれる）

CGI （Common Gateway Interface）の例<form>タグクライアントＰＣのwebブラウザ表示

フォーム入力とCGIプログラム起動を実現するweb画面のHTML<html><head><meta http-equiv=content-type content="text/html; charset=UTF-8"><title> ハンドル制御実験 </title></head>HTTPのPOSTリクエストを使い<body>
サーバのCGIプログラム start.py を起動する<h1> 台車のハンドル制御実験装置 WEB操作パネル </h1><form method="POST" action="start.py" >ハンドル角度制御フィードバックゲインの設定<Br><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"></form></body></html>HTTPリクエスト文字列

フォーム入力後、ボタンを押すとCGIプログラム起動

クライアントPC
ブラウザに表示CGIプログラム
実行結果
HTMLテキスト

WEBサーバJavaScript

HTMLにプログラムを埋め込んで状況に応じて反応する仕組み（２）クライアントのブラウザ上でプログラムを実行（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><head><script type="text/javascript" src=“sample.js"></script></head><body></body></html>外部スクリプトをHTML内で読み込む

インラインスクリプト：
HTMLに直接埋め込む場合ボタンを押したりマウスを合わせたり文字をクリックしたときにJavaScriptを実行できる

フォームに入力されたデータの計算やチェックサーバと通信しながらリアルタイムに情報表示（通常は「更新」ボタンを押したときのみ情報更新）
ユーザのマウスやキーボード操作に合わせて画像を動かすなどが可能まとめ（１） 情報のアクセス手段と位置
URI （Uniform Resource Identifier）（２） 情報の表現フォーマット
HTML （HyperText Markup Language）
タグいろいろ（３） CGI: ブラウザからサーバのプログラムを実行する仕組み（４） javascript： HTMLに埋め込んでブラウザ上でプログラムを実行

レポート課題：
自分のホームページをイメージしたHTMLを作成し、ブラウザで表示して確認せよ。
少なくとも２つ以上のHTMLファイルで構成し、互いのページにリンクしてジャンプできること。
ページには画像を埋め込むこと。（CGIはサーバが無いと無理なので考えなくて良い）
各自なるべく魅力的なコンテンツを用意すること。ページや画像へのリンクは相対パスを使うこと。
【提出方法】 上記のHTMLファイルと画像データなどをディレクトリ（フォルダ）ごとまとめてzipで圧縮し、下記の課題提出用フォルダへ、課題の番号と提出者が分かるようにファイル名を以下のようにしてアップロードせよ
第4回2TE19xxxZ名前.zip
https://share.iii.kyushu-u.ac.jp/public/hROwAAqIPI5ATI4BUXJtIJeJbMLJzVszfitNl89GHcMK
上記フォルダへのリンクは下記ホームページから
http://sysplan.nams.kyushu-u.ac.jp/gen/edu/NavalInformationProcessing/2019/index.html