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

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

タグは常に半角で書く

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

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

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

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

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

タグのおしまいは / （スラッシュ）

開始タグと終了タグはどうやって区別するのでしょうか。
<の次にタグの名前が書いてあるものが開始タグ。     開始タグ：<html>

<の次に / （スラッシュ）があるのが終了タグです。  終了タグ：</html>

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

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

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

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

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

正しい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講座その１」への32件のフィードバック

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

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

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

    返信

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

    返信

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

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

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

    返信

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

    返信

  9. こんにちは！
    訪問＆コメントありがとうございます！

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

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

    カチカチっとな！

    返信

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

    返信

  13. こんばんは

    いちから勉強しなおします。

    またうかがわせて頂きますのでよろしくお願いします。

    返信

  14. Tomさんこんばんは！

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

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

    返信

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

    返信
  18. ピンバック: みかんの部屋

  19. こんばんは、始めまして
    皆さんのブログを回っていたら、コメント欄に画像が出てるのでいいなと思って、
    調べていたら、Tomさんのブログに辿りつきました

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

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

    返信

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

    返信

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

    返信

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

    返信

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

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

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

    返信

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

    返信

  31. Tomさん

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

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

    失礼します。

    返信

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

    返信

コメントを残す

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.