imgタグ

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

ウェべにイメージを。。

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

imgタグの使い方

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

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

<!doctype html>
<html>
<head>
</head>
<body>
    <img src="https://www.everdevel.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.everdevel.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.everdevel.com/material/images/HTML5/IMG_0449.JPG"　width="300"　alt="tokyo disney sea" />
</body>
</html>

結果

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

次のコンテンツは
aタグ

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。