- ホームページのタグ（命令文）について
- HTMLファイルの基本構造
そもそも【タグ】ってなに？
今回はHTMLの命令文、
【タグ】について解説するッピ。
思ったんだけど、
【タグ】とか【コード】とかよく分かんなくない？
いったい何が違うんだよコレ？
考えるなッピ！！ 感じろッピ！！
いきなり精神論！？
まあ、ちゃんと説明するとッピネ・・・
プログラミング用語で、コンピュータにこう動いて欲しいと命令文をたくさん書くことを【コードを書く】【コーディングする】というッピ。
じゃあ【タグ】は？
コードを書くことの中でも、
ホームページを作るHTMLファイルに命令文を書くことを【タグ付けする】というッピ。
そして、HTMLの命令文のことを【タグ】と呼んでいるッピね～！
えーなにそれ？！ ややこしすぎだろ～！？
- プログラミング用語で命令文を書くことを【コードを書く】
- HTMLファイルの命令文を書くことを【タグ付け】と呼びます。
- またHTMLファイルをタグ付けすることも、命令文を書くことと同じですから、ホームページを作ることも【コードを書く】・【コーディング】と呼びます。
- とてもわかりにくいですが、ひとまずすべて『コーディング』すると覚えておけば大丈夫です。
- メモ帳
- パソコン
- ネットを見るブラウザ
元になるコード
<html>
<head></head>
<body>
Hello World
</body>
</html>【メモ帳】に上のサンプルコードをコピーしたら準備はオッケー！ッピ！
さっそく学習に入るッピよ～
前回のデータから学習しよう！
<html>
<head></head>
<body>
Hello World
</body>
</html>この<html>とか、</body>って何なの？？
よくぞ聞いてくれたッピ！
この <○○> というものこそ、
HTMLの命令文・・・【タグ】ッピ！
これが【タグ】か～
HTML文は、< >と</ > をセットで使うッピ。
最初に<html>というタグからはじまり、最後に</html>で終わっているッピヨ～。
ホントだ！
<html>というのは、
「これからHTMLの命令文を書くので、ちゃんと表示してね～」っていう宣言みたいなもんッピヨ。
じゃあ、この<head>とか<body>の意味は？
アタマ？ カラダ？？
<head></head>は
ホームページの見えない【土台】ッピね～。
ここにはだいたい「このホームページはこんなことを書いています～」みたいな説明を書くッピ。今回はムシするッピよ！
<body></body>のあいだが一番大事なところッピ。
ホームページの見える部分を書く場所ッピヨ～！
あ～。この『Hello World』ってヤツがそれか～
- タグは <>と</> をセットで使用する。
- <head></head>は、ホームページの見えない土台。
- <body></body>は、ホームページの見える部分。中身はこちらに書きましょう。
実際に【タグ】を使ってみよう
さっそくタグ付けしてみるッピ！
前回の学習ファイル『1st.html』を開いて、
『Hello World』を太字にするッピ！
HTMLファイルがメモ帳で開けないときは？
HTMLファイルは、右クリックから【プログラムから開く】→【メモ帳】で開くと、古いデータを書き換えることができます。
文字を【太字】にしよう！
<html>
<head></head>
<body>
Hello World
</body>
</html>上のHello worldを、
<b> Hello World </b> と囲ってみるッピ！
<b>Hello World</b><html>
<head></head>
<body>
<b>Hello World</b>
</body>
</html>
できた～！
ファイル→上書き保存して、
『1st.html』をダブルクリック。 ホームページを開くッピ！
【タグ付け】できたか確認しよう
お！ 文字の太さが変わってる！！
<b></b>タグは、
文字を太字にする【タグ】ある～！
他にも色んな【タグ】があるッピ！
この先の学習でたくさん紹介するッピ。楽しみにしてるッピよ～！
今回の【タグ】の復習をしてみましょう。
<html>
<!-- HTMLのデータですとコンピュータに教えるもの -->
<head></head>
<!-- ↑見えない部分の設定 -->
<!-- ↓見える部分をこちらに書く -->
<body>
Hello World
<b>Hello World</b> <!-- 【b】は文字を太くするもの -->
</body>
<!-- ↑見える部分の終了がここで終わる -->
</html>
<!--HTMLの終了 -->- このように、このブログをはじめとする、インターネットのページには、たくさんの【タグ】が使われています。
- 試しに、何かWEBページのいち部分をドラッグ（範囲選択）して、右クリック→検証をしてみましょう。たくさんのタグで作られているのが見て分かると思います。
- サンプルで書いた『Hello World』以外にも、色んな文字を書き換えて遊んでみましょう。
確認テスト
上手くできたッピか？
まだまだ勉強したい人は下の関連記事をクリックするっピよ～！
