【HTML】基礎

# HTMLとは
:sunny: Webページを作るためのプログラミング言語のこと

:sunny: ＜＞←このカッコをタグと呼ぶ。
　 文字をこのタグで囲むことで見出しやリンクの役割となる。
　 タグの中身は h1 や a などいろんな種類がある。
　 開始タグと終了タグがあるが、終了タグの場合は下記のように ／ が必要。

```例.html
<h1>h1のタグで文字を囲むと大見出しとして表示されるよ</h1>
```

Webではこんな感じに表示される
↓
<img width="800" alt="スクリーンショット 2019-12-24 0.47.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/74949596-dbd4-cfb3-750b-7029f369ee10.png">

## hタグ
:sunny: Webで見出しをつけたいときに使用。
:sunny: h1〜h6まで種類がある。
　 h1が一番大きな文字で表示され、h6が一番小さな文字で表示される。

```例.html
<h1>h1はこれくらいの大きさ</h1>
<h2>h2はこれくらいの大きさ</h2>
<h3>h3はこれくらいの大きさ</h3>
<h4>h4はこれくらいの大きさ</h4>
<h5>h5はこれくらいの大きさ</h5>
<h6>h6はこれくらいの大きさ</h6>
```

web
↓
<img width="495" alt="スクリーンショット 2019-12-24 1.13.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/8d7dc888-3f26-bff8-5b4f-c5b95d126936.png">

## pタグ
:sunny: 段落を表す

```例.html
<p>段落を表すよ</p>
ｐで囲まないと改行されないよ。
ここでは改行されてるけど
Webで表示したときに改行されてないでしょ？
```

Ｗｅｂ
↓
<img width="782" alt="スクリーンショット 2019-12-24 1.28.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/1c6f855a-fe46-e23c-317b-093f8463370e.png">

## liタグ・ulタグ・olタグ
:sunny: リストを作成する
:sunny: 必ず ul+li もしくは ol+li のセットで使用する
:sunny: ul+li はリストの前に黒点がつく
:sunny: ol+li はリストの前に番号がつく

```例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
```

web
↓
<img width="121" alt="スクリーンショット 2019-12-24 3.31.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/5e79b708-4d67-510d-0921-4a308cd86fcd.png">

```例：olとliのセット.html
<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ol>
```

web
↓
<img width="100" alt="スクリーンショット 2019-12-24 3.33.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/291e8640-9db7-57de-3d8f-360cf57450ea.png">

ul もしくは ol で li を囲む場合は必ず字下げする。
詳しくはこのページの一番下の見出しの 親要素と子要素 に記入。

## aタグ
:sunny: リンクを作成する

```例.html
<a>GoogleへGo！</a>
```

Web
↓
<img width="115" alt="スクリーンショット 2019-12-24 1.39.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/d95f8238-2bfe-dae9-bb88-1aba79bb8277.png">

Web上では表示されているが、文字が表示されているだけでGoogleへは繋がらない。
だってリンク先のURLを指定していないもん。
どうするかというと・・・
開始タグに　href="URL"　を追加するのです。

```例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
```

<img width="142" alt="スクリーンショット 2019-12-24 1.47.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/48a3d97d-5d80-3d3c-2994-8249e707a42f.png">

GoogleへGo！ の文字をクリックすると・・・

<img width="578" alt="スクリーンショット 2019-12-24 1.49.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/16aedb5e-066a-e8dc-84ba-23db9e86bcc2.png">

ちゃんとGoogleへ繋がりました:laughing:

## imgタグ
:sunny: 画像を表示する
:sunny: ＜img src="画像のURL"＞で作成
:sunny: 終了タグがない（文字を囲む必要がないから）

```例.html
<img src="https://2.bp.blogspot.com/-HGO1Xeo-UCU/UV1JGezkNhI/AAAAAAAAPS4/kIa5Y9sWfZs/s400/hiyoko_baby.png">
```

Web
↓
<img width="288" alt="スクリーンショット 2019-12-24 3.12.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/4f867485-4845-1759-514c-511c90b2dffa.png">



## 要素と属性
aタグやimgタグの開始タグにいろいろと詰め込まれているが、aタグで説明すると以下のようになる。

```例.html
<a href="https://www.google.co.jp">GoogleへGo！</a>
```

a ・・・ 要素名
href ・・・ 属性名
"https://www.google.co.jp" ・・・ 属性値

href="https://www.google.co.jp" ･･･ 属性名 + 属性値 = 属性

＜a href="https://www.google.co.jp"＞GoogleへGo！＜/a＞ ・・・ 要素

＜a＞＜/a＞ ・・・ タグ（開始タグと終了タグ）

上記は a要素 や aタグ などと呼ぶ。
要素名に要素やタグをつけて呼ぶ（他にもpタグやｐ要素、imgタグやimg要素など）


:sunny: 要素名と属性名のあいだはスペースをあける（例：<a href･･･）
:sunny: 属性名と属性値のあいだは = をつける（例：href="https://www.google.co.jp" ）
:sunny: 要素名は " " で囲む（例："https://www.google.co.jp" ）

つまりは・・・

```
<要素名 属性名="属性値">
```

となる。

## 親要素と子要素

```例：ulとliのセット.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
```

上記のように要素を要素で囲む（ul を li で囲む）ことを入れ子という。
このとき ul を親要素、 li を子要素と呼ぶ。

<img width="477" alt="スクリーンショット 2019-12-24 3.50.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/b79d9cf6-e1eb-67d1-9222-4dcf29529ff1.png">

ロシアのマトリョーシカみたいなイメージ。
一番大きなマトリョーシカが ul だとするならば
二番目に大きなマトリョーシカが li になる。


この入れ子構造にする場合は必ずインデント（字下げ）する。
下記のようにインデントをしないと親子関係がわかりづらい。
キーボードの Tabキー を押すとインデントできる。

```インデントなし.html
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
```

```インデントあり.html
<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>
```