投稿

1月26日(木)2コマ目

イメージ
今日、やったこと 枠線・余白 今日のホワイトボード 枠線と余白 HTMLの多くのタグには枠線と余白の設定ができます。 余白には 枠線の内側(設定項目名:padding) 枠線の外側(設定項目名:margin) があります。 図 枠線・余白 練習問題1(マンボウ) 正解例をあげておきます。 style.css index.html linkタグでstyle.cssを読み込んでください。  次回は 練習問題の続き(ペンギン)をやってもらいます。

1月19日(木)2コマ目

イメージ
今日、やったこと デザイン設定を別ファイル(style.css)に 今日のホワイトボード タグのID、クラス タグにはID、クラスを指定することができます。 IDは重複NG、クラスは重複OKです。 図 タグにID、クラスを指定する デザイン設定 いままではタグを対象にデザイン設定をしていましたが、デザインは タグ ID クラス  を対象に設定できます。 図 セレクタの違い セレクタは対象がタグ、クラス、IDの場合にそれぞれ指定方法が異なります。 デザインを別ファイル(style.css)に 今まではHTMLファイルに表示内容とデザイン設定をしていました。 1つのWebサイトには複数のHTMLファイルがあります。これらのデザインを各ファイルで指定すると、 同じ設定を複数ファイルで指定する必要がある デザイン変更時の変更作業が大変 になります。 そこで、デザインはHTMLファイルとは別ファイルで設定し、HTMLファイルはデザイン設定ファイルを読み込めば上記の問題点も解消されます。 図 HTMLファイルとデザイン設定ファイル(style.css)を分離 練習5 style.cssファイルを作成する練習問題をやりました。正解例をあげておきます。 style.css 練習6 style.cssファイルを作成する練習問題をやりました。正解例をあげておきます。 style.css じかいは 余白、枠線をやります。

12月22日(木)2コマ目

イメージ
今日、やったこと HTTPヘッダ [練習問題]HTTPパケット の解析 今日のホワイトボード HTTPヘッダ DNSヘッダと同じように、可変長の文字列データをASCIIで数値化。データとデータの区切りにはCR(0x0d)、LF(0x0a)の2バイトが挿入される。 図 HTTPヘッダ 文字列データはリクエストラインにはコマンド、ヘッダフィールドには目的別の項目がHTTPで定められている。 Connection:Keep-alive Connectionはヘッダフィールドの項目の1つで、リクエスト毎にコネクション確立をするか(Connection:close)、レスポンスを返してもコネクションを切断せず、再利用するか(Connection:Keep-alive)を指定する。 図 クライアントとサーバーのコネクション HTTP/1.1では”Keep-alive"がデフォルト。 HTTPのコマンド リクエストラインには 図 GETコマンドでサーバーにリクエスト クライアントからサーバーへのコマンド(メソッド)がある。 図 GET、POSTコマンド コマンドはGET以外にも、目的別にPOST、PUT、DELETE、HEAD等がHTTPで定められている。 とりあえず、GETとPOSTはおさえておいてください。 次回は HTTPの解析テストをします。

12月8日(木)2コマ目

今日、やったこと [確認テスト]パケット解析2 今日の確認テスト 今日のテストのパケット解析結果です。 イーサネットヘッダ 項目 データ 宛先MACアドレス 40 : b0 : 76 : a2 : 69 : ff 送信元MACアドレス 00 : 1a : eb : 94 : 29 : 3c タイプ 0x0800(上位プロトコルはIP) 以前と同じでタイプが0x0800よりイーサネットヘッダ以降はIPヘッダだとわかります。 IPヘッダ 項目 データ バージョン 0100(このIPヘッダはバージョン4のフォーマット) ヘッダ長 0101(このIPヘッダは20バイト) パケット長 0x0130(IPヘッダ以降の長さは304バイト) プロトコル番号 0x11(上位プロトコルはUDP) 送信元IPアドレス 8.8.8.8 宛先IPアドレス 192.168.20.15 プロトコル番号が0x11(10進数なら17)よりIPヘッダ以降はUDPヘッダだとわかります。 UDPヘッダ 項目 データ 送信元ポート番号 0x0035(53 DNSのウェルノウンポート) 宛先ポート番号 0x0403(1027) 長さ 0x011c(UDPヘッダ以降の長さは284バイト) 送信元ポート番号が0x0035(10進数なら53)よりUDPヘッダ以降はDNSヘッダだとわかります。 DNSヘッダ(ヘッダセクション) 項目 データ トランザクションID 0x0002 QDCount 1 ANCount 1 ...

12月1日(木)2コマ目

