ＨＴＭＬ　５日目

※今日からVS Codeを使用

第７章：画像の定義

★画像の拡張子に注意！！
　「a001.JPG」のように拡張子が大文字になっていることがあるので要注意。
Windowsでは問題なくても、サーバ上では大文字・小文字が区別されてしまう。

ファイル名・拡張子はすべて小文字で統一し、不具合を未然に防ぐ

★画像を保存する時は「画像保存用のフォルダ」を用意する
　また、制作しているファイルの近くに置くのがベター

画像を定義する

img要素：画像表示

語源：image（イメージ、画像）

img src="画像の場所" alt="画像の説明"

【必須属性】画像の場所を指定する属性：img要素にsrc属性

語源：source（参照先）

●画像の場所をパスで指定

【推奨属性】画像の場所を指定する属性：img要素にalt属性

語源：alternative（代わりの、代わりとなる）

●画像が表示されないときの説明

画像の幅を指定する属性：img要素にwidth属性

語源：width（幅）

画像の高さを指定する属性：img要素にhight属性

語源：hight（高さ）

      <p>
        <img src="img/001.jpg" alt="馬">
 　　   <img src="img/001.jpg" alt="馬" width="100" height="200">
     　 <img src="img/001.jpg" alt="馬" width="50">
        <img src="img/001.jpg" alt="馬" width="150">
　　　　画像を表示します
      </p>

img要素は置換インライン要素なので複数画像を表示させると横並びになる。
文字列も画像と同じ行に改行されることなく表示される。

figure要素：図表用グループ

語源：figure（図表）

★画像が出てきたらfigureで囲む
　画像をブロックレベルで囲むことでデザインする際に
　画像の「中央揃え」「余白」、「背景色」の指定がしやすくなる

      <figure>
        <img src="画像の場所" alt="画像の説明">
      </figure>

figcaption要素：図表用キャプション

語源：figcaption（図表キャプション）

★figcaption要素はfigure要素の直下の最初、もしくは最後に記述する
　figure要素とセットでしか使用しない

<figure>
   <img src="画像の場所" alt="画像の説明">
   <figcaption>キャプション</figcaption>
</figure>

<figure>
  <figcaption>キャプション</figcaption>
  <img src="画像の場所" alt="画像の説明">
</figure>

画像をリンク化する

<a href="表示したいページの場所>
  <img src="画像の場所" alt="画像の説明">
</a>

テキストへのリンク同様にリンク先を別タブで表示する場合は
target属性に「_brank」を指定する

第８章：実体参照

HTMLで意味を持つ記号や特殊な文字をブラウザに表示させる場合、
実体産業を使用しないければいけない

文字	実体参照	由来
<	&lt;	less than
>	&gt;	greater than
“	&quot;	quotation
&	&amp;	ampersand

文字	実体参照名	由来
半角スペース	 	no break space
ⓒ	©	copyrights
™	™	trade mark
♥	♥	hearts

&実体名;

 <article>
   <h1>実体参照の練習</h1>
   <p>私は<New York>へ行ってきます。</p>
 </article>

このままだと「 <New York> 」が消えて「私はへ行ってきます。」となってしまう

実体参照を使用する

 <article>
   <h1>実体参照の練習</h1>
   <p>私は&lt;New York&gt;へ行ってきます。</p>
 </article>

（深堀り）５章：グループの定義