「HTML」での画像の貼り付け方について

こんにちは、「なゆた」です！

今日は、「HTML」での画像の貼り付け方についてを書きます。

Webサイト制作の中で、画像添付は基本中の基本です。人々は、様々なWebサイトの画像を目にすることによって、更なる意欲が湧き上がります。

まずはじめに、画像を載せる際に使用する１つの要素について説明します。

<img>・・・画像を埋め込む要素。埋め込んだ要素の表示が変わる事から置換要素とも言う。

次に、画像の貼り付け方を説明します。

①まず最初の行にp要素を入れます。（p要素は基本文字に使いますが、文字じゃないものにも使う時があります。）

②次の行にimg要素を入れます。

③img要素の中に画像ファイルの場所を示すsrc属性を入れ、画像をどこのファイルに保存したかを入れます。

④img要素の中にもう一つ、画像の代替テキストを示すalt属性を入れ、この画像を短い文字で説明します。

⑤もし画像の大きさなどを変えたければ、img要素の中に、画像の幅を示すwidth属性と、画像の高さを示すheight属性を入れてもOKです。

⑥最後に/p要素で締めて、完成！！

画像の添付方法はたったこれだけで、とってもカンタンです！授業の際、サンプルファイルで勉強した時も、先生に助けを求めなくても一発で理解することができました。「画像を載せるのって、難しそうだなと思っていたけど、意外とカンタンだなぁ」って思いました。

皆さまもHTMLを使って、画像をポンポン貼り付けちゃってください！

以上です、ありがとうございました！