HTML入門 はじめました
HTML入門（1）
超ビギナーのためのHTML入門です。
ゆっくりと画像でイメージをふくらませながら、少しずつ頭になじませていきましょう。お話は、次の順番で進みます。
本にたとえてイメージする
1：本を手にしてみる
HTMLをイメージしやすくするために、本を一冊ばかし用意して、手に持ってみてください。漫画でも、何でも良いです。
おそらく、どのような本でも、たいてい同じような構成なので、大丈夫だと思いますが、後々、どうやら話がかみ合わないと感じた場合は、違う本を探してみてください。
実際に形あるものに触れながら、読んでみると、脳を刺激して覚え良いはずです。面倒くさがらずに、本を手にとって試してみましょう。
2：コードを眺めてみる
あなたがいま手にしている本にたとえて、次の4つのタグを説明していきます。この4つが、HTMLで最低限必要になるタグです。
- <html>タグ
- <head>タグ
- <title>タグ
- <body>タグ
実際に記述すると、次のようになります。はじめて見る人は、何だか分からないと思いますが、頭を慣らすために、ちょっと眺めてみてください。
最初から、「分からない！」と思ってしまうと、脳が閉じてしまいます。「こんなんがあるんや〜、へ〜」くらいの軽さで、ざっくりと見てみましょう。
いやいや、そこまで見なくても大丈夫です。
そんなに見つめられると照れちゃうので、そのくらいにして先に進みましょう。それではひとつずつ、見て行きます。
<html>タグとは？
<html>タグは、その文書がHTMLであることを伝えるために記述します。<html>タグは、次のように記述します。
<html>〜</html>
つまり、<html>と書いて、その中にゴチャゴチャ書いて、</html>で閉じると、その文書はHTMLで書かれている文書であることを示すわけです。
本にしても、「私は本です」と言うからには、空間の中で存在を示す端と端があります。
例えば、空間との境界が曖昧になって溶け合ってしまうと、本は本でなくなってしまいます。触れることもできません。
<html>と</html>で囲むことによって、存在が明確になるのです。「私は、HTML文である！」と言えるわけです。
HTML文なんだから、<html>〜</html>で囲めばいいのさ。それだけのことさ。
<head>タグとは？
<head>タグには、そのHTML文書に関する情報を記述します。<head>タグは、次のように記述します。
<head>〜</head>
例えば、次のような情報を、<head>〜</head>内に記載します。
- タイトル（後述の<title>タグ使用）
- そのページの説明
- 外部ファイルの場所
- 著作者名
などなど。
これらの情報を、<head>〜</head>で囲むわけです。とりあえず、ここでは記憶しやすいように、<title>タグだけ記述してあります。
たいてい本には、本体とは紙質が違うカバーが付いています。装丁（そうてい）の主たる部分です。これが、<head>タグらしい部分と言えます。
本のタイトルや、本の要旨、著作者名などが掲載されています。<head>タグも同様の役割を担（にな）っています。
<head>〜</head>内には、そのHTMLファイルに関する情報をつめこんでいるのさ。
<title>タグとは？
<title>タグは、その名の通り、タイトルを記述するためのタグです。<title>タグは、次のように記述します。
<title>〜</title>
<head>タグでも記述しましたが、<head>〜</head>内に、<title>タグを記述します。<title>〜</title>の間にタイトルを記述します。
例えば、当ブログのトップページであれば、次のように「ブログが作りたい！」と記述するわけです。
<title>ブログが作りたい！</title>
本にも、当然タイトルが記載されています。タイトルは、本の内容を端的に指し示すものなので、とても大切です。（ブログも同様です）
タイトルに惹かれて、タイトルだけで本を購入することもあるのではないかしら。「買ってガッカリ」なんてことは、往々にしてありますけれどもね。
<title>〜</title>内には、タイトルを書けば良いのさ。そのまんまです。
<body>タグとは？
<body>タグは、文書内容を記述している旨を伝えるためのタグです。<body>タグは、次のように記述します。
<body>〜</body>
<body>〜</body>の間には、実際の文書内容を書きます。<body>〜</body>で囲まれている中身が、ブラウザに内容として表示されます。
例えば、「桜の季節は、もうすぐです。」と表示させたければ、次のように記述します。
<body>
桜の季節は、もうすぐです。
</body>
これだけだと、分かり難いですね。全体的にタイトルも入れて書けば、次のようになります。
本で言えば、本の内容が書かれている本体と言えます。
「顔はやめな！ボディー（body）にしな！」という感じですね。
<body>〜</body>という大きな箱に、文章や画像を好きなように入れていくイメージを持つと分かり良いかもしれません。
あなたが書きたい内容は、<body>〜</body>内に書けば良いのさ。
復習しておく
1：改めて眺めてみる
それでは、冒頭で見たHTMLコードを、改めて、眺めてみましょう。
ただの英字の羅列にしか見えなかったHTMLタグが、不思議とひとつひとつに意味を感じられるようになったのではないかしら。
暗記する必要なんかはありません。役割を把握して、必要なときに「コピー & 貼り付け」ができれば、OKです。
2：ペアになっているのさ
それぞれ、ペアになっていることに、気が付いたのではないかしらん。
例えば、<html>で開始したら、</html>で閉じるという仕組みです。
何だか、同じような文字列に見えるかもしれませんが、閉じるときは、「/（斜め線）」が入っています。お忘れなく。
あまり、この辺で、深く掘り下げないでくださいね。
- なぜに、閉じるときは、斜め線がいるのか？
- 誰が決めたのか？
- 斜め線とは何か？人生とは何か？
- どのくらい傾いていると、「斜め」と言えるのか？
などなど。
私がそうなのだけれど、勉強がヘタな人って、よく脱線するのよね。入門などの段階では、どれだけシンプルに覚えるかが大切です。
htmlタグは、たいていペアです。始まりと、終わりがあります。そうではないタグもありますが、ここでは、「ペアなのよ、ペアなのよ」と覚えておいてください。
3：記号 less than と more than
htmlのタグが、「< （レス ザン）」と「> （モア ザン）」で囲まれていることに、異議申し立てのある人はいらっしゃるかしら。
「えー何で、<html>なん？htmlって書いたらえぇやーん、面倒やわー」とかさ。
ごめんなさい。でも、それは却下します。
例えば、「title」という名のタイトルを考えてみてください。次のように、どこがタグやらタイトルやら、わけが分かりません。
titletitle/title
「< （レス ザン）」と「> （モア ザン）」は、必要です。
<title>title</title>
忘れずに、付けましょう。
次回予告
次回は、今回作成したHTML文（HTMLコード）をブラウザで表示させます。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました（この記事です）
- HTML文を表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/12 更新日：2008/03/12
« 「カスタマイズ前の準備」｜「HTML文を表示させてみよう」 »
コメントありがとうございます。
シンプル
いつもコメントありがとうございます。
ひろこさんに承認印いただけたので、
ホッとしています。(´▽`)♪
そうなんです。
私の場合は、脱線して、答えがすぐに見つからなくて、
飽きて、モチベーション下がって、遊んでしまうのです。
遠回りしているうちに、他の場所へ行ってしまう。
勉強のできる人というのは、
きっと、どちらかなのだと思います。
・はじめのうちは、シンプルに覚えていく。
・はじめから脱線しても、どこまでも探究する。
ちょっと、シンプルに段階的にできないかな、と思っています。
そして、おもしろい文章が書けたらいいなぁとも。
どうせなら、楽しく覚えた方が良いし、
記憶につなぎやすいかと考えています。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/238-1c160c92
すっごくわかりやすかったです！
htmlをカバーと本文で例えるなんてすごい。
これをhtmlを触り始めの頃に読みたかった・・・
「なぜ！」って脱線すること自分も多いです＾＾；
結構遠回りになったりしますよね。
ところで、「顔はやめな！ボディー（body）にしな！」
またコーヒー吹いたよ・・・
女番長ですかｗ
KumaCrowさんの文章は、ホケ~と読んでると時々こういうのがあるので
油断できない・・・
アタイも気を引き締めて頑張ります。