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

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

HTML

pointこの用語のポイント

pointマークアップ言語だよ

pointホームページを作るときに使うよ

スポンサーリンク

簡単に書くよ

HTMLとは

マークアップ言語のひとつでホームページを作るときに使うやつ
です。
よく分からない方は

ホームページのファイルの書き方ルール
と解釈してください。

image piyo

詳しく書くよ

マークアップ言語は「タグで囲む(マークをつける)ことで構造を表現する言語」ね。
「言語」と書いていますが「ファイルの書き方ルール」と捉えた方が、理解しやすいと思います。
「このマークを付けたら、こんな意味になるから!」なルールの寄せ集めです。

それを踏まえて、マークアップ言語のひとつで、ホームページのファイルを書くときに使うルールが「HTML(エィチティーエムエル)」です。
HyperText Markup Language(ハイパーテキスト・マークアップ・ラングェッジ)」の略で「HTML」ですが、別に覚える必要はありません。

まずは、ホームページのファイル構成の観点から、HTMLについて見てみましょう。
2016年4月現在の流行では、ホームページは

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


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

HTML

内容が書いてあるファイルは、一般的に「HTMLファイル」と呼ばれています。

HTML2

あら、いきなり「HTML」という単語が出てきましたね。
取りあえず、先に進みましょう。

HTMLファイルは、内容を書いておくファイルです。
ページの核となるファイルですね。

見た目が書いてあるファイルは「CSSファイル」と呼ばれています。

HTML3

CSSファイルは、見た目に関するルールを書くファイルです。
例えば

・ホームページの横幅はどれくらいにしよう
・この目印を付けた文字の色は何色にしよう
・この目印を付けた範囲に背景を付けよう


などのルールを書いておきます。

絵が描いてあるファイルは、いわゆる「画像ファイル」です。

HTML4

画像ファイルは説明しなくても分かりますよね?

最後に、動作が書いてあるファイルが「JavaScriptファイルjsファイル)」です。

HTML5

JavaScriptファイル(jsファイル)は「動作」を定義するファイルです。
例えば

・ページを表示するときに、こんな動きをしてよ
・他のページに移動するときに、こんな動きをしてよ
・このボタンを押したら、こんな動きをしてよ


などの指示を書いておきます。

これら4種類のファイル

・HTMLファイル(内容)
・CSSファイル(見た目)
・画像ファイル(絵)
・JavaScriptファイル(動作)


が組み合わさることによって、ホームページの中の1ページが形作られています。

HTML6

それを踏まえて、この4種類のファイルのうち、HTMLファイルの中身を書くときのルールを定義したものが「HTML」です。

HTML7

先ほど、マークアップ言語は

ファイルの書き方ルール

だと書きました。
HTMLは、ホームページのファイルの書き方ルールです。

また、マークアップ言語は

「このマークを付けたら、こんな意味になるから!」なルールの寄せ集め

だと書きました。
HTMLも「このマークを付けたら、こんな意味になるから!」なルールの寄せ集めです。

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

■ピヨ太とは
(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のマークを見て構造を判断し、見た目を変えてくれる


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

ホームページが表示される際には、それに加えてCSSとかJavaScriptとかが登場します。
余裕ができたら勉強してください。

image piyo2

一言でまとめるよ

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

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