[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

HTMLファイル

pointこの用語のポイント

pointホームページのファイルだよ

pointテキストファイルだよ

point中身はHTMLのルールに沿って書かれているよ

point拡張子が「.html」「.htm」だよ

スポンサーリンク

簡単に書くよ

HTMLファイルとは

ホームページ(の中の1ページ)のこと。
もう少し正確に書くと

HTMLのルールに沿って書かれているテキストファイル
であり

拡張子が「.html」「.htm」なファイル
です。

image piyo

詳しく書くよ

HTMLは「ホームページファイルの書き方ルール」ね。
専門用語で「マークアップ言語」と呼ばれるやつです。

ホームページのファイル構成ですが、2016年4月現在の流行では

・内容が書いてあるファイル
・見た目が書いてあるファイル
・絵が描いてあるファイル
・動作が書いてあるファイル


の4種類のファイルを組み合わせて、1つのページを表示するのが主流です。

HTMLファイル

この4種類のファイルのうち「内容が書いてあるファイル」の中身を書くときのルールがHTMLです。

HTMLファイル2

そして、この「内容が書いてあるファイル」を指す俗称が「HTMLファイル」です。

HTMLファイル3

HTMLファイルの拡張子は「.html」もしくは「.htm」であることが多いです。

HTMLファイル4

ついでなので書いておくと、見た目が書いてあるファイルは「CSSファイル」と呼ばれています。
絵が描いてあるファイルは、いわゆる「画像ファイル」です。
動作が書いてあるファイルは「JavaScriptファイル」や「jsファイル」と呼ばれています。
せっかくなので、併せて覚えてあげてください。

HTMLファイル5

HTMLファイルは、ただのテキストファイル(中身が文字だけのファイル)です。
編集するときに専用のソフトを使う人もいますが、その気になれば、メモ帳などのテキストエディタでも編集可能です。

HTMLファイル6

例えば、ピヨ太君が以下の文章を書いたとしましょう。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル


この文章をホームページに載せるために、HTMLのルールに従ってマークを付けました。
ピヨ太君がマークを付けた結果は、以下の通りです。

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>


少し大雑把に説明しますが「<h1>」「</h1>」で囲まれた部分は、HTMLのルールでは「これは大見出しですよ~」の意味になります。
同様に「<h2>」「</h2>」で囲まれた部分は「これは小見出しですよ~」の意味です。
「<p>」「</p>」で囲まれた部分は「これは本文ですよ~」の意味になります。

つまり、ピヨ太君の書いた文章は、HTMLのルールに沿ってマークを付けたことで、以下のような意味合いになりました。

■ピヨ太とは(←これは大見出し)
(1)見た目(←これは小見出し)
愛嬌は多分ある(←これは本文)

(2)性格(←これは小見出し)
イイ性格(←これは本文)

(3)経済状況(←これは小見出し)
庶民レベル(←これは本文)


おぉ、なんか文章の構造が分かりやすくなりましたね。

さて、この文書ファイルWebブラウザホームページを見るときに使うソフト)で見ると、どうなるでしょう。

実は、ホームページを見るソフトが、HTMLのルールに沿って付けられたマークに注目することで、文章の構造を判断してくれます。
そして、勝手に見た目を整えてくれます。
例えば「これは見出しか~。じゃあ目立つように表示してやるか」みたいな調子です。

その結果、ピヨ太君が書いた文章(にHTMLのルールに沿ってマークを付けたもの)

<h1>■ピヨ太とは</h1>
<h2>(1)見た目</h2>
<p>愛嬌は多分ある</p>

<h2>(2)性格</h2>
<p>イイ性格</p>

<h2>(3)経済状況</h2>
<p>庶民レベル</p>


は、ホームページを見るソフトで表示すると、以下のような見た目になります。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル


参考までに、HTMLのマークを付けていない文章は、以下のように表示されます。

■ピヨ太とは
(1)見た目
愛嬌は多分ある

(2)性格
イイ性格

(3)経済状況
庶民レベル


いかがでしょう。
見た目が違いますよね。
これは、ホームページを見るソフトが、文書構造を判断して、見た目を整えてくれているからです。

流れとしては

1.文章を用意する
2.HTMLのルールに沿ってマークを付けることで、文章に意味付けをできる
3.ホームページを見るソフトが、HTMLのマークを見て構造を判断し、見た目を変えてくれる


となります。
これがホームページが表示される際の基本的な流れです。

そして、この話における「HTMLのマークを付けた文書ファイル」がHTMLファイルです。

HTMLファイルはホームページの元になるファイルです。
「HTMLファイルがうんぬんかんぬん」と言われたら、ホームページに関する話だと思ってください。

image piyo2

一言でまとめるよ

まぁ「HTMLファイル」って単語が出てきたら「ホームページのファイルなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク