ホームページを作るなら文章ばかりのページよりも、画像なんかを貼って楽しいページにしたいですよね。この記事ではホームページ作りに必要不可欠な画像を貼るHTMLタグの書き方を書いていきますね！
画像を貼るタグ
画像を貼るタグはこれをワンセットにして覚えちゃいましょう。
<img src="画像のURL" alt="画像の説明" width="画像の横幅" height="画像の高さ" />
リンクを貼るタグの時よりもちょっと属性（タグのオプション）が多いですね・・・。alt属性（画像の説明の部分）とかいらないんじゃないの？！と思うかもしれないですが、大事なものなんですー！
実際に画像を貼りながら色々説明していきますね！
画像を貼ってみよう！
それではさっそく、画像を貼るタグを書いてみましょう！
まずはimgタグを書く
画像を貼るタグの名前は「img（イメージ）」なんで、まずこんな感じにタグを書いてください。
<img>src属性に画像のURLを書こう！
さっきの「<img>」タグに、画像のURLを書いてどの画像を表示させるか決めれるsrc（ソース）属性（imgタグのオプションですね！）を書いてみましょう！
とりあえず、練習用に画像を用意してみたので、画像がないよーって人はこれを使って下さい！
右クリックで画像を保存して、アメブロのマイページでアップしてみてください！
やり方がわからないって人はこちらのリンクの記事を参考にしてみてくださいね！
リンクを貼ったときと同じように、タグ名と属性の間を半角スペース１つ入れて区切ってくださいね！もちろん値（画像のURLの部分）は「"」と「"」で囲ってください。
<img src="http://stat001.ameba.jp/user_images/20120721/19/ameba-hp/b2/a8/p/o0270021012091083271.png">私のアメブロの中ではクマの画像のURLは「http://stat001.ameba.jp/user_images/20120721/19/ameba-hp/b2/a8/p/o0270021012091083271.png」なので、こんな感じになりました！
alt属性に画像の説明を書こう！
alt（オルト）属性には画像の説明を書きます！
たとえばさっきのクマの画像だったら、「HELLO!!」って言ってますよね。だから、画像の説明部分には「HELLO!!と言うクマ」とか、クマが特に必要無ければ「HELLO!!」とかホームページの内容に合わせて書けばよいと思います。
<img src="http://stat001.ameba.jp/user_images/20120721/19/ameba-hp/b2/a8/p/o0270021012091083271.png" alt="HELLO!!">
画像の説明を書くポイントは、画像が無くて、変わりに説明のテキストが表示されてても、全体的に違和感がなくホームページの内容が伝わるように書くと良いです！
Width・height属性で画像の大きさを書こう
Width（ウィズ）属性に画像の横幅を、height（ハイト）属性に画像の高さの数値を書きます。
<img src="http://stat001.ameba.jp/user_images/20120721/19/ameba-hp/b2/a8/p/o0270021012091083271.png" alt="HELLO!!" width="270" height="210">
さっきのクマの画像は270（横幅）×210（高さ）ピクセルなので、こんな感じに書きます！
ちなみに、width・heightの数値を変えて、拡大または縮小して画像を表示する事もできますー！
実際に表示させたいサイズで画像を作るのが一番良いんですが、１つの画像を使いまわしして片方は小さく表示させたい時など良いかもしれません。
そして、ここで問題です！
この画像の元々の大きさは何ピクセル×何ピクセルでしょう？
画像の大きさの部分は、絶対書かなきゃいけない訳じゃないけど、最初のうちは書いておきましょう！
「大きさを書く理由」と「書かない方が良い場合」が分かってきたら、「大きさを書かない」という選択をするのも良いと思います！
最後に「/」（スラッシュ）を書こう！
タグの中に書く属性を全部書き終わったら、最後に「/（スラッシュ）」を書きます。終わりって事ですね！
<img src="http://stat001.ameba.jp/user_images/20120721/19/ameba-hp/b2/a8/p/o0270021012091083271.png" alt="HELLO!!" width="270" height="210" />
「/」を書くときも、属性との間に半角スペースを１つを入れて区切って書いてくださいね！
これで画像が貼れたよ！！やったね！！
imgタグの終了タグはいらない？！
画像を貼るタグを見て、「HTMLタグって開始タグと終了タグがいるんじゃないのー？」って思う人がいるかもしれません。
<タグ名>テキスト</タグ名>
ふつうだったらこんな感じにかいていくんですが、imgタグの場合、内容（テキスト）の部分が必要無いですよね。
ですので、終了タグを「</img>」と書くかわりに、タグの中の一番最後に「半角スペース」1つ入れて区切って、「/（スラッシュ）」を入れて、このタグ１つでここからここまでー！という感じにします。
ちなみにこういった内容が無いタグのことを「空要素」っていいます！
「 /」を入れない書き方をみるけど必要あるの？
実は、HTMLではimgタグなんかの空要素に「 /」を入れても入れなくてもいいんです！
<img src="画像のURL" alt="画像の説明" width="画像の横幅" height="画像の高さ">
HTMLではこんな感じに書いちゃっても大丈夫なんですよー！
でも・・ホームページを作るためにタグなどを書くものはHTML以外に、XHTMLっていうのがあるんです。XHTMLではimgタグなんかの空要素に「 /」は絶対入れなきゃダメなんですよ。
今は自分がHTMLでホームページを作るのか、XHTMLで作るのか今はわからないですよね。なんだそれ分け分からないって状態だと思います・・。
だから、とりあえず両方使える「 /」を入れた書き方で覚えておいたら良いと思います！
ちなみに今現在のアメブロはHTML5で書かれています。2011年の秋頃までのスキンではHTML5がでてくる前からよく使われていたXHTML1.0で書かれていました。（HTML・XHTMLの数字の所はそれぞれのバージョンです。）
もっと前のバージョンだったら書き方が変わったり・・わたしのブログでは特に使われるであろう、HTML5を中心にXHTMLでも使える書き方を紹介しますね！
こんな場合はalt属性はこう書こう
たとえば、imgタグを使ってこんな感じの画像を表示したい時。
こんな時はaltはどう書くの？HTMLでaltの値の部分は何て書けばいいかわからないですよね。
<img src="画像のURL" alt="？？？" width="画像の横幅" height="画像の高さ">こんな時はaltはどう書くの？
「丸」とか「矢印」とか書けばいいのかな？って思うかもしれません。
この画像の部分が丸でも四角でも矢印じゃなくてもよい、特に意味の無い「ただのわかりやすい印・装飾」として画像を表示させている場合は何も書かなくて良いんです。むしろ、何も書かないべきです。
ただ、「なにも書かなくて良い」って事は「alt属性自体書かなくて良い」っていう意味じゃなくて、「こういう場合は値を空にしてもいい」っていう意味です。
<img src="画像のURL" alt="" width="画像の横幅" height="画像の高さ">こんな時はaltはどう書くの？
こんな感じに書いてくださいね！
意味わかんない用語が出て来てわかりにくかった人へのあとがき
前書いた記事の「リンクの貼り方｜アメブロではじめてのHTML」より専門用語がちょいちょい出てきているので、ちょっとわかりにくかったかもしれません。
でも今はそういう用語を頭に入れなくても大丈夫です！むしろ、最初に書いた「画像を貼るタグ」で画像をブラウザに表示できたらそれでいいんです！ただ、そういう用語を「全く知らない」と、「聞いた事ある」とではまた違ってくると思います。
専門用語を知ってた方がいいと思う理由
何かわからない事がある時に、検索サイトで「●● やり方」とかで検索すると思うんですが、ちゃんとした専門用語じゃないと思った情報が手に入らなかったりします。
また、知りたい事が書いてあるサイトに辿りついても、専門用語を使って説明しているサイトだったら用語を全く知らなかったら理解不能だと思います・・・。でも「聞いた事ある」だったらニュアンスでなんとなく読み解けると思います！
最初は用語が頭に入らなくても、ホームページのお勉強を続けたらちゃんと理解できてくるので安心してください！
問題の答え
234×182（ピクセル）でしたー！わかったかな？ >> 問題にもどる
わからなかった人は「ネット上の画像の大きさの調べ方」を読んでね！