web制作のしおり

日々の学習をアウトプットします。

2.webページ主に2種類のテキストファイルでできている ~その1~ HTML編

webページはテキストファイル

前回の学習で、webページはあるルールに基づいて書かれたテキストファイルだと書きました。

今回は専門用語をなるべく使わずに、まずは全体感を掴むことを目的とします。

 

webページに使われるテキストファイルには以下の2種類があります。

 

アルファベットが出てきて、ちょっと吐きそうになってるそこのあなた。

大丈夫です。

どちらも、名前がカッコイイだけのただのテキストファイルですから。

 

気を取り直して、今回はHTMLについて掘り下げていきます。

 

HTMLって?

HTMLとは HyperText Markup Language の略です。

一応、形式的にお伝えしました。正直、お腹いっぱいですよね。

 

すごく、すごく噛み砕いて書きますね。

ブラウザに仕事をお願いするマニュアル。

これです。

webページを表示しているのはブラウザだと言うことは前回学習しました。

 

そして、あるルールに基づいて書かれているということも学習しましたね。

 

ルールってなに?

「あるルールに基づいて」という、周りくどい言い方も、ここで遂に終焉を迎えます。

そのルールとは何か。

「タグ」と呼ばれるカギカッコで、表示したい内容を囲む。

それだけです。

見てもらった方が早いので例を記します。

 

<タグ>表示したい内容</タグ>

 

上のようなイメージです。

 

何でタグで囲むの?

何故、普通のテキストだけではダメで、こんな書き方をするのか?

HTMLを読むのがヒトではなく、「ブラウザ」だからです。

 

ブラウザはテキストファイルを読み込んだ時に、「タグ」に書かれた情報を読み取って様々な処理をしているからです。

 

タグから情報を読み取る?

私達の日常でも似たようなことはあります。

例えば、

ユニクロで服を買う時に、商品タグから色々な情報を得ていますよね。

色やサイズ、価格などなど。

それを見て商品を購入したり、棚に戻したりなどの判断(処理)をしています。

 

これと似たように、「タグ」と「表示したい内容」を決まった形で記述することで、ブラウザがwebページを表示する為の処理をしてくれるのです。

つまるところ、タグとはブラウザとweb製作者が細かい意思疎通を図れるようにした、親しみ深い存在なわけです。

 

勘違いしていたこと

私が勘違いしていたことなので終始強調していますが、

あくまでもHTMLはテキストファイル、それ自体が動いたりしているわけではないのです。

動いているのはブラウザで、HTMLはブラウザにとっての手順書でしかないのです。

 

今日のまとめ

まとめると

  • HTMLはブラウザに仕事をお願いするマニュアル(テキストファイル)。
  • HTMLは「タグ」で内容を囲って書くというルールがある。
  • タグを使ってブラウザと細かい意思疎通ができる。

こうしてまとめてみると、私達の身近な仕事でも似たような仕組みってありますよね。

 

次回は2種類のテキストファイルのもう1つ、CSSについて整理して行きたいと思います。では、また。