Microsoft PowerPoint - 第03回目.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - 第03回目.pptx"

かずただやすこ
7 years ago
Views:

1 1 情報リテラシーII ( 樋口担当 ) 3 回目 10/10

2 本日の予定 2 Webページの作成 I.テキストの記述方法 II.ハイパーリンク III.インラインイメージ( 画像 ) IV. 表 V. 課題

3 3 I.テキストの記述方法

4 1. 改行 4 <BR> 終了タグは無い改行していない <title> なすび </title> なすびがいっぱいおいしそうだな~<BR> 食べたいな~ <BR>を付けた場所は改行している

5 2. 段落 5 <P> 段落 </P> 段落の前にスペースを作る <title> なすび </title> <P>なすびがいっぱい</P> <P>おいしそうだな~<BR> 食べたいな~</P> 改行の場合は行間があかない段落の前にスペースを作る ( 行間があく)

6 3. 見出し 6 <H1> <H2> <H3> <H4> <H5> <H6> 大小見出しは太字 <title> なすび </title> <H1> 超特大なすび</H1> <H2> 特大なすび</H2> <H3> 大なすび</H3> <H4> 中なすび</H4> <H5> 小大なすび</H5> <H6> 特小なすび</H6> <P>ノーマルなすび</P>

7 4. 文字のスタイル 7 イタリック( 斜字体 )にする <I> 文書 </I> <title> なすび </title> <P>ノーマルなすび</P> <P><I> 斜めの</I>なすび</P> <I>と</I>で挟んだ範囲がイタリック( 斜字体 )になる

8 4. 文字のスタイル 8 B :Bold( 太字 ) STRONG :Strong( 強調 ) I :Italic( 斜字体 ) EM :Emphasis( 重要 ) CITE :Citation( 引用 ) DFN :Definition( 定義 ) TT :Typewrite( 等幅フォント) CODE :Code(プログラム掲載用 ) S :Strike-through( 取り消し線 ) U :Under( 下線 ) SUP :Superscript( 上付き文字 ) SUB :Subscript( 下付き文字 ) BIG : 標準フォントより1pt 大きい SMALL : 標準フォントより1pt 小さい

