まずはhtmlの基本から①〜htmlとタグ〜
★はじめに
HP作り・運営に必須な知識から書いていきます。
★まずhtmlとは。
【html】(えいちてぃーえむえる)
Hyper Text Markup Languageの略。
ホームページなど、ウェブページを作る際に必要な言語のこと。
htmlを使いこなすことで
・ウェブページに表示する文字の大きさ、色、フォントを変えたり、
・ウェブページに画像を表示したり、
・ウェブページにリンクを貼り付けてそれをクリックすることで他のページに飛べるようにしたり
といろんなことができます。
ざーっくり言えばhtmlはウェブページを作るためのプログラミング言語みたいな感じです。
「このウェブページにはここにこの文章をのせて、ここは赤字で、ここは大きいサイズの字で、ここにこの写真をこれくらいのサイズで表示してね」
みたいな感じであれこれ指示するわけです。
htmlには書き方のルールがあって、このルールを守らないとちゃんと思った通りに表示してくれません。
英語を使う際にめっちゃくちゃな文法で話してたら言いたいことが正しく通じないのと同じですね。
ルール①ータグ
htmlではタグと呼ばれる文字を使います。
(タグの例)
<html> </html>
<title> </title>
<head> </head>
<body> </body>
・すべてのタグは < と > で囲まれています。
・<body>と</body>タグは２つセットで使います。
・<body>ブログ始めました！</body>
・↑このように文章の前後をタグで挟んで使います。
★「 」の例
少し分かりやすい例で説明します。
(例がなくても理解できそうな人は☆まで読み飛ばしてOK)
小説の中で、誰かが言ったことやセリフを書くときに「」という記号を使いますよね。
この２つの記号を意味を説明するとしたらこんな感じでしょう。
「 →この記号より後ろに書いてあるのはセリフだよ
」 →この記号より前に書いてあるのはセリフだよ
始括弧「 と 終括弧 」文章を挟むことでその間にある文章がセリフである*1ことを示すことができるわけですね。
★『 』の例 〜違う括弧なら違う意味になる〜
『』の記号の場合であれば
『 →この記号より後ろに書いてあるのは他の文章からの引用だよ
』 →この記号より前に書いてあるのは他の文章からの引用だよ
といった意味になるように違う括弧を使えば括弧に挟まれた文章が違う意味の文章であると示すことができるわけですね。
(☆ここまで読み飛ばしてもOK)
★<html>と</html>の違いもこれと全く同じです。
<html> →この記号より後ろに書いてあるのはhtml文書だよ
</html> →この記号より前に書いてあるのはhtml文書だよ
<html>と</html>で文章を挟むことでその間にある文章がhtml文書であることを示すことができるわけですね。
★<body> </body>〜タグが違えば違う意味に〜
<body> →この記号より後ろに書いてあるのはこのウェブページの本文だよ
</body> →この記号より前に書いてあるのはこのウェブページの本文だよ
といったように、< >の中に記載する文字を変えれば意味も変わります。
★いろいろなタグがある
さて今回はhtmlタグの例として
<html> </html>
<title> </title>
<head> </head>
<body> </body>
の４つを挙げましたが実際にはもっともーっとたくさんいろんな種類のタグがあります。
タグの種類が多い分、それだけいろんなことができるというわけです。
下のリンクのサイトに行くと「いろんなタグがあるんだなぁ」ということが分かってもらえると思います。
こちらのリンクは「HTMLクイックリファレンス」というサイト内の「HTMLタグリファレンス(目的別)」というページなのですが
htmlの早見表が分かりやすく掲載されており、
htmlタグの意味や使い方が分からなくなった時にとーっても便利なのでよくお世話になっております。
htmlタグの教科書・辞書のように使えるサイトですね。
★おわりに
タグについてだけでこんなに長々と書いてしまったので第１回はこんなところで終わりにしたいと思います。
最後まで読んでいただきありがとうございました。
※このブログでは分かりやすさ重視のため、また自分の勉強不足のため、厳密には正しくない表現などもあるかと思います。
「もっとこういう表現の方が分かりやすいんじゃないか」
「いくらなんでもこれは誤りだろ」
などありましたらコメントしていただけると非常に助かります。
*1:セリフ以外のこともありますが今回はセリフってことにしておきましょう
