画像を表示するものが、imgタグです。オプションに、src="アドレス"を指定します。タグは、基本的にはアルファベットの大文字小文字は関係ありません。以後は、キィボードの半角入力をそのまま使って、小文字で表記します。
imgタグのポイントは、アドレスです。
●すでに、インターネットに公開されている画像を使う
ブラウザで開いた画像を、右クリックします。メニューから、画像アドレスをコピーします。
すぐにメモ帳を開いて、張り付けます。
張り付けたアドレスの先頭にカーソルを入れて、タグカッコ img スペース エス・らアール・シー・イコール・ダブルクオーテーション を追加します。カーソルを最後に移動して、ダブルクオーテーション・タグカッコ閉じ を入れます。これを、拡張子htmlで保存します。保存したhtmlをWクリックで開き、画像が表示されるのを確認しますが、メモ帳はそのまま開いておきます。
●imgタグに、サイズを追加する
タグの中に、width= 数字 を追加すると、表示する画像の横幅を指定できます。昔は、データ量を減らすために、画像ファイルを表示するサイズに縮小しましたが、今は印刷などの再利用を考えて、画像ファイルは表示サイズより大きくしています。サイズ指定はwidth=で横幅、height=で高さを指定できますが、比率を正確に指定しないと画像がゆがみます。計算はブラウザに任せて、どちらかだけの指定で構いません。
画像を、実寸より縮小して表示している場合、右クリックで、画像を別ページで開けば、拡大画像が見られます。
新しいタグで開いたものが、右です。
●画像の配置を指定するタグ
imgタグのオプションに、更に align="left" を追加すると、画像はleft左に、アラインメント(alignment 配置の略)されます。これが無くても画像は左ですが、文字を画像の右に並べたいときは、このオプションで、画像を左に並べます。この下から
<img src="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg" width=300 align="left">
画像が、左に配置され、説明の文字は右に配置されます。<br>画像に高さがあるので、何行か配置できますが、自分で改行します。
<br clear=all>これで、画像の下に改行されます。
この上まで、コピーして貼り付けて、html拡張子で保存してください。
下は、ブラウザの横を千縮めた場合です。<br>は強制改行ですが、無くても画面によって折り返されます。
<br clear="all">で改行すると、画像の横から抜けます。これも、開くブラウザのサイズによらず、alignから強制的に開業するオプションです。
さらに、画像の周りに余白を作って、文字を離したいときは、 hspace=10 のように、左右余白を指定します。vspace=10 は、上下のスペースを10ピクセルにします。
<img src="https://i.pinimg.com/564x/06/ee/12/06ee122bd9c9ed983e2fb05f99901637.jpg" width=300 align="left" hspace=10 vspace=10> タグは、テキストファイルが見やすいようにと、勝手に改行してはいけません。
alignやhspaceなどは、もとはCSSコマンドですが、htmlの中に書き込む(インライン)ことが出来るようになりました。古いHTML4規格では使えない時代もありましたが、殆どのブラウザが使えるようになっています。
■ポイント htmlは文字だけなので、文字以外のものを表示するには、そのファイルがある場所のアドレスを指定して、そこから持ってきます。インターネット上のファイルは、常時接続でないと表示できませんが、現代のパソコンは、インターネットを使うなら、常時接続されています。昔は、必要なときにダイヤルアップ接続していましたが。