第2回　HTMLコードに肉付けをしてみよう

#はじめに
HTML言語を全く触ったことがない超初心者が、学校で学んだことを忘れないようにすることを目的に作成しています。
HTMLとはどういったものなのか、結局何ができるのかを一緒に学んで行きましょう。
##注意事項
この投稿は第1回目の続きになります。そのため、前回紹介した内容は説明せずに進めていきます。
ド素人ゆえ間違った記載(独自の解釈をしている)場合があるかもしれませんがご容赦ください。
説明に関してはできるだけ図を用いてわかりやすく、作成していこうと思います。
使用するのはGoogle Chrome、Visual Studio Codeの2点になります。

https://qiita.com/hamuo3kameru/items/d664fb2cf1a7824f795b

#目次
1.タイトルの変更
2.宣言とは
3.言語の指定
4.文字コードの指定
5.段落を付けるには
6.文字を太くしてみよう
7.見出しの大きさを変えてみよう
8.文字の色を変えてみよう

#1.タイトルの変更
###タイトルとはどこの部分を示すのか
画像の赤線部分のことを言います。
![スクリーンショット (91)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/ec9af54f-cc72-9ad6-6ce7-51ee95b3d507.jpeg)
こちらを変えていくには前回書いたコードのheadタグの中にtitleタグを入れてあげましょう。

```html:
<html>
    <head>
        <title>hamuo3{ここは各自タイトルにしたい言葉を入れてください}</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
```
今回はhamuo3と入れたのでこのように変わっていればOKです。
![スクリーンショット (93).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/be77b562-5f5a-6d8f-67a7-ecbde6ba1fa7.png)

#2.宣言とは
現在のバージョンで一番新しいHTMLの仕様でコードを書きます。というお約束のようなものだと思ってください。書き方はhtmlタグの上に<!DOCTYPE html>と入れるだけです。

```html:
<!DOCTYPE html>
<html>
    <head>
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>
```

#3.言語の指定
今回は日本語の指定をします。
言語の指定を行うときはhtmlの開始タグの中に書いていきます。
htmlの開始タグの後ろに半角でスペースを入れた後にlang="ja"を入れます。
**langはlanguegeのことでjaはjapaneseのこと**を表しています。
このとき指定する言語jaはダブルコーテーションで挟んでください。

```html:
<head lang="ja">
```

#4.文字コードの指定
文字コードとは専門的な話しになり、長くなるのでここでは**文字化けを防ぐためのもの**と思ってください。
詳しく知りたい方は調べてみてください。
今回使う文字コードはutf-8を使っていきます。
書き方はheadタグ内にmetaタグを使って書きます。
このmetaタグとは今回のhtmlは文字コードutf-8を使って書居ていきますよ。と宣言するものになります。
コードはこのように言語の指定同様charsetの中からutf-8を使うためダブルコーテーションで囲います。

```html:
    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>
```
ここまでできましたら、次は様々な文字を追加していきましょう。
#5.段落をつけるには
ｐタグを使います。このｐはparagraphそのまま段落という意味です。
書きかたはbodyタグの中に書きます。
参照コード

```html:
<!DOCTYPE html>
<html>
    <head lang="ja">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <p>woooooooooo</p>
    </body>
</html>
```
実行結果
![スクリーンショット (98).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/bbb7c79b-868d-f123-07ba-96e6879488f4.png)
一段下がっていることが確認できますね。

#6.文字を太くしてみよう
文字を太くしたいときはｂタグ(bold)もしくはstrongタグを使います。どちらも太字にする機能がありますが、あえて使い分けるとすれば強調したいときはstrong、字を太くしたいときはｂを使えば良いと思います。
書き方は太くしたい単語を上記のタグで挟むだけです。

```html:
<p>woo<b>000</b>ooooo<strong>ooo</strong>ooo</p>
```

実行結果
![スクリーンショット (100).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/25ffe2e8-23f5-7009-cc67-90bb39d4f8f0.png)

#7.見出しの大きさを変えてみよう
##見出しとは
見出しとは第1回目の最後に私が説明を飛ばした、hタグのことです。この見出しはh1~h6まで付けることができて、全てbodyタグの中に書きます。
参照コード

```html:
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3>Hello World</h3>
        <h4>Hello World</h3>
        <h5>Hello World</h3>
        <h6>Hello World</h3>
    </body>
</html>
```

実行結果
![スクリーンショット (96).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/8b43d5ea-f896-d8d7-30ef-ae15ed6b4eb1.png)
このようになったでしょうか。

#8.文字の色を変えてみよう
文字の色を変えるのにはfontタグを使います。
使い方は<font color="変えたい色">色を変えたい部分</font>とこのように挟むだけです。
今回は3つ目の見出しを赤色に変えてみます。
参照コード

```html:
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>hamuo3</title>
    </head>
    <body>
        <h1>Hello World</h1>
        <h2>Hello World</h2>
        <h3><font color="red">Hello World</font></h3>
        <h4>Hello World</h3>
        <h5>Hello World</h3>
        <h6>Hello World</h3>
    </body>
</html>
```

実行結果

![スクリーンショット (102).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2416548/45bcc622-6368-4ce1-d78e-831b361ede1b.png)

また、**htmlカラーチャート**と検索していただき、そこにある色の#から始まる6桁の英数字を今回のredの部分に代入していただくと、文字をその色に変更することができます。
いかがだったでしょうか、今回はここまでとさせていただきます。
次回は画像の挿入方法をメインに紹介しようと思います。
それでは皆さん、お疲れ様でした。