HTMLでホームページの作り方

ホームページを作るには、HTML「HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)」という、ウェブページを記述するための「言語」が必要になります。

言語はW3C(World Wide Web Consortium)という団体によって規格が決められていて、更に、バージョンによって細かく違っており、後継規格であるXHTMLとCSSで構築することによって、表示速度が速く、検索エンジン好みのサイトになるといわれています。
最近はHTML 5に関する話題もあって、付いていくのも大変ですが、まぁどんどん改良(?)されているわけですね。

…というと、とても難しそうですが、基本はとっても簡単です。

とにかく何か、作ってみましょう!


この時点では、インターネットに接続している必要もありません。
パソコンの、メモ帳と、ブラウザを使います。

まず、テキストエディタを開きます。

ホームページ作成に必要なものでご紹介したように、無料で使いやすいソフトもたくさんありますが、インストールなどが必要になる為、今回は手軽なwindows付属の「メモ帳」を使ってテストしてみます。 startmemo
メモ帳を開くには、スタートボタン→すべてのプログラム→アクセサリ→メモ帳 をクリック!

HTMLを書いてみましょう。

HTMLのタグは、必ず半角英数で書かないと、きちんと動きません。

HTML文書を大きく分けると 「ヘッダ」と 「ボディ(本体)」の2つ から成り立っています。
更にものすごく大雑把に言うと、「ヘッダ」は文書の概要的な情報を、「ボディ(本体)」には、実際にページに表示される内容を書きます。初めに、HTMLは「ここから始まって」「ここまでで終わり」というように、始点と終点が対になっている「タグ」を覚えましょう。(対になっていないタグもあるんですが、これは追々ご説明します)

HTMLの開始には  <html>
HTMLの 終わりは  </html> というようなセットになります。

まずはこのファイルが「HTMLですよ」ということを宣言します。
<html>
</html>

次に、HTMLの間に、ヘッダとボディ部分の「枠」を作ってあげましょう。
<html>
<head>
</head>
<body>
</body>

</html>

せっかく書いたものが間違って消えてしまったりすると、とても悲しいので、こまめに保存しましょうね。
マイドキュメントに「web」など、分かりやすい名前のフォルダを作成します。
作った「web」フォルダの中に半角英数で「index.html」という名前を付けて保存してください。

※なぜ「index.html」なのかというと、このファイル名はちょっと特殊で、フォルダを開いた時に、ブラウザが一番初めに読もうとするファイル名なんです。通常、これが「ホームページ(スタートページ)」になります。
「index.html」がないと、フォルダの中身が丸見えになってしまうこともあるので、フォルダには「index.html」を必ず作っておきましょう!

ヘッダーに欠かせない情報「タイトル」を追加します。
<html>
<head>
<title>ホームページのタイトル</title>
</head>
<body>
</body>
</html>

title

ここで上書き保存して、index.htmlをダブルクリックして、ブラウザで見てみると…真っ白ですね(笑)
でも、よくみると…タイトル部分に文字が入ってるのが分かりますか??

次にボディの枠の間に、文字を書いてみます。
<html>
<head>
<title>ホームページのタイトル</title>
</head>
<body>
この文章が見えたら成功です。おめでとう。
</body>
</html>

書いたら、また保存。
面倒ですが、このマメさが、あなたの大切な時間をロスしない為のキーポイント(笑)
ちなみに、大抵キーボードの「Ctrlキー」を押しながら「S」キーを押すと「上書き保存」できます。

保存したら、index.htmlをダブルクリックして、ブラウザで確認してみましょう。
body内に書いた文字が、そっけなく表示されていれば、とりあえず成功です!

次回は、文字を飾ってみましょう♪