書き方

ＨＴＭＬソース: そもそもどうすりゃ良いのか解らない人たちへ。

まずテキストエディタを開いてください。

Windowsの例で言えば。

『スタートメニュー　→　（すべての）プログラム　→　アクセサリ　→　メモ帳』

とかで開けます。（Macintoshは知らないので悪しからず）

それにこう書いてみましょう

Hello World !

まぁハローワールドはお約束ですね。(笑)

では、保存しましょう。名前は何でも良いのですが、一番後ろに「.html」もしくは「.htm」と付けてください。

コレでWindowsは今作ったファイルがＨＴＭＬだと認識してくれます。

注）拡張子を表示していないと「.htm.txt」とかになってしまう場合があります。拡張子は表示しておきましょう。

保存したファイルをダブルクリックしてみましょう。

こんな画面ではないかな？と。　　→

コレでＨＴＭＬは完璧ですね♪（コラ

右記のファイル上でソースの表示を選んでみましょう。

WindowsのIEであれば

『表示　→　ソース』で表示されるはずです。

そこに先ほど書いた内容が表示されます。

上記のように、テキストエディタで開いたＨＴＭＬと、ブラウザで開いたＨＴＭＬと二つ表示の種類があります。

このテキストエディタのほうを『ソース』と呼びます。

用語なんてどうでも良いのですが、『ソース』という言葉は覚えておいて損はないでしょう。

（ちなみに、ブラウザで開いたものをどう呼ぶかは知りませんが、私は『ハイパーテキスト』と読んでます。）
→　ＨＴＭＬの拡張子の話

タグ: 先程の「Hello World !」では『ソース』も『ブラウザでの表示』も同じ内容でしたが、タグと呼ばれるものを使うと変わっていきます。

タグ（札）はその文章や文字がどう言う意味を持ったものなのかを表す手段です。

あいうえお　かきくけこ　さしすせそ

例えば、この「あ～そ」の１５文字のうち、『かきくけこ』の部分にだけ『太字』という札を付けようと思います。

あいうえおかきくけこさしすせそ

↑太字↑

札っぽいですね（ぇ）　コレでなんとなく『かきくけこ』の部分が太字なんだとイメージできます。

コレをもうちょっとＨＴＭＬに近づけてみると。

あいうえお　（ここから太字）　かきくけこ　（ここまで太字）　さしすせそ

札っぽくはないですが、これでも『かきくけこ』の部分が太字なんだとわかると思います。

これをＨＴＭＬでは（）ではなく<>を使います。

あいうえお　<太字始まり>　かきくけこ　<太字終わり>　さしすせそ

<>が出てきたら、ブラウザは「ＨＴＭＬのタグなんだな」という判断をします。

ただ、いちいち『始まり』『終わり』を書いていたんじゃ面倒です。ので、もっと簡単に始まりと終わりが書けるように・・・と、考え出されたのが「/（すらっしゅ）」です。

スラッシュすげー！（違う

あいうえお　<太字>　かきくけこ　</太字>　さしすせそ

始まりは<～～>。終わりは</～～>で表します。

後は『太字』の部分を何とかしたいですね。タグを書くたびに日本語入力に切り替えていたんじゃ面倒くさいです。

というか、そもそもＨＴＭＬを作ったのはＷ３Ｃというあっち（多分米）の団体なので、日本語なんて眼中にないんですよ。

『簡単な基礎知識』で何度か使いましたが、太字は「Bold（ボールド）」の頭文字をとった「B」で表します。

ので、先程の「あ～そ」を書き直してみましょう。

あいうえお　　かきくけこ　　さしすせそ

コレを先程の「Hello World !」の用にテキストにして、拡張子を「.html」にすれば、『かきくけこ』の部分が太字になってくれます。

ちなみに、この「B」は大文字でも小文字でもどちらでも問題ありません。好きなほうを使ってください。

コレで基本はバッチしですね♪
→　大文字か小文字か

入れ子: 単純なＨＴＭＬであれば、上記のように<～～>と</～～>の間に文字を挟めばOKですが、正確に言うと『挟む』のではなく『入れる』というイメージを持ってください。

入れ子構造。という言葉を知っているのなら、ＨＴＭＬは入れ子構造です。で説明終わりなのですが、皆が皆そういった言葉を知ってるわけではないので、簡単に説明します。

例えば、『太字』と『斜め文字』を一緒にしたいとき。即ち『太字』で『斜め文字』を書きたいときどうするか・・・考えてみましょう。

何度目かになりますが、は太字、は斜め文字を意味します。

１：　太字で斜め文字
２：　太字で斜め文字
３：　太字で斜め文字

取り敢えず、３つ候補を用意してみました。

どれが正しくて、どれが誤りなんでしょう？

正解は『１』と『２』。『３』は誤りです。

『挟む』という意味ならば、『３』でもよさそうなのですが、生憎そういうものでもないのです。

『挟む』のではなく『入れる』という表現をしたのはこういうことで・・・

１

２

３

こう絵にすると、「３」が誤りであることを理解しやすいと思います。

要するに、タグで囲むと言うことは、箱に入れてるイメージです。

「３」は箱の壁が重なってしまっているため、きちんと封をすることができません。

だから、「３」は誤りなんですね。

わかりやすくするために、ＨＴＭＬを書くときは始まりのタグを書くたびにインデント（字下げ）を使うことをお勧めします。



こんな風に





字下げして書くと







分り易いかも

ＨＴＭＬのトップ　に戻る