初心者向け簡単HTML講座!ホームページビルダーの使い方とHTMLソース(タグ・要素・マークアップ)の見方解説

執筆者: 良知敏子 職業:PCインストラクター・ホームページアドバイザー
はじめに

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

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

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

 

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

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

 

 

ホームページを作成するためのソフト「ホームページビルダー」

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

 

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

 

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

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

 

簡単なホームページを作成

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

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

1.

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

 

 

2.

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

 

 

3.

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

 

 

HTMLソースを確認

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

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

 

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

 

 

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

 

 

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

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

 

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

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

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

 

<p>文字</p>の解説

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

HTMLの世界へようこそ!

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

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

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

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

 

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

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

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

 

 

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

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

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

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

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

 

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

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

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

 

「<p>HTMLの世界へようこそ!</p>」の読み替え

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

HTMLの世界へようこそ!

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

 

ここから段落が始まりますよ。段落用に表示して下さいね。
HTMLの世界へようこそ!:ここは段落内の文章ですよ。

ここまでで段落が終了しますよ。段落用の表示は一旦終了しますね。

 

いかがですか?

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

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

 

おわりに

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

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

 

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

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

 
 コラムニスト情報
良知敏子
性別:女性  |   職業:PCインストラクター・ホームページアドバイザー

はじめまして。静岡県静岡市でパソコン講習やセミナー、ホームページ作成やサポートを行っているテックスカラ代表の良知敏子と申します。
営業事務業務のIT担当として、たまたま携わったパソコンでしたが、色々な業務に携わりながらとてもたくさんの事を学び、現在に至っております。
常にユーザー目線での講習や制作を心がけることが信条です。
どうぞよろしくお願いいたします。