:Code(プログラム掲載用 ) S :Strike-through( 取り消し線 ) U :Under( 下線 ) SUP :Superscript(

9 5.ブロックレベル要素とインラインレベル要素 9 日本工業大学情報リテラシーII 汎用的なブロックレベル要素 <title> なすび </title> <DIV> <H1> 初めてのなすび体験 </H1> <P>ある日森の中 <I>なすび</I>を拾った. しかし,それは<EM>くさったなすび</EM> だったので食べることができなかった</P> </DIV> ブロックレベル要素インラインレベル要素

10 6. 汎用的な要素 DIV : 汎用的なブロックレベル要素 SPAN : 汎用的なインラインレベル要素要素のスタイル( 文字大きさ, 色, 種類等 )を設定する時に便利 10 <title> なすび </title> <DIV> <H1> 初めてのなすび体験 </H1> <P>ある日森の中 <SPAN style="color:red">なすび</span>を拾った. しかし,それは <SPAN style="color:blue">くさったなすび</span> だったので食べることができなかった</P> </DIV>

<H1> 初めてのなすび体験 </H1> <P>ある日森の中 <SPAN style="color:red">なすび</span>を拾

11 7. 部分的な文字の色の指定 11 汎用インラインレベル要素 SPAN を利用書式 :<span style= color: 色 > 文書 </span> 色の指定 black : 黒 green : 緑 silver : 銀 lime :ライム gray : 灰 olive :オリーブ white : 白 yellow : 黄 maroon : 栗 navy : 紺 red : 赤 blue : 青 purple : 紫 teal :コバルトブルー fuchsia : 赤紫 aqua : 水その他の色の指定 #rrggbb Red,Green,Blueの強さで指定 (00~ff:16 進数 )

white : 白 yellow : 黄 maroon : 栗 navy : 紺 red : 赤 blue : 青 purple : 紫 teal :コバルトブルー

12 8. 罫線を引く 12 日本工業大学情報リテラシーII <HR> <title> なすび </title> <H1>なすびの種類 </H1> <HR> <H3> 美味しいなすび</H3> <P> 良いにおいがする<BR> 色が黒くてきれい<BR> つやつやでぴかぴか<BR></P> <HR> <H3> 不味いなすび</H3> <P> 腐ったにおいがする<BR> 色がしろっぽい<BR> しわしわで艶が無い<BR></P>

13 9. 特殊文字 13 < : < > : > & : & : ( 著作権 ) : ( 登録商標 ) : (セント) : ( 度 ) «: «( 不等号 ) µ : µ (ミクロン) : ( 中点 ) : ( 否定継続行 ) : (パラグラフ( 節段落 )) ± : ±(プラスマイナス) &pond; : (ポンド)»; :» ( 不等号 ) : ( 章 ) : ( 円 ) 参考 URL <title> 特殊文字 </title> <P> 改行するためには<BR>を書きます</P> <P> 改行するためには<BR>を書きます</P>

: (ポンド)»; :» ( 不等号 ) : ( 章 ) : ( 円 ) 参考 URL http://e-words.jp/p/r-htmlentity.

14 10.マーク付きリスト 14 1 各項目の頭に<LI>を付ける 2リスト全体を<UL>と</UL>で囲む <title> おいしい野菜 </title> <P> 僕の大好きな美味しい野菜 </P> <UL> <LI>なす <LI>レタス <LI>ピーマン <LI>ニンジン </UL>

15 7. 番号付きリスト 15 1 各項目の頭に<LI>を付ける 2リスト全体を<OL>と</OL>で囲む <title> 好きな野菜 </title> <P> 僕の好きな野菜の順番 </P> <OL> <LI>レタス <LI>なす <LI>ピーマン <LI> 玉ねぎ </OL>

16 8. 定義リスト 16 1 定義したい用語の頭に<DI>を付ける 2 用語の説明の頭に<DD>を付ける 3リスト全体を<DL>と</DL>で囲む <title> 野菜と果物の違い </title> <P> 野菜と果物の違い</P> <DL> <DT> 野菜 <DD> 草になる実 <DT> 果物 <DD> 木になる実 </DL>

17 11. 著者の情報 17 <ADDRESS> <title> 野菜と果物の違い </title> <P> 野菜と果物の違い</P> <DL> <DT> 野菜 <DD> 草になる実 <DT> 果物 <DD> 木になる実 </DL> <ADDRESS> <UL> <LI> 日本工業大学なすび </UL> </ADDRESS>

18 18 日本工業大学情報リテラシーII II.ハイパーリンク

19 1.ハイパーリンク 19 ハイパーリンク: 1HTMLの最大の特徴 2 文書中に他の情報へのリンクを持たせる機能記述方法アンカー(anchor)を意味する<a>タグを使用 1<A href="urlの指定 ">リンク部分の文字 </A> リンク先のファイルが別のWebサーバ上にある場合. 2<A href="ファイルの名前 ">リンク部分の文字 </A> リンク先のファイルがページデータと同じWebサーバ上にある場合.

">リンク部分の文字 </A> リンク先のファイルが別のWebサーバ上にある場合.

20 1.ハイパーリンク 20 ( 例 ) <title> おいしい野菜 </title> <P> 僕の大好きな美味しい野菜 </P> <UL> <LI><A href="introduction.html">なす</a> <LI>レタス <LI>ピーマン <LI>ニンジン </UL>

21 21 日本工業大学情報リテラシーII III.インラインイメージ

22 1.インラインイメージ 22 インラインイメージ:ページ内に直接組み込んで表示させる画像タグの書式 :<img src= イメージファイル名 "/> <title> なすの特徴 </title> <P>なすの特徴 </P> <img src="nasu.jpg"/> なすの外観 <UL> <LI> 油を良く吸う <LI> 外は黒いが中は白い <LI> 美味しい </UL> nasu.jpg 終了タグは無いことに注意

23 2. 説明テキストの位置 23 <img align= MIDDLE src="nasu.jpg"/> なすの外観 <img align="top src="nasu.jpg"/> なすの外観

24 3.イメージにリンクを設定する 24 書式 <A href= ファイルの名前 ><img src= イメージの名前 "></A> <title> なすの特徴 </title> <H3>なすの特徴 </H3> <A href="secret.html"> <img align="middle" src="nasu.jpg"/> </A> なすの外観 <UL> <LI> 油を良く吸う <LI> 外は黒いが中は白い <LI> 美味しい </UL> secret.html

25 25 日本工業大学情報リテラシーII IV. 表

26 1. 表作成の基本 26 1セルをTD(Table Data) 要素で指定 2 行をTR(Table Row) 要素で指定 3 全体をTABLE 要素で囲む <TABLE> <TD>セル11 <TD>セル12 <TD> <TD>セル21 <TD>セル22 <TD> <TABLE>

27 2. 具体例 1 27 <title> 表 </title> <TABLE> <TD>セル11<TD>セル12<TD>セル13 </TABLE>

28 2. 具体例 2 28 <title> 表 </title> <TABLE> <TD>セル11<TD>セル12<TD>セル13 <TD>セル21<TD>セル22<TD>セル23 </TABLE>

29 2. 具体例 3 29 <title> 表 </title> <TABLE border="3"> <TD>セル11<TD>セル12<TD>セル13 <TD>セル21<TD>セル22<TD>セル23 </TABLE> Border 属性 : 指定すると表に罫線が入る属性値 : 枠線 ( 外枠 )の太さ(ピクセル数 )

30 3. 見出し 30 TDのかわりにTHを使用ひとつの表に対して先頭行または先頭列のどちらかだけに使用. <title> 表 </title> <TABLE border="3"> <TH> 野菜 <TH> 果物 <TH> 魚 <TD>レタス<TD> 桃 <TD> 鯖 </TABLE>

31 4.セルの結合 31 TD 要素,TH 要素に以下の属性を設定 (1) 横のセル同士を結合する場合 :colspan= 結合するセル数 (2) 縦のセル同士を結合する場合 :rowspan= 結合するセル数 <title> 表 </title> <TABLE border="3"> <TH colspan="3"> 野菜 <TD>レタス<TD>なす<TD>ピーマン </TABLE>

32 4.セルの結合 2 32 <title> 表 </title> <TABLE border="3"> <TH rowspan="3"> 野菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>

33 5.キャプション( 表題 )を付ける 33 CAPTION 要素を使用 <title> 表 </title> <TABLE border="3"> <CAPTION> 好きな食べ物 </CAPTION> <TH rowspan="3"> 野菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>

34 6. 表の横幅の設定 34 TABLE 要素でwidth 属性を指定書式 :<TABLE width= 横幅 > 横幅 :ピクセル数あるいはウィンドウに対する割合 (%) <title> 表 </title> <TABLE border="3" width="100%"> <CAPTION> 好きな食べ物 </CAPTION> <TH rowspan="3"> 野菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>

35 6. 文字位置の設定 35 align 属性 : 横方向の位置 (left,center,right) valign 属性 : 縦方向の位置 (top,middle,bottom) <title> 表 </title> <TABLE BORDER="3"> <TH></TH> <TH> 左揃え</TH> <TH>センタリング</TH> <TH> 右揃え</TH> <TH> 上 </TH> <TD ALIGN="LEFT" VALIGN="TOP"><IMG SRC="cube.gif"></TD> <TD ALIGN="CENTER" VALIGN="TOP"><IMG SRC="cube.gif"></TD> <TD ALIGN="RIGHT" VALIGN="TOP"><IMG SRC="cube.gif"></TD> <TH> 中央 </TH> <TD ALIGN="LEFT" VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD> <TD ALIGN="CENTER" VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD> <TD ALIGN="RIGHT" VALIGN="MIDDLE"><IMG SRC="cube.gif"></TD> <TH> 下 </TH> <TD ALIGN="LEFT" VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD> <TD ALIGN="CENTER" VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD> <TD ALIGN="RIGHT" VALIGN="BOTTOM"><IMG SRC="cube.gif"></TD> </TABLE>

36 36 日本工業大学情報リテラシーII V. 課題

37 1. 課題 37 自分のWebページの全世界への公開 1 次の要件満たす自分のWebページのデータファイルの作成 2データファイルをWebサーバ(sstu.nit.ac.jp)にUP 提出方法 : 自分のホームページを見れるようにすること

38 2. 要件 1 38 要件 1: 下記の少なくとも3ページ以上の作成 1トップページ(index.html) 2 自己紹介ページ(introduction.html) 3 第 3ページ目以降のファイル名は自由ただし日本語ファイル名は利用不可要件 2:ページのタイトルをつけること自由なものでよいが,あまり受けをねらわない普通のもの要件 3:トップページの説明文には改行を入れること要件 4:トップページの説明文に色の違う文字が1 文字以上あること要件 5:トップページの説明文に斜字が1 文字以上あること要件 6:トップページに罫線があること要件 7:トップページに番号付きのリストがあること

39 2. 要件 2 39 要件 8:トップページの最後に著者のリストがあること要件 9:トップページに自己紹介ページへのリンクを含めること要件 10: インライン画像を一個以上挿入し, 説明文を付けること要件 11: インライン画像にリンクを含めること要件 12: 自己紹介ページにもH1レベルの見出しを付ける要件 13: 自己紹介ページにトップページと別のタイトルを付けること. 要件 14: 自己紹介は表 (テーブル)を用いて作成すること要件 15: 自己紹介の表は罫線をつけること要件 16: 自己紹介の表にはセルの結合があること

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋口担当 ) 4 回目 10/17 本日の予定 2 Webページの作成 ( 続き) I.スタイルシート II.レイアウト III. 課題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文書のスタイルの設定が書かれているデータ CSS:スタイルシートの書き方 ( 言語 )の一つ Cascading