【HTML】基礎

HTMLとは

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

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

例.html

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

Webではこんな感じに表示される
↓

hタグ

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

例.html

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

web
↓

pタグ

段落を表す

例.html

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

Ｗｅｂ
↓

liタグ・ulタグ・olタグ

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

例：ulとliのセット.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

web
↓

例：olとliのセット.html

<ol>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ol>

web
↓

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

aタグ

リンクを作成する

例.html

<a>GoogleへGo！</a>

Web
↓

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

例.html

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

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

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

imgタグ

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

例.html

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

Web
↓

要素と属性

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要素など）

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

つまりは・・・

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

となる。

親要素と子要素

例：ulとliのセット.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>

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

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

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

インデントなし.html

<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>

インデントあり.html

<ul>
  <li>りんご</li>
  <li>みかん</li>
  <li>メロン</li>
</ul>