Web制作入門講座 HTML編 Lesson2 タグて何? 2020.08.21 FRI

Web制作入門講座 HTML編  Lesson2 タグて何?
目次

今回はHTMLのタグについての説明です。

皆さんもこんなの見たことありませんか?

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

ないですね、まったく

もしやもう?イヤ吉です?

タグについて

タグとは<>で囲われた英数字のことです。
上のhtmlが入っていたら「htmlタグ」、bodyなら「bodyタグ」と呼び、それぞれに役割があります。
HTMLはこのタグで構成されているんですね!

タグの横のスラッシュが付いているのは何か?
これは「終了タグ」といいます。ここまでが「○○タグ」終了を意味するタグです。

早速下記の内容を前回作ったHTMLにコピーペーストしてください。

<html>
    <body>
        <h1>こんにちは</h1>
    </body>
</html>

出来上がったhtmlをまたブラウザで見てみましょう。
文字が大きくなっているはずです。

あれ!?

ちっ!できまへん!できまへんで!?

やっぱイヤ吉ですよね?

注意点として、タグは必ず「半角」にしてください。 HTMLは元々英語です。全角なんてものはありませんので、全角で打った場合はそのまま出てきてしまいます。 HTMLみたいに大文字にもできますが、小文字が見やすくて無難です。

こうなるはずです

要素とは

なにやら難しい言葉です。 タグには先ほどのh1(見出し要素)やp(段落)ul(リスト)など役割に適したタグが用意されています。 「<h1>こんにちは</h1>」とありますが、タグの始まりから終わりまで一つの「要素」となります。 上のサンプルでしたら<html>要素の中に<body>要素、その中に<h1>要素が入っているわけです。

結局のところ文章などと同じなんですね。 表題があって、段落があって箇条書きがあるみたいな感じです。 ワードとかではそれをクリックしたり選択して太文字にしたりと見た目で編集できますが HTMLの場合はこの「要素」の集まりでページを作っていきます。

ようそー。。。ようこそ?

不安要素しか感じませんよー

なんでスペースがあるの?

サンプルではbodyタグやh1の前にスペースがあります。 これは「インデント」と呼ばれ始まりのタグと終了をわかりやすくするもので、一般的に利用されています。 タブで区切るか半角スペースかは、制作者の自由ですが、スペース2個とか4個、タブが多いと思います。 インデント

ぼやき

ホームページ〇ルダーなどがありますが、本格的に勉強されたいのであればお勧めしません。
メモ帳さえあれば勉強できます。
私も学生の時は手打ちでしごかれました。
まずは身を持って体感するのが重要です!

どうですか?興味が沸いてくるでしょう?

そう!私ね!ほんまはお花屋さんしたいんですわーお花キレイー

始めさせたからには責任持ってくださいねー