Webサイトの仕組みとWebプログラミング基礎（1）

サイバーセキュリティ演習
― Webセキュリティ基礎＆実践―
1. Webサイトの仕組みとWebプログラミング基礎
講義資料
 講義ホームページ
http://www.cs.kyushu-u.ac.jp/lectures/csr
 eラーニングシステム
moodle
https://moodle.kyushu-u.ac.jp/
 コース
サイバーセキュリティ演習
教員：岡村
耕二、渡邉
英伸
講義形式
 総合科目(オープン科目)
 単位認定は、ルーブリックに基づき総合的に
行います。
 学期末試験結果
四者択一問題３０問（moodle上で行いま
す。）
 レポート内容
 レポート提出率・講義出席率
レポートの提出は７回あります。
講義は１４回あります。
シラバス・ルーブリック
 詳細は以下のURLをクリックしてください。
 http://syllabus.kyushuu.ac.jp/search/preview_new.php?code=
N1590733594
講義内容
1. 2*. Webサイトの仕組みとWebプログラミング基礎
3.4.5*. 不正スクリプトの実行対策
6.7*.
データベースの不正操作対策
8 *.
システムの不正操作対策とHTTPレスポンスの改竄対策
9 *.
偽リクエストによるサービスの不正利用対策
10*.
セッションIDの
不正取得対策
11.
総合演習（１）
12*.
公開ディレクトリの不正横断対策と認証認可制御の欠落
による不正アクセス対策とエラーメッセージからの情報
漏えい対策
13.
総合演習（２）
14.
総合演習（３）
15.
学期末試験
※＊はレポートがある回になります。
本講義の構成
 1週目－２週目：演習前の準備
 基礎的なＷｅｂサイトの仕組みとWebプログラミ
ングを講義します。
 演習に向けた準備であるため、環境構築やプログ
ラミングを行ってもらいますが、最小限にとどめ
た説明になります。
 ３週目－１４週目：演習
 初回にＷｅｂセキュリティの脆弱性を概説します。
 各脆弱性のテーマ毎に、脆弱性の疑似攻撃および
脆弱性の修正を行う演習をします。
 １５週目：試験
各構成の目標
 1週目－２週目：演習前の準備
 基礎的なWebプログラミングに触れWebサイト
の仕組みを理解する。
 プログラミングを通じて、自主的にソースコード
を読み修正をする姿勢を身に着ける。
 ３週目－１４週目：演習
 演習を通じて、Ｗｅｂサイトの脆弱性が生まれる
原因を理解する。
 プログラム修正を通じて、脆弱性対策を知る。
 １５週目：試験
 講義で学んだことを正しく理解しているかを確認
する。
本講義の目的
 Webサイトの脆弱性の脅威とセキュリティの重要
性について理解する
 安全なWebサイトを開発するために必要な基礎的
な素養を身に着ける
 演習はいつでもWebの脆弱性攻撃を体験することが
できます。
 体験して学んだことを次に活かす姿勢を身に着けて
ください。
まずは自分で積極的に考えるようにしましょう。
自分自身で試行錯誤する行動力をもちましょう。
講義内容
1. 2*. Webサイトの仕組みとWebプログラミング基礎
3.4.5*. 不正スクリプトの実行対策
6.7*.
データベースの不正操作対策
8 *.
システムの不正操作対策とHTTPレスポンスの改竄対策
9 *.
偽リクエストによるサービスの不正利用対策
10*.
セッションIDの
不正取得対策
11.
総合演習（１）
12*.
公開ディレクトリの不正横断対策と認証認可制御の欠落
による不正アクセス対策とエラーメッセージからの情報
漏えい対策
13.
総合演習（２）
14.
総合演習（３）
15.
学期末試験
※＊はレポートがある回になります。
本日の講義の目標と内容
 開発環境構築
 Webの仕組みを理解する。
 HTTP、HTML
まずは開発環境を構築しよう
 作業内容
