HTML 入門
基本的なタグをマスターしよう
画像を配置する
画像を表示するには，まず index.html と同じフォルダに画像をコピーします．たとえば，次の図のように「tissot.jpeg」を index.html が設置された web フォルダに設置します．
画像ファイルを設置後，Visual Studio Code でも tissot.jpeg の存在を確認します．
画像を Web ページに配置する前に画像の幅と高さを確認します．Visual Studio Code で画像ファイルを開くと，ステータスバーにサイズが表示されます．この画像の幅は 284 画素（ピクセル，px），高さ 160 画素です．
Windows のエクスプローラからでも画像のサイズを確認できます．画像ファイルを右クリックして「プロパティ」→「詳細」タブを開いてください．
コピーができたら，img タグに src 属性を使って画像ファイル名を指定します．このとき，src でファイル名を指定するだけでも表示できるのですが，画像ファイルが見つからないときのために，alt 属性でどのような画像であるかを指定しなければなりません．さらに，画像の幅 (width) と高さ (height) を指定した方が画像ファイルのダウンロードが完了する前にレイアウトが確定するため表示が高速になります．幅と高さを指定しなければ，画像ファイルのダウンロードが終了するまで大きさがわからないのでレイアウトが確定しません．さらにサイズを指定することで大きすぎる画像を小さく表示することもできるようになります（ただし，事前に適切なサイズに変換した画像を準備しておくべきです）．なお，幅 (width) と高さ (height) を指定する際には単位を付けないことに注意してください．
次の例の2行目の記述で画像を表示できますが，これは alt 属性が指定されていないので適切な方法ではありません．5行目のように alt 属性は忘れずに指定するようにしてください．また，8行目の「t.jpeg」というファイルが見つからない場合に alt 属性に指定した文字列が表示されていることにも注意してください．
index.html（抜粋）
<p>
<img src="tissot.jpeg"> <!-- 表示されるがこれではダメ -->
</p>
<p>
<img src="tissot.jpeg" width="284" height="160" alt="tissotの時計"> <!-- 正しい書き方 -->
</p>
<p>
<img src="t.jpeg" width="284" height="160" alt="tissotの時計"> <!-- このファイルは見つからない -->
</p>
ブラウザでの表示結果
