【Web制作の基礎中の基礎】これから学ぶ人必見！知識ゼロでもわかるHTMLの基本構造
こんにちは！ヒロです。
今回は
【Web制作の基礎中の基礎】
これから学ぶ人必見！
知識ゼロでもわかるHTMLの基本構造
について、お伝えします。
こんなことで悩んでいませんか？
初心者でWebサイトを作ってみたいが、
どのように作られているか、
わからない。
Webサイトを作るために、
HTMLを勉強しているけれど、
何が書いてあるかがわからない。
HTMLの文法や書き方がわからない。
このような悩みを持っている方は、
ぜひ最後まで読んでみてください！
あなたの悩みが解消できます。
こちらを最後まで読むと、
こんな良いことがあります。
HTMLの基本的なプログラムの構成が
理解できるようになり、
初心者でもWebサイトが作れるようになる。
知識ゼロの未経験者の方でも、
Webサイトがどのように作られているか、
理解できるようになる。
プログラミングスキルが身に付いて、
就活の面接で自分のエピソードとして、
自信持って話せるようになる。
初心者の方でも、
このようになれます！
対して、
ここで読むことをあきらめてしまうと、
あなたの悩みは解消できないでしょう。
プログラムを見ても、
何が書いてあるのか全く理解できず、
Webサイトが作れるようにならない。
プログラミングに苦手意識を持ってしまい、
やる気がどんどんなくなる。
プログラミング学習の成果が出ず、
途中で挫折してしまう。
あなたはどのようになりたいですか？
初心者でも
プログラミングスキルを身に付けて、
就職活動に活かしたい！
そんな方は、このまま読み進めてみると、
Webサイトの基本的な仕組みが
理解できるようになるでしょう。
Webサイトは、
複数のタグの組み合わせでできている！
Webサイトは、
"タグ"というものが組み合わさって
できています。
皆さんの声が聞こえてきます。
タグって、なんですか？
サンプルコードを見ながら
順番にお伝えしていきますね！
- "タグ"とは
- 開始タグ
- 終了タグ
- タグ名
- コンテンツ
- サンプルをブラウザで表示すると...
サンプル
1. "タグ"とは
タグとは、
<>の記号で囲まれた部分のことです。
(サンプルの赤文字部分)
タグは、基本的に
開始タグと終了タグがセットです。
これらのタグによって、
Webサイトのタイトル、見出し、文章などを
書くことができるのです！
2. 開始タグ
タグは、
必ず開始タグから始まります。
<タグ名>のように、
開始タブを書きます。
3. 終了タグ
</タグ名>となっている部分が、
全て終了タグとなります。
タグは、
開始タグと終了タグがセット
とお伝えしました。
<タグ名></タグ名>
のように、セットで書くのが基本です。
4. タグ名
<>の中に書かれている文字のことを
タグ名といいます。
サンプルの赤文字で書かれている部分です。
目的・役割に合わせて、
いくつものタグを組み合わせ、
Webサイトが作られているのです。
5. コンテンツ
開始タグと終了タグに挟まれた部分を
コンテンツといいます。
<タグ名>XXX</タグ名>
XXXの部分です。
Webサイトの画面に表示される部分が
コンテンツなのです。
6. サンプルをブラウザで表示すると...
先程説明で使用したサンプルを
ブラウザで表示すると
こんな感じになります。
ブラウザ表示
たった14行程のHTMLが
このように表示されるようになるのです！
まずは、この程度のWebサイトを
目標にしてみても
いいかもしれませんね！
どんな種類のタグがあるのか
少しずつ知っていこう！
いかがだったでしょうか？
Webサイトが
どのように作られているのか、
何となくイメージできたでしょうか？
Webサイトは、
たくさんの種類のタグで
構成されているとお伝えしました。
紹介したもの以外にも
たくさんのタグがありますので、
ぜひ、1日3つずつで良いので、
どんなタグがあるのか調べてみてください！
またね！
