コンピュータ プレゼンテーション

画像を貼る
目標:このようなページを作る
画像を貼る
GIF, JPEG 形式の画像の貼り付け可能
 GIF (Graphics Interchange Format ジフ)
 JPEG (Joint Photographics Expert Group ジェイペグ)
お絵書きソフトなどを用いて自分で作成
スキャナやデジタルカメラなどを利用
フリーや市販の画材集を利用
画像を貼る
画像を貼るタグ <IMG>
参照する画像の属性 src
<IMG src="AN00018A.gif">
この画像は以下のところにあります。コピーして
HTMLファイルと同じフォルダに置きます。
Machintosh HD
└Applications
└Microsoft Office X
└Clipart
└Webart
練習5
以下のような表示になるようにHTMLファイルを作成
し、rensyu5.htmlというファイル名で保存しなさい。
答え
<HTML>
<HEAD>
<TITLE>
My Homepage
</TITLE>
</HEAD>
<BODY>
<IMG src="AN00018A.gif">
</BODY>
</HTML>
便利なタグの紹介
目標:このようなページを作る
レイアウトに関するタグ
段落:<P>~</P>
水平線:<HR>
箇条書き:
<UL>
<LI>項目1
<LI>項目2
</UL>
テーブル
<TABLE>
<TR> <TD>項目1</TD><TD>項目2</TD> </TR>
<TR> <TD>項目3</TD><TD>項目4</TD> </TR>
</TABLE>
border属性
枠線の太さを数値で指定
<TABLE border=3>
テーブル
 セルの結合及びセル内の位置指定
<TD>の属性
• rowspan=n 縦方向に項目 n 個分連結。
• colspan=n 横方向に項目 n 個分連結。
• align=... 項目の中身の表示位置を指定。
– right , left , center
練習6
以下のような表示になるようにHTMLファイルを作成
し、rensyu6.htmlというファイル名で保存しなさい。
答え
<HTML>
<BODY>
<TABLE border>
<TR><TD align=center>国</TD>
<TD align=center>支店</TD>
<TD align=center>売上</TD></TR>
<TR><TD rowspan=3>日本</TD><TD>東京</TD>
<TD align=right>1,500</TD></TR>
<TR><TD>名古屋</TD><TD align=right>800</TD></TR>
<TR><TD>大阪</TD><TD align=right>1,300</TD></TR>
</TABLE>
</BODY>
</HTML>
練習7
以下のような表示になるようにHTMLファイルを作成
し、index.htmlというファイル名で保存しなさい。箇
条書きの各項目をクリックすると、それぞれのページ
が表示されるようにリンクを張ること。また、全ての
ファイルをサーバにアップロードしなさい。
答え
<HTML>
<HEAD><TITLE>My Homepage</TITLE></HEAD>
<BODY>
目次
<UL>
<LI><A href="rensyu1.html">練習1</A>
<LI><A href="rensyu2.html">練習2</A>
<LI><A href="rensyu4.html">練習4</A>
<LI><A href="rensyu5.html">練習5</A>
<LI><A href="rensyu6.html">練習6</A>
</UL>
</BODY>
</HTML>
まとめ
 ホームページの作成