1. 必要なファイルをダウンロードする
2. ソフトウェアをインストールする
3. 仮想のサーバを立ち上げる
4. 仮想のサーバにリモートアクセスできるようにする
5. 仮想のサーバにWebサーバの設定を行う
6. Webサーバにブラウザでアクセスして動作確認する
開発環境を構築する前に（１）
 以下の条件を満たしていますか？
パソコンを持参していますか？
インターネットにアクセスできますか？（WiFi通信
が可能ですか？）
開発環境を構築する前に（２）
 SSO-KID
 今回、環境を構築するために九州大学のキャン
パスクラウドサービスを利用します。
 SSO-KIDの登録が必要です。
１．必要なファイルをダウン
ロードする
Cyberduck
TeraPad（Windowsユーザのみ）
Cyberduck
 Windows OSまたはMac OS上で動作する無償
のファイル転送ソフトウェア
 Linux OSの仮想サーバのファイルにリモート
アクセスするために利用
Cyberduckダウンロード
 https://cyberduck.io/index.ja.html?l=jaか
らダウンロード
※Windows
※Mac
TeraPad
 Windows OS上で動作する無償のテキストエ
ディタ
 仮想Webサーバのファイルを編集するために
利用
 Windows標準のメモ帳は使いづらい
TeraPadダウンロード
（Windowsユーザのみ）
 http://www.forest.impress.co.jp/library/s
oftware/terapad/からダウンロード
２．ソフトウェアをインストー
ルする
 以下のソフトウェアをインストールしてください。
 Cyberduck
Cyberduck-Installer-4.7.2.exe
Cyberduck-4.7.2.zip
 TeraPad
tpad109.exe
 Cyberduckのインストール手順は、Window版と
Mac版はほぼ同じですので、Window版で説明してい
きます。
Cyberduckインストール
 Cyberduck-Installer-4.7.2.exeをダブルク
リックし、次へをクリックしてください。
 Macユーザは、 Cyberduck-4.7.2.zipをダ
ブルクリックするだけ。
Cyberduckインストール
 次へをクリックしてください。
Cyberduckインストール
 インストールをクリックしてください。
TeraPadインストール
 tpad109.exeをダブルクリックし、次へを
クリックしてください。
TeraPadインストール
 次へをクリックしてください。
TeraPadインストール
 次へをクリックしてください。
TeraPadインストール
 次へをクリックしてください。
TeraPad起動
 WindowsメニューからTeraPadを起動して
ください。
TeraPad設定
 表示メニュからオプションを選択し、文字コードタ
ブを選んでください。
 初期文字コードをUTF-8に変更し、OKしてください。
Cyberduck起動
 WindowsメニューからCyberduckを起動してください。
 Macユーザは、Cyberduck.appをダブルクリックして
ください。
Cyberduck・TeraPad連携
（Windowsユーザのみ）
 編集メニューからPreferenceを選択してください。
Cyberduck・TeraPad連携
（Windowsユーザのみ）
 Editorタブをクリックし、プルダウンメニュから選択を
指定してください。
Cyberduck・TeraPad連携
（Windowsユーザのみ）
 C:\Program Files (x86)\TeraPadのフォルダにある
TeraPad選択し開くをクリックしてください。
Cyberduck・TeraPad連携
（Windowsユーザのみ）
 Always use this applicationにチェックを入れ、クロー
ズしてください。
３．仮想のサーバを立ち上げる
 九州大学のキャンパスクラウドシステム
（QCloud）を利用します。
 専用のWebページ（CITRIX CloudPlatform）か
ら仮想サーバを構築することになります。
CITRIX CloudPlatformにログ
イン
 SSO-KIDでログオンしましょう。
 https://qumo.qc.kyushu-u.ac.jp/client/
Cloud Platform利用方法
 Cloud Platform利用方法を参考に仮想サーバを構築し
