HTMLを知ろう！その2
2009年1月30日
「その1」で準備ができたので、早速作ってみましょう。
※超初心者向けなので、順を追って説明してますので、多少知識のある方にはだる～い内容になっております。
1．エディタを開きます。（私の場合はCrescent Eve）
2．タグを入力していきます。
まずは<html>と入力します。
これを書くことによって、htmlが始まるよ、という合図になるので
一応必須です。
（必須なのに”一応”と書く理由はまた別の話で書きます）
【余談】
「<」はShiftを押しながら「ね」が書いてあるキー
「>」はShiftを押しながら「る」が書いてあるキー
こうゆう「<>」でくくってあるものを「タグ」と呼びます。
※タグの「<」が全角になってますが、これはブログの仕様上の問題なので
実際に書く時は必ず半角で書いてください。以下の表記でも場所によって全角で書いてありますが半角に置き換えてください。
だからは「エイティーエムエルタグ」です。
また、タグにはいっぱい種類がありますが、ほとんどのタグは
開始タグと閉じタグでひとつのセットになっています。
サンドイッチのパンと同じです。
間に具（内容）をはさむためのものなので、こっからここまで、という指定が必要になります。
閉じタグは「/（スラッシュ）」が入ります。
</html>みたいに。
次に、忘れないように閉じタグも書きます。
</html>
これでhtmlで書くのはこっからここまでだよ、という指定ができた状態です。
続いて、ヘッドタグを書きましょう。
<head></head>
これは付せんみたいなもので、ブラウザで見たときには表示されないのですが
このページについての細かいことを指定するエリアです。
閉じタグを忘れないように先に書いているので
今は
<html></html><head></head>
となってると思います。
だけど、htmlは一番外側のパン（タグ）なので
<html>
<head></head>
</html>
こうなるようにしてください。
こっからが実際の表示に関連するタグ、ボディタグです。
<body></body>
と書いてください。
場所は
</html>の上です。
これで
<html>
<head></head>
<body></body>
</html>
となってるはずです。
これが超基本！のhtmlです。でも、あくまでもエリアを指定しただけ
サンドイッチで言うならばパンだけが重なってる状態です。具なし！
では具になる部分、内容を書きましょう。
bodyタグの間に書いてくださいね。
<div>
<p>レタスとトマトとハム</p>
</div>
急にいっぱいタグが出てきました。
ディブタグは、四角いエリアを指定するタグです。
これ自体には深い意味はないので、書いてなくても問題なかったりします。
が、のちのちとっても重要な役割を果たしてくれますので、書いてあげてください。
隠し味みたいなものです。
それからピータグ（<ｐ>）これは頻繁に使うタグです。
段落を意味するタグなので、基本的に文章があったらpで囲んであげましょう。
これまたなくても大丈夫だったりしますが。。
今日の最終形は↓こんな感じです。
<html>
<head></head>
<body>
<div>
<p>レタスとトマトとハム</p>
</div>
</body>
</html>
>> サンプルはこちら
書き終わったら、ファイルを保存します。
ファイル名は何でもよいのですが、日本語は使わないでください。
ひらがな、カタカナ、漢字がダメってことなので「にほんご.html」はダメですが
「nihongo.html」はOKです。
あと、拡張子は「.html」にしてください。
ここでは「sand.html」とします。
保存場所を忘れるとせっかくつっくたのにどこへ行ったの～～
ってなっちゃうので、チェックしておいてくださいね。
特に指定しなければマイドキュメントに入ってると思います。
この保存したファイルをダブルクリックすると
ブラウザが自動的に起動して、
レタスとトマトとハム
という文字が出ていると思います。
HTMLのとっかかりで難しいのがここです。
エディタで開いた時と、ブラウザで見た時では、見え方が違う！
これが理解できれば、htmlの第一ゲート通過です♪
これをやってみて、ちょっと「楽しいかも」って思った方は
その3をお楽しみに
※超詳しい方へ。
わかりやすさを優先して正確な言い回しじゃないところがありますのでご了承くださいませ。
<<HTMLを知ろう！その1へ ｜ HTMLを知ろう！その3へ>>
