ホームページ制作の第一歩となる技術が HTML です。
HTML を使うことで、ページ内に文章を表示したり、画像を配置したり、リンクを作成したりできます。
しかし、HTML はコードを見るだけでは、どのようにホームページが作られているのかイメージしにくいかもしれません。
実際には、いくつかのタグを組み合わせることで、少しずつホームページの形ができあがっていきます。
この記事では、HTML を使ってページタイトル・文章・画像・リンクを表示しながら、ホームページ作成の基本を体験します。
自分で書いたコードが画面に表示されることで、HTML がどのようにホームページを作っているのかを実感してみましょう。
【実践】HTMLでホームページの基本を作ってみよう
実際に HTML を書きながら、ページタイトル・文章・画像・リンクを表示して、ホームページが作られる流れを体験してみます。
なお、HTML を書くときに覚えておきたい基本ルールがあります。
HTML のタグは、必ず半角英数字で入力します。
例えば、文章を表示する <p> や見出しを作る <h1> などは、全角文字で入力すると正しく認識されません。
また、HTML のタグ名は大文字・小文字のどちらで書いても動作します。
<P>Web制作を勉強しています</P>
と書いても、
<p>Web制作を勉強しています</p>
と書いても、表示結果は同じです。
ただし、現在の Web制作 では小文字で記述することが一般的なため、この記事では小文字表記で進めます。
まずは、HTMLファイルの基本となる形を確認します。
<!DOCTYPE html>
<html>
<head>
<title>私のプロフィール</title>
</head>
<body>
</body>
</html><title>は、ブラウザのタブに表示されるページタイトルを設定します。
<body>は、実際にホームページ画面に表示される内容を書く場所です。
ここから <body> と </body> の間にパーツの指示（タグ）や文章や画像などを追加することで、少しずつホームページの形が作られていきます。
HTMLで文章を配置してみよう
ホームページ作成の基本は、まず狙った場所にしっかりと「文章」を配置することから始まります。
本編の文章（段落）を配置したいときは、以下のように文章（段落）を <p> と </p> で囲みます。
HTML
<!DOCTYPE html>
<html>
<head>
<title>私のプロフィール</title>
</head>
<body>
<p>Web制作を勉強しています。</p>
<p>思っていたよりもシンプルで楽しいです。</p>
</body>
</html>表示結果
Web制作を勉強しています。
思っていたよりもシンプルで楽しいです。
p は「Paragraph（パラグラフ＝文章・段落）」の頭文字です。文章を <p> と </p> で囲むことで、その部分が1つの段落として扱われます。
サンプルコードのように pタグ を2つ並べて書くと、パソコンが自動的に「ここには2つの文章の塊（段落）があるんだな」と判断し、綺麗な間隔をあけて縦に並べて配置してくれます。
難しいシステムを使わなくても、このタグを使うだけでホームページ内の思い通りの場所に文章を配置できます。
HTMLで見出しを作ってみよう
ホームページでは、文章の内容を分かりやすく伝えるために見出しを設定します。
HTML では、見出しを作るために hタグ を使います。
HTML
<!DOCTYPE html>
<html>
<head>
<title>私のプロフィール</title>
</head>
<body>
<h4>私のプロフィール</h4>
<p>Web制作を勉強しています。</p>
<p>思っていたよりもシンプルで楽しいです。</p>
</body>
</html>表示結果
私のプロフィール
Web制作を勉強しています。
思っていたよりもシンプルで楽しいです。
h4 は「Heading（見出し）」を意味するタグです。
hタグ には h1 から h6 までの6つのレベル（数字が小さいほど大きな見出し）が用意されており、今回は記事のテーマに合わせたサイズとして h4 を使っています。
このように文字を挟むだけで、パソコンが「ここは文章の区切りとなる見出しだな」と判断し、自動的に文字を太くしてくれます。
ただの文字に明確な「見出しとしての役割」を持たせることができる、とても大切なタグです。
見出しを適切に配置することで、ページの内容が整理され、読みやすいホームページになります。
HTMLで画像を表示してみよう
文字だけでなく、ホームページに華やかさをプラスする「画像」も、<body> と </body> の中にたった1行の指示（imgタグ）を差し込むだけで配置できます。
今回は、HTMLファイルと同じフォルダに保存した画像を表示してみます。
例えば、HTMLファイルと同じ場所に「profile.jpg」という画像を保存した場合、以下のように記述します。
HTML
<!DOCTYPE html>
<html>
<head>
<title>私のプロフィール</title>
</head>
<body>
<h4>私のプロフィール</h4>
<p>Web制作を勉強しています。</p>
<p>思っていたよりもシンプルで楽しいです。</p>
<img src="profile.jpg">
</body>
</html>表示結果
私のプロフィール
Web制作を勉強しています。
思っていたよりもシンプルで楽しいです。
img は「Image（画像）」、src は「Source（画像ファイルの名前や場所）」の略です。
srcには、表示したい画像ファイルの場所を指定します。
今回は同じフォルダ内にある画像を指定しているため、画像ファイル名だけを記述しています。
なお、画像の種類によってファイル名の最後が変わります。例えば、JPEG画像なら.jpg、PNG画像なら.pngのように、実際の画像ファイル名に合わせて記述します。
文字を表示するタグとは違って、後ろにスラッシュがついた閉じタグ（</img>）が必要ないのが特徴です。
画像を置きたい場所にこの1行を配置するだけで、指定した写真やイラストを好きな場所にポンと表示させることができます。
HTMLでリンクを作ってみよう
ホームページでは、別のページや外部サイトへ移動できるリンクがよく使われています。
HTML では、リンクを作るときにaタグを使います。
HTML
<!DOCTYPE html>
<html>
<head>
<title>私のプロフィール</title>
</head>
<body>
<h4>私のプロフィール</h4>
<p>Web制作を勉強しています。</p>
<p>思っていたよりもシンプルで楽しいです。</p>
<img src="profile.jpg">
<a href="http://www.yahoo.co.jp/">YAHOO!JAPANへ移動する</a>
</body>
</html>表示結果
a は「Anchor（アンカー＝錨）」、href は「移動先のリンクURL」を書く場所です。表示させたい文字を <a> と </a> で挟んで <body> と </body> の間に配置するだけで、文字に下線がつき、マウスの矢印を乗せると「指のマーク」に変わる、お馴染みのクリックできるリンクが完成します。
HTMLは思っているより簡単
ホームページ作成と聞くと、「難しい計算や複雑なシステムを組む世界」というイメージを持つかもしれません。
しかし、今回体験したように、HTML の正体は「ここは見出し」「ここは文章」「ここは画像」といったように、それぞれの内容に意味（役割）を持たせることです。
実際のホームページも、このような基本的なタグを組み合わせて作られています。
複雑な計算や数学の知識が必要になるわけではなく、p（文章）やh（見出し）など、決まった英語の言葉の意味がそのままタグになっているため、一度ルールを掴めば誰でも直感的に書けるようになります。
そうして決められたルールに沿ってタグを書いていけば、専門的なシステムを組まなくても、少しずつホームページの形ができあがっていきます。
今回体験した内容こそが、ホームページ制作の基本です。
HTML は、実際に書いてみると想像以上にシンプルです。「難しそう」というイメージだけで始めないのは、もったいないことです。
まずは基本的なタグから少しずつ覚えながら、ホームページ作成を楽しんでください。
この小さな体験を積み重ねて身につけたスキルは、あなたの将来を支える新しい収入源へと繋がっていくはずです。
