社会と情報

第3章第2節
ネットワークを活用した
情報の収集・発信
4 文書による情報開示
情報Cプレゼン用資料（座学33）
担当早苗雅史
1
４文書による情報開示
１文書の枠組みとスタイル
 本や雑誌のスタイル
見出し・本文，図や写真の説明文などに，それぞ
れ固有のスタイルを持っている
見出し
本文
図
2
４文書による情報開示
２ＷＹＳＩＷＹＧとマークアップ
 文書の作成


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">
3
４文書による情報開示
３基本的なウエブページの作成方法
 HTMLソース（ソース）
 HTMLの基本的な書式（問１）
<HTML>
タグ
←HTMLの開始
<HEAD>
←HEADの開始
タイトルなど，全体に関係するヘッダ情報を入力する。
</HEAD>
←HEADの終了
<BODY>
←BODYの開始
表示するテキストや画像，リンク情報など本文を入力する。
</BODY>
</HTML>
←BODYの終了
←HTMLの終了
4
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> 他のページへのリンク
5
４文書による情報開示
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ファイルの終了
6
４文書による情報開示
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>
7
４文書による情報開示
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>
8
４文書による情報開示
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>
9
４文書による情報開示
HTMLソースとタグ⑥
表の作成・結合（問３）
境界線の指定
ROWSPAN
COLSPAN
<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>
10
</TABLE>
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/”
WWWへのリンクの設定 target=“_blank”>数学とソフトウエア</A>
</P>・・・<P>
<A href="mailto:[email protected]?Subject=早
メール送信先の設定
苗先生へ">
<IMG src="mail.gif" width="90" height="22" 11
border="0" hspace="10"></A></P>
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>
12

Download Report