こんにちは。PCインストラクターの良知敏子です。

第1回目のコラムでは、HTMLとは何かについて解説を行いました。

第2回目では、実際に簡単なホームページを作り、HTMLソースを見ていきます。

 

HTMLソースにはたくさんの記号のような文字が並んでいますが、これらの記号にはきちんと意味があり、決まり事があります。

今回はこの決まりについて覚えていきましょう。

 

 

今回は、ホームページビルダーというホームページを作成するためのソフトウェアを使って、簡単なホームページを作ってみます。

 

ホームページビルダーは画面構成がWordやExcelに似ているため、これらを使われている方にとってはとても使いやすいソフトウェアです。

 

ホームページビルダーのバージョンはどれでも構いません。

お持ちでない場合は、最新バージョンが30日間無料で利用出来る体験版も用意されています。
気軽に試してみましょう。

 

まずはホームページビルダーで、ごく簡単なホームページを作成してみましょう。

「新規作成」より、白紙のページを作成します。

1.

まずは適当に文章を入力して下さい。

 

 

2.

画像も挿入してみましょう。

 

 

3.

もう少し文章を入力してみます。

 

 

ここまで出来たらHTMLソースを見てみましょう。

簡単なものですが、これも立派なホームページです。

 

「HTMLソース」タブをクリックします。

 

 

作成したページのHTMLソースが表示されますね。

 

 

さて、HTMLソースをじっくり見てみましょう。

たくさんの「<>」が使われていますね。

 

そして「<>」の中に、アルファベットが入っています。

このアルファベットをHTMLでは要素と言い、HTML文書を構成する大切な部品です。

HTMLでは、この部品を組み合わせてページを作っていきます。

 

表示されているHTMLソースの中央付近に「

HTMLの世界へようこそ！

」と書かれた部分がありますね。

ここに注目してみましょう。

「<>」内に表記されているものが要素でしたね。

従って、この部分には「p」という要素が使われていることになります。

 

pという要素は段落を表す要素です。

「ここは段落である」とブラウザが解釈すると、前後に1行分の空白が出来ます。

ところで、なぜ要素の前後に「<>」が付いているのでしょうか。
試しにHTMLソース内に「<>」を取って「p」とだけ書いてみました。

 

 

これでは「p」は文章の一部としか見えません。

つまり「p」と書いただけでは、ブラウザはこれが段落を表す要素であると判別することが出来ないのです。

そこで要素を「<>」で囲み、目印を付けてあげます。

この「<>」で囲んだものをタグと言い、目印を付けることをマークアップと呼んでいます。

また、タグが一つだけでは「ここからここまでがこの要素だよ！」と、ブラウザに知らせてあげることが出来ないため、通常は2つをペアにして使います。

 

始まりのタグが「開始タグ」、要素の前に「/」を入れて表記したものが終わりのタグで「終了タグ」と言います。

「通常は始まりと終わりがある」という概念が、HTMLではとても大切だと私は考えています。

ぜひしっかり覚えておいて下さい。

 

それでは、ここまでの説明を基にして、HTMLソース内の「

HTMLの世界へようこそ！

」の部分を読み替えてみましょう。

 

 

いかがですか？

簡単に読み替えることが出来ますね。

今まではただの記号の羅列だと思っていたHTMLソースが、少しだけ身近に感じられるようになったのではないでしょうか。

 

今回は「要素」「タグ」「マークアップ」と用語が、いくつか出てきました。

しっかり覚えておいて下さい。

 

次回は、HTMLソースの解説を行いながら修正も行っていきます。

楽しみにお待ち下さいね。