HTMLでトップページを作る
サイト専用フォルダを作り、拡張子の表示ができたらさっそくHTMLファイルを作ってみましょう。
トップページ用のファイルを作る
- 「myHP」フォルダ上で右クリック→[新規作成]→[テキストドキュメント]をクリックすると「新規テキストドキュメント.txt」が出来るので「index.html」に名前を変えます。
- この時、「拡張子を変更するとファイルが使えなくなる可能性があります。変更しますか？」と言うダイアログが出てきますが構わず「はい」をクリックしましょう。
- そうするとファイルのアイコンがブラウザのアイコンが付いたものになります。
HTMLファイルの名前（.htmlの前の部分）は半角英数字であれば自由につけることができますが、トップページだけは「index」にしましょう。詳しい理由は「ファイル名の法則」を参照してください。
文章をHTMLにしてみる
以下のような文章をホームページに表示したいとします。
私のホームページ
私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。
ただ今準備中です。
文章をマークアップ（意味づけ）する
上記の文章を、一文ごとに意味合いを考えてみます。単純な文章なので、「見出し」と「段落」と考えます。
見出しを意味するタグは<h1>～</h1>、段落を意味するタグは<p>～</p>なのでそれぞれの文章を該当するタグで囲みます。
<h1>私のホームページ</h1>
<p>私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。</p>
<p>ただ今準備中です。</p>
タイトルを付ける
この文書にタイトルをつけます。文書のタイトルを示すタグは<title>～</title>です。今回は見出しと同じ文章をこの文書のタイトルとします。
<title>私のホームページ</title>
<h1>私のホームページ</h1>
<p>私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。</p>
<p>ただ今準備中です。</p>
この文書が「html形式」であることを示す
この文書全体をhtml要素として<html>～</html>で囲みます。
<html>
<title>私のホームページ</title>
<h1>私のホームページ</h1>
<p>私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。</p>
<p>ただ今準備中です。</p>
<html>
文書型宣言（DTD）を入れる
文書型宣言（DTD）とは、コンピュータにそのテキストがどのバージョンの(X)HTMLで書かれているかを宣言するものなのでできるだけ書くことを推奨します。
今回は「HTML 4.01 Transitional」というバージョンを使うことにします。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>私のホームページ</title>
<h1>私のホームページ</h1>
<p>私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。</p>
<p>ただ今準備中です。</p>
<html>
文書をヘッダ情報と本文に分ける
ヘッダ情報とは、本でいうところの「奥付」のようなものです。今回の例で言うと<title>～</title>がそれにあたります。ヘッダ情報は<head>～</head>で囲み、本分は<body>～</body>で囲みます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>私のホームページ</title>
</head>
<body>
<h1>私のホームページ</h1>
<p>私のホームページへようこそ。
このサイトでは自分で撮影した写真を展示する予定です。</p>
<p>ただ今準備中です。</p>
</body>
<html>
この文章を先ほど作った「index.html」にコピーして上書き保存すればトップページの出来上がりです。
HTML文書として保存
- 「index.html」を右クリック→[プログラムから開く]→htmlファイルを編集するソフトを選択します。
- 使いたいソフトが無い場合は[プログラムの選択]をクリックして任意のソフトを選択しOKをクリックします。
- 選択したソフトが起動して、「index.html」を編集することが出来ます。
