初ホームページをHTMLで作成

HTMLとCSSの入門10講座

HTMLエディタもインストールしましたので、早速ホームページをHTMLで作成してみましょう。

ホームページは、HTMLタグというコードを使って書かれています。基本の枠組みは下記になります。HTMLを書く上で、最低限必要な枠組みです。タグは入れ子状態で、下記のような構成になっています。

HTMLの構成

下記に実際のHTMLタグを書きましたが、このコードを暗記する必要はありません。面倒だし、覚えたくないですよね？実は、私はいまだに覚えていません。いつもコピペして使ってください。サンプルページにもっと詳しくHTMLの必須枠組みが組まれたHTMLコードを公開していますので、慣れてきたらそちらをコピーすると良いでしょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title></title>
</head>

<body>

</body>
</html>
  1. <!DOCTYPE ～書かない人もいますが、正しいHTMLを書きたいならばコピペしておきましょう。ここで記述するHTMLのタイプを宣言する記述で、HTMLファイルの最初の行に書きます。閉じるタグはありません。
  2. <html lang="ja"><html>タグに、lang="ja"という属性を記入すると、「このホームページは日本語で書かれてますよ」という意味になります。
  3. <head><head>から</head>までの間に書かれたものは、ホームページ上では見えません。そのホームページの様々な情報を書く場所です。
  4. <meta ～メタタグと言って、色々な属性を記述します。ここでは、「このサイトの文字コードはSHIFT_JISですよ」と言っています。閉じるタグはありません。
  5. <title>タイトルタグは、検索エンジンの検索結果などで表示される部分です。インターネットエクスプローラーウインドウの最上部の青いバーの部分に表示されます。
  6. <body><body>から</body>の間に書いたものが実際のホームページにも表示されます。
さっぱり分かりませんけど？

上記のような説明を読んで、分かりますか？私が初心者だったらわかりません。わからなくていいんです。

わからなくていいので（笑）、とりあえずHTMLソースサンプルコードを選択してコピーし、TeraPadに貼り付けしてみてください。(無料のHTMLエディターでTeraPadのダウンロード方法を説明してあります)

はりつけてみたら、<body>と</body>タグの間に、　初ホームページじゃ！　と書いてみましょう。下記のように書けましたか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title></title>
</head>

<body>
初ホームページじゃ！
</body>
</html>

このファイルを保存する練習場所を作りたいので、デスクトップに「初ホームページ」という名前のフォルダを作ってください。（フォルダの作り方は、デスクトップ画面の空いている場所で右クリックし、「新規作成」→「フォルダ」とクリックします）

この「初ホームページ」フォルダの中に、コピーしたHTMLソースを保存します。

  1. TeraPadツールバーのファイル
  2. 文字/改行コード指定保存
  3. 文字コードをSHIFT-JISにしてOK
  4. （デスクトップの「初ホームページ」フォルダを指定して）
  5. 半角英数字で index.html という名前で保存

ホームページファイルの名前や拡張子は必ず半角英数文字です。

インターネットエクスプローラーで表示してみよう

保存後、フォルダのindex.htmlファイルをクリックすると、インターネットエクスプローラーで下記のように表示されると思います。

初ホームページじゃ！

はい、ここまでできたら、HTMLの９０％は理解できています。残り５％は必要なタグの知識で、残り５％はデザインセンスです。

言い換えると、残り計１０％は約１０個程度のタグと、スタイルシートです。ウソだと思うかもしれませんが、本当です。とりあえず下記のまとめをもう一度確認して次に進みましょう。

  1. HTMLタグの基本枠組みは、コピー＆ペーストで使いまわす
  2. ブラウザで実際表示されるのは、<body>と</body>タグの間だけ
  3. HTMLファイルは、半角英数字で .html をつけて保存する