イメージ
今日、やったこと パケット解析確認テスト1の解説 パケット解析(HTTP) 今日のホワイトボード パケット解析確認テスト1の解説 前回(11月24日)のおたすけサイト をご覧ください。 パケット解析 順に解析していきます。 イーサネットヘッダ タイプが0x0800より、イーサネットヘッダ以降はIPヘッダであることがわかります。 IPヘッダ 図 IPヘッダ解析 図 IPヘッダ解析結果 プロトコル番号が0x06より、IPヘッダ以降にはTCPヘッダがあることがわかります。 TCPヘッダ 初登場のTCPヘッダですが、フォーマットに従って解析すればややこしいことはないとおもいます。 図 TCPヘッダ解析 図 TCPヘッダ解析結果 UDPヘッダと同じように送信元・宛先のポート番号で上位プロトコルがわかります。 このパケットは宛先ポート番号の80からTCPヘッダ以降にはHTTPヘッダが続くことがわかります。 HTTPヘッダ このパケットはTCPの宛先ポート番号が80であることから、クライアント->サーバーのリクエストのパケットです。 HTTPヘッダはビット単位でフォーマットが決まっているわけではなく、区切りのCR(0x0d)、LF(0x0a)で区切った文字列データの連続です。 ということで、1バイトずつasciiの文字コード表をもとに文字に変換していきます。 まずは先頭から。ここはリクエストラインになります。 図 HTTPヘッダ リクエストライン部 リクエストラインは   GET / HTTP/1.1 です。 続いて、リクエストヘッダフィールドです。 図 HTTPヘッダ リクエストヘッダフィールド部 ① データは   Host: 172.16.8.10 です。 リクエストヘッダフィールドが続きます。 図 HTTPヘッダ リクエストヘッダフィールド部 ② データは   Connection: keep-alive です。 これで終了です。 リクエストヘッダフィールドは  項目名:値 のフォーマットです。 このパケットには項目名HostとConnectionがあります。 Hostはリクエストするホスト名の指定です。 Connectionは接続方法の指定です。keep-aliveはTCPのコネクションを維持せよという指定です。 図 HTTPヘッダ まとめ 次回は パケット解析確認...

11月24日(木)2コマ目

今日、やったこと [確認テスト]パケット解析確認テスト1 今日のテスト 解析してもらったパケットはこんなパケットでした。 まず、パケットの先頭はイーサネットヘッダです。イーサネットヘッダのヘッダフォーマットに従って解析していきます。 イーサネットヘッダ 項目 データ 宛先MACアドレス 00 : 1a : eb : 94 : 29 : 3c 送信元MACアドレス 40 : b0 : 76 : a2 : 69 : ff タイプ 0x0800(上位プロトコルはIP) イーサネットヘッダのタイプが0x0800になっていることから、イーサネットヘッダの後にはIPヘッダが続くことがわかります。 ということで、IPヘッダのヘッダフォーマットに従って解析していきます。 IPヘッダ 項目 データ バージョン 0100(このIPヘッダはバージョン4のフォーマット) ヘッダ長 0101(このIPヘッダは20バイト(5x4=20)) パケット長 0x0043(IPヘッダ以降の長さは67バイト) プロトコル番号 0100(このIPヘッダはバージョン4のフォーマット) 送信元IPアドレス 192.168.10.11 宛先IPアドレス 8.8.8.8 IPヘッダのプロトコル番号が0x11(10進数では17)になっていることから、IPヘッダの後にはUDPヘッダがつづくことがわかります。 ということで、UDPヘッダのヘッダフォーマットに従って解析していきます。 UDPヘッダ 項目 データ 送信元ポート番号 0x04020(1026) 宛先ポート番号 0x0035(53 DNSのウェルノウンポート) 長さ 0x...

11月17日(木)2コマ目

イメージ
今日、やったこと [パケット解析練習]パケット2の解説 今日のホワイトボード 前回、途中で終わったパケット2の解説です。 前回はDNSヘッダのヘッダセクションとQuestionセクション、1つ目のAnswerセクションの途中まで解説をしました。 ヘッダセクション ヘッダセクション以降の各セクションの数です。 Questionセクション数 1 Answerセクション数 2 Authorityセクション数 0 Additionalセクション数 0 Questionセクション ドメイン名 www.yahoo.co.jp タイプ Aレコード Answerセクション① 前回はここまで解析しました。 ドメイン名 www.yahoo.co.jp 圧縮あり.DNSヘッダ先頭から13バイト目にドメイン名あり タイプ DNAMEレコード CNAMEは正式名.このAnswerセクションでwww.yahoo.co.jpの正式名を回答 RDLength 16 RDataは16バイト 続きです。 RDataは最後の2バイトが圧縮(別の場所に記述済み)されています。 図 Answerセクション 1つ目 図 Answerセクション① 解析結果 RDataの最後の2バイトが圧縮されています。 本来ここに書くべき値はDNSヘッダの先頭から26バイト目に書かれていることになります。 ということで、DNSヘッダ先頭から26バイト目はQuestionセクションのドメイン名になります。 図 DNSヘッダ先頭か...