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』以外にも、色んな文字を書き換えて遊んでみましょう。

確認テスト

うさタブ
うさタブ

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

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

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

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

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

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

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

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

ユウキ
ユウキ

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

アイカ
アイカ

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

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