imgタグ

この講義では　imgタグについて勉強しましょう。
このタグはですね。Webページにイメージを表示する時に使います。

ウェべにイメージを。。

tokyo disney sea

上のようにイメージを表示する時にimgタグを使います。

imgタグの使い方

<img src="イメージのアドレス"　alt="イメージの説明" />

imgタグもbrタグのように単独タグです。
imgタグの中にあるsrcとaltと言うのは属性と言います。
では、これから直接にソースを打ちながら練習して見ましょう。
今は、皆んな初心者なんでゆっくり打ってください。 

<!doctype html>
<html>
<head>
</head>
<body>
    <img src="https://www.coreasur.com/material/jp/images/HTML/IMG_0449.JPG"　alt="tokyo disney sea" />
</body>
</html>

結果

イメージの大きさを調節することも出来ます。width属性を使うと要素の幅を調節出来るし、要素の高さを調節することが出来ます。
二つの中で一つだけ指定すると残りは自動でバランスを合わせて指定されます。

イメージの大きさを調節仕方

<img src="イメージのアドレス"　width="数字（長さ）" alt="イメージの説明" />

width属性とheight属性を指定したソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <img src="https://www.coreasur.com/material/images/HTML5/IMG_0449.JPG"　width="300" height="300"　alt="tokyo disney sea" />
</body>
</html>

結果

width属性だけ指定したソース

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
    <img src="https://www.coreasur.com/material/images/HTML5/IMG_0449.JPG"　width="300"　alt="tokyo disney sea" />
</body>
</html>

結果

では、次の講座へ行きましょう。