画像の確認ブラウザで確認しましょう写真が表示されましたファイルは引き続き使用します画像にリンク挿入画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます画像

Size: px

Start display at page:

Download "画像の確認ブラウザで確認しましょう写真が表示されましたファイルは引き続き使用します画像にリンク挿入画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます画像"

えいじろうほがり
5 years ago
Views:

1 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> <img src = "images/pink.jpg" alt=" チューリップ " / > 長崎の旅行で撮影したピンク色のチューリップですとても綺麗で爽やかです </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-1.html とつけて保存しましょうチューリップの画像は素材 Lesson4 - images フォルダの pink.jpg を利用します

画像の確認ブラウザで確認しましょう写真が表示されましたファイルは引き続き使用します画像にリンク挿入画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます画像へのリンク設定 <html> <head> <title> 画像へのリンク </title>

2 画像の確認ブラウザで確認しましょう写真が表示されましたファイルは引き続き使用します画像にリンク挿入画像にリンクを指定する場合は <img> タグをアンカータグ <a> で囲います通常のリンクと同じようにアンカータグに href="" や target="" などの属性を指定できます画像へのリンク設定 <html> <head> <title> 画像へのリンク </title> </head> <body> <a href=" target="_blank"> <img src="images/pink.jpg" alt=" チューリップ " / ></a> 長崎の旅行で撮影したピンク色のチューリップですとても綺麗で爽やかです ハウステンボスへ行ってきました画像をクリックしてください </body> </html> 1 左記の赤字のコードを追記編集しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-2.html とつけて保存しましょう今回は外部サイトを開くため別のウィンドウで閲覧できるように属性に target="_blank" を設定しています

0 などのブラウザでは画像の上にマウスをのせるとその画像のポップアップには alt の内容が表示されていましたが IE8 やその他進化したブラウザでは alt 属性では内容がポップアップされなくなりました最新のブラウザでポップアップを表示させるためには title

3 段落タグの入力ブラウザで確認しましょう画像をクリックします別ウィンドウでハウステンボスのサイトが表示されました alt 属性と title 属性 img タグの属性には alt と似た属性で title という属性があります alt とは? 画像を表示することができない環境の人に画像の変わりに表示する代替テキスト ( 視覚障害者向けの web ページ読み上げソフトの画像部分での読み上げに使われたりもします ) title とは? 画像に対しての説明や補足説明 IE7 や Firefox2.0 などのブラウザでは画像の上にマウスをのせるとその画像のポップアップには alt の内容が表示されていましたが IE8 やその他進化したブラウザでは alt 属性では内容がポップアップされなくなりました最新のブラウザでポップアップを表示させるためには title 属性を使用する必要があります画像が表示できない時に対応する alt に比べ画像の補足説明的な位置づけで扱われる title は SEO 的な効果は低いと言われており WEB ページとって重要であるのは alt 属性と考えられていますただしポップアップを表示させることで補足説明が出ればユーザーにとって分かりやすい作りになりますので手間ではありますが両方の属性を使用するのがもっとも効果的だと言えます

4 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> flash サンプル <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">

自分の知らないところで勝手に悪意のあるプログラムが実行されることを防ぐために出てくるセキュリティの一つです

5 ブラウザで確認しましょう 1 2 IE のブラウザでは object 要素をローカル環境 ( 自分のパソコン内 ) でプレビューする時に警告文が表示されるようになっています自分の知らないところで勝手に悪意のあるプログラムが実行されることを防ぐために出てくるセキュリティの一つです今回は自分で実行した設定ですので実行を許可します 1 ウィンドウ上部に出てくるバーをクリックします 2 セキュリティの警告ダイアログボックスが表示されますのではいをクリックします HTML ファイルに Flash データを挿入できました確認が出来たらこのファイルを閉じて次のページに進みましょう

