HTMLを知ろう！その3
2009年2月3日
その2で、とりあえずエディタで作ってブラウザで閲覧する
という概念をわかっていただけたと思いますので
今回はもう少しちゃんとしたソースになるように追加していきましょう。
いきなり文字に色をつけたり、センタリングさせたり
ということも考えたんですが、今回の追加が後々効いてきますので
地味な内容ですがお付き合いくださいませ
【前回までのソース】
<html>
<head></head>
<body>
<div>
<p>レタスとトマトとハム</p>
</div>
</body>
</html>
>> サンプルはこちら
■一番最初に書くべきこと
<html>よりも上に↓これを書きます。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
なんじゃこりゃ～～難しい～～
と思わず、コピーして貼り付けちゃってください。
こーゆーのを「DOCTYPE宣言」と言うそうです。
詳しく知りたい方はこのキーワードで検索してみてくださいね。
食事の前に手を洗うのと同じで、理由はいろいろあるけど、とにかく洗いましょう！ということで
今は、書くもの、と思ってください。
DOCTYPE宣言は実は奥が深く、種類もいくつかあるし、どれを宣言してるかによって
見え方に影響がある時もあります。
ルールに厳しいものとかあるんですが、これは緩いタイプなのでまずはこれを使っておきましょう。
続いてヘッドの後に、これ↓もコピペ（コピーアンドペースト＝コピーして貼り付け）してください。
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
文字コードを指定しています。前回平気だったわけなので、なくても大丈夫なんです。
でも、これも食前の手洗いと同じということで、書いておいてあげてください。
続いて、ページのタイトルを書き込みます。
これはちょっと重要度が増します。
<title>サンドイッチ</title>
ブラウザで開いた時に、ウインドウの一番上に表示されたり
Yahooなどの検索結果として表示されるのもこの部分です。
サンドイッチ、と書いたのは、あくまでも「例」ですから、
内容に合わせたタイトルを入れて下さい。
【おまけ】
ちなみに、文字コードの指定の後に、タイトルがある、というのにも一応意味があります。
文字のコード指定なので、文字が出てくる前に書いてある必要があるのです。
これで、タイトル部分も指定したコードで表示されるようになるので、逆になってたりすると
文字化けする原因にもなります。
ということで、今はこんな感じになってると思います。
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=shift_jis”>
<title>サンドイッチ</title>
</head>
<body>
<div>
<p>レタスとトマトとハム</p>
</div>
</body>
</html>
>> サンプルはこちら
ボディ<body>の中にはな～んにも増えてないので、ブラウザで見てみると相変わらず、
レタスとトマトとハム
だけが表示されます。ただし、ブラウザの上に、サンドイッチというページタイトルは表示されていると思います。
headの役割についても、なんとなくわかっていただけたでしょうか。
より凝った作りにしていこうとすると、
ブラウザに表示はさせたくないけど、いろいろページに対して指定したい
ということがたくさん出てきます。
そういう時はみんなheadに書きます。
（正確には他の手段もありますが）
髪をアップにする時のUピン的な、縁の下の力持ちなのが「ヘッド」君なんです♪
下準備ができたので、次回はもう少しbodyの中をいじってみたいと思います。
<<HTMLを知ろう！その2へ ｜ HTMLを知ろう！その4へ>>
