![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
HTMLファイルができた後は何をするの??
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
作成したファイルをWebサイトに近づけていくにはHTMLの骨組みとそこに書く情報が必要になるんだ
今回はそれを見ていくよー
1.HTMLとは
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
HTMLに基本構造の前にHTMLとは一体何かということについて軽く押さえておきます
HTML
“Hyper Text Markup Language”の略
HTMLはWebページを構成するための土台のようなものでコンテンツをタグ付けしていき内容を書いていきます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
タグについても復習しておきます
タグ(< >)は基本的には文字列(コンテンツという)などを囲み、特定の意味付けをします。
![タグの作り方](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_tag.png)
タグには多くの種類がありh1タグで囲めば見出し、pタグなら段落などがあります。
またimgタグのように種類によっては閉じタグ(</>)が必要ないものもあります。
このようにタグで囲って意味付けすることをマークアップするといいます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ですのでHTMLを厳密にはプログラミング言語とは言わずマークアップ言語と呼ばれます
2.HTMLの構造
先に結論を書くとHTMLは以下のような構造になります。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
まったくわからない…
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
それぞれを分解して説明すると
![HTMLの構造](https://kbyt-programming.com/wp-content/uploads/2021/05/construction_html.jpg)
htmlタグ内の中にheadタグとbodyタグが入っているという形になります。
headタグ内にはWebサイトの「タイトル」や「サイトの情報」などを記入する他、装飾のためファイルやフォントを読み込むための外部ファイルもここに記入します。
またheadタグ内の文章はブラウザ上では非表示になります。
一方、bodyタグは普段見ているサイトの見た目になります。こちらにHTMLを記入することでサイトを作っていくことになります。
まとめると以下の通りです
![headタグとbodyタグのまとめ](https://kbyt-programming.com/wp-content/uploads/2021/05/head-tagbody-tag.jpg)
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
まだよくわからないよ💦
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
じゃあ一緒に書きながら順番に見ていこう
- STEP1DOCTYPE宣言をする
<!DOCTYPE html>
DOCTYPE宣言と呼ばれ「これから書くのはHTML文章です」という宣言を決まり文句としてまずHTML文章の先頭に書きます。
ちなみに大文字で書くのか小文字で書くのかという問題ですがどちらでも良いですが、一般的には大文字で書く事が多いので大文字で書きましょう。 - STEP2htmlタグを書き、タグ内にlang属性を書く
<!DOCTYPE html> <html lang="ja"> </html>
lang属性は値に日本語なら”ja”、英語なら”en”といった値が入ります。とりあえず”ja”で良いと思います。
属性については今は気にせず「こういうものだ」と思っておいてください - STEP3headタグを書く
<!DOCTYPE html> <html lang="ja"> <head> </head> </html>
htmlタグ内にheadタグを記入します。
復習ですがこのheadタグ内にはWebサイトに関する情報を記入するんでしたね。 - STEP4bodyタグを書く
<!DOCTYPE html> <html lang="ja"> <head> </head> <body> </body> </html>
headタグの下にbodyタグを書きます。
bodyタグ内にはWebサイトの中身を書いていきます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
これで基本的な枠組みはできました。
次はheadタグ内に書くタグを説明していきます
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
タグ内に書くタグっていうのはなんともややこしいね
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
確かに慣れないうちはややこしく感じるかもしれないね
3.headタグ内に書くタグ
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
headタグ内にはWebサイトの情報を書くって言ってたけどどんなものがあるの?
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
基本的には下の図の囲まれたものかな
これら以外にもまだまだあるけど最低限これだけあればおkだよ
![headタグ内に書くもの](https://kbyt-programming.com/wp-content/uploads/2021/05/tag_header.jpg)
3-1.metaタグ
metaタグというのはWebサイトの情報を示すタグです。
そのmetaタグ内に書く属性には以下のものがあります。
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
待って!
さっきも出てきた属性って何?
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
属性というのはタグにつける付加情報の事で、属性 = “値”と書くことで情報を与える事ができるんだ
charset属性
charset属性は文字コードというものを指定する属性で基本的に値は”utf-8″にします。
<meta charset="utf-8">
ちなみに書かないと文字化けする可能性がありますので忘れないようにしましょう。
name属性とcontent属性
name属性とcontent属性はセットで使用します。
<meta name="description" content="サイトの説明を書く">
name属性の値が”description”なら、content属性の値にはサイトの説明を入れます。
基本的には<meta name=”description” content=”サイトの説明 “>という解釈でおkですが、参考までに以下の種類があります。
name属性 | content属性 | 使用例 |
---|---|---|
description | サイトの説明を書く | プログラミングが学べるサイトです |
keywords | キーワードをカンマで区切って指定 | HTML,CSS,プログラミング |
author | サイトの作者を書く | こばゆた |
3-2.titleタグ
<title>sample-site</title>
ページタイトルを書いてtitleタグで挟むことで、titleタグで書いたタイトルがタブ(サイトの上の部分)に反映されます
![titleタグ](https://kbyt-programming.com/wp-content/uploads/2020/09/d8063b843732de8bd999eaa071098a23-1024x85.png)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
こちらは簡単ですね!
では今までのまとめたものがコチラです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample-site</title>
<meta name="description" content="説明を書く">
</head>
<body>
</body>
</html>
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
今のところは上の形になっていれば完成です!
メモ帳やワードに貼り付けて、いつでもコピペできる様にしておくと楽です
4.まとめ
HTMLはコンテンツをタグ(<>)で囲うことで意味付けをして書いていく
![タグの作り方](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_tag.png)
HTMLの書き方
- DOCTYPE宣言(<!DOCTYPE html>)をする
- htmlタグを書く(lang=”ja”も忘れずに)
- htmlタグ内にheadタグとbodyタグを書く
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
</body>
</html>
- headタグ内にはWebサイトの情報を書き、bodyタグ内にはWebサイトの中身を書く
- headタグ内に書いた内容はブラウザ上では非表示
- headタグ内には以下の情報を記入する
<meta charset="utf-8"> <!-- 文字コードの設定 -->
<meta name="description" content="説明を書く"> <!-- 文章の説明 -->
<title>sample-site</title> <!-- タイトルを設定-->
こうなっていれば完成
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>sample-site</title>
<meta name="description" content="説明を書く">
</head>
<body>
</body>
</html>
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
最低限ですがHTMLの基本構造はこれだけで大丈夫!
とりあえずはコピペしておいて、新しいタグを使いたい時はその都度調べて使えば良いからそんなに心配はいらないと思うよ
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
コピペして良いなら確かに楽だね
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
あとはこれで思う存分HTMLを書いていくだけです!
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
頑張って書いていこう!
コメント