超初心者向けHTML講座その1

最近はいろんな方から質問をいただくようになりました。
なるべくわかりやすく説明したいのですが、説明しても通じない方もおられます。
お気を悪くしないでください。この講座は、あなたにカスタマイズをして欲しいから開くのです。
ということで「ハイパー超初心者対象のHTML講座」1回目です。

スポンサーリンク


最近はいろんな方から質問をいただくようになりました。
なるべくわかりやすく説明したいのですが、説明しても通じない方もおられます。

「スイマセン。エキハ、ドコデスカ?」

「次の角を右です。」

「モシモシ。ツギトハ、ナニデスカ?ミギハ、ドコデスカ?
 ワタシハ、フランスデ、ソダチマシタ。ニホンゴ、ムズカシdeス。」

マドモアゼル、あなたに駅への行き方を説明したいのですが、
まず日本語からお教えしないとダメですか?

お気を悪くされないで欲しいのですが、最低限のHTMLを知ってもらわないと
説明できないんですよ。奥さん!

ブログはHTMLを知らなくても使えます。
しかし、カスタマイズするとなると最低限知っているべき事があります。

レーシングドライバーになりたいと言われても、
ブレーキもアクセルも知らないのでは、困っちゃう。

ということで「ハイパー超初心者対象のHTML講座」1回目です。

くり返しますが、お気を悪くしないでください。
この講座は、あなたにカスタマイズをして欲しいから開くのです。

コラム「HTMLとは」

ところでHTMLとは何でしょうか?

HTMLはHyperText Markup Languageの頭文字です。
つまり、日本語に直すとハイパーテキスト・マークアップ・ランゲージです。簡単ですね。

Wikipedia:HyperText Markup Language

お断り

この講座では、ウソを多くお教えします。しかし、それはわかりやすくするためのウソです。

たとえば、いちばん小さい数字はいくつでしょう?ゼロです。この答えは正解でしょうか?
マイナス値があるじゃないか!と言われるかもしれません。その通りです。

つまり、いちばん小さい数字がゼロと言うのはウソです。
しかし、一般的に言って間違いではありません。

この講座ではこのように、わかりやすくするためのウソをつきます。

HTMLは<ではじまり>で終わる

HTMLと言うものは、常にタグに囲まれています。
タグとは<ではじまり>で終わるものです。下のがHTMLです。

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

今回は、上のHTMLを説明します。

タグは常に半角で書く

日本語キーボードには、左上のほうに「半角/全角」というキーがあります。
<と<はそっくりですが、半角の<と全角の<では全然意味が違います。

たいていのコンピューターは空気を読めないバカです。融通がききません。
<と>そして、その中のアルファベットは必ず半角で打たないといけません。
うっかり全角で打ってしまっても、コンピュータは気を利かして判断してくれません。

なんでうまくいかないの?というときは、全角でタグを打っていないか確認しましょう。

タグは常にセットで存在する

タグには、開始タグ終了タグがあります。2つの名前は必ず同じです。
上の例でいうと、<html>の終了タグは</html>です。

タグのおしまいは / (スラッシュ)

開始タグと終了タグはどうやって区別するのでしょうか。
<の次にタグの名前が書いてあるものが開始タグ。     開始タグ:<html>
<の次に / (スラッシュ)があるのが終了タグです。 終了タグ:</html>

HTMLがグチャグチャに崩れた場合、まずこのタグのセットが正しいかを調べましょう。
つまり、開始タグと同じ名前の終了タグがあるか?開始タグの数と終了タグの数は同じか?
開始タグと間違えて終了タグを打ったり、終了タグと間違えて開始タグを打っていないか?
これを調べるだけで、解決することは多いです。

後からはじまったタグは、必ず先に終わる

タグの中には、別のタグを入れられます。

しかし、タグAの中ではじまったタグBは、必ずタグAの中で閉じないといけません。
タグBの入っているタグAが閉じたのに、タグBが閉じていないのは間違いです。

間違っていても動けば別に構いません。しかし誤作動します。だから正しく表示されません。

正しいHTML

<html>
<head>←開いて 閉じる→</head>
<body>←開いて 閉じる→</body>
</html>

間違ったHTML

<html>
<head>←開いて 閉じる→</head>
<body>←開いて
先に閉じている→</html>
閉じる順番が間違い→</body>

HTMLの最初のタグは <html>

HTMLは <html> から </html> までです。必ず <html> ではじまり、 </html> で終わります。

そして、<html> の次に来るのが <head> ~ </head>
その次に、<body> ~ </body> が必要です。

<head> ~ </head> には表示されない情報を入れる

