Webページの中心になっているファイル形式はHTMLというものです。これは例えば表計算ならばエクセル、文章の作成であればWordというようにその目的によってファイル形式が違うというのと全く同じです。ホームーページやWebサイトはサーバー上から読み取れるファイル形式（*1)を採用しなくてはなりません。その中心になるのがHTMLです。
HTMLファイルを書くのはそれほど難しいことではありません。
1. まずは手持ちのテキストエディタで新しいファイルを開きます。前述したようにプログラムコードを書くことに適したテキストエディタを使うようにしてください。ここではTeraPadを例に話を進めたいと思います。
2. テキストエディタを開いたら以下のコードを書いてみてください。コードを書き終えたら「文字コード」をUTF-8にすることを忘れないでください。TeraPadの場合は上部メニューの[ファイル]→[文字コード指定再読み込み]からUTF-8を選択します。もしかしたら、日本語を入力した部分がおかしな文字に変化するかもしれません。これは文字化けといって文字コードが間違っている場合に生じます。日本語の部分だけタイプしなおすときちんと表示されます。
注意しなくてはいけない点は、半角英数字と全角文字と区別することです。半角英数字は文字化けしませんが、全角で書かれた日本語は文字化けをします。半角と全角に注意してタイプしてください。
3. このファイルを保存します。とりあえずはデスクトップ上など適当な場所に保存してください。ファイル名は<ファイル名>.htmlという名前にします。ファイル名はなんでも構いません。
4. 保存したファイルがデスクトップ上にあるはずです。.htmlという拡張子がファイル名についていることを確認してください。
5. このアイコンをダブルクリックしてます。自動的にブラウザーが起動して表示されます。サーバーにアップロードしてなくても自分のパソコン内でファイルを見ることができます。
<html></html>はその中身がHTMLファイルであることを示しています。その外に書かれたものは表示されないか無視されます。<head></head>内にはHTMLファイルが必要としている情報を記述します。タイトルなどもその一つです。このhead内は難しい言葉でいうとメタ情報というものを入れ込みます。メタ情報はそのHTMLに必要な別ファイルを読み込んだり、検索エンジンに対して何らかの指示をしたり我々が普段目につかないような情報を記述する場所です。<body></body>は実際にブラウザー上に表示される部分です。ここに記述したものはすべて表示される仕組みになっています。
ばずはbody内にいろいろな文字を書いて表示してみましょう。
このBody内の中でテキストを書く際には通常のワープロソフトやメモ帳と違っていくつかの約束ごとがあります。それは改行する際には<br />をお尻につけることです。テキストエディタ上で改行してもブラウザーで表示した段階では改行されません。ブラウザーが改行と判断するのは<br />という改行タグです。
*1 ファイルの形式は様々なものがあります。テキストではプレーンテキスト(.txt)、様々なデザインを組み込めるHTMLファイル(.html)、画像ファイル(.gif .jpg)、デザイン情報を記述するCSSファイル(.css)、プログラムコードを記述するファイル(.js .php .pl .cgi)、動画や音声ファイルなどのマルチメディアやフラッシュなどのオブジェクトなど様々なファイル形式があります。
HTMLファイルを書くのはそれほど難しいことではありません。
HTMLファイルを書く
HTMLを書く際に注意すべき点がいくつかります。一つは文字コードです。文字コードは何でも構わないのですがここ最近の傾向からいうとUTF-8（ユニコード）がその主流になっています。ですから文字コードはいつでもUTF-8を選択するようにします。もう一つはファイルを保存する時には<ファイル名>.htmlという形で保存するということです。.htmlは拡張子（識別子）と呼ばれていてこのファイルがHTMLファイルであるということをコンピューターやサーバーに伝える役目をしています。1. まずは手持ちのテキストエディタで新しいファイルを開きます。前述したようにプログラムコードを書くことに適したテキストエディタを使うようにしてください。ここではTeraPadを例に話を進めたいと思います。
2. テキストエディタを開いたら以下のコードを書いてみてください。コードを書き終えたら「文字コード」をUTF-8にすることを忘れないでください。TeraPadの場合は上部メニューの[ファイル]→[文字コード指定再読み込み]からUTF-8を選択します。もしかしたら、日本語を入力した部分がおかしな文字に変化するかもしれません。これは文字化けといって文字コードが間違っている場合に生じます。日本語の部分だけタイプしなおすときちんと表示されます。
注意しなくてはいけない点は、半角英数字と全角文字と区別することです。半角英数字は文字化けしませんが、全角で書かれた日本語は文字化けをします。半角と全角に注意してタイプしてください。
<html>
<head>
<title>テストHTML</title>
</head>
<body>
ここにテキストを書きます。
</body>
</html>
3. このファイルを保存します。とりあえずはデスクトップ上など適当な場所に保存してください。ファイル名は<ファイル名>.htmlという名前にします。ファイル名はなんでも構いません。
4. 保存したファイルがデスクトップ上にあるはずです。.htmlという拡張子がファイル名についていることを確認してください。
5. このアイコンをダブルクリックしてます。自動的にブラウザーが起動して表示されます。サーバーにアップロードしてなくても自分のパソコン内でファイルを見ることができます。
HTMLファイルの中身
htmlファイルは、ネスト（入れ子）構造をしています。先のコードは、<html></html>の中に<head></head>と<body></body>が入っています。<head></head＞の中には<title></tite>が入っています。これを視覚化するとこんな感じになっています。<html>ネスト（入れ子）というのはこんな感じになっているということです。それぞれの要素は<html>のようにはじまります。そして</html>というように/で閉じます。これはどんなに複雑なHTMLファイルもこの基本構造を保っています。<head><title>テストHTML</title></head><body></html>ここにテキストを書きます。</body>
<html></html>はその中身がHTMLファイルであることを示しています。その外に書かれたものは表示されないか無視されます。<head></head>内にはHTMLファイルが必要としている情報を記述します。タイトルなどもその一つです。このhead内は難しい言葉でいうとメタ情報というものを入れ込みます。メタ情報はそのHTMLに必要な別ファイルを読み込んだり、検索エンジンに対して何らかの指示をしたり我々が普段目につかないような情報を記述する場所です。<body></body>は実際にブラウザー上に表示される部分です。ここに記述したものはすべて表示される仕組みになっています。
ばずはbody内にいろいろな文字を書いて表示してみましょう。
このBody内の中でテキストを書く際には通常のワープロソフトやメモ帳と違っていくつかの約束ごとがあります。それは改行する際には<br />をお尻につけることです。テキストエディタ上で改行してもブラウザーで表示した段階では改行されません。ブラウザーが改行と判断するのは<br />という改行タグです。
*1 ファイルの形式は様々なものがあります。テキストではプレーンテキスト(.txt)、様々なデザインを組み込めるHTMLファイル(.html)、画像ファイル(.gif .jpg)、デザイン情報を記述するCSSファイル(.css)、プログラムコードを記述するファイル(.js .php .pl .cgi)、動画や音声ファイルなどのマルチメディアやフラッシュなどのオブジェクトなど様々なファイル形式があります。
