ネットワークシステム 2022年度後期(1年)

今日、やったこと 枠線・余白の練習問題 今日の練習問題 「ペンギン」の正解例です。 演習１ 演習２ 演習３ 演習４ 演習５ 演習６ 演習７ 演習８ じかいは テストをします。 

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

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

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

今日、やったこと [確認テスト]パケット解析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 ...

今日、やったこと パケット解析確認テスト１の解説 パケット解析(HTTP) 今日のホワイトボード パケット解析確認テスト１の解説 前回(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ヘッダ　まとめ 次回は パケット解析確認...