<head> ~ </head> の中にあるのは、表示されないデータです。
表示されないけど必要なものが入っています。

たとえば、このページは日本語で書いてあります。とか、どういった内容の文章です。
などという事が書いてあります。

表示されるのは <body> ~ </body>

<head> ~ </head> に何か書いても表示されません。

表示されるようにブログを書くのは、 <body> ~ </body> のなかです。

今あなたが見ているこのページの文章は全部 <body> ~ </body> に書いてあります。

HTMLの基本構造

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

次回に続く

イラストはふゆき職業別イラスト(アイデア工房)のものを使わせていただきました。
あなたのお住まいの地域で最安のブロードバンド選び


i-mobile

関連コンテンツ

スポンサーリンク

「超初心者向けHTML講座その1」への32件のフィードバック

  1. おおっためになる記事だっ!
    私も、これ書こうと思ってなかなか書けなかったの。ありがとう♪

    ウソっていうのは、誤解を生みやすいかもね。
    正確ではないけど、一般的にはそう思っておいて
    間違いのない内容、ってかんじですかね。
    だって、信じてもOKな内容でしょ?

    方便?言い方、難しいねぇ。

  2. あぁ、これ今私が勉強すべきことかも・・・。
    半角英字の羅列を見ながら、何のこっちゃわからず、うなってます。

  3. >日本語に直すとハイパーテキスト・マークアップ・ランゲージです。簡単ですね。
    ここ、つっこんで欲しいとこ?

    >厳密にやるととても難しくなる
    ええ、ほんとに。まったく。

    心姫さん、困っているあなたの姿はTomの活力だそうですよ。
    ぜひ、悶々としてやってくださいませ。

  4. こんにちは
    遅まきながら、コメント欄に画像を入れるのを取り入れさせていただきました。
    ありがとうございます。

  5. こんにちは!
    訪問&コメントありがとうございます!

    お~なるほど・・
    自分もミスってたところですね。

    付け焼刃で
    あんなのをセットしてたけど
    やっぱり勉強は必要ってことですね。

    カチカチっとな!

  6. こんいちわ。
    私もここから 勉強します。
    半角
    タグは常にセットで存在する
    タグのおしまいは / (スラッシュ などは覚えましたが
    表示されるようにブログを書くのは、 <body> ~ </body> のなか。
    今日 覚えました(^_^;)  これからもちょくちょくきます。
    ありがとうございました、 ポチしていきますね 

  7. Tomさんこんばんは!

    幼い頃、プラモデルを購入しても、全く説明書を読まないで製作に取り掛かる癖は、現在も変わらないようです。

    カスタマイズについて、ここでシッカリ勉強させて頂きます!
    (≧ω≦*)σポチポチン

  8. 半角空白に全角空白が混じってないかも
    大事なんだよね。
    コピペのときは、特に注意。
    2回以降でやるのかな?

  9. ピンバック: みかんの部屋
  10. こんばんは、始めまして
    皆さんのブログを回っていたら、コメント欄に画像が出てるのでいいなと思って、
    調べていたら、Tomさんのブログに辿りつきました

    早速、画像が出るようにしました、分かりやすい説明ですぐに出来ました

    これからも、ブログを色々いじくって行こうと思うのでよろしくお願いします

  11. おはようございます。
    トムちゃん、かこちゃん、大変お騒がせしました。
    トムちゃんの書いてくれている、方法で直しました。
    どうもありがとうございました。

  12. はじめまして。
    hiroと申します。
    ガブリエルさんのところからやってきました。
    最近、ファンブログをはじめました。
    分からない事が多いのですが
    こちらのサイトがとても役立ちそうです。^^
    またお伺いします。
    リンク貼らせていただきました。

  13. こんにちは、
    超 初心者ですので、
    大変参考になります。
    こういう初歩的なところから、知りたかったのです。
    ありがとうございます。

  14. こんばんわ
    初めまして。かんぺいと言います。

    こちらのサイトを参考にさせて頂いて、少しだけカズタマイズしました。

    リンクの文字色を変えてみました^^;
    まだまだ初心者ですが、今後も参考にさせて頂きたいと思っています。

  15. こんにちわ
    何もわからないわたしですが、すごくわかりやすい説明に感動しました。これからも勉強させてください。
    がんばりたいんです。

  16. Tomさん

    はじめまして、
    mercyと申します。

    大変、ためになりました。
    今後も、参考にさせて頂きたいと思います。

    失礼します。

  17. こんばんわ。
    とても勉強になるサイトですね。
    自分はまだまだ詳しいことがわからないので、
    こちらのサイトを参考に勉強させていただければと思います。
    またお邪魔させていただきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です