ホームページの特定の場所に画像,動画,音声などを表示することができます. ホームページ上に画像などを表示するには,表示する画像等を別ファイルとして用意する必要があります.
コンピューター上に画像を保存するためのファイル形式は非常に沢山のものがありまが,ホームページ上で使用できる画像の形式は今の所,JPEG形式,PNG形式,GIF形式などです.
ホームページに画像を表示するには,まず表示させたい画像ファイルを画像を表示するHTMLファイルから呼び出せる場所に置く必要があります.
そして,表示させる画像のファイル名が「gazo.jpeg」であるとすると,画像を表示するHTMLファイルの中の表示させたい場所に次のように書きます.
このように,用意した画像ファイルのファイル名を「 src 属性」として二重引用符 " で囲って指定します.画像ファイルがフォルダーの中に入っている場合には,「リンク」で説明したように,フォルダーの名前も含めて指定します.
また,何らかの原因で画像が表示されない場合にも,ページの意味が変化しないような文章を「 alt 属性」として記述します.
次のように画像を表示させることが出来ます.
また,ブラウザが画像に対応していないなど,何らかの理由で画像が表示されない場合は
のように画像の代わりに指定した文が表示されます.
以前に作成したページに,画像が表示されるようにしてみましょう.
最初に,「好きな季節」の所に,以下の画像から対応する画像を表示してみましょう.
春 | 夏 | 秋 | 冬 |
---|---|---|---|
![]() | ![]() | ![]() | ![]() |
この画像を自分のホームディレクトリーに保存する方法は,
次に,「行ってみたい場所」にも適当な画像を表示させてみましょう.
必要な画像は,自分で用意するか,用意できない場合は,Web上の画像をダウンロードして使用します.ただし,ホームページで使用できる画像は,著作権や使用制限の設定されていない画像(ホームページで使用して良いと明記されているもの)だけなのでネット上の画像を使用する場合は,ダウンロードの際によく気を付けましょう.
ダウンロードは上記と同じやり方でできます.
画像の縦横の大きさを指定することができます.
「IMG」要素のオプションとして,「width="(値)"」と「height="(値)"」の様に指定します.
「値」の部分には,「画素数(ピクセル数)」を指定します.これらを設定した場合は,その大きさが画像の縦横のサイズになります.
例えば,前に表示した画像の横幅を300ピクセル,縦を100ピクセルと指定する場合は,次のように書きます.
<IMG src="yama.jpeg" alt="千畳敷カール" width="300" height="100">
この場合は,以下のように表示されます.
動画をページの中に埋め込むことができます.ただし,ビデオファイルの形式には様々な種類があり,ブラウザによってサポートする形式が異なる場合があるので,必ず再生できるとは限りません.
動画を使用するには,動画のファイルをHTMLファイルから呼び出せる場所に用意し,動画のファイル名が「video.webm」であるとすると,表示したい場所に次のように書きます.
<VIDEO src="video.webm" autoplay controls> (ここには再生できなかった場合などの代わりのコンテンツを書きます.) </VIDEO>
このように「src属性」に動画ファイル名を指定します.それ以外に設定できる属性は次のようなものです.
poster | 再生可能になるまでに表示する画像を指定 |
---|---|
autoplay | 自動的に再生を開始する設定 |
loop | 繰り返し再生する設定 |
controls | ビデオのコントローラーを表示 |
width,height | 動画の表示サイズの指定(ただし,縦横の比率を元の比率と同じに設定する) |
音声ファイルをページの中に埋め込むことができます.ただし,音声ファイルの形式には様々な種類があり,ブラウザによってサポートする形式が異なる場合があるので,必ず再生できるとは限りません.
音声ファイルを使用するには,音声のファイルをHTMLファイルから呼び出せる場所に用意し,音声のファイル名が「audio.ogg」である場合,次のように書きます.
<AUDIO src="audio.ogg" autoplay controls>(ここには再生できなかった場合などの代わりのコンテンツを書きます.) </AUDIO>
このように「src属性」に音声ファイル名を指定します.それ以外に設定できる属性は次のようなものです.
autoplay | 自動的に再生を開始する設定 |
---|---|
loop | 繰り返し再生する設定 |
controls | 音声のコントローラーを表示 |
練習3ー2で表示させた画像の下に,動画と音声を再生させてみましょう.
なもの ファイルは,各自著作権フリーなもの(ホームページで使用して良いと明記してあるもの)をインターネットからダウンロードするか,自分でデジカメや携帯で撮った(録った)ものをコンピューターに送って使用します.