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

今日、やったこと 枠線、余白その他 今日のホワイトボード 枠線、余白の指定 border、padding、marginなら上下左右をまとめて指定。 上だけとか右だけのように1か所だけを指定する方法もあり。 図　枠線、余白の指定法（4か所まとめて、1か所だけ） 練習問題「ふぐ」 解答例をあげておきます。 演習１ とくにややこしいことはないと思います。 演習２ 毒フグの<h2>タグにはdangerクラスが設定されているので、dangerクラスの背景色を設定すればOK。 演習３ 説明、写真は<div class="inner"></div>の中にある。 innerクラスの背景色と上下の余白を設定すればOK。 演習４ 説明文は<div class="comment"></div>の中にある。 commentクラスの余白を設定すればOK。 演習５ 〇説明文の幅を500px 説明文は<div class="comment"></div>の中。commentクラスの幅を500pxに。 〇説明文と写真が横並び 横並びの要素にはfloat:leftを設定 。説明文は<div class="comment"></div>の中、写真は<div class="image"></div>の中。commentクラスとimageクラスに float : left を設定。 横並びを解除する要素には clear : left を設定 。<h2>タグで横並びを解除するため、clear : left を設定。 演習６ 左側だけ枠線をつけるには　border-left で設定。 演習７ とくにややこしいことはないかと。 予告 近日中に実技テストをします。

今日、やったこと 要素の枠線、余白 今日のホワイトボード タグはタテに積み上げられる HTMLファイルでの順番どおりにタテに表示される。 図　HTMLファイルでの記述順に タテ に表示される 枠線、余白 ほとんどのタグは周囲に枠線、余白が設定できる。 図　枠線(border)、余白(padding、margin) 余白には 枠線の内側はpadding 枠線の外側はmargin の2種類がある。 練習1(マンボウ) 正解例(style.cssのみ)をあげておきます。 練習2(ペンギン)  正解例(style.cssのみ)をあげておきます。 演習1 演習2 演習3 演習4 演習5 演習6 演習7 演習8

今日、やったこと HTTPパケット解析確認テスト Webの基本 今日のホワイトボード Webの基本 WebサーバーはHTMLで書かれたHTMLファイルが保存されています。 クライアント(Webブラウザ)はサーバーにこのHTMLファイルをリクエストします。 サーバーはリクエストされたHTMLファイルがあれば、そのファイルの中身をクライアントへ返信します。 クライアントからサーバーへのHTMLファイルのリクエスト方法や、サーバーからクライアントへHTMLファイルの中身の返信方法がHTTPで決められています。 図　Webの基本 次回からは HTMLについて話をします。

今日、やったこと HTTPパケット(パケット4)解析の解説 今日のホワイトボード  HTTPパケット(パケット4)の解説をしました。 イーサネットヘッダ とくにややこしいところはないと思います。 タイプが0x0800から上位プロトコルはIP。よって、イーサネットヘッダのあとにはIPヘッダが続きます。 図　イーサネットヘッダ IPヘッダ これも特に問題はないと思います。 プロトコル番号が0x06から上位プロトコルはTCP。よって、IPヘッダのあとにはTCPヘッダが続きます。 図　IPヘッダ TCPヘッダ 宛先ポート番号が80。TCPの80番ポートはHTTPのサーバーが利用するポート。 よって、上位プロトコルはTCPで、クライアントからサーバーへのHTTPのパケットだとわかります。 図　TCPヘッダ HTTPヘッダ HTTPヘッダは文字データをASCIIで符号化したデータが格納されている。1バイトずつASCIIコード表に従って文字に戻せばいい。 データ間の区切りはCR(0x0d)、LF(0x0a)。 このパケットはクライアントからサーバー(TCPヘッダの宛先ポート番号80)宛てのパケット。 先頭はリクエストヘッダライン。続いてリクエストヘッダフィールドが続く。 リクエストヘッダライン 1バイトずつ文字に戻す。 図　HTTPヘッダ　リクエストライン① 図　HTTPヘッダ　リクエストライン② 図　HTTPヘッダ　リクエストライン　まとめ GETコマンドで/index.htmlをリクエストしている。 HTTPのバージョンは1.1を指定。 リクエストヘッダフィールド CR(0x0d)+LF(0x0a)区切りで複数のデータが連続している。 データは　フィールド名：フィールド値　のフォーマット。 このパケットではHostとUser-Agentの2つのフィールド名に対するフィールド値がある。 図　HTTPヘッダ　リクエストヘッダフィールド① 図　HTTPヘッダ　リクエストヘッダフィールド② 図　HTTPヘッダ　リクエストヘッダフィールド　まとめ 次回は HTTPパケット解析のテストをします。

今日、やったこと パケット解析(HTTP) 今日のホワイトボード HTTPヘッダのリクエストライン クライアント=>サーバーのHTTPヘッダの先頭はリクエストライン。 ここにはHTTPで定義されたメソッドが書き込まれる。 HTTPのメソッドをリクエスト方法に応じて、いくつか用意されている。 〇GETコマンド 図　クライアント=>サーバー　GETコマンド 〇POSTコマンド 図　クライアント=>サーバー　POSTコマンド HTTPヘッダのリクエストヘッダフィールド フィールド名：フィールド値 のフォーマットで複数並んでいる（区切りはCR+LF)。 フィールド名は目的別にいろいろ定義されている。 HTTPパケット解析 「パケット解析演習　パケット４」を解析してもらいました。 次回解説します。  

 前回のテスト（DNSパケット解析 パケット4)の解答例 DNSパケット解析 パケット4 解答例 今日、やったこと 前回のテスト（DNSパケット解析 パケット4)の解説 HTTPパケットの解析（HTTPヘッダ部） 今日のホワイトボード 前回のテスト（DNSパケット解析 パケット4)の解説 イーサネットヘッダ タイプ(0x0800)から上位プロトコルはIP。 図　イーサネットヘッダ IPヘッダ 図　IPヘッダ プロトコル番号から上位プロトコルはUDP。 UDPヘッダ 図　UDPヘッダ 送信元ポート番号から上位プロトコルはDNS。 DNSヘッダ（ヘッダセクション） 図　DNSヘッダ（ヘッダセクション） Questionセクションが１、Answerセクションが１なので、ヘッダセクションのあとにQuestionセクション、Answerセクションが１つづつ続く。 DNSヘッダ（Questionセクション） Questionセクションには問い合わせデータが書き込まれている。 ドメイン名部を文字列に戻す際に注意。 図　DNSヘッダ（Questionセクション） DNSヘッダ（Answerセクション） Answerセクションは問い合わせに対する回答が格納される。 ドメイン名部が圧縮されている点に注意。 図　DNSヘッダ（Answerセクション） 回答はRDataに格納されている 。 HTTPパケット解析（HTTPヘッダ） HTTPヘッダは文字列データをASCIIコードで符号化したデータ。 データとデータの間には区切りとしてCR＋LFが挿入される。 リクエストライン HTTPヘッダはリクエストラインから始まる。 図　HTTPヘッダ　リクエストライン リクエストラインに書き込まれているデータはクライアントからサーバーへのリクエスト。 HTTPではクライアントがサーバーへリクエストするための手段として、 GETコマンドやPOSTコマンド 等を定義している。 図　リクエストラインの内容 リクエストヘッダフィールド 以下のような 　 フィールド名：フィールド値 がCR＋LF区切りで複数個並ぶ。 図　リクエストヘッダフィールド（フィールド名:Host） 図　リクエストヘッダフィールド（フィールド名:Connection） フィールド名はHTTPで目的別に定義されている。 図　各フィール...