9.4 ウェブページで画像を表示する
自分のウェブページに画像を表示させたい場合は,HTML 文書でimg 要素を使います.以下のような属性を指定できますが,src 属性と alt 属性は必ず書かなければいけません.また,終了タグはありません.
- src 属性:画像ファイルの URI を指定します.a 要素の href 属性同様,絶対パスでも相対パスでもどちらでも指定できます.
- alt 属性:画像を表示しないブラウザは,代わりにこの属性で指定された文字列を表示します.画像を表示しない理由としては,画像形式に対応していない,携帯電話のように表示能力が限られている,画像転送に時間がかかり過ぎる,視覚障害者のための専用ブラウザである,などが考えられます.
注意
alt 要素の内容は画像を表示しないブラウザで見る人の為に,その画像がどういうものであるのを簡潔に分かりやすく書きましょう. - width 属性,height 属性:画像の幅と高さを指定します.数字だけのときは画素数,うしろに % を付けると,ブラウザのウィンドウに対する割合を表します.指定された大きさに画像を拡大,縮小して表示します.
例えば「image」というディレクトリの下にある,01.jpgという画像を表示させたい場合は以下のように記述します.
<img src="image/01.jpg" alt="特別教室の風景">
また,ページの背景を画像にすることもできます.この場合はスタイルシートを使い,以下のように body 要素について背景画像をURIで指定します.
body { background-image: URL(backImage.gif)}