第5章　画像の挿入

# **画像の挿入**
***
## **1.HTML画像の構文**
HTMLでは、画像は```<img>```タグで定義されます。

+ ```<img>```タグは**終了タグはありません**

+ ```src```属性は画像のURL（ウェブアドレス）を指定します

+ ```alt```属性は何らかの理由でブラウザが画像を表示できない場合の代わりにテキストを提供します

+ ```width、height```属性は図面の幅と高さを指定できる

#### **例**
[sample5-1.html]
```
<img src="http://itjob.co.jp/assets/img/demo/itjob_square.png" alt="ITJOB">
```

#### **実行結果**

<!DOCTYPE html><html><head><title></title></head><body>
<img src="http://itjob.co.jp/assets/img/demo/itjob_square.png" alt="ITJOB">
</body></html>

## **2.リンクとしての画像**
画像をリンクとして使用するには、```<img>```タグを```<a>```タグの内側に配置します。

#### **例**
[sample5-2.html]
```
<h5>下図をクリックしてください。</h5>
<a href="http://itjob.co.jp/">
<img src="http://itjob.co.jp/assets/img/demo/itjob_square.png" alt="ITJOB">
</a>
```
#### **実行結果**
<!DOCTYPE html><html><head><title></title></head><body>
<h4>下図をクリックしてください。</h4>
<a href="http://itjob.co.jp/"><img src="http://itjob.co.jp/assets/img/demo/itjob_square.png" alt="ITJOB"></a>
</body></html>

<!--
## **3.HTMLで動画を埋め込む**
HTMLで動画の挿入は```<video>```タグを利用します。

+ ```<source>```要素は、再生候補となるメディアファイル（動画・音声）や、レスポンシブイメージで使用する画像ファイルを指定します
+ ```src```属性は動画のパスを指定します
+ ```loop```属性は動画を繰り返し再生を指定します
+ ```poster```属性は動画のヒントとなる画像を表示します
+ ```controls```属性はインターフェースを表示します
+ ```autoplay```属性は動画を自動再生します
+ ```preload```属性は動画をあらかじめ読み込みます

### **例**
```html
<video controls loop width=80%>
    <source src="https://youtu.be/ZDTsjVNxDv0">
</video>
```

### **実行結果**
<pre><code><!DOCTYPE html><html><head><title></title></head><body>
<video controls loop width=80%><source src="https://youtu.be/gVHcyFo-tvc"></video>
</body></html></code></pre>
-->

***

>**練習**
>> **問題**[ex5-1.html]

下図の画面を作成し、図をクリックしたらITJOBのホームページが開けるように設定してください。
(画像URL：https://i.loli.net/2019/09/27/1zlbHxUnPATN6ML.png)
<br><br>
<!DOCTYPE html><html><head><title></title></head><body>
<a href="http://itjob.co.jp/" target="_blank">
    <img src="https://i.loli.net/2019/09/27/1zlbHxUnPATN6ML.png" alt="ITJOB" width="40%" >
</a>
</body></html>

content

第5章 画像の挿入

第5章　画像の挿入