ホームページ作成の基礎 [Masaaki NEMOTO]

まずは作ろう! HTMLであなたの別荘

ウェブサイトとは

ウェブサイトとは、一般的にはホームページと呼ばれているもので、インターネット上に公開されている文書のことです。この文書は、HTML という言葉を使って記述され、文字の大きさや色などのレイアウトに関する情報をもっています。何とそれだけでなく、他にも様々な情報を一つのまとまりとして構成することが出来るようになっています。本書では、この HTML の記述方法を解説しています。

みなさん http:// で始まる文字の羅列をご覧になったことがあると思います。これは、ウェブサイトを見るためのアドレスです。この情報をブラウザのアドレスバーに入力すると、そのサイトを見ることが出来ます。

何で作るの?

さて、ウェブサイトは、一体何でどの様に作るのでしょうか? ウェブサイトを作るためには、HTML (Heper Text Markup Language) という言語を使用します。その言語を、テキストエディタで入力すれば、作成することが出来ます。何と、UNIX では emacs、Windows では、標準で入っているメモ帳でも作成できるのです。メモ帳以外でも、テキストが入力できるテキストエディタであれば、ウェブサイトを作成することができます。作成したら結果を確認したいですよね。それには普段あたたが使用しているブラウザを使えば、すぐに結果を確認することが出来ます。

ウェブサイト作成の基礎

では、早速ウェブサイトを作ってみましょう!

まず、テキストエディタを開いて下さい。HTML 専用に作成されたテキストエディタもありますが、まずは Windows 標準のメモ帳で作成してみて下さい。なおメモ帳は、Windows ユーザにはおなじみのスタートボタンを押した後に表示されるメニューから、すべてのプログラム、アクセサリ、メモ帳とたどって下さい。

メモ帳が起動できたら、次の HTML で記述された文を入力してみましょう。「ここに、自己紹介を書いてみましょう。」と書いてある部分は、あなたの自己紹介を書いてみて下さい。これも、立派な HTML 文書です。

<html>

<body>
<h1>ようこそ!私のウェブサイトへ</h1>
<p>ここに、自己紹介を書いてみましょう。</p>
</body>

</html>

入力し終えたら、index.html というファイル名で保存してみましょう。その際、メモ帳の場合はファイルの種類から「すべてのファイル」を選択して下さい。

そしてあなたのブラウザで、そのファイルを読み込んでみましょう。どうですか、あなたの自己紹介が表示されましたか?

では、先ほど作成した HTML ファイルの解説をします。まず<html>の様に、<と>で表現されているものを、タグといいます。タグによって、HTML 内のテキストなどに、様々な効果を加えることが出来ます。<html>タグは、HTML 文書が開始するという事を、コンピュータに教えます。次に、<body>タグで本文の開始です。それらはそれぞれ、</body>タグと</html>タグというタグで終了します。終了タグには、/が付いていることに注意して下さい。本文は、<body>と</body>の間に書きます。

また、<h1>と</h1>に囲まれた部分は、見出しになります。普通のテキストが、このタグによって、見出しになるのです。<p>と</p>の間は、段落です。このように HTML は、タグの組合わせで、表示を様々な形に変更するのです。タグの使い方を覚えれば覚えるほど、色々なウェブサイトを作成することが出来ます。

ページのタイトルを表示しよう

次に、ブラウザのタイトルバーに、ページのタイトルを表示してみましょう。これも同じようにタグを使います。<title>を使用するのですが、ここで一つ注意が必要です。タイトルは、本文ではありません。そこでタイトルは<body>タグではなく、<head>タグと</head>タグを追加し、この間に書きましょう。

<html>

<head>
<title>Self Introduction</title>
</head>

<body>
<h1>ようこそ!私のウェブサイトへ</h1>
<p>ここに、自己紹介を書いてみましょう。</p>
</body>

</html>

HTML や文字コードの指定

先ほど作成した自己紹介のウェブサイトに、HTML のバージョンや文字コードの指定を加えて、さらに洗練されたものにしてみましょう。

まず、HTML 文の先頭に、次の行を追加してみましょう。

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

これは、HTML がどんな規則で書かれたものなのかを表します。上の例では HTML 4.01 です。

また、<head>タグと</head>タグの間に、お使いの文字コードに合わせて、次のどちらかを追加してみましょう。

UNIX などの OS で、文字コードが EUC の場合は、次のようになります。

<meta http-equiv="Content-Type" content="text/html;charset=EUC-JP">

Windows などの OS で、文字コードが Shift_JIS の場合は、次のようになります。

<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">

これは、HTML がどのような文字コードで書かれているかを指定するためのものです。この行を追加することによって、ブラウザに日本語の文字コードで書かれていることを伝え、文字化けを防ぎます。

<a href="http://www.b-click.net/cgi-bin/gif/ad.cgi?BC=16113&GP=31&PG=1&JP=1" target="_blank"><img src="http://www.b-click.net/cgi-bin/gif/ad.cgi?BC=16113&GP=31&PG=1" width=468 height=60 BORDER=0></a>
b-click

このコンテンツ内のデータは無断で使用しないで下さい。ただし「Quick Post Card」については、付属のドキュメントファイルに従ってご使用下さい。詳しくは、「このサイトについて」をご覧下さい。