ましょう。
 http://qc.kyushu-u.ac.jp/
Cloud Platform利用方法の補
足（１）
 「２OSを利用できる状態にします。」は以下を参
考にしてください。
 ⅲ）「Standard CentOS 6.6(64-bit)」を選択してく
ださい。
 ⅳ）「cpu1_mem2」を選択してください。
 ⅴ）「設定しない」のままで大丈夫です。
 ⅶ）ネットワークの名前は「csr2015nw」としてく
ださい。
 ⅷ）名前は「csr2015」としてください。
クラスタ（オプション）はチェック不要です。
有効期限は「2016年2月29日」としてください。
Cloud Platform利用方法の補
足（２）
 「４ネットワークの設定」は以下を参考にしてくだ
さい。
 ⅸ）ファイアウォールに以下の内容も追加してくだ
さい。
 送信元：133.5.0.0/16、プロトコル：TCP、開始ポー
ト：80、終了ポート：80
 送信元：133.5.0.0/16、プロトコル：ICMP、ICMP
の種類：8、ICMPコード：0
 「５その他の設定」は不要です。
パスワードは忘れないように
 仮想サーバを構築できた時に表示されるパスワード
は仮想サーバにログインする際に使用します。
仮想サーバにログイン
 コンソールで仮想サーバにログインしましょう。
 IDは「root」、パスワードは先ほどの表示された文
字列
rootアカウントのパスワード変
更
 コンソールでpasswd rootと入力してください。
 [root@csr2015 ~] passwd root
 新しいパスワード入力が求められます。
 csr2015と入力してください。
 確認のパスワード入力も求められますので、csr2015
と入力しましょう。
 Windowsのパソコンの方は文字化けするかもしれま
せんが気にせず入力してください。
４．仮想のサーバにリモートアクセス
できるようにする
 Webサーバの名前とIPアドレスを自分のパソコンに登
録する。
 Cyberduckを用いて仮想サーバにリモートアクセス
できるか確認する。
登録するIPアドレスの確認
 Cloud Platformで新規に取得したIPアドレスを確認し
てください。（ex 133.5.152.147）
hostsファイルの編集
（Windows編）
 Windowsメニューからメモ帳アプリを見つけ、管理
者権限で起動してください。
 メモ帳アプリを右クリックし、管理者として実行を選
択
 メモ帳アプリのファイルから開くを選択し、hosts
ファイルを開いてください。
 C:\Windows\System32\drivers\etc\hosts
 右下のテキスト文書（*.txt）からすべてのファイルを選
びhostsファイルを開く
hostsファイルの編集
（Windows編）
 HostsファイルにIPアドレスとWebサーバ名
（example.jp）を追記してください。
 ex 133.5.152.147 example.jp
hostsファイルの編集
（Mac編）
 ターミナルを開き、以下のコマンドを入力してくださ
い。
 sudo vi /private/etc/hosts
 パスワードの入力が求められますので、ご自身のパス
ワードを入力してください。
hostsファイルの編集
（Mac編）
 HostsファイルにIPアドレスとWebサーバ名
（example.jp）を追記してください。
 ex 133.5.152.147 example.jp
Cyberduckによるリモートアクセス
 新規接続をクリックしてください。
 Windows版で説明しますが、Mac版もやり方は同じ
です。
Cyberduckによるリモートアクセス
 プルダウンメニュからSFTPを選んでください。
 Serverは「example.jp」としてください。
 ユーザ名は「root」、パスワードは「csr2015」とし
てください。
Cyberduckによるリモートアクセス
 許可をクリックしてください。
Cyberduckのリモートログイン画面
５．仮想のサーバにWebサーバの設定
を行う
 Webサーバの設定ファイル（httpd.conf）
をエディタで編集する
httpd.confの編集
 以下のフォルダに移動しましょう。
 /etc/httpd/conf/
httpd.confの編集
 httpd.confのファイルを選択して編集ボタンをクリッ
