情報スキル活用　　第５週 基礎技術－５ 　　その３　：　画像表示.

Presentation on theme: "情報スキル活用　　第５週 基礎技術－５ 　　その３　：　画像表示."— Presentation transcript:

1 情報スキル活用　　第５週 基礎技術－５ 　　その３　：　画像表示

2 ｉｍｇ（イメージ）要素による画像表示 alt=“画像の説明文” align="位置" >
<img src=“表示する画像のファイル名” alt=“画像の説明文” align="位置" > ① ② ③ ⑤ ④ ①　img image 画像表示タグ ②　src source 表示する画像のﾌｧｲﾙ名 ③　alt alternate 画像ﾌｧｲﾙの説明 　　　　　表示された画像にマウスポインタを合わせれば、その画像の説明文が表示される。 ④　align 画像の表示位置 　　　　　画像の右側または左側に文章を表示したいときには、alignを使用する。 ⑤　> img終了

3 静止画の表現形式のいろいろ 静止画を表現するファイル形式には多くのものがあります。
ＧＩＦ形式 Graphics Interchange Format 　　（ジフ） 拡張子 .gif ＪＰＥＧ形式 Joint Photographic Experts Group 　　（ジェイペグ） 拡張子 .jpg または .jpeg PNG形式 Portable Network Graphics BMP形式 MS Windows Device Independent Bitmap

4 各ページに画像を表示 講義用Webの講義資料欄に画像ファイルを掲載しています。 フォルダ「kiso」内に画像ファイルがあるものとします。
(1) <img src="CU.jpg" alt="建物と通学風景" /> このタグに続いて記述された文章を画像の下側から表示 (2) <img src="P.jpg" alt="現代教育学部の建物" align="left" /> 画面の左側に画像を表示し、右側に続く文章を表示 (3) <img src="PJ_1.jpg" alt="器楽演奏室" align="right" /> 画面の右側に画像を表示し、左側に続く文章を表示 (4) <img src="PJ_2.jpg" alt="理科実験室" align="left" />

5 大学紹介のページに画像表示 CU.html を使ってimgタグを説明します。 ←画像の右側に表示

6 表示された画像

7 できあがったファイル ① トップページ index.html index.css ② 大学紹介 CU.html CU.css
③　学部紹介 P.html P.css ④　学科紹介 PJ.html PJ.css これらのファイルをＷｅｂサーバーへアップロードします。 場所　：　

8 基礎技術の仕上げ ◎で示した各ページの最終行に、①から③で示したページへのリンクを作りなさい。 ◎ CU.html 内
①　ホームへ ②　学部紹介へ ③　学科紹介へ ◎ P.html 内 ①　ホームへ ②　大学紹介へ ③　学科紹介へ ◎ PJ.html 内 ①　ホームへ 　 ②　大学紹介へ ③　学部紹介へ