ファイルを作ってみよう

前回まではブラウザ上で話を済ませてきましたが、今回からは実際にファイルを作ってやっていきます。

まずはお使いのエディタでファイルを新規作成しましょう。作る場所はサーバの中ではなく自分のパソコンの中で問題ないです。
最初にファイルを作る時にファイルの形式を聞いてくる(と思われる)ので、聞かれたらhtmlを選びます。htmlに大量の種類がある場合はhtml4か5あたりを選んでおけば問題ないです。
あと、申し訳ないんですが、新規作成した時に最初からファイルにいろいろなものが書いてある場合は全部消してまっさらな状態から始めてください。

まっしろな状態になったら、適当に「あいうえお」だの「あああああ」だの打ち込んで保存してください。ファイル名は何でもいいですが半角英数とハイフンやアンダーバーくらいにしておいてください。全角ナントカはだめです。
迷ったらindex.htmlとかhoge.htmlとかにしておきましょう。
.htmは「拡張子は3文字」というルールがあった頃のもので今はほぼ見なくなった(気がする)

作った奴をブラウザで見るとまっしろ画面に打った文章が表示されると思います。「あいうえお」とか。「ああああ」とか。
万一文字化けしちゃってもキニシナイ。
余裕がある人はここでpタグやbrタグをちょいと駆使してみてもいいでしょう。

さて、ここでブラウザ上面を見てみましょう。Internet Explorerだと「無題ドキュメント」、Google ChromeだとファイルのURLやパスが表示されていると思います。
ここにはページのタイトルが来るべきですよね。「トップページ」とか「ホーム」とか、今回だったら「テストページ」といったくらいでしょうか。
ブラウザに対してこのページのタイトルは○○だよ!と言ってやらないといけません。でも、さっき書いた「あいうえお」とかの隣に「このページのタイトルは『トップページ』です」なんて書き添えたって効果はありません。

実は、表には見えない情報を書く場所がhtmlには用意されています。ページのタイトルもウラ部分に正しく書いておくことでしっかりブラウザが読みとってくれます。

<html>
<head></head>
<body></body>
</html>

新しいタグ<html>、<head>、<body>の登場です。pタグやstrongタグみたいにくくって使うタイプのタグです。
htmlタグは「htmlだぞ!」って言ってるだけのタグです。まあ、書いておいてやってください。
headタグは表には出てこないウラ部分の情報を集めてくくっているタグです。<head>と</head>の間にコッソリと情報を書き添えておきます。
bodyタグの中には表に出るものを書きます。実をいうと今まで書いてきた文章やタグは本当は全てbodyタグに収まるべきものです。例えば以下のような感じ。

<html>
<head></head>

<body>

20yy年mm月dd日、○○大学××キャンパスにて△△祭が開催されます!
今年度のテーマは「○×△□」です。○×△□らしい○○大学の学園祭へ是非お越しください。

○○大学××キャンパスへは□□線××駅から徒歩m分、☆☆線◎◎駅からバスでm分です。

</body> </html>

といった感じで、オモテに表示されるものはこのbodyタグの間に書きます。では本題、ページタイトルはどう書けばいいでしょうか。
オモテに大々的に表示されるものではないので、書くところはbodyタグの間ではなくheadタグの間です。

<html>
<head>
<title>学園祭について</title>
</head>

<body>

20yy年mm月dd日、○○大学××キャンパスにて△△祭が開催されます!
今年度のテーマは「○×△□」です。○×△□らしい○○大学の学園祭へ是非お越しください。

○○大学××キャンパスへは□□線××駅から徒歩m分、☆☆線◎◎駅からバスでm分です。

</body> </html>

ページタイトルはtitleタグでくくってheadタグの間に書いておきます。こうすることでページタイトルだなとわかってブラウザがタブやウィンドウのバーにページタイトルを表示してくれます。

さて、運悪く文字化けしちゃった人。
同じ日本語でも主要なもので表し方(文字コード)が実は3つあります。「Shift-JIS」「UTF-8」「EUC-JP」です。我々には同じ「あ」でも、shiftjisの「あ」とutf-8の「あ」とeuc-jpの「あ」があります。
読む側のパソコンが「これはshiftjisで書いたんだなあ」と言ってshiftjisの文章を読んでくれる分にはいいのですが、「これはshiftjisで書いたんだなあ」と言ってutf-8を読むと大変なことになります。これが文字化けです。
エディタの方で新規作成時か新規保存時にどれにするか選ぶことができるので、shiftjisにでもしておきましょう。基本的にブラウザはshiftjisで読もうとします。
ただ、今後phpとかを書く予定がある人はutf-8でやった方がいいです。そういう人はutf-8で保存した上で文字化け防止に

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学園祭について</title>
</head>

<body>
(以下省略)

と書いておきましょう。「この文章はutf-8で書きました!」という但し書きです。別に表に表示してほしい情報でもないのでheadタグの中にtitleタグと一緒に書きます。
最近はhtml5において

<meta charset="UTF-8">

と短く書いても良いことにはなっています。
shiftjisの人も念のためUTF-8をShift-JISに変えたものを書いておくといいでしょう。