第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示 第3章 第2節 ネットワークを活用した情報の収集・発信 第3章 第2節 ネットワークを活用した 情報の収集・発信 4 文書による情報開示 情報Cプレゼン用資料（座学33） 担当 早苗雅史 C33
１ 文書の枠組みとスタイル 本や雑誌のスタイル 見出し・本文，図や写真の説明文などに，それぞれ固有のスタイルを持っている ４ 文書による情報開示 １ 文書の枠組みとスタイル 本や雑誌のスタイル 見出し・本文，図や写真の説明文などに，それぞれ固有のスタイルを持っている 見出 し 本文 図
２ ＷＹＳＩＷＹＧとマークアップ 文書の作成 Webページ ⇒ HTML ４ 文書による情報開示 ２ ＷＹＳＩＷＹＧとマークアップ 文書の作成 WYSIWYG（What You See Is What You Get） マークアップ方式 Webページ ⇒ HTML WYSIWYG マークアップ <DIV style="width : 383px;height : 220px;top : 122px;left : 81px; position : absolute; z-index : 2; visibility : visible; " id="Layer2">
３ 基本的なウエブページの作成方法 HTMLソース（ソース） HTMLの基本的な書式（問１） タグ ４ 文書による情報開示 ４ 文書による情報開示 ３ 基本的なウエブページの作成方法 HTMLソース（ソース） HTMLの基本的な書式（問１） タグ <HTML> ←HTMLの開始 </HTML> ←HTMLの終了 <HEAD> ←HEADの開始 </HEAD> ←HEADの終了 タイトルなど，全体に関係するヘッダ情報を入力する。 <BODY> ←BODYの開始 </BODY> ←BODYの終了 表示するテキストや画像，リンク情報など本文を入力する。
HTMLソースとタグ① 基本的なタグ （問２） ４ 文書による情報開示 HTMLソースとタグ① 基本的なタグ （問２） <P> 段落変え（1行空ける） <BR> 改行（1行空けない） <Hn></Hn> 見出し文字（n=1最大～n=6最小） <FONT SIZE=“n“></FONT> フォントのサイズ <B></B> 太字 <UL> <LI> </UL> 番号なしリスト <IMG SRC="画像ファイル名"> 画像の表示 <HR WIDTH="n"> 線の長さをピクセルで指定 <A HREF="URL">テキスト</A> 他のページへのリンク
HTMLソースとタグ② テキストの表示 （問３） ４ 文書による情報開示 HTMLソースとタグ② テキストの表示 （問３） <HTML> <HEAD> <TITLE>インターネット社会の光と影</TITLE> </HEAD> <BODY bgcolor="#ffffff"> <H2 align="center">インターネット社会の光と影</H2> <H3><FONT color="#cc0000"> ■インターネットの特徴</FONT></H3> <BLOCKQUOTE> 私たちはさまざまな情報を利用しています。テレビや新聞などの<B><FONT color="#ff0000">メディア</FONT></B>では，情報は放送局や新聞社から私たちへ一方向へ流されます。・・・</BLOCKQUOTE> </BODY> </HTML> HTMLファイルの開始 ヘッダ情報 タイトル 文字位置 見出し 文字色 HTMLファイルの終了
HTMLソースとタグ③ リスト，水平線，インデント（問３） ４ 文書による情報開示 HTMLソースとタグ③ リスト，水平線，インデント（問３） <H3><FONT color="#cc0000">■<A name="LABEL_1_3">インターネットの「影」</A></FONT></H3> <BLOCKQUOTE> 一方，インターネットには<U>「影」を落とす一面</U>もあります。</BLOCKQUOTE> <BLOCKQUOTE> <UL type="square"> <LI>個人情報の流出 <LI>著作権や肖像権の侵害 ・・・ </UL> </BLOCKQUOTE> <HR align="center" width="90%" size="4" noshade> <H3><FONT color="#0000ff">●考えよう</FONT></H3> インデント 番号無しリスト 項目 水平線 位置 長さ サイズ
HTMLソースとタグ④ 背景，画像の挿入と文字位置（問３） ４ 文書による情報開示 HTMLソースとタグ④ 背景，画像の挿入と文字位置（問３） <BODY background="back_01.gif"> <H2 align="center">情報の信頼性</H2> <H3> <FONT color="#cc0000"> <IMG src="mark001.gif" width="19" height="19" border="0" hspace="5"> メディアによる情報の差</FONT></H3> <BLOCKQUOTE> 私たちは，書籍・雑誌・新聞・テレビ・インターネットなどのメディアから，毎日様々な情報を手に入れる。・・・</BLOCKQUOTE> <P align="center"> <IMG src=“Img001.gif” width=“105” height=“150” border=“0” align=“top”> <IMG src=“Img002.gif” width=“150” height=“150” border=“0” align=“top”> <FONT color="#ff0000">さまざまなメディア</FONT></P> 背景画像 画像の挿入 左右余白 幅，高さ 境界線 文字位置の指定
HTMLソースとタグ⑤ 左右寄せと回り込みのカット（問３） ４ 文書による情報開示 HTMLソースとタグ⑤ 左右寄せと回り込みのカット（問３） <H3><FONT color="#cc0000"> <IMG src="mark001.gif" border="0" hspace="5"> インターネット上の情報</FONT></H3> <BLOCKQUOTE> <IMG src=“Img003.gif” border=“0” align=“right” hspace=“10”> 私たちはインターネットを使って，必要な情報を手に入れることができる。・・・</BLOCKQUOTE> <BR clear="right"> <H3><FONT color="#cc0000"><IMG src="mark001.gif" border="0" hspace="5"><A name="LABEL_2_3">詳細な情報を得るには</A></FONT></H3> <BLOCKQUOTE> 詳細な情報を得るには，次のような工夫が考えられる。<BR> <OL> <LI>収集したい情報を専門に扱っている団体の Webページから情報を収集する。 ・・・ </OL></BLOCKQUOTE> 画像の右寄せ 上下の余白 回り込みのカット
HTMLソースとタグ⑥ 表の作成・結合 （問３） ４ 文書による情報開示 HTMLソースとタグ⑥ 表の作成・結合 （問３） 境界線の指定 <TABLE border=“1”> <CAPTION>知的所有権の分類</CAPTION> <TBODY> <TR align=“center”> <TD width=“120” rowspan=“6“ bgcolor=”#ffff80“>知的所有権</TD> <TD width=”120” rowspan=“4” bgcolor=“#80ffff”>工業所有権</TD> <TD width=“150” bgcolor=“#ffffff”>特許</TD> </TR> <TR align=“center”> <TD width=“150” bgcolor=“#ffffff”>実用新案権</TD> </TR> ・・・ <TR align=“center”> <TD width=“120” rowspan=“2“ bgcolor=”#00ff80”>著作権</TD> <TD width=“150“ bgcolor=”#ffffff”>著作者人格権</TD> ・・・ </TBODY> </TABLE> テーブルの作成 表題 文字位置 行の設定 背景色 データセル 縦またがり数 幅 COLSPAN ROWSPAN
HTMLソースとタグ⑦ リンク （問３） ４ 文書による情報開示 ４ 文書による情報開示 HTMLソースとタグ⑦ リンク （問３） <H2><FONT color=“#ff0000”> ■CONTENTS■</FONT></H2> <P><IMG src=“mark003.gif” width=“16” height=“16” border=“0” hspace=“5”> <A href=“page_1.htm” target=“_blank”>インターネット社会の光と影</A></P> <UL> <LI><A href=“page_1.htm#LABEL_1_1” target=“_blank”>インターネットの特徴</A> ・・・ </UL> <H2><FONT color=“#ff0000”>■LINK■</FONT></H2> <P> <IMG src=“mark003.gif” width=“16” height=“16” border=“0” hspace=“5”> <A href=“http://www.nikonet.or.jp/spring/sanae/” target=“_blank”>数学とソフトウエア</A> </P>・・・<P> <A href="mailto:sunny@nikonet.or.jp?Subject=早苗先生へ"> <IMG src="mail.gif" width="90" height="22" border="0" hspace="10"></A></P> ターゲット リンクの設定 ラベル付きリンクの設定 WWWへのリンクの設定 メール送信先の設定
HTMLソースとタグ⑧ フレーム （問３） ４ 文書による情報開示 ４ 文書による情報開示 HTMLソースとタグ⑧ フレーム （問３） フレームの設定 <FRAMESET cols="300,*" frameborder="NO" border="0"> <FRAME src="contents.htm" name="contents" noresize scrolling="AUTO"> <FRAME src="top.htm" name="main"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> フレームの幅 フレームの境界線 フレームの属性の設定 ファイルの指定 フレーム名 フレーム未対応ブラウザへのコメント