情報スキル活用  第5週 基礎技術-5   その3 : 画像表示.

Slides:



Advertisements
Similar presentations
コンピュータと情報 第 14 回 Word と Excel の連携. ページの設定の変更 ページの設定の変更 印刷領域の余白の設定と 1 行内の文字数と ページ内の行数の変更 印刷領域の余白の設定と 1 行内の文字数と ページ内の行数の変更 段組の仕方 段組の仕方 2 段組の作成の仕方 2 段組の作成の仕方.
Advertisements

1 情報処理基礎 2006 年 7 月 6 日. 2 本日の学習項目 HTML 文書の基礎知識を習得する。 ホームページ・ビルダーの基本的な使 い方を習得する。 ホームページの作成 自己紹介のためのホームページを作成する。
情報処理 A 第 5 回かな? ワードの使い方. 拡張子  ファイルの名前は, “ ファイル名. 拡張子 ” で付け る.  拡張子は,そのファイルを読み込むソフトに影 響される –txt テキストファイル –doc ワードのファイル –xls エクセルのファイル –pdf Acrobat Reader.
BWD06-01 ~ 1 ~ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Webの歴史 –HTML 基礎 今週 について(出席と課題提出) –HTML 画像、ハイパーリンク、文字書式.
Web パブリッシング 1. この授業について. この授業の目標 Web サイトの構築とその維持管理の技 能を身につける –HTML 、 CSS 、( JavaScript ) Web サイトの構築とは –HTML 文書をインターネットに公開するこ と= Web パブリッシング.
静止画ファイル形式 小林 康三.
画像ファイルの形式とデータサイズ.
ファイルの形式.
情報基礎A 情報科学研究科 徳山 豪.
画像展示サイト“Fragments” 『閲覧しやすさ』と『デザイン性』を両立させた Webデザイン
DTMを使った楽曲制作 DTMを扱う職業などの調査
ホームページ作成入門講座 - HTML編 - 1999年6月 Copyright© 1999 Nigata Internet Society
下左近研究室 ゼミ資料 ホームページの作り方(基礎編)
ウェブページ制作の基礎 タグの直接入力によるウェブページの制作 次のスライドへ進んだり,戻ったりしたい時は,右下のボタンをクリック。 次へ.
HTMLの記述と WWWにおける情報公開 遠藤
Digital Network And Communication
ただで使えるソフトウェア ーインストールとお絵かきー
コンピュータ演習Ⅰ 8月7日(日) 1限目 ファイルの種類.
講議資料 コンピュータ プレゼンテーション 講議資料
ネットワーク情報活用 ILC Office / ILP KOBAYASHI Tomoko
ファイルの場所に関して.
徳山 豪 東北大学情報科学研究科 システム情報科学専攻 情報システム評価学分野
CG基礎 日本文理大学 坪倉篤志 <配布資料-04> 先週 @Learnについて(出欠、課題) フォルダの設定の変更について
ファイルの形式.
CG基礎 日本文理大学 坪倉篤志 <配布資料-03> 先週 @Learnについて(出欠、課題) ペイントソフトの基本操作 ペイント、文字入力
心理学情報処理法Ⅰ コンピュータにおけるデータ表現 マルチメディアとコンピュータ.
画像ファイルの形式とデータサイズ.
PowerPoint スライドの HTML化支援ツール epppt version 3
問題設定の迅速化 Quick Quiz Setting
近畿大学理工学部情報学科3年 自然言語処理研究室 小野 実
湘南工科大学 2013年4月23日 プロジェクト実習A アドベンチャーゲームを作ろう 第3回 湘南工科大学情報工学科 准教授 小林 学.
Webページで自己紹介をしよう! 出席番号の席に着席し ユーザ名~user○○ パスワード~pass でログオン
経済学のための情報処理 ホームページの作成.
パソコン同好会のホームページは今回WordPressに変わったのですが 使いづらいとの声が多いので投稿者用の手順書を作ってみました。
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
基礎プログラミング演習 第1回.
ホームページ作成・更新講座 夏のコンピュータ学習会 画像
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
HTTPとHTML 技術領域専攻 3回 中川 晃.
情報コミュニケーション入門b 第10回 Web入門(1)
情報コミュニケーション入門b 第10回 Web入門(1)
情報スキル活用 第7週 制作技術-1 情報の記述と画面のデザイン.
情報スキル活用  第5週 基礎技術-5  その2 : 他のページへのリンク.
画像ファイルの形式とデータサイズ.
制作技術ー3 双方向通信 : CGIシステムと環境変数
情報スキル活用 第8週 制作技術-2 画面の分割.
情報スキル活用 第1週 基礎技術ー1 : URLとWebページの基本.
情報スキル活用  第6週    基礎技術のまとめ  復習.
タグを使ったウェブページ作成 兵庫県立伊丹北高等学校 佐藤 勝彦.
お勧めのリンク集                氏名 学籍番号        課程、専攻 宮城教育大学.
第13 最終課題発表 2009年07月14日(火曜日) 第4時限目 λ11教室
研究テーマ・プレゼン表題 ~第3学年 初回発表用雛型~
湘南工科大学 2013年10月8日 プログラミング基礎1 湘南工科大学情報工学科 准教授 小林 学.
情報スキル活用 第3週 基礎技術ー3 : 学部・学科紹介のページ作成.
湘南工科大学 2013年10月22日 プログラミング基礎1 湘南工科大学情報工学科 准教授 小林 学.
情報スキル活用 第2週 基礎技術ー2 : Webページの基本形.
SFC鴨池スタイル 企画・設計 環境情報学部1年 t12472ms 杉浦 学.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
コンピュータ プレゼンテーション.
コンピュータと情報 第4回 ワードの使い方.
画像のディジタル化 Copyright(C)2003 Yoshihiro Sato All rights reserved.
コンピュータ プレゼンテーション.
画像を貼る 目標:このようなページを作る.
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
基礎技術ー3 : Webページの標準規格について
情報コミュニケーション入門e 第12回 Part1 Web入門(2)
情報スキル活用 第6週 制作技術-1 情報の記述と画面のデザイン.
情報スキル入門 第2週  タッチタイピング.
情報スキル活用 第1週    ガイダンス.
情報スキル活用 第1週 基礎技術ー1 : URLとWebページの基本.
Presentation transcript:

情報スキル活用  第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 内 ① ホームへ   ② 大学紹介へ ③ 学部紹介へ