Pro Yearly is on sale from $80 to $50! »

Introduction to Web

E37b4344ef4bfd0fc4826c04971e54fb?s=47 nrs
May 17, 2019

Introduction to Web

GMO Technology boot camp (新卒研修)の Web 概論講義資料です。
以下の内容の概要を解説しています。
* URI
* HTTP
* HTML

# URL
HomePage: https://nrslib.com
Twitter: https://twitter.com/nrslib

E37b4344ef4bfd0fc4826c04971e54fb?s=128

nrs

May 17, 2019
Tweet

Transcript

  1. Introduction to Masanobu Naruse

  2. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html>
  3. 本題の前に

  4. None
  5. どんな木がある?

  6. None
  7. 何の木?

  8. None
  9. Homage to knowledge

  10. Web

  11. None
  12. None
  13. Web

  14. HTML Web

  15. Web HTML HTTP URI

  16. Agenda 1. Summary 2. URI 3. HTTP 4. HTML

  17. Agenda 1. Summary 2. URI 3. HTTP 4. HTML

  18. サイト閲覧

  19. 何が起きてる?

  20. Browser Server

  21. Browser Server nrslib のサイトを見たい!

  22. Browser Server nrslib のサイトを見たい! https://nrslib.com をブラウザに 入力!

  23. Browser Server Request

  24. Browser Server Request GET https://nrslib.com/ HTTP/1.1 Host: nrslib.com Connection: keep-alive

    Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9, image/webp,image/apng,*/*;q=0.8,application/signed- exchange;v=b3 Accept-Encoding: gzip, deflate, br Accept-Language: ja,en-US;q=0.9,en;q=0.8 Cookie: _ga=GA1.2.1676611691.1531371612
  25. Browser Server Request

  26. Browser Server Request Response

  27. Browser Server Request Response HTTP/1.1 200 OK Server: nginx Date:

    Wed, 10 Apr 2019 03:21:30 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 7641 Connection: keep-alive Set-Cookie: PHPSESSID=8cgpb0s6e570qrgjgdklaqcnf4; path=/ Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate Pragma: no-cache Link: <https://nrslib.com/wp-json/>; rel="https://api.w.org/" Vary: Accept-Encoding Content-Encoding: gzip ]{sG;̊<z6Xso&R(J5ҀΌ0$Uzg0O&@Gٱd/=aq-Mwst9=?`Ki6_. *** FIDDLER: RawDisplay truncated at 128 characters. Right-click to disable truncation. ***
  28. Browser Server Request Response

  29. Browser Server Request Response

  30. テキストファイルの やり取り

  31. Browser Server nrslib のサイトを見たい! https://nrslib.com をブラウザに 入力!

  32. Browser Server nrslib のサイトを見たい! https://nrslib.com をブラウザに 入力!

  33. Browser Server nrslib のサイトを見たい! https://nrslib.com をブラウザに 入力!

  34. Request

  35. Request Response

  36. Request Response

  37. Browser Server Request Response

  38. Browser Server Request Response

  39. Browser Server Request Response

  40. Web とは何か

  41. インターネット = Web

  42. インターネット = Web

  43. None
  44. None
  45. 歴史

  46. Memex

  47. Memex マイクロフィルムに保存 スクリーンに投影

  48. Memex マイクロフィルムに保存 スクリーンに投影 あるページから参照ページへ 参照を辿ることができる

  49. ハイパーテキスト

  50. ハイパーテキスト 超える

  51. ハイパーテキスト 複数の文書を相互に関連付け 結びつける仕組み

  52. ハイパーメディア

  53. ハイパーメディア ハイパーテキストを拡張 テキストに限らず 音声や動画などにも及ぶ

  54. Web

  55. Web インターネットを使った ハイパーメディア

  56. Agenda 1. Summary 2. URI 3. HTTP 4. HTML

  57. URI

  58. Uniform Resource Identifier

  59. Uniform Resource Identifier

  60. Uniform Resource Identifier 統一

  61. Uniform Resource Identifier 統一 資源

  62. Uniform Resource Identifier 統一 資源 識別子

  63. Uniform Resource Identifier 統一 資源 識別子

  64. Uniform Resource Identifier 統一 資源 識別子

  65. Uniform Resource Identifier 統一 資源 識別子

  66. Uniform Resource Identifier 統一 資源 識別子

  67. Uniform Resource Identifier 統一 資源 識別子

  68. None
  69. http://nrslib.com/blog

  70. http://nrslib.com/blog http://nrslib.com/music

  71. http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture

  72. http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie

  73. http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie 識別子

  74. http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie 識別子 Identifier

  75. http://nrslib.com/blog http://nrslib.com/music http://nrslib.com/picture http://nrslib.com/movie 識別子 Identifier

  76. http://nrslib.com/blog

  77. http://nrslib.com/blog nrslib.com/blog://http

  78. http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http

  79. http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http :http//nrslib.com/blog

  80. http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http :http//nrslib.com/blog //http:nrslib.com/blog

  81. http://nrslib.com/blog nrslib.com/blog://http //nrslib.com/blog:http :http//nrslib.com/blog //http:nrslib.com/blog

  82. http://nrslib.com/blog Uniform 統一

  83. Uniform Resource Identifier 統一 資源 識別子

  84. Uniform Resource Locator

  85. Uniform Resource Locator

  86. Uniform Resource Locator 統一 資源 場所

  87. Uniform Resource Name

  88. Uniform Resource Name

  89. Uniform Resource Name 統一 資源 名前

  90. urn:ISBN:0451450523

  91. http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523

  92. http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある

  93. http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある Name

  94. http://nrslib.com /isbn/0451450523 urn:ISBN:0451450523 urn:ISBN:0451450523 は http://nrslib.com/isbn/0451450523 にある Name Location

  95. URN は名前によって 永続的な特定を可能にする

  96. URL で十分永続的 なので URL が主流に

  97. URL URN URI

  98. 仕様

  99. 使える文字 アルファベット 数字 一部記号

  100. 日本語は?

  101. http://example.com/あ

  102. http://example.com/あ http://example.com/%E3%81%82

  103. %エンコーディング http://example.com/あ http://example.com/%E3%81%82

  104. http://nrs:pass@example.com:8000/search?date=20190908&type=all#i1 スキーム: http ユーザ情報: nrs:pass ホスト名: example.com ポート番号: 8000 パス:

    /search クエリパラメータ: date=20190908&type=all フラグメント: i1 URL の構成
  105. Cool URLs don’t change

  106. Cool URLs don’t change https://www.w3.org/Provider/Style/URI.html

  107. http://www.nsf.gov/cgi-bin/pubsys/browser/oldbrowse.pl

  108. http://www.nsf.gov/cgi-bin/pubsys/browser/oldbrowse.pl

  109. http://www.nsf.gov/cgi-bin/pubsys/browser/oldbrowse.pl

  110. http://www.nsf.gov/cgi-bin/pubsys/browser/oldbrowse.pl

  111. http://example.jp/home.jsp?jsessionid=99999999

  112. http://example.jp/home.jsp?jsessionid=99999999

  113. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない

  114. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない 2. 実装に依存(cgi-bin, etc.)したパス名を利用しない

  115. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない 2. 実装に依存(cgi-bin, etc.)したパス名を利用しない 3. セッションIDを含めない

  116. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない 2. 実装に依存(cgi-bin, etc.)したパス名を利用しない 3. セッションIDを含めない 4.

    リソースを表現する名詞にする
  117. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない 2. 実装に依存(cgi-bin, etc.)したパス名を利用しない 3. セッションIDを含めない 4.

    リソースを表現する名詞にする http://example.jp/home.jsp?jsessionid=99999999
  118. 1. プログラミング言語の拡張子(.pl, .jsp, etc.)を利用しない 2. 実装に依存(cgi-bin, etc.)したパス名を利用しない 3. セッションIDを含めない 4.

    リソースを表現する名詞にする http://example.jp/home http://example.jp/home.jsp?jsessionid=99999999
  119. ユーザビリティ

  120. http://example.com/blog/x12s23ka09

  121. http://example.com/blog/x12s23ka09 次の記事の URL は?

  122. http://example.com/blog/0000000001

  123. http://example.com/blog/0000000001 次の記事の URL は?

  124. http://example.com/blog/2019/01/01

  125. http://example.com/blog/2019/01/01 次の記事の URL は?

  126. URL は重要視しよう

  127. Agenda 1. Summary 2. URI 3. HTTP 4. HTML

  128. Hyper Text Transfer Protocol

  129. Hyper Text Transfer Protocol

  130. Hyper Text Transfer Protocol ハイパーテキスト 転送 規約

  131. Hyper Text Transfer Protocol ハイパーテキスト 転送 規約

  132. None
  133. Hello

  134. Saluton !?

  135. Saluton !? 会話するには言語=規約が必要

  136. Hyper Text Transfer Protocol ハイパーテキスト 転送 規約

  137. Browser Server Request

  138. Browser Server Request Response

  139. Browser Server Request HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 ...

    <!DOCTYPE html> <html> ... GET http://nrslib.com HTTP/1.1 Host: nrslib.com ... Response
  140. GET http://nrslib.com HTTP/1.1 Host: nrslib.com

  141. GET http://nrslib.com HTTP/1.1 Host: nrslib.com

  142. GET http://nrslib.com HTTP/1.1 Host: nrslib.com

  143. GET http://nrslib.com HTTP/1.1 Host: nrslib.com

  144. HTTPメソッド

  145. GET POST PUT DELETE HEAD OPTIONS TRACE CONNECT ETC.

  146. GET POST PUT DELETE HEAD OPTIONS TRACE CONNECT ETC.

  147. GET リソースの取得

  148. POST リソースの作成

  149. PUT リソースの更新

  150. DELETE リソースの削除

  151. Create Read Update Delete

  152. Create Read Update Delete

  153. Create Read Update Delete POST

  154. Create Read Update Delete POST GET

  155. Create Read Update Delete POST GET PUT

  156. Create Read Update Delete POST GET PUT DELETE

  157. None
  158. ブログに記事を 投稿したい

  159. ? ブログに記事を 投稿したい

  160. POST ブログに記事を 投稿したい

  161. ? ブログの記事を 閲覧したい

  162. GET ブログの記事を 閲覧したい

  163. ? ブログの記事を 更新したい

  164. PUT ブログの記事を 更新したい

  165. ? ブログの記事を 削除したい

  166. DELETE ブログの記事を 削除したい

  167. HTTPステータスコード

  168. Browser Server Request Response HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8

    ... <!DOCTYPE html> <html> ... GET http://nrslib.com HTTP/1.1 Host: nrslib.com ...
  169. Browser Server Request Response HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8

    ... <!DOCTYPE html> <html> ... GET http://nrslib.com HTTP/1.1 Host: nrslib.com ...
  170. GET ブログの記事を 閲覧したい

  171. ブログの記事を 閲覧したい GET OK

  172. ブログの記事を 閲覧したい OK

  173. ブログの記事を 閲覧したい 200 OK

  174. Next

  175. GET ブログの記事を 閲覧したい

  176. ブログの記事を 閲覧したい GET NOT FOUND

  177. ブログの記事を 閲覧したい 404 NOT FOUND

  178. 1XX 情報 2XX 成功 3XX リダイレクション 4XX クライアントエラー 5XX サーバーエラー

  179. 代表的なステータスコード

  180. 200 OK

  181. 301 Moved Permanently

  182. 301 http://example.com/isbn/0451450523

  183. 301 http://example.com/isbn/0451450523 http://example.com/unicorn

  184. 302 Found

  185. 302 http://example.com

  186. 302 http://example.com

  187. 302 http://example.com http://example.jp

  188. 400 Bad Request

  189. ユーザ作成しよう! 400

  190. 成瀬 400

  191. 成瀬 400

  192. 成瀬 400

  193. 成瀬 400

  194. 成瀬 ユーザ名は アルファベットだけです! 400

  195. 401 Unauthorized

  196. 401

  197. 403 Forbidden

  198. ユーザ作成しよう! 403

  199. nrs 192.168.XXX.XXX 403

  200. nrs 192.168.XXX.XXX 403

  201. 192.168.XXX.XXX 403 nrs ホワイトリスト 192.168.XXX.XXY 192.168.XXX.YYY :

  202. 192.168.XXX.XXX 許可されてません 403 ホワイトリスト 192.168.XXX.XXY 192.168.XXX.YYY : nrs

  203. 404 Not found

  204. 500 Internal Server Error

  205. 503 Service Unavailable

  206. 418

  207. 418 I’m a teapot

  208. 418 I’m a teapot ティーポットにコーヒーを 淹れさせようとして 拒否された場合に返却

  209. https://www.google.com/teapot

  210. ステートレス と ステートフル

  211. ステートフル

  212. None
  213. アジェンダ つくっておいて

  214. わかりました

  215. しばらくして

  216. あの仕事終わった?

  217. None
  218. 終わってます! Agenda

  219. ステートレス

  220. あの仕事終わった?

  221. え? 何の話です?

  222. HTTP は ステート レス ステート フル or

  223. HTTP は ステート レス ステート フル or

  224. ステートフルの問題

  225. None
  226. None
  227. None
  228. Punk

  229. None
  230. None
  231. Load Balancer

  232. Add to Cart Item Load Balancer

  233. Add to Cart Item Cart Item Load Balancer

  234. Buy Cart Item Load Balancer

  235. Buy Cart Item Load Balancer

  236. Buy Cart Item Cart Load Balancer

  237. Buy Cart Item Cart !? Load Balancer

  238. Add to Cart Item Load Balancer

  239. Add to Cart Item Load Balancer

  240. Add to Cart Item OK Load Balancer

  241. Load Balancer Buy Item

  242. Load Balancer Item OK Buy

  243. ログインは?

  244. Browser ID: nrs PASS: XXX

  245. Login Browser ID: nrs PASS: XXX

  246. Login Browser ID: nrs PASS: XXX

  247. Login Browser ID: nrs PASS: XXX Session SessionId: ak1sAs23 Id:

    nrs
  248. Login Browser Session SessionId: ak1sAs23 Id: nrs

  249. Browser Set-Cookie SessionId: ak1sAs23 Session SessionId: ak1sAs23 Id: nrs

  250. Browser Session SessionId: ak1sAs23 Id: nrs Cookie SessionId: ak1sAs23

  251. Browser Item Buy Session SessionId: ak1sAs23 Id: nrs Cookie SessionId:

    ak1sAs23
  252. Browser Item Buy SessionId ak1sAs23 Session SessionId: ak1sAs23 Id: nrs

    Cookie SessionId: ak1sAs23
  253. Browser Item Session SessionId: ak1sAs23 Id: nrs Cookie SessionId: ak1sAs23

    SessionId ak1sAs23
  254. Session SessionId: ak1sAs23 Id: nrs Browser Item SessionId ak1sAs23 Cookie

    SessionId: ak1sAs23
  255. Browser Item OK Session SessionId: ak1sAs23 Id: nrs Cookie SessionId:

    ak1sAs23 SessionId ak1sAs23
  256. HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 ... <!DOCTYPE html> <html>

    ...
  257. HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Set-Cookie: SessionId=ak1sAs23 <!DOCTYPE html>

    <html> ...
  258. HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Set-Cookie: SessionId=ak1sAs23 <!DOCTYPE html>

    <html> ... リクエストライン or レスポンスライン ヘッダ 空行 ボディ
  259. Agenda 1. Summary 2. URI 3. HTTP 4. HTML

  260. HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Set-Cookie: SessionId=ak1sAs23 <!DOCTYPE html>

    <html> ...
  261. HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Set-Cookie: SessionId=ak1sAs23 <!DOCTYPE html>

    <html> ...
  262. HyperText Markup Language

  263. HyperText Markup Language

  264. HyperText Markup Language

  265. 文書構造を コンピュータに 理解させたい

  266. ドメイン駆動設計を 検索

  267. ドメイン駆動設計を 検索

  268. ドメイン駆動設計を 検索 初心者向けセミナー開催しました。たくさんのひとたちが来場してくれて大盛 り上がりです。 クリーンアーキテクチャのセッションをしました。とても難解な講義になりま すが皆さんがんばってついてきてくれました。 ボトムアップドメイン駆動設計というセミナーを開催しました。知識を得るの に熱心なお客様にたくさん集まって頂けて楽しいセッションでした。

  269. ドメイン駆動設計を 検索 初心者向けセミナー開催しました。たくさんのひとたちが来場してくれて大盛 り上がりです。 クリーンアーキテクチャのセッションをしました。とても難解な講義になりま すが皆さんがんばってついてきてくれました。 ボトムアップドメイン駆動設計というセミナーを開催しました。知識を得るの に熱心なお客様にたくさん集まって頂けて楽しいセッションでした。 どうしたものか

  270. ドメイン駆動設計を 検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれました。 </p>

    </section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッショ ンでした。</p></section>
  271. ドメイン駆動設計を 検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれました。 </p>

    </section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッショ ンでした。</p></section> タイトルだけ検索
  272. ドメイン駆動設計を 検索 <section> <h1>初心者向けセミナー開催しました。</h1> <p>たくさんのひとたちが来場してくれて大盛り上がりです。</p> </secion> <section> </h1>クリーンアーキテクチャのセッションをしました。</h1> <p>とても難解な講義になりますが皆さんがんばってついてきてくれまし た。</p>

    </section> <section> <h1>ボトムアップドメイン駆動設計というセミナーを開催しました。</h1> <p>知識を得るのに熱心なお客様にたくさん集まって頂けて楽しいセッショ ンでした。</p></section> タイトルだけ検索
  273. プログラムで 解釈しやすくなる

  274. プログラムで 解釈しやすくなる Browser

  275. サンプル

  276. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html>
  277. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html>
  278. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title>
  279. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> start tag 開始タグ end tag 終了タグ
  280. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> start tag 開始タグ end tag 終了タグ element 要素
  281. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <title>Introduction</title> element 要素
  282. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html>
  283. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” />
  284. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” /> 要素がないときの 書き方
  285. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> <meta charset=“utf-8” /> attribute 属性
  286. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> ヘッダ
  287. HTTP/1.1 200 OK Cache-Control: public, no-store, max-age=0, no-cache, no-store, must-revalidate

    Pragma: no-cache Content-Type: text/html; charset=utf-8 Name: Masanobu Naruse Job: Programmer; Developer Evangelist Company: GMO Internet, Inc. Team: Hosting Product Team; Developer Relations Team <!DOCTYPE html> <html> <head> <meta charset=utf-8" /> <title>Introduction</title> </head> <body> <h1>URL</h1> <p> <ul> <li><a href="https://nrslib.com">HomePage</a></li> <li><a href="https://twitter.com/nrslib">Twitter (@nrslib)</a></li> </ul> </p> </body> </html> ボディ
  288. 詳しいところは フロントエンドの講義で

  289. 最後に

  290. この図を覚えてますか

  291. Web HTML HTTP URI

  292. Web HTML HTTP URI まだまだいっぱい 木はある

  293. 知識を掛け算して ユニークになろう

  294. Auther nrs HomePage https://nrslib.com Twitter @nrslib