Download presentation
Presentation is loading. Please wait.
1
コンピュータ プレゼンテーション
2
ホームページの作成 13.1 使用頻度の高いタグの紹介
3
13.1.1ハイパーリンク 目標：ハイパーリンクを張る クリックすると
4
13.1.1ハイパーリンク リンクを張るタグ <A>～</A> 参照するアドレスの属性 href
「名商大」という部分をクリックすると、 のページが開くように設定する場合 <A href=” ”> 名商大 </A> ジャンプ先アドレス クリックする文字列
5
練習4 以下のように「名商大」という文字をクリックすると、名商大のホームページが開くようにHTMLファイルを作成し、rensyu4.htmlというファイル名で保存しなさい。
6
答え <HTML> <HEAD> <TITLE> My Homepage </TITLE>
<BODY> <A href=" </BODY> </HTML>
7
画像を貼る 目標：このようなページを作る
8
13.1.2 画像を貼る GIF, JPEG 形式の画像の貼り付け可能 お絵書きソフトなどを用いて自分で作成
GIF (Graphics Interchange Format ジフ) JPEG (Joint Photographics Expert Group ジェイペグ) お絵書きソフトなどを用いて自分で作成 スキャナやデジタルカメラなどを利用 フリーや市販の画材集を利用
9
13.1.2 画像を貼る 画像を貼るタグ <IMG> 参照する画像の属性 src
<IMG src="AN00018A.gif"> この画像は以下のところにあります。コピーしてHTMLファイルと同じフォルダに置きます。 Machintosh HD └Applications └Microsoft Office X └Clipart └Webart
10
練習5 以下のような表示になるようにHTMLファイルを作成し、rensyu5.htmlというファイル名で保存しなさい。
11
答え <HTML> <HEAD> <TITLE> My Homepage </TITLE>
<BODY> <IMG src="AN00018A.gif"> </BODY> </HTML>
12
13.2 便利なタグの紹介 目標：このようなページを作る
13
13.2.1 文字の装飾 太文字：<B>～</B> 斜体文字：<I>～</I>
字の大きさ:<FONT size=4> ～</FONT> サイズには１～７の値を指定 字の色：<FONT color=red> 見出し：<H1>～</H1> 数値には１から６を指定
14
13.2.2 レイアウトに関するタグ 段落：<P>～</P> 水平線：<HR> 箇条書き：
<UL> <LI>項目1 <LI>項目2 </UL>
15
13.2.3 テーブル border属性 枠線の太さを数値で指定 <TABLE>
<TR> <TD>項目1</TD><TD>項目2</TD> </TR> <TR> <TD>項目3</TD><TD>項目4</TD> </TR> </TABLE> border属性 枠線の太さを数値で指定 <TABLE border=3>
16
13.2.3 テーブル セルの結合及びセル内の位置指定 <TD>の属性 rowspan=n 縦方向に項目 n 個分連結。
colspan=n 横方向に項目 n 個分連結。 align=... 項目の中身の表示位置を指定。 right , left , center
17
練習6 以下のような表示になるようにHTMLファイルを作成し、rensyu6.htmlというファイル名で保存しなさい。
18
答え <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>
19
練習7 以下のような表示になるようにHTMLファイルを作成し、index.htmlというファイル名で保存しなさい。箇条書きの各項目をクリックすると、それぞれのページが表示されるようにリンクを張ること。また、全てのファイルをサーバにアップロードしなさい。
20
答え <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>
21
まとめ ホームページの作成
Similar presentations
