見出し画像

【WEB基礎】HTMLとWEBブラウザ

pp_creative

みなさまこんにちは🐣ひよっこエンジニアのみぃです。
今回は「WEBについての基礎知識」シリーズ第2弾をお送りします🌍

みなさまがご覧のWEBページ、どうやって表示されていると思いますか？

🐤「文字と画像を貼り付けている？」
🐤「そもそもページ自体が写真を表示させているようなものなのでは？」
🐤「ぶっちゃけ考えたことなかった」

普通はどうやって表示させているか、なんて考えないですよね。
私も仕組みなんてこれっぽっちも気にしていなかった一人なのでご安心ください。

ハイパーテキストとHTML

前回の記事でこのように触れていたことを覚えていますでしょうか？

実は我々がインターネットで見ているこのページなどは、画像や絵文字も入っていますが、「ただの文書」に過ぎないんです！😳

そう、このページもイラストや絵文字、背景色なども使ってはいるものの実は「ハイパーテキスト」で書かれています。

そして前回の記事ではこのような内容にも触れていました。

ひよこさんたちは色々な国から集まっていますが、にわとりさんは「ハイパーテキスト」という共通のことばを使っているのでどんな話をしているかがわかるようです。

あれ、でもちょっと待ってください…
多くの人が書くということはこんな問題に直面してしまうのではないでしょうか？

🐤「色々な人が書くのであればルールがないと無法地帯になってしまうんじゃないですか…？ハイパーテキストって言っても書く順番や何を書くのかが決まっていないとメチャクチャになってしまいますよね…💦」

そこでルールを決めたものが「HTML(Hyper Text Markup Language)」です。

🐔「HTMLはタグを使って『ここからはこれを書くよ!!』と区切りながら書いていきます!!

では実際のコードを見てみましょう🔍

<!DOCTYPE html>
<html>
 <head><title>にわとりくらぶ</title>
 </head>

 <body><h1>こけこっこ〜!!ようこそにわとりくらぶへ!!</h1>
 <br>
 <img src ="niwatori.jpg">
 みなさまのコメントお待ちしてます!! <a href ="https://niwatoriclub.com/ikenbako.html">意見箱</a><br>
 </body>
</html>

HTMLでは上記のように<タグの種類>タグの意味付けの対象となる中身の文章</タグの種類>という形で、ここにはこれを書いて、中身はこれです！と設計図のように書き進めていきます。
ここで用いられている言語のことを一般的には「マークアップ言語」と呼んでいます!!

読みやすく表示するWEBブラウザ

🐤「でもこれだと文章が並んでいるだけで読みづらいですねぇ…」

そこで、閲覧側が読みやすくよしなに変えて表示してくれるのが「WEBブラウザ」です!!
WEBブラウザはHTMLで書かれているタグや中身を読み取って、「ここでは画像を表示させよう!!」「ここはリンクにしよう!!」と表示をしてくれます

🐤「テーマに沿って描く、絵描きさんみたいですね!!」

主なブラウザを下記で紹介しておきます💻

Google Chrome
Microsoft Edge
Safari
Mozilla Firefox

もっとよく知りたい…という人に

今回まとめた内容は『イラスト図解式 この一冊で全部わかるWeb技術の基本』という本を参考にしています📖

https://www.sbcr.jp/product/4797388817/

初心者にもわかりやすく、図解でイラストを見ながら読み進めることができるのでオススメです!!
開発者向けの少し高度な内容も網羅されておりますので、このまとめを読んで「もう少し深掘りしたい!!」と思っていただけた方はぜひ書籍も読んでみてください🐣

さて次回は…サーバーについて書いていきますよ✏️