クしましょう。
httpd.confの編集
 以下の箇所を修正してください。
 76行目：KeepAlive On
 276行目：ServerName example.jp:80
Webサービスの起動
 仮想サーバのコンソール上で以下のコマンドを入力
しましょう。
 [root@csr2015 ~]# /etc/init.d/httpd start
Webサービスの自動起動設定
 仮想サーバのコンソール上で以下のコマンドを入力
しましょう。
 [root@csr2015 ~]# chkconfig httpd on
６． Webサーバにブラウザでアクセス
して動作確認する
 ブラウザのURL欄にhttp://example.jpを入力して以
下が表示されるか確認してください。
Webサーバの仕様
 ハードウェア
 アプリケーション
 CPU：1コア
 Apache 2.2.15
 メモリ：2GB
 Mysql 14.14
 HDD：20GB
 PHP 5.3.3
 OS
 CentOS 6.4 (64bit)
 ログイン情報
 ID：root
 Password：csr2015
 Webサーバ名
 example.jp
終了の仕方（Cyberduck）
 右上の×ボタンをクリックして終了してください。
終了の仕方（Cyberduck）
 以下が表示された場合は、Don’t show again for
this versionをチェックし、Laterをクリックしてく
ださい。
終了の仕方（仮想サーバ）
 以下のコマンドを打って仮想サーバを停止し、右
上の×ボタンをクリックして終了してください。
 [root@csr2015 ~]# shutdown –h now
終了の仕方（CloudPlatform）
 ログオフしてページを閉じてください。
本日の講義の目標と内容
 開発環境構築
 Webの仕組みを理解する。
 HTTP、HTML
Webとは
 Web（正式名称：World Wide Web、略名：
WWW）とは、インターネット上で提供されるハ
イパーテキストシステム。
 ハイバーテキストとは、複数の文書を相互に関連
付け、結びつける仕組みである。テキスト間を結
びつける参照のことをハイパーリンクと言う。
（Wikipediaより）
九大
伊都
インターネット
世界で最初のWebページ
 1991年8月6日にイギリスの計算機学者のティム・
バーナーズ＝リーが公開
 Webの仕組みを考案し、URL、HTTP、HTMLの設計
にも携わている。
http://info.cern.ch/hypertext/WWW/TheProject.html
Webの基本的な動作
 HTTP通信によるクライアントサーバモデル
 WebブラウザはHTTPリクエストでWebサーバに要求する。
 Webサーバから処理結果としてHTTPレスポンスが返ってくる。
 HTTP(HyperText Transfer Protocol)は、HTML文書などのコン
テンツの送受信に用いる通信手順
Webブラウザ
データ
ベース
Webサーバ
ソフトウェア
HTTPリクエスト
検索
HTTPレスポンス
クライアント
Webサーバ
Webサイトの通信例
 HTTP通信によるクライアントサーバモデル
HTTPリクエスト
「サイバーセキュリ
 WebブラウザはHTTPリクエストでWebサーバに要求する。
ティ」で検索
 Webサーバから処理結果としてHTTPレスポンスが返って
くる。
HTTPレスポンス
「サイバーセキュリ
ティ」の検索結果
HTTPリクエストの例
 GET http://（省略） HTTP/1.1
 Host: www.kyushu-u.ac.jp
 Connection: keep-alive
 Accept:
