HTML入門 はじめました

ブログが作りたい!HTML入門 > HTML入門 はじめました

HTML入門 はじめました

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の端と端

HTML文なんだから、<html>~</html>で囲めばいいのさ。それだけのことさ。

▲ページの先頭に戻る

<head>タグとは?

<head>タグには、そのHTML文書に関する情報を記述します。<head>タグは、次のように記述します。

<head>~</head>

例えば、次のような情報を、<head>~</head>内に記載します。

  • タイトル(後述の<title>タグ使用)
  • そのページの説明
  • 外部ファイルの場所
  • 著作者名

などなど。

これらの情報を、<head>~</head>で囲むわけです。とりあえず、ここでは記憶しやすいように、<title>タグだけ記述してあります。

<head>と</head>

たいてい本には、本体とは紙質が違うカバーが付いています。装丁(そうてい)の主たる部分です。これが、<head>タグらしい部分と言えます。

装丁(そうてい)

本のタイトルや、本の要旨、著作者名などが掲載されています。<head>タグも同様の役割を担(にな)っています。

<head>~</head>内には、そのHTMLファイルに関する情報をつめこんでいるのさ。

▲ページの先頭に戻る

<title>タグとは?

<title>タグは、その名の通り、タイトルを記述するためのタグです。<title>タグは、次のように記述します。

<title>~</title>

<head>タグでも記述しましたが、<head>~</head>内に、<title>タグを記述します。<title>~</title>の間にタイトルを記述します。

<title>と</title>

例えば、当ブログのトップページであれば、次のように「ブログが作りたい!」と記述するわけです。

<title>ブログが作りたい!</title>

本にも、当然タイトルが記載されています。タイトルは、本の内容を端的に指し示すものなので、とても大切です。(ブログも同様です)

本のタイトル

タイトルに惹かれて、タイトルだけで本を購入することもあるのではないかしら。「買ってガッカリ」なんてことは、往々にしてありますけれどもね。

<title>~</title>内には、タイトルを書けば良いのさ。そのまんまです。

▲ページの先頭に戻る

<body>タグとは?

<body>タグは、文書内容を記述している旨を伝えるためのタグです。<body>タグは、次のように記述します。

<body>~</body>

<body>~</body>の間には、実際の文書内容を書きます。<body>~</body>で囲まれている中身が、ブラウザに内容として表示されます。

<body>と</body>

例えば、「桜の季節は、もうすぐです。」と表示させたければ、次のように記述します。

<body>

桜の季節は、もうすぐです。

</body>

これだけだと、分かり難いですね。全体的にタイトルも入れて書けば、次のようになります。

本で言えば、本の内容が書かれている本体と言えます。

文書内容

「顔はやめな!ボディー(body)にしな!」という感じですね。

<body>~</body>という大きな箱に、文章や画像を好きなように入れていくイメージを持つと分かり良いかもしれません。

あなたが書きたい内容は、<body>~</body>内に書けば良いのさ。

▲ページの先頭に戻る

復習しておく

1:改めて眺めてみる

それでは、冒頭で見たHTMLコードを、改めて、眺めてみましょう。

ただの英字の羅列にしか見えなかったHTMLタグが、不思議とひとつひとつに意味を感じられるようになったのではないかしら。

暗記する必要なんかはありません。役割を把握して、必要なときに「コピー & 貼り付け」ができれば、OKです。

▲ページの先頭に戻る

2:ペアになっているのさ

それぞれ、ペアになっていることに、気が付いたのではないかしらん。

例えば、<html>で開始したら、</html>で閉じるという仕組みです。

何だか、同じような文字列に見えるかもしれませんが、閉じるときは、「/(斜め線)」が入っています。お忘れなく。

htmlのタグを開いて閉じる

あまり、この辺で、深く掘り下げないでくださいね。

  • なぜに、閉じるときは、斜め線がいるのか?
  • 誰が決めたのか?
  • 斜め線とは何か?人生とは何か?
  • どのくらい傾いていると、「斜め」と言えるのか?

などなど。

私がそうなのだけれど、勉強がヘタな人って、よく脱線するのよね。入門などの段階では、どれだけシンプルに覚えるかが大切です。

htmlタグは、たいていペアです。始まりと、終わりがあります。そうではないタグもありますが、ここでは、「ペアなのよ、ペアなのよ」と覚えておいてください。

▲ページの先頭に戻る

3:記号 less than と more than

htmlのタグが、「< (レス ザン)」と「> (モア ザン)」で囲まれていることに、異議申し立てのある人はいらっしゃるかしら。

「えー何で、<html>なん?htmlって書いたらえぇやーん、面倒やわー」とかさ。

ごめんなさい。でも、それは却下します。

例えば、「title」という名のタイトルを考えてみてください。次のように、どこがタグやらタイトルやら、わけが分かりません。

titletitle/title

「< (レス ザン)」と「> (モア ザン)」は、必要です。

<title>title</title>

忘れずに、付けましょう。

▲ページの先頭に戻る

次回予告

次回は、今回作成したHTML文(HTMLコード)をブラウザで表示させます。

▲ページの先頭に戻る

関連記事

HTMLに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/03/12 更新日:2008/03/12

« 「カスタマイズ前の準備」|「HTML文を表示させてみよう」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

こんにちは!
すっごくわかりやすかったです!
htmlをカバーと本文で例えるなんてすごい。
これをhtmlを触り始めの頃に読みたかった・・・

「なぜ!」って脱線すること自分も多いです^^;
結構遠回りになったりしますよね。

