ホームページ作成講座：HTML編

はじめに

ホームページ作成に必要不可欠なものは「HTML」です。 「HTML」とは、文章の構造を定義するものです。 「文章の構造を定義」と言うと難しいですが、つまりはタイトルや見出し、段落と言ったものを指定するものです。

今は理解できなくても「HTML」を勉強していく上で理解できるように説明していくので、安心してください。では、「HTML」の勉強を始めましょう。

HTMLはタグから成る

「HTML」は、「タグ」から成ります。「タグ」とは、「<html>」と言った形のものです。「ホームページ作成講座：はじめに」で作ったホームページのソースを見ると、同じようなものがあると思います。

「<」と「>」で囲まれているものが「タグ」であり、間の文字（html,bodyなど）が「タグ」の命令を決めています。 また「タグ」には、開始タグ（「<html>」）と終了タグ（「</html>」）の２種類があり、開始タグと終了タグに挟まれた文章が、タグの命令に従います。

言葉で説明すと難しく感じるかもしれませんが、実際の例で説明していきましょう。

<html>,<body>,<head>タグ

「ホームページ作成講座：はじめに」で作ったホームページのソースで説明していきます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>takus's world</title>
<meta http-equiv="Content-Style-Type" content="txt/css">
<link rel="stylesheet" type="txt/css" href="index.css">
</head>
<body>
<h1>takusの世界</h1>
<h2>takusについて</h2>
<p>
takusは私のHN(ハンドルネーム)であり、ネット上の名前です。
<br>
みなさんよろしくお願いします。
</p>
<h2>HP(ホームページ)の紹介</h2>
<p>
私のホームページの紹介をしましょう。
こちらでは、「さいとう」と言う名前を使っています。
<br>
ホームページはこちら→<a href="http://www.takus.info">さいとうです。</a>
</p>
</body>
</html>

ソースの赤い部分に注目しましょう。「html」、「head」、「body」の開始タグと終了タグがあります。この３つのタグは、基本的なタグですからしっかりと覚えましょう。

それぞれのタグが挟まれた部分が以下の意味を持ちます。

<html>	挟まれた部分がHTMLであることを示しています。
<head>	挟まれた部分がヘッダーであることを示しています。
<body>	挟まれた部分が本文であることを示しています。

htmlの説明はそのままですね。「HTML」を使っていることを示しているのです。

ヘッダーと言うのが少しわかりにくいかもしれませんが。ヘッダーと言うのは、ホームページには表示されない部分で、準備する部分と思ってください。

本文と言うのは、ホームページに表示される部分で、ホームページで実際に見ている部分になります。

いまいちよくわからないと言う人もいると思いますが、今は飛ばし読みしても大丈夫です。

<title>,<h1>,<h2>,<p>タグ

<title>,<h1>,<h2>,<p>タグの意味は以下の通りです。

<title>	タイトルを意味しています。
<h1>	見出しを意味しています。
<h2>	見出しを意味しています。
<p>	段落を意味しています。

「title」は、そのままですね。ホームページの上の青いバーに表示されます。

「h1」、「h2」は見出しで、大きく太く表示されます。数字の部分は１から６まであって、数字が大きいほど文字が小さくなります。

「p」は段落を意味していて、文章の一つのまとまりを意味します。文章を書くときは、「p」の中に書くのです。

ここまで覚えたら自分の紹介文でも書いてみましょう。 ホームページのタイトルを決め、簡単な自己紹介のページを作ってみましょう。最初はサンプルのソースを少し変えて、自己紹介のページを作るとやりやすいでしょう。

<a>タグ

<a>タグの説明をしていきましょう。「a」は、アンカーと言われていて、リンクをする時に使います。

「a」単独では使われずに、「<a href="http://www.takus.info">」のように属性と言われるものと一緒に使われます。

「href="http://www.takus.info"」の部分がリンク先を指定しています。 「"」と「"」の間がリンク先のURL（アドレス）ですので、リンク先を変えてみてください。

リンクも貼れるようになったので、いよいよホームページらしくなったと思います。自分のお気に入りのページを紹介してみてはいかがでしょうか。

<br>タグ

<br>タグの説明をしましょう。サンプルのソースを見ると「あれ？終了タグがないぞ？」とお思いでしょうか。そう「br」は終了タグがなく、単独で使われるのです。 意味は「改行」で、改行したいときに使うのです。

自分で文章を書いてみた人は気付いたと思いますが、文章を書くとき普通に改行しても改行されないのです。サンプルのソースで試してみましょう。

私のホームページの紹介をしましょう。
こちらでは、「さいとう」と言う名前を使っています。

の部分は、ホームページを見ると改行されていません。しかし、

私のホームページの紹介をしましょう。
<br>
こちらでは、「さいとう」と言う名前を使っています。

のように書き直してみてください。改行が反映されたのがわかると思います。改行したい場合は「<br>」を入れるのです。

<meta>,<link>タグ

サンプルのソースのタグもほとんど説明しましたが、最後に<meta>,<link>タグを説明しましょう。

サンプルのソースを見てわかるように、「a」と同じく属性が必要となります。 詳しく説明すると長くなるので簡単に説明したいと思います。

「<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">」は、文字コードを指定しています。簡単に言うと文字化け防止ですね。

「<meta http-equiv="Content-Style-Type" content="txt/css">」は、スタイルシートの指定です。スタイルシートを使う時に必要になるのです。

「<link rel="stylesheet" type="txt/css" href="index.css">」は、スタイルシートのファイルを指定しています。「ホームページ作成講座：はじめに」で別に作ったスタイルシートのファイルを呼び出しているのです。「a」と同じく「href="index.css"」でファイル先を指定しています。

少し難しいですが最初はコピペで使えばよいでしょう。スタイルシートを使う場合はファイル名に合わせて「href="index.css"」の部分を変えるのを忘れないで下さい。

さいごに

以上でサンプルソースのタグの説明は終わりです。実際にホームページを作ることで確かな知識になっていくので、実際にホームページを作って見ましょう。

質問・感想は大歓迎なので、質問や感想がありましたら掲示板かメールでお願いします。

ホームページ作成講座へ戻る