HTMLの基本構造を勉強してホームページを作成しよう!

お気に入りに追加 掲示板 メール ブログ
トップ 掲載サイト一覧 お小遣い帳 人気ランキング 只今のおすすめ リンク
  トップページ > ホームページ作成支援 > ホームページ作成講座 > HTMLの基本


HTMLの基本

 
ホームページは、ホームページの基本言語である HTML という言語で書かれています。
HTML を知らなくても誰にでも簡単にホームページが作れる ホームページビルダー などのソフトを使わずにホームページを作成するには、この HTML を勉強する必要があります。
HTML というのは Hyper Text Markup Language の略で、インターネット上でホームページを公開したり閲覧するために必要な言語です。
HTML は、「 < 」 と 「 > 」の記号で囲まれた タグ というルールにしたがって記述します。決められたルールにしたがってタグを書くことで、思い通りのホームページを作ることができます。
ここではまず基本の HTML の構造を解説したいと思います。
HTML の基本構造

HTML は、全て半角英数字で記述します。
HTML は、「 < 」 と 「 > 」 の記号で囲み、基本的に 開始タグ の 「 < > 」 から始め、終了タグ の 「 </ > 」 で閉じます。
下記の HTMLソース が、ホームページの基本の構造です。まずはメモ帳などのテキストエディタに、下記の基本の HTMLソース をそのままコピーして貼り付けて作成していきましょう。なんだか難しそうと思うかもしれませんが、コピペして変更が必要な部分だけを変えて作成すればいいので、ソースを全てを覚える必要はありません。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>タイトル</title>
<meta name="keywords" content="キーワード1,キーワード2">
<meta name="description" content="説明文">
</head>
<body>
〜 内容 〜
</body>
</html>
それでは、上から順番に各タグの説明をしていきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上から1〜2行目のこのタグは、DOCTYPE宣言 と言って、このHTML文書がどの仕様のバージョンを利用して、どの DTD (文書型定義)に基づいて記述されているかを示すものです。この場合は、HTML 4.01 バージョンを利用して、DTD の中の Transitional に基づいて記述していると言う宣言になります。HTML には、いくつかのバージョンがありますが、ここでは一般的な HTML 4.01 Transitional でホームページを作成する場合を解説していきます。
<html lang="ja"> 〜 </html>
上から3〜15行目の <html> 〜 </html> は、この文書がHTML文書であることを示すものです。
ヘッダ部分 ( <head> 〜 </head> ) ボディ部分 ( <body> 〜 </body> ) の全体を <html> 〜 </html> で囲むことで、この文書がHTML文書であることを宣言します。
「lang="〇〇"」の部分は、HTML文書の言語を指定するものです。日本語の場合、「lang="ja"」と記述します。
<head> 〜 </head>
上から4行目から11行目の <head> 〜 </head> の間の部分は ヘッダ部分 と言い、ここにはページの基本情報を記述します。基本情報とは、タイトルや説明文、キーワード、利用するスタイルシートなどの情報です。ヘッダーに記述した情報は、タイトル以外のほとんどが実際にブラウザには表示されません。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
上から5行目のこのタグは、HTML文書の文字コードを指定するものです。文字コードとは、文字や記号をコンピュータで扱うために個々の文字や記号に割り当てられた変換表のことで、HTMLで使用する主な文字コードは Shift_JIS ( シフトJIS )EUC-JP ( EUC ) の2種類です。
この場合は、文字コードが Shift_JIS ( シフトJIS ) であることを表しています。文字コードの指定は、文字化け防止のためにも指定しておくことをおすすめします。
<meta http-equiv="Content-Style-Type" content="text/css">
上から6行目のこのタグは、HTML文書のスタイルシート言語を指定するものです。
<meta http-equiv="Content-Script-Type" content="text/javascript">
上から7行目のこのタグは、HTML文書のスクリプト言語を指定するものです。
<title>タイトル</title>
上から8行目のこのタグは、HTML文書にタイトルを指定するものです。ここで指定したタイトルは、ブラウザのツールバーや検索結果に表示されます。
<meta name="keywords" content="キーワード1,キーワード2">
上から9行目のこのタグは、HTML文書のキーワードを指定するものです。このキーワードは、検索する際に利用されるので、そのページの重要な単語など、適切なワードを選びましょう。複数個指定可能ですが、少ない方がいいようです。
<meta name="description" content="説明文">
上から10行目のこのタグは、HTML文書の説明文を指定するものです。検索する際に利用されるので、そのページの適切な説明文を考えましょう。
<body> 〜 </body>
上から12行目から14行目の <body> 〜 </body> の間の部分は ボディ部分 と言い、ここが実際に表示する内容を記述する部分です。

作成したファイルは、保存時に拡張子を 「 〇〇〇.txt 」 ⇒ 「 〇〇〇.htm 」 または 「 〇〇〇.html 」 に変えます。
ファイルの拡張子を 「 〇〇〇.htm 」 や 「 〇〇〇.html 」 に変えることで、テキストファイルを HTMLファイル に変更することができます。
Copyright(c)2005-2011 お小遣いサイト帳 all rights reserved
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送