LESSON_4 イメージの挿入 1 画像の挿入 2 画像へのリンク設定 3 Flash データの挿入 4 youtube の挿入 学習目標 Lesson4 では画像や動画といったイメージファイルの挿入方法を学習します LESSON 4-1 画像 画像ファイルは単に写真を載せるためのものではなく WEB サイトを魅力的に見せるためののナビゲーションやアイコン その他装飾などに画像を使用することも多く 見栄えの良い WEB サイトには欠かせないものです ここでは 基本的な画像の呼び出し方と必要な設定について理解していきましょう イメージファイル ( 画像 ) の挿入 画像を表示するためには <img> タグを使用します HTML ファイルは Excel や Word のように文書内に画像を埋め込むことはできないため 画像を表示する際は表示したい画像を読み出すように指示する必要があります 指示する際には src="" という属性を追加して読み出す画像の保存場所を指定します 保存場所の指示方法は 前 Lesson で学習した相対パスや絶対パスを使用します <img src = " 画像の位置 " alt=" 画像の説明 " /> ファイルへの画像を呼び出します <img> タグは単独では使用せず srcや alt とセットで使用します src には 呼び出すの画像ファイルの位置を alt には画像の内容について記述します <html> <head> <title> 画像の挿入 </title> </head> <body> <p> <img src = "images/pink.jpg" alt=" チューリップ " / > </p> <p> 長崎の旅行で撮影したピンク色のチューリップです とても綺麗で爽やかです </p> </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き 左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-1.html とつけて保存しましょう チューリップの画像は素材 Lesson4 - images フォルダの pink.jpg を利用します
画像の確認 ブラウザで確認しましょう 写真が表示されました ファイルは引き続き使用します 画像にリンク挿入 画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います 通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます 画像へのリンク設定 <html> <head> <title> 画像へのリンク </title> </head> <body> <p> <a href="http://www.huistenbosch.co.jp/" target="_blank"> <img src="images/pink.jpg" alt=" チューリップ " / ></a> </p> <p> 長崎の旅行で撮影したピンク色のチューリップです とても綺麗で爽やかです </p> <p> ハウステンボスへ行ってきました 画像をクリックしてください </p> </body> </html> 1 左記の赤字のコードを追記 編集しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-2.html とつけて保存しましょう 今回は外部サイトを開くため 別のウィンドウで閲覧できるように属性に target="_blank" を設定しています
段落タグの入力 ブラウザで確認しましょう 画像をクリックします 別ウィンドウで ハウステンボス のサイトが表示されました alt 属性と title 属性 img タグの属性には alt と似た属性で title という属性があります alt とは? 画像を表示することができない環境の人に 画像の変わりに表示する代替テキスト ( 視覚障害者向けの web ページ読み上げソフトの画像部分での読み上げに使われたりもします ) title とは? 画像に対しての説明や補足説明 IE7 や Firefox2.0 などのブラウザでは 画像の上にマウスをのせるとその画像のポップアップには alt の内容が表示されていましたが IE8 やその他進化したブラウザでは alt 属性では内容がポップアップされなくなりました 最新のブラウザでポップアップを表示させるためには title 属性を使用する必要があります 画像が表示できない時に対応する alt に比べ 画像の補足説明的な位置づけで扱われる title は SEO 的な効果は低いと言われており WEB ページとって重要であるのは alt 属性と考えられています ただし ポップアップを表示させることで補足説明が出ればユーザーにとって分かりやすい作りになりますので 手間ではありますが 両方の属性を使用するのがもっとも効果的だと言えます
LESSON 4-2 動画 インターネットの高速化に伴い WEB サイトのトップページに Flash などの動画を表示するようになるなど 動画コンテンツの需要が非常に高くなっています 画像やテキストだけのページに比べ 動画を配置した動きのあるページは メッセージを強く伝えることが可能です ここでは 動画の中でも需要の高い Flash データと YouTube の動画の呼び出し方と必要な設定について理解していきましょう Flash データの挿入 HTML 上で動画を表示するためには <object> タグを使用します 画像に比べ データの種類を指定する必要があるなど多少煩雑な記述になっています データの種類を type=" " ファイルの場所の指示に data=" " という属性を記述します なお Dreamweaver などの HTML オーサリングソフトを使用すると 再生方法などの設定部は自動的に入力されます <object data=" ファイルの場所 " type= " データの種類 (MIME タイプ )" width=" 横幅 " height=" 高さ " /> <param name="src" data=" ファイルの場所 " /> </object> HTML ファイルへ動画を呼び出します <object> タグは単独では使用せず data や type とセットで使用します data には 呼び出すの動画ファイルの位置を type にはデータの種類について記述します object タグの中に <param> というタグが内包されていますが この <param> というタグを使い 属性を追加することで詳細な設定を追加することが出来るようになります <html> <head> <title> Flash の挿入 </title> </head> <body> <p>flash サンプル </p> <object data="images/flash_advan.swf" type="application/x-shockwave-flash" width="700" height="200"> <param name="src" value="images/flash_ advan.swf" /> </object> </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き 左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-3.html とつけて保存しましょう 使用する動画は素材 Lesson4 - images フォルダの flash_advan.swf を利用します Flash データを再生する場合のデータの種類は type="application/x-shockwave-flash" となります また Flash データの呼び出しの際は param タグでも swf ファイルの場所を指定する必要があります <param name="src" value="images/flash_ advan.swf">
ブラウザで確認しましょう 1 2 IE のブラウザでは object 要素をローカル環境 ( 自分のパソコン内 ) でプレビューする時に警告文が表示されるようになっています 自分の知らないところで勝手に悪意のあるプログラムが実行されることを防ぐために出てくるセキュリティの一つです 今回は自分で実行した設定ですので実行を許可します 1 ウィンドウ上部に出てくるバーをクリックします 2 セキュリティの警告 ダイアログボックスが表示されますので はい をクリックします HTML ファイルに Flash データを挿入できました 確認が出来たら このファイルを閉じて次のページに進みましょう
YouTube の挿入 YouTube とは 米ネットベンチャー YouTube 社が運営する 動画コンテンツ共有サイトです 会員登録をすることによって誰でも動画ファイルをアップロードして公開することができ そのファイルの閲覧は会員登録をしていないユーザでも無料で閲覧することができるため 非常に多くのユーザーが YouTube 利用しています 今では個人の趣味のみならず企業や政治団体など幅広いジャンルが YouTube を通してメッセージを発信しており WEB サイトを介した情報の発信に欠かせないコンテンツになりつつあります ここでは YouTube に投稿された動画を自分の HTML ファイルに挿入します <html> <head> <title> YouTube の挿入 </title> </head> <body> <p>youtube から動画を挿入します </p> </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き 左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-4.html とつけて保存しましょう 次に Youtube サイトにアクセスします 1 3 Apple 社の YouTube ページにアクセスしてみます ブラウザを開き 下記の URL を入力してください http://www.youtube.com/user/apple#p/u アクセスすると左図のような画面が表示され 自動的に動画が再生されます アクセスするタイミングによって表示される動画は変わります 4 再生が終わると 左図の様な画面が表示されます 2 5 一番下にある < > のマークをクリックします 3 これで今見ている YouTube 動画の <object> のソースが コピーされました
<html> <head> <title> YouTube の挿入 </title> </head> <body> <p>youtube から動画を挿入します </p> <object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube. com/v/rrjhw_phmf4?version=3" /><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube.com/v/ RrJhw_pHMf4?version=3" type="application/ x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="390"></object> </body> </html> 6 先ほど作成したファイルに コピーしたソースを貼りつけましょう メモ帳の メニュー - 編集 - 貼り付け (Ctrl+v mac の場合は command+v) 貼りつけられるソースは動画ごとに違いますので 動画が違う場合は左のソースとは詳細が少し異なります また youtube から取得するソースは XHTML までを想定されていないため <param> タグの末尾のスラッシュのみを追記しましょう 7 貼り付けが済んだら上書き保存します ブラウザで確認しましょう 実行時に左図のような警告文が出る場合があります これも勝手にプログラムが実行されることを防ぐために出てくるセキュリティの一つです OK をクリックしましょう HTML ファイルに YouTube の動画を挿入できました この他 google マップなどの便利なツールもほぼ同様の手順で簡単に利用することが出来ます ぜひ試してみると良いでしょう 確認が出来たら このファイルを閉じて章末課題 4 に進みましょう
Lesson4 章末課題 画像の挿入 ここでは WEB ページのイメージとなる画像を挿入していきましょう 画像の挿入 index.html information.html store.html form.html に画像を挿入します ページに使用される画像データは xhtmlcss_sozai の中の images に準備してあります この images フォルダを作成中の kadai フォルダに移動して使用しましょう ファイルまでのパスは 相対パス で指定します ヒント使用するタグ <img> index.html 完成イメージ 使用する画像と代替テキスト 画像 : hapiness.jpg / 代替テキスト : 洋菓子 スイーツ専門店アドバーン
information.html 完成イメージ 使用する画像と代替テキスト 画像 : logo.gif / 代替テキスト : アドバンスイーツ 画像 : bar1.gif / 代替テキスト : 今月のお勧めスイーツ 画像 : choco.jpg / 代替テキスト : フレーク ド ショコラ 画像 : tarte.jpg / 代替テキスト : 白桃のタルト
store.html 完成イメージ 使用する画像と代替テキスト 画像 : logo.gif / 代替テキスト : アドバンスイーツ 画像 : bar2.gif / 代替テキスト : アクセスマップ 画像 : map1.gif / 代替テキスト : 福岡本店地図 画像 : map2.gif / 代替テキスト : 福岡本店地図
form.html 完成イメージ 使用する画像と代替テキスト 画像 : logo.gif / 代替テキスト : アドバンスイーツ 画像 : bar3.gif / 代替テキスト : お問い合わせフォーム 完成したら上書き保存をして 次の Lesson に進みましょう 完成例を見る場合は xhtmlcss_sozai - lesson4 - 完成例 - Lesson4 課題完成 内のファイルを確認してください