扉のページへ前の章へ | 応用のページへ上へ | 次のページ

復習

練習2ー10

  1. 新しいファイルを作成し,HTMLの骨格,宿題の「今週の出来事2」を入力,「renshu3.html」として保存する.この時,「今週の出来事」と同様に,いままで学習したセクションや「見出し」,「段落」等を使用し,見出しには「ID属性」を設定しておく.
  2. 新しいファイルを作成し,HTMLの骨格,宿題の「好きな季節」,「行ってみたい場所」の文章を入力し,「renshu4.html」として保存する.この時,いままで学習したセクションや「見出し」,「段落」等を使用する.見出しには「ID属性」を設定しておく.
  3. 「renshu1.html」,「renshu2.html」,「renshu3.html」,「renshu4.html」の各ページに,「ページ内のリンク用」と「他ページへのリンク用」のnav要素を,ページごとに用意する.(例えば,renshu1 には,renshu2へのものと,renshu3へのもの,renshu4へのものをそれぞれ用意する,練習2−7で,既に用意したあるものもある)
    前と同様に,id属性を付けて区別出来るようにしておく.
  4. 各ページのそれぞれのページ用の nav要素の所に,それぞれのページの先頭へ移動する,通常のハイパーリンクを記述する.ブラウザで表示させてリンクがうまく動作することを確認してみる.
  5. 各ページのそれぞれのページ用の nav要素の所に,各ページの各見出しへ移動するハイパーリンクを記述する.ブラウザで表示させてリンクがうまく動作することを確認してみる.

画像などの表示

ホームページの特定の場所に画像,動画,音声などを表示することができます. ホームページ上に画像などを表示するには,表示する画像等を別ファイルとして用意する必要があります.

画像を表示する

コンピューター上に画像を保存するためのファイル形式は非常に沢山のものがありまが,ホームページ上で使用できる画像の形式は今の所,JPEG形式,PNG形式,GIF形式などです.

ホームページに画像を表示するには,まず表示させたい画像ファイルを画像を表示するHTMLファイルから呼び出せる場所に置く必要があります.
そして,表示させる画像のファイル名が「gazo.jpeg」であるとすると,画像を表示するHTMLファイルの中の表示させたい場所に次のように書きます.

<IMG src="gazo.jpeg" alt="(画像の代わりに表示する文章)">

このように,用意した画像ファイルのファイル名を「 src 属性」として二重引用符 " で囲って指定します.画像ファイルがフォルダーの中に入っている場合には,「リンク」で説明したように,フォルダーの名前も含めて指定します.
また,何らかの原因で画像が表示されない場合にも,ページの意味が変化しないような文章を「 alt 属性」として記述します.

次のように画像を表示させることが出来ます.

千畳敷カール

また,ブラウザが画像に対応していないなど,何らかの理由で画像が表示されない場合は

千畳敷カールという氷河地形です

のように画像の代わりに指定した文が表示されます.


練習3ー1

以前に作成したページに,画像が表示されるようにしてみましょう.

最初に,「好きな季節」の所に,以下の画像から対応する画像を表示してみましょう.

春夏秋冬

この画像を自分のホームディレクトリーに保存する方法は,

  1. 右クリックして,表示されたメニューから「名前を付けて画像を保存」を選ぶ.
  2. 画像ファイルをそれを使用するhtmlファイルと同じ所に,必要ならば名前を変えて保存する.

次に,「行ってみたい場所」にも適当な画像を表示させてみましょう.

必要な画像は,自分で用意するか,用意できない場合は,Web上の画像をダウンロードして使用します.ただし,ホームページで使用できる画像は,著作権や使用制限の設定されていない画像(ホームページで使用して良いと明記されているもの)だけなのでネット上の画像を使用する場合は,ダウンロードの際によく気を付けましょう.
ダウンロードは上記と同じやり方でできます.


画像サイズ

画像の縦横の大きさを指定することができます.

「IMG」要素のオプションとして,「width="(値)"」と「height="(値)"」の様に指定します.
「値」の部分には,「画素数(ピクセル数)」を指定します.これらを設定した場合は,その大きさが画像の縦横のサイズになります.

例えば,前に表示した画像の横幅を300ピクセル,縦を100ピクセルと指定する場合は,次のように書きます.

<IMG src="yama.jpeg" alt="千畳敷カール" width="300" height="100">

この場合は,以下のように表示されます.

長い山

練習3ー2

  1. 練習3ー1で表示させた画像の大きさを,適切と思う大きさに変えてみましょう.
  2. 「今週の出来事」,「今週の出来事2」の各曜日の部分に,内容に即した画像を適切な大きさにして表示する.
    (必ずしも全ての曜日に表示させなくても良いが,各ページに3〜4日分は画像を表示すること.)

動画を再生する

動画をページの中に埋め込むことができます.ただし,ビデオファイルの形式には様々な種類があり,ブラウザによってサポートする形式が異なる場合があるので,必ず再生できるとは限りません.

動画を使用するには,動画のファイルを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ー3(オプション:やってみたい人は試してみよう)

練習3ー2で表示させた画像の下に,動画と音声を再生させてみましょう.

なもの ファイルは,各自著作権フリーなもの(ホームページで使用して良いと明記してあるもの)をインターネットからダウンロードするか,自分でデジカメや携帯で撮った(録った)ものをコンピューターに送って使用します.


扉のページへ前の章へ | 応用のページへ上へ | 次のページ