HTML入門講座|ホームページ作りに必要な【タグ】を学ぼう

HTML
この記事で学べること
  • ホームページのタグ(命令文)について
  • 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』以外にも、色んな文字を書き換えて遊んでみましょう。

確認テスト

うさタブ
うさタブ

上手くできたッピか?
まだまだ勉強したい人は下の関連記事をクリックするっピよ~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング入門の最初のページ
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました