皆さん、こんにちは。どんぶラッコです。
今回は、プログラミング未経験者に対して、HTMLとWebブラウザの関係性を説明した時の資料を公開しようと思います。
Webページを作るにはHTML!だからHTMLを書くべきなんだ！
という教育本をよく目にしますが、これだけだとHTMLとWebブラウザの関係性まで理解できませんよね？
ということで、今回はWebブラウザとHTMLファイル間のやり取りについてストーリー形式でまとめてみました！
・マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる！
・レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%！
・JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み！
前提条件
プログラムの大原則として 上から順番に実行されるというものがあります。
この前提が抜けてしまうと理解が追いつかなくなってしまうことがあるので気をつけましょう！
Webブラウザが情報を表示するまでの流れ
例えば、 http://hoge.com というサイトにアクセスをしたとしましょう。
すると、Webブラウザ(ChromeやFirefox)はhttp://hoge.comという場所にある index.htmlを読み取ろうと動きます。
index.htmlにセリフをつけるとしたらこんな感じです。
そんなindex.htmlの要望に応え、Chromeが読み取りを開始します。
この時、拡張子が .html であることから、WebブラウザのChrome君は、HTMLを読みとる前提で解読を進めていきます。
ちなみに、１行目の部分でも再度HTMLであることを確認しています。
ということで、WebブラウザはHTMLのルールに従って解読を進めていきます。
headの部分で設定を読み込み…
bodyで表示情報を読み込む…
その結果、表示がされる、という流れです。
上の物語もそうですが、私はよく擬人化することで、理解を深めることが多いです。
そうすることによって、普段は無機質に見えているやり取りが、ストーリー性を持って理解することができるからです。
皆さんもぜひチャレンジしてみてください！