ところで、「顔はやめな!ボディー(body)にしな!」
またコーヒー吹いたよ・・・
女番長ですかw
KumaCrowさんの文章は、ホケ~と読んでると時々こういうのがあるので
油断できない・・・
アタイも気を引き締めて頑張ります。

シンプル

ひろこさん、こんにちは。
いつもコメントありがとうございます。

ひろこさんに承認印いただけたので、
ホッとしています。(´▽`)♪

そうなんです。
私の場合は、脱線して、答えがすぐに見つからなくて、
飽きて、モチベーション下がって、遊んでしまうのです。
遠回りしているうちに、他の場所へ行ってしまう。

勉強のできる人というのは、
きっと、どちらかなのだと思います。
 ・はじめのうちは、シンプルに覚えていく。
 ・はじめから脱線しても、どこまでも探究する。

ちょっと、シンプルに段階的にできないかな、と思っています。

そして、おもしろい文章が書けたらいいなぁとも。
どうせなら、楽しく覚えた方が良いし、
記憶につなぎやすいかと考えています。

No title

やはり私はゴーマンでした。
以前メモ帳から簡単なHPを
作ったことはありますが
やはり基礎が大切だと思います。
こちらからお勉強させていただきます。

ゴーゴー

sachiさん、こんばんは。
コメントありがとうございます。

メモ帳でホームページを作成しただなんて、
ツワモノですね!すごい!(・∀・)

昨今、メモ帳などのテキストエディタで、
ホームページを作成する人は、少ないですから。

なかなか手強かったんじゃないでしょうか?

どの辺がゴーマンだったのか分かりかねますが・・・。

もうひとつ業(ごう)を増やせば、
ゴーゴーマン!(Go Go Man!)ですね。

羽(う)がはえたら、
ゴーゴーウーマン!(Go Go Woman!)ですね。

ゴーゴーまで、あと少しです。(o゚ω゚o)GoGo

シンプルって難しいですが・・

KumaCrowさん
こんにちは~、はじめまして、
HTMLだけで原始的なHP作ってたのですが、
CSSの事知りたくて、Google検索からココへたどり着きました。
ラッキー!!
いやぁ~、感動です!!素晴らしい!!
楽しく、シンプルに解説して頂けて、とても解りやすいです。
どんどん脳味噌の中に入っていく感じがします。感謝!

でもシンプルにわかりやすく書くのって難しいですよね・・・
痛感してます。尊敬!

最初CSSの入門から読み始めたのですが、
これはHTMLから教えて頂いた方が、
もっと理解が深まると・・
これから少しずつ、最初から勉強させて頂きま~す。

シンプル

extreme1webfc2com さん、こんにちは!(・∀・)/へろお
コメントありがとうございます。


分かりやすいとのこと、良かったです!(´▽`)♪

いやー、嬉しいです。
シンプルに書く難しさを分かっていただけるなんて!!

聡明な方でおられる。

ただ・・・端折(はしょ)りすぎているところもあるので、
分かり難いかもしれません。

ご不明な点があれば、お気軽にコメントしてくださいませ。


では、では。ヾ(*´∀`*)ノ

お礼

html/cssを勉強中にこのページに辿り着きました。
驚くほど分かりやすく感動しております。
初心者のふと沸いたような疑問の答えが添えられている・・・
きっと著者の方が聡明博学なのでしょうね♪
これからも応援しています!

はじめまして♪

nobuさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

ほめていただき、恐縮です。
ありがとうございます。(´Д`;)てへっ

分かり良かったようで、
何よりです。ヾ(*´∀`*)ノわーい

ざっくりと、楽しみながら覚えていただけたらと
思っております。

分かり難いところがあれば、
お気軽にコメントしてくださいませ。(´▽`)♪

感謝!!

分かりやすくて助かりました!

今後も活用していきます★  

本当にありがとうございました!

HTML

たむらんちょさん、こんばんは!( ・∀・)ノきゃっ
コメントありがとうございます。

HTML、分かるようになっちゃいましたか~。
それは良かったでぺやんぐ。(´▽`)♪

CSSなども、ございますけれどもー。
CSSも、OKかしらん。

また、良かったら遊びに来てねーん。ヾ(*´∀`*)ノ

No title

私は昨日ブログをはじめたものです……
といっても4度目の挑戦です!w
とても分かりやすいので嬉しいです。

途中で挫折しないよう、ゆっくり頑張っていこうと思います^^

ブログ

\ゆー/さん、こんばんは!( ・∀・)ノぐいぶに
コメントありがとうございます。

分かりやすいと言っていただけて、
あたくしもうれしゅうございます。(´▽`)♪バラはバラは~

ゆっくり無理せず、がんばっていきましょう。((*´∀`))

ちなみに、ブログを普通にやる(記事を書くとか)だけなら、
HTMLなど覚えなくてもよろしくってよ。

一から始めるのには嬉しい(^▽^)/

基礎からやってくれているので、私も安心して読むことができました。
一度は挫折したものの、このブログのおかげで、自分の思い描いていたブログになりました(* ̄∇ ̄*)
忘れてしまったときにもすごく助かります。
感謝感謝です(*^-^)

ブログのカスタマイズ

たなとすさん、こんにちは!
コメントありがとうございます。

お役に立ちましたようで、良かったです。
分かり難いところはなかったかしら?

今後もどうぞよろしくお願いいたします。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/238-1c160c92

HTMLの入門編

友好ブログの「ブログが作りたい!」の最近の記事「HTML入門 はじめました」は...
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて