情報スキル活用 第5週 基礎技術-5 その3 : 画像表示
img(イメージ)要素による画像表示 alt=“画像の説明文” align="位置" > <img src=“表示する画像のファイル名” alt=“画像の説明文” align="位置" > ① ② ③ ⑤ ④ ① img image 画像表示タグ ② src source 表示する画像のファイル名 ③ alt alternate 画像ファイルの説明 表示された画像にマウスポインタを合わせれば、その画像の説明文が表示される。 ④ align 画像の表示位置 画像の右側または左側に文章を表示したいときには、alignを使用する。 ⑤ > img終了
静止画の表現形式のいろいろ 静止画を表現するファイル形式には多くのものがあります。 GIF形式 Graphics Interchange Format (ジフ) 拡張子 .gif JPEG形式 Joint Photographic Experts Group (ジェイペグ) 拡張子 .jpg または .jpeg PNG形式 Portable Network Graphics BMP形式 MS Windows Device Independent Bitmap
各ページに画像を表示 講義用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" />
大学紹介のページに画像表示 CU.html を使ってimgタグを説明します。 ←画像の右側に表示
表示された画像
できあがったファイル ① トップページ index.html index.css ② 大学紹介 CU.html CU.css ③ 学部紹介 P.html P.css ④ 学科紹介 PJ.html PJ.css これらのファイルをWebサーバーへアップロードします。 場所 : www.isc.chubu.ac.jp/学籍番号/kiso/
基礎技術の仕上げ ◎で示した各ページの最終行に、①から③で示したページへのリンクを作りなさい。 ◎ CU.html 内 ① ホームへ ② 学部紹介へ ③ 学科紹介へ ◎ P.html 内 ① ホームへ ② 大学紹介へ ③ 学科紹介へ ◎ PJ.html 内 ① ホームへ ② 大学紹介へ ③ 学部紹介へ