YouTube の挿入 YouTube とは米ネットベンチャー YouTube 社が運営する動画コンテンツ共有サイトです会員登録をすることによって誰でも動画ファイルをアップロードして公開することができそのファイルの閲覧は会員登録をしていないユーザでも無料で閲覧することができるため非常に多くのユーザーが YouTube 利用しています

<p>youtube から動画を挿入します </p> </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-4.

6 YouTube の挿入 YouTube とは米ネットベンチャー YouTube 社が運営する動画コンテンツ共有サイトです会員登録をすることによって誰でも動画ファイルをアップロードして公開することができそのファイルの閲覧は会員登録をしていないユーザでも無料で閲覧することができるため非常に多くのユーザーが YouTube 利用しています今では個人の趣味のみならず企業や政治団体など幅広いジャンルが YouTube を通してメッセージを発信しており WEB サイトを介した情報の発信に欠かせないコンテンツになりつつありますここでは YouTube に投稿された動画を自分の HTML ファイルに挿入します <html> <head> <title> YouTube の挿入 </title> </head> <body> youtube から動画を挿入します </body> </html> 新規メモ帳からファイルを作成する 1 新規にメモ帳を開き左記のコードを入力しましょう 2 入力が済んだら Lesson4 フォルダにファイル名 Lesson4-1-4.html とつけて保存しましょう次に Youtube サイトにアクセスします 1 3 Apple 社の YouTube ページにアクセスしてみますブラウザを開き下記の URL を入力してくださいアクセスすると左図のような画面が表示され自動的に動画が再生されますアクセスするタイミングによって表示される動画は変わります 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" type="application/ x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="390"></object> </body> </html> 6 先ほど作成したファイルにコピーしたソースを貼りつけましょうメモ帳のメニュー - 編集 -

7 <html> <head> <title> YouTube の挿入 </title> </head> <body> youtube から動画を挿入します <object style="height: 390px; width: 640px"><param name="movie" value=" com/v/rrjhw_phmf4?version=3" /><param name="allowfullscreen" value="true"><param name="allowscriptaccess" value="always" /><embed src=" 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 に進みましょう

8 Lesson4 章末課題画像の挿入ここでは WEB ページのイメージとなる画像を挿入していきましょう画像の挿入 index.html information.html store.html form.html に画像を挿入しますページに使用される画像データは xhtmlcss_sozai の中の images に準備してありますこの images フォルダを作成中の kadai フォルダに移動して使用しましょうファイルまでのパスは相対パスで指定しますヒント使用するタグ <img> index.html 完成イメージ使用する画像と代替テキスト画像 : hapiness.jpg / 代替テキスト : 洋菓子スイーツ専門店アドバーン

9 information.html 完成イメージ使用する画像と代替テキスト画像 : logo.gif / 代替テキスト : アドバンスイーツ画像 : bar1.gif / 代替テキスト : 今月のお勧めスイーツ画像 : choco.jpg / 代替テキスト : フレークドショコラ画像 : tarte.jpg / 代替テキスト : 白桃のタルト

10 store.html 完成イメージ使用する画像と代替テキスト画像 : logo.gif / 代替テキスト : アドバンスイーツ画像 : bar2.gif / 代替テキスト : アクセスマップ画像 : map1.gif / 代替テキスト : 福岡本店地図画像 : map2.gif / 代替テキスト : 福岡本店地図

11 form.html 完成イメージ使用する画像と代替テキスト画像 : logo.gif / 代替テキスト : アドバンスイーツ画像 : bar3.gif / 代替テキスト : お問い合わせフォーム完成したら上書き保存をして次の Lesson に進みましょう完成例を見る場合は xhtmlcss_sozai - lesson4 - 完成例 - Lesson4 課題完成内のファイルを確認してください

2 COPYRIGHT TempNate. ALL RIGHTS RESERVED.

Crescent Eve ホームページ編集ソフトの使い方マニュアル 1 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 2 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 3 COPYRIGHT TempNate. ALL RIGHTS RESERVED. 4 COPYRIGHT TempNate. ALL RIGHTS RESERVED.