HTMLとは何か。初心者向けホームページ作成入門講座

HTMLとは何か。初心者向けホームページ作成入門講座

今からホームページを制作してみたいと思っている初心者向けに『HTML』について解説していきます。

何故HTMLはマークアップ言語と呼ばれているのでしょうか。

その意味が最後には分かるようになります。

HTMLとは何か

HTMLとはHyper Text Markup Languageの略で、ホームページを作るための言語です。

これはホームページの文章に意味役割を付ける言語となります。

普段何気なく見ているホームページやブログは、HTMLという言語で書かれて表示されているのです。

少しホームページを構成しているプログラムを覗いてみましょう。

簡単にプログラムなんて見れるものなのですか?

大丈夫だよ!ブラウザ上で右クリックして『ソースを表示』を押してごらん?

わぁ!すごい!
これが全部『HTML』なの?

いい質問だね!
でもね、実は全てが『HTML』という訳ではないんだ。

えっ!?
どういうことなんですか?

HTMLは文章に『意味』や『役割』を与えるマークアップ言語なんだよ。
少し説明していくね。

HTMLの役割

HTMLは『マークアップ言語』と言われています。

HTMLの役割を説明するには、実際に流れを見る方が早いと思います。

そこでここからは実際にHTMLで、ちょっとした実験を交えて解説します。

それではこの『HTML』が、どの様な役割をしているのかを解説していきます。

ファイル形式を『HTMLにする』ということ

HTMLの役割を説明する前に、HTMLがどの様に作成されているか解説していきますね。

まずホームページを作成する場合には、真っ白なメモ帳からスタートします。

ここではWindowsだと『メモ帳』。Macだと『テキストエディット』を使います。

本当に真っ白なメモ帳からスタートするんですね。

そんなんだ。
ここから全ては始まるんだよ!

ここで、何でも良いので文字を書いてみます。

そして少し魔法をかけてブラウザで開いてみます。

この魔法についてはまた後々解説するので、今回は感触だけつかんで下さい。

あっ!!
ブラウザで文字が表示された!!

これはね、HTML形式というファイルで保存したからなんだ!

この様にメモ等やテキストエディットで作成した内容は、『HTML形式』で保存することにより、ブラウザで表示できる様になります。

HTMLでマークアップしてみる

では先程の文章へ、さらに文章を付け加えてみます。

これをブラウザで見てみると、、、

ここからマークアップしてみるよ!

『ぱくぱくブログ』、『りんご先生』、『とまちゃん』を見出しとして、その他は段落としてマークアップしてみます。

何だか突然たくさんの英語が出てきたんですけど。。。(汗)

これこそがHTMLなんだ。
びっくりすることは無いよ。
一つ一つを理解すれば難しくは無いよ。

それではこのマークアップした内容をブラウザで見てみましょう。

あっ!すごい!!
見出しが大きな文字になって見易くなった!

このように、ここからここまでは『見出し』とか『文章』のようにマークアップしていく言語なんだよ。

そう言えば先生が初めに『ソース表示』の時に『全てがHTMLでは無い』って言っていたけど、その辺がまだイマイチ分からない。。。

そうだね。
ホームページっていうのは全てがHTMLだけで作られている訳では無いんだ。

うん。うん。

今回は文章にHTMLで『見出し』や『文章』って意味を持たせる為にマークアップしたよね。

うん。うん。

そのマークアップした文章に『色』や『枠』、『背景』などの装飾を与える言語や、更には動きを与える為の言語も含まれていたからね。
まずはHTMLが全ての基本となるので、絶対に覚えましょう。

初めてHTMLを見ると難しく感じるかも知れないですが、一つ一つを理解するとそれ程複雑な言語ではありません。

ホームページを作成する上では欠かせないHTML。

次回の記事からは本格的にHTMLについて解説していきます。

次の記事

HTMLを学ぶ。シリーズはこちら

HTMLカテゴリの最新記事