【html講座③】画像を扱えるようになろう！
皆さんこんにちは！もうhtml講座も三本目になります。
前回までのコードは、こちらですね？
<!DOCTYPE html>
<html>
<head>
<title> タイトル </title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>htmlの始め方が分からない、初めから学びたい方は、こちらから！
さあ、さっそくタイトルにもある通り、画像を埋め込んでみましょう。
画像を埋め込むコードはこちらです。
<p><img src="表示したい画像ファイルまでのパス or 画像アドレス" alt="代替テキスト"></p>表示する画像の指定方法は、自分のパソコンにある画像を使う場合はパスを指定し、
ネット上の画像を使いたい場合は右クリックし画像アドレスを選択し貼り付けます。
altの後ろには何らかの問題があったときに画像が表示されなかった場合に表示するテキストを書きます。
具体的コードを書くと、YOUHEI!のプロフィール画像を張りたい場合は
<p><img src="https://assets.st-note.com/production/uploads/images/158483318/profile_3ed6bf832dca0e4c8e5b189394efe37b.png?width=60" alt="YOUHEI！の画像"></p>となります。このコードを＜ｐ＞本文＜/ｐ＞の下に張り付け、ctrl+sで保存し、開いてみましょう。変更を保存する前に開いてある場合は、そのページを再び読み込めが変更が投影されます。
ページはこんな感じになっていると思います。
さあ、皆さんが思ったことを言い当てましょう。
「画像ちっちゃくね～」ですね？
見出しや本文は文字数があれば自然な感じになりますが、明らかに画像が小さい。
そんなときは！
<img src="" width="表示する幅（px）" height="表示する高さ（px）" alt="">とすれば、指定した大きさに画像が拡大縮小するのです。
拡大すればするほど画像は荒くなりますが。。。
実際にやってみましょう。
さっき書いたコードのなかにwidth="表示する幅（px）" height="表示する高さ（px）をいれ、
<p><img src="https://assets.st-note.com/production/uploads/images/158483318/profile_3ed6bf832dca0e4c8e5b189394efe37b.png?"width="500" height="500" と変更してみましょう！画像が大きくなって違和感もなくなりましたね？
今回で文字と画像があつかえるようにまでなりましたね。どんどん知識を増やしていきましょう！
今回までのコードです
<!DOCTYPE html>
<html>
<head>
<title> タイトル </title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
<p><img src="https://assets.st-note.com/production/uploads/images/158483318/profile_3ed6bf832dca0e4c8e5b189394efe37b.png?"width="500" height="500" alt="代替テキスト"></p>
</body>
</html>次回もお楽しみに、YOUHEI！からでした