ここでは、ホームページ作成のスキルを独学で身につける方法をシリーズでご紹介します。先回までの回で、ウェブページのプログラミングに必要な準備を行なっていただいたと思います。今回はHTMLファイルの構造をご説明します。さっそくテキストエディタを用いて最初のHTMLファイルを作成してみましょう。
HTMLファイルの構造
まず、そのファイル自体がHTMLという形式のプログラムであることを示すために、すべてのプログラムのコード（記述）は、<html> </html>という表記でくくられています。
そしてこのHTMLファイルは大きく分けて2つの部分に分けることができます。
一つは「そのHTMLファイルに関する情報」を記す部分です。これを「ヘッダ」と呼びます。
もう一つは「実際にホームページとして表示される部分」です。この部分を「ボディ」と呼んでいます。
１．HTMLファイルに関する情報を記す部分（ヘッダ）
これはHTMLファイルの前半部分に記述され、<head> </head> で囲われた部分のことを言います。ここには、
１）そのページのタイトルなど基本的な情報
２）他のファイルやプログラムの情報を読み込む指示
を記すことができます。基本的にはここに書いたもの（タイトル以外）はブラウザーで確認したときにはホームページとして表示されることはありませんが、表示を行なうために必要な情報が書かれています。
２．実際にホームページとして表示される部分（ボディ）
これはHTMLファイルの後半部分に記述され、<body> </body>で囲われた部分です。ここに書いたことはブラウザで確認したときに実際に表示されます。
そして、この中に「文章」や「画像」など表示させたいものを記入していくことになりますが、それぞれが「何の役割なのかを」コンピューターに認識させることが必要です。そのために必要となるのが「タグ」です。
３．「タグ」とは
「タグ」とは、プログラムの中で不等号記号「＜…＞」の中で囲われた部分に記されます。先ほどから出てきている <body> や <head> も「タグ」の一つです。
HTMLは基本的に <開始タグ> と </終了タグ> で囲われた部分に内容を記入していきます。
この「タグ」については、この後のブログ記事で詳しくご説明しますので、今の段階では「そういうものがあるのだ」程度に理解しておいていただければ大丈夫です。
では早速テキストエディタで作ってみましょう。
手順① テキストエディタで定型文を作成
HTMLファイルの基本的な構造は定型文になりますので、ページを作成するたびに決まった表現になります。毎回ファイル（ページ）を作成するたびに打ち込むのは大変ですが、以下の手順でAtom（テキストエディタ）で自動的に生成できます。
１．Atom（テキストエディタ）を開き 右下の Plain Text を選択
２．選択できる項目に html を入力し選択
３．最初の一行目に「html」と記入
そのようにすると右の画像のように、定型文が自動的に作成されていると思います。
手順② タイトルエリアと、<body>部分にコメントを入力
<title> </title>で囲われた部分は文字通りそのページのタイトルになります。このページのタイトルはブラウザで確認したとき、一番上に表示されます。このタイトルはいつでも変更できますが、今回は便宜上「はじめてのホームページ」としておきます。
<body> </body>で囲われた部分は実際のホームページに表示される部分です。そこにも何かコメントを記入してみましょう。
※ Atomには入力サポートを行う機能がついており、例えば「d」と記入すると「d」から始まる「タグ」が候補として出てきます。今回は「<div class= “”> </div>」（ディブ）というタグで文章をくくっています。この「div」については後程ご説明します。
※自動的に生成されたものの中に<meta charset=”utf-8 “>と上のほうに表示されると思いますが、これはそのページの文字コードを指定しているものです。最近ではこの「utf-8」というものが標準ですので、そのままで大丈夫です。
手順③ 作ったHTMLファイルに名前を付けて保存
作成したファイルに名前を付けて保存しましょう。 今後どんどんファイルが増えていきますのでデスクトップに新たなフォルダを作成して、保存していくとよいかもしれません。
ファイルには半角英数で自由な名前を付けることができますが、通常、最初に表示されるトップページは「index.html」というファイル名にすることになっています。
そうして保存したHTMLファイルをブラウザで確認すると以下のように表示されていると思います。
ここまでできれば、HTMLファイルの基本的な作り方と表示の方法をなんとなくご理解いただけたはずです。
今後HTMLファイルを作っていくときには、画面の一方にテキストエディタ、もう一方にブラウザを表示させておくと便利です。更新するたびに、ブラウザの「ページの再読み込み」を行なえば、作ったプログラムがどのように表示されているかをすぐに確認できます。
まとめ
基本的なHTMLの構造をご説明しましたがいかがだったでしょうか。まだまだ、一般的に見るホームページの体裁とは程遠いと思われるかもしれませんが、基本的な手順はこれまで紹介した方法に従って作成していきますので、それほど難しいことはありません。
次の記事では、先ほど作成した文章に出てきた「タグ」について詳しくご説明します。