text/html,application/xhtml+xml,application/xml;q=0
.9,image/webp,*/*;q=0.8
 User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/47.0.2508.0 Safari/537.36
 Referer: http://www.kyushu-u.ac.jp/
 Accept-Encoding: gzip, deflate, sdch
 Accept-Language: ja,en-US;q=0.8,en;q=0.6
 Cookie: （省略）
HTTPレスポンスの例
 HTTP/1.1 200 OK
 Date: Thu, 24 Sep 2015 01:05:20 GMT
 Server: Apache/2
 Cache-Control: no-cache
 Expires: 0
 Connection: close
 Transfer-Encoding: chunked
 Content-Type: text/html; charset=shift_jis
 <html>（省略）</html>
HTTPリクエストのメッセージ構文
 メソッド
パス名
HTTP/バージョン
 GET http://www.kyushu-u.ac.jp/*** HTTP/1.1 GETはコンテンツ
 HOST：Webサーバ名を通知
 Connection：セッションの継続か否かを通知
 Accept：受け入れ可能なデータ形式を通知
 User-Agent：ブラウザ情報を通知
を取り出すこと。
クライアントが
サーバにデータ
を送信する際は
POSTメソッドを
使う。
 Referer：要求元のURLを通知
 Accept-Encoding：ブラウザが受け入れ可能な文字エン
コード方式を通知
 Accept-Language：ブラウザが受け入れ可能な言語を
通知
 Cookie：セッション情報を通知
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTPレスポンスのメッセージ構文
 レスポンス行
 HTTP/バージョンステータス番号（3桁）補足メッセージ
1xxは「情報」、2xxは「成
功」、3xxは「リダイレクト」、
4xxは「クライアントエラー」、
5xxは「サーバエラー」を示す
HTTP/1.1 200 OK
 Date:日付
 Server: Webサーバ情報を返答
 Cache-Control: キャッシュの有無の指定
 Expires: コンテンツの有効期限を指定
 Connection:セッションの継続か否かを通知
 Transfer-Encoding: chunked
 Content-Type: コンテンツのタイプを返答
 ボディメッセージ
 HTMLデータ
<html>（省略）</html>など
https://ja.wikipedia.org/wiki/Hypertext_Transfer_Protocol
ステートレスとステートフル
 ステートレスは、Webサーバがクライアントのセッ
ション情報を保持しない。
 クライアントの状態に依存しないため処理がシンプル。
 認証が必要な時やコンテンツの操作時など毎回やり取りを繰
り返す必要がある。
 通信負荷も多くなりやすい。
 ステートフルは、Webサーバがクライアントのセッ
ション情報を保持する
 やり取りの回数や通信負荷を軽減できる
 やり取りを追跡しやすい。
 クライアントの状態を常に把握しておく必要があり、処理が
複雑になりやすい。
セッションとは
 セッションは一連のインタラクティブな操作のこと。
 典型的には、ログインしてからログアウトするまでが
一つのセッション。
SNSのWebサイトにアクセス
ログインページを送付
ログイン
クライアント
Webサーバ
ユーザ専用ページを送付
ログアウト
ログアウト後のページを送付
セッションIDとCookie
 セッションIDはWebサーバが発行するセッションの識別。
 セッション変数はセッションIDと関連パラメータ（ログイ
ンIDや日付など）を紐づけした情報を格納する領域
 Cookieはブラウザが保持するセッションID。
ログイン情報送信
クライアント
Cookieに保存
されたのセッ
ションIDを送信
セッションIDを発行
該当するユーザ専用ページを送付
ログイン済みのアクセス
該当するページを送付
ID・パスワード認証
セッション変数格納
Webサーバ
セッション変数参照
セッションID検証
Webサーバ
HTML（HyperText Markup
Language ）
 Webページを記述するための言語
 マークアップは、原稿用紙の余白に印刷に関する指
示の記号を書き加える出版の作業過程であるマーキ
ングアップという作業からの派生した用語。
 HTML文書
 HTMLで記述された文書
 文書の各部分にはタグと呼ばれる印（Markup）が
あり、どんなスタイル、書体、サイズを適用すべき
かなど、定められた記述方式で明確に記されている。
HTML文書の例
<html>
<head>
<title> Test Page </title>
</head>
<body>
<h1 align="center"> Test Page </h1>
</body>
</html>
HTMLタグ（１）
タグ名
プロパティ
値
<html>～
</html>
<head>～
</head>
ー
ー
HTML文書の宣
言
ー
ー
ページの情報の
指定。ページに
表示はされない。
<title>～</title>
ー
ー
タイトルの表示
<body>～
</body>
<h1>～</h1>
ー
ー
ページの表示部
分の指定
align
説明
left,center,right 見出し位置指定
HTML文書を作成してみよう
 仮想Webサーバの起動
 Cloudplatformから起動してください。
 リモートアクセス
 Cyberduckを用いて仮想Webサーバにログイ
ンしてください。
 フォルダの移動
 /var/www/html/
HTML文書を作成してみよう
 HTMLファイルの作成
 右クリックして、New Fileを選択
 ３つのHTMLファイルを作成します。
 ファイル名は、以下としてください。
survey.html
check.html
result.html
<html>
<head><title> サイバーセキュリティ演習に関するアンケート </title></head>
<body>
<h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1>
<hr size="4" width=90% align="center" color="blue">
<div><span style="color:red">*</span>の項目は必ず入力してください。</div><br>
<form action="check.html" method="get">
<div><span style="color:red">*</span>１．名前</div><input type="text" name="name" value"">
<div><span style="color:red">*</span>２．性別</div>
<input type="radio" name="sex" value＝"男">男<input type="radio" name="sex" value="女">女
<div><span style="color:red">*</span>３．年齢</div><input type="text" name="age" value"">歳
<div><span style="color:red">*</span>４．Webセキュリティに興味がありますか？</div>
<input type="radio" name="interest" value="はい">はい
<input type="radio" name="interest" value="いいえ">いいえ
<div>４．で「はい」を選ばれた方は、興味をもった理由を記述してください。</div>
<textarea name="content1" rows="4" cols="40"></textarea>
<div><span style="color:red">*</span>５．Webプログラミングの経験がありますか？</div>
<input type="radio" name="experience" value="はい">はい
<input type="radio" name="experience" value="いいえ">いいえ
<div>５．で「はい」を選ばれた方は、これまでの経験について記述してください。</div>
<textarea name="content2" rows="4" cols="40"></textarea>
<div><input type="submit" value="投稿" /><input type="reset" value="クリア" /></div>
</form>
<div align="center"><font size="5" color="blue"><a href="result.html">アンケート結果</a></font></div><br>
</body>
</html>
survey.html
<html>
<head> <title> サイバーセキュリティ演習に関するアンケート </title> </head>
<body>
<h1 align="center"> サイバーセキュリティ演習に関するアンケート </h1>
<hr size="4" width=90% align="center" color="blue">
<center>
<div>以下の内容でよろしければ送信ボタンを押してください。</div><br>
<form action="result.html" method="get"><input type="submit" value="送信"
/></form>
<table border>
<tr><td>名前</td><td>?</td></tr>
<tr><td>性別</td><td>?</td></tr>
<tr><td>年齢</td><td>?</td></tr>
<tr><td>Webセキュリティに興味がありますか？</td><td>?</td></tr>
<tr><td>興味をもった理由</td><td>?</td></tr>
<tr><td>Webプログラミングの経験がありますか？</td><td>?</td></tr>
<tr><td>これまでの経験</td><td>?</td></tr>
</table>
<form action="survey.html" method="get"><input type="submit" value="戻る"
/></form>
</center>
</body>
</html>
check.html
<html>
<head><title> サイバーセキュリティ演習に関するアンケート結果 </title></head>
<body>
<h1 align="center"> サイバーセキュリティ演習に関するアンケート結果 </h1>
<hr size="4" width=90% align="center" color="blue">
<center>
<table ><caption>Webセキュリティへの興味の有無</caption>
<tr>
<td><table border><caption>男女別</caption>
<tr><td> </td><td>男</td><td>女</td></tr>
<tr><td>はい</td><td>?</td><td>?</td></tr>
<tr><td>いいえ</td><td>?</td><td>?</td></tr>
</table></td>
<td><table border><caption>年代別</caption>
</td></tr> <tr><td> </td><td>10代</td><td>20代</td><td>30代</td><td>40代</td><td>50代</td><td>60代
<tr><td>はい</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
<tr><td>いいえ</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
</table></td>
</tr></table>
<table ><caption>Webプログラミングの経験の有無</caption>
<tr>
<td><table border><caption>男女別</caption>
<tr><td> </td><td>男</td><td>女</td></tr>
<tr><td>はい</td><td>?</td><td>?</td></tr>
<tr><td>いいえ</td><td>?</td><td>?</td></tr>
</table></td>
<td><table border><caption>年代別</caption>
</td></tr> <tr><td> </td><td>10代</td><td>20代</td><td>30代</td><td>40代</td><td>50代</td><td>60代
<tr><td>はい</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
<tr><td>いいえ</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td><td>?</td></tr>
</table></td>
</tr></table>
</center>
<div align="center"><font size="5" color="blue"><a href="survey.html">アンケートページに戻る</a></font></div><br>
</body>
</html>
result.html
HTMLタグ（２）
タグ名
プロパティ
値
説明
size,width,
color,
align
ー
ピクセル数や%,
色,
left,center,right
ー
罫線の太さ、長さ、
比率、色、位置の指
<span>～</span>
style
色
ひとつの範囲の定
義
<form>～</form>
method,
action
入力欄やボタンを
get,
URLやhtmlファイ設定するための
ル
フォームの宣言
<input>～</input>
type,
value
text,radio,submit 入力欄やボタンの
表示
,reset
文字
<textarea>
rows,
cols
<hr>
<div>～</div>
値
定
段落の作成
複数行入力可能欄
の表示
HTMLタグ（３）
タグ名
プロパティ
値
説明
<font>～</font>
size,
color
1（小）～7（大）文字の大きさや色
色
の指定
<a>～</a>
href
URL、ファイル名、 URL、ファイル、
メールアドレスの
メールアドレス
リンクの指定
<center>～
</center>
size,
color
1（小）～7（大）文字の大きさや色
色
の指定
method,
action
入力欄やボタンを
get,
URLやhtmlファイ設定するための
ル
フォームの宣言
<br>
HTMLタグ（４）
タグ名
プロパティ
値
<table>～/table>
border
ー
ー
表の作成
ー
行の指定
<td>～</td>
ー
ー
列の指定
<caption>～
</caption>
ー
ー
表タイトルの指定
<tr>～</tr>
説明
動作を確認してみよう
 ブラウザでhttp://example.jp/survey.html
にアクセスしてみてください。
動作を確認してみよう
 アンケートに答えて投稿してみましょう。
想定される動作をしない箇所があります。
動作を確認してみよう
 アンケート結果もみてみましょう。
想定される動作をしない箇所があります。
想定外の動作箇所
 投稿した入力値が確認ページや結果に反映さ
れていません。
 check.htmlやresult.htmlに記述した値（今回
は？）がそのまま表示されています。
 今回のHTML文書は静的なWebページとなり
ます。
次回
 入力値が反映する動的なWebページ（Webア
プリケーション）を作成しましょう。
 以下の簡易プログラム言語（スクリプト）を
使用しますので、可能な限り勉強しておいて
ください。
 JavaScript
 PHP
Windows環境が無いユーザは
 3週目以降はWindows環境が必須となります。
 CloudPlatformでWindowsのインスタンスを追加で作
成してください。
 「２OSを利用できる状態にします。」のⅲ）の箇所で、
「Windows7 Enterprise Edition」を選択してください。
 立ち上がったら、Windowsの初期設定、ライセンス認
証などが必要です。
 Cloud Platform 利用法の「4 ネットワーク設定」は不要
です。
 詳細は、以下に問い合わせてください。
 qcloud-adm(at)iii.kyushu-u.ac.jp
(at)は＠に変更してください。

Download Report