1 情 報 リテラシーII ( 樋 口 担 当 ) 3 回 目 10/10
本 日 の 予 定 2 Webページの 作 成 I.テキストの 記 述 方 法 II.ハイパーリンク III.インラインイメージ( 画 像 ) IV. 表 V. 課 題
3 I.テキストの 記 述 方 法
1. 改 行 4 <BR> 終 了 タグは 無 い 改 行 していない <title> なすび </title> なすびがいっぱい おいしそうだな~<BR> 食 べたいな~ <BR>を 付 けた 場 所 は 改 行 している
2. 段 落 5 <P> 段 落 </P> 段 落 の 前 にスペースを 作 る <title> なすび </title> <P>なすびがいっぱい</P> <P>おいしそうだな~<BR> 食 べたいな~</P> 改 行 の 場 合 は 行 間 があかない 段 落 の 前 にスペースを 作 る ( 行 間 があく)
3. 見 出 し 6 <H1> <H2> <H3> <H4> <H5> <H6> 大 小 見 出 しは 太 字 <title> なすび </title> <H1> 超 特 大 なすび</H1> <H2> 特 大 なすび</H2> <H3> 大 なすび</H3> <H4> 中 なすび</H4> <H5> 小 大 なすび</H5> <H6> 特 小 なすび</H6> <P>ノーマルなすび</P>
4. 文 字 のスタイル 7 イタリック( 斜 字 体 )にする <I> 文 書 </I> <title> なすび </title> <P>ノーマルなすび</P> <P><I> 斜 めの</I>なすび</P> <I>と</I>で 挟 んだ 範 囲 がイタリック( 斜 字 体 )になる
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 小 さい
5.ブロックレベル 要 素 とインラインレベル 要 素 9 日 本 工 業 大 学 情 報 リテラシーII 汎 用 的 なブロックレベル 要 素 <title> なすび </title> <DIV> <H1> 初 めてのなすび 体 験 </H1> <P>ある 日 森 の 中 <I>なすび</I>を 拾 った. しかし,それは<EM>くさったなすび</EM> だったので 食 べることができなかった</P> </DIV> ブロックレベル 要 素 インラインレベル 要 素
6. 汎 用 的 な 要 素 DIV : 汎 用 的 なブロックレベル 要 素 SPAN : 汎 用 的 なインラインレベル 要 素 要 素 のスタイル( 文 字 大 きさ, 色, 種 類 等 )を 設 定 する 時 に 便 利 10 <title> なすび </title> <DIV> <H1> 初 めてのなすび 体 験 </H1> <P>ある 日 森 の 中 <SPAN style="color:red">なすび</span>を 拾 った. しかし,それは <SPAN style="color:blue">くさったなすび</span> だったので 食 べることができなかった</P> </DIV>
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 進 数 )
8. 罫 線 を 引 く 12 日 本 工 業 大 学 情 報 リテラシーII <HR> <title> なすび </title> <H1>なすびの 種 類 </H1> <HR> <H3> 美 味 しいなすび</H3> <P> 良 いにおいがする<BR> 色 が 黒 くてきれい<BR> つやつやでぴかぴか<BR></P> <HR> <H3> 不 味 いなすび</H3> <P> 腐 ったにおいがする<BR> 色 がしろっぽい<BR> しわしわで 艶 が 無 い<BR></P>
9. 特 殊 文 字 13 < : < > : > & : & : ( 著 作 権 ) : ( 登 録 商 標 ) : (セント) : ( 度 ) «: «( 不 等 号 ) µ : µ (ミクロン) : ( 中 点 ) : ( 否 定 継 続 行 ) : (パラグラフ( 節 段 落 )) ± : ±(プラス マイナス) &pond; : (ポンド)»; :» ( 不 等 号 ) : ( 章 ) : ( 円 ) 参 考 URL http://e-words.jp/p/r-htmlentity.html <title> 特 殊 文 字 </title> <P> 改 行 するためには<BR>を 書 きます</P> <P> 改 行 するためには<BR>を 書 きます</P>
10.マーク 付 きリスト 14 1 各 項 目 の 頭 に<LI>を 付 ける 2リスト 全 体 を<UL>と</UL>で 囲 む <title> おいしい 野 菜 </title> <P> 僕 の 大 好 きな 美 味 しい 野 菜 </P> <UL> <LI>なす <LI>レタス <LI>ピーマン <LI>ニンジン </UL>
7. 番 号 付 きリスト 15 1 各 項 目 の 頭 に<LI>を 付 ける 2リスト 全 体 を<OL>と</OL>で 囲 む <title> 好 きな 野 菜 </title> <P> 僕 の 好 きな 野 菜 の 順 番 </P> <OL> <LI>レタス <LI>なす <LI>ピーマン <LI> 玉 ねぎ </OL>
8. 定 義 リスト 16 1 定 義 したい 用 語 の 頭 に<DI>を 付 ける 2 用 語 の 説 明 の 頭 に<DD>を 付 ける 3リスト 全 体 を<DL>と</DL>で 囲 む <title> 野 菜 と 果 物 の 違 い </title> <P> 野 菜 と 果 物 の 違 い</P> <DL> <DT> 野 菜 <DD> 草 になる 実 <DT> 果 物 <DD> 木 になる 実 </DL>
11. 著 者 の 情 報 17 <ADDRESS> <title> 野 菜 と 果 物 の 違 い </title> <P> 野 菜 と 果 物 の 違 い</P> <DL> <DT> 野 菜 <DD> 草 になる 実 <DT> 果 物 <DD> 木 になる 実 </DL> <ADDRESS> <UL> <LI> 日 本 工 業 大 学 なすび <LI>mhiguchi@nit.ac.jp </UL> </ADDRESS>
18 日 本 工 業 大 学 情 報 リテラシーII II.ハイパーリンク
1.ハイパーリンク 19 ハイパーリンク: 1HTMLの 最 大 の 特 徴 2 文 書 中 に 他 の 情 報 へのリンクを 持 たせる 機 能 記 述 方 法 アンカー(anchor)を 意 味 する<a>タグを 使 用 1<A href="urlの 指 定 ">リンク 部 分 の 文 字 </A> リンク 先 のファイルが 別 のWebサーバ 上 にある 場 合. 2<A href="ファイルの 名 前 ">リンク 部 分 の 文 字 </A> リンク 先 のファイルがページデータと 同 じWebサーバ 上 に ある 場 合.
1.ハイパーリンク 20 ( 例 ) <title> おいしい 野 菜 </title> <P> 僕 の 大 好 きな 美 味 しい 野 菜 </P> <UL> <LI><A href="introduction.html">なす</a> <LI>レタス <LI>ピーマン <LI>ニンジン </UL>
21 日 本 工 業 大 学 情 報 リテラシーII III.インラインイメージ
1.インラインイメージ 22 インライン イメージ:ページ 内 に 直 接 組 み 込 んで 表 示 させる 画 像 タグの 書 式 :<img src= イメージファイル 名 "/> <title> なすの 特 徴 </title> <P>なすの 特 徴 </P> <img src="nasu.jpg"/> なすの 外 観 <UL> <LI> 油 を 良 く 吸 う <LI> 外 は 黒 いが 中 は 白 い <LI> 美 味 しい </UL> nasu.jpg 終 了 タグは 無 いことに 注 意
2. 説 明 テキストの 位 置 23 <img align= MIDDLE src="nasu.jpg"/> なすの 外 観 <img align="top src="nasu.jpg"/> なすの 外 観
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 日 本 工 業 大 学 情 報 リテラシーII IV. 表
1. 表 作 成 の 基 本 26 1セルをTD(Table Data) 要 素 で 指 定 2 行 をTR(Table Row) 要 素 で 指 定 3 全 体 をTABLE 要 素 で 囲 む <TABLE> <TD>セル11 <TD>セル12 <TD> <TD>セル21 <TD>セル22 <TD> <TABLE>
2. 具 体 例 1 27 <title> 表 </title> <TABLE> <TD>セル11<TD>セル12<TD>セル13 </TABLE>
2. 具 体 例 2 28 <title> 表 </title> <TABLE> <TD>セル11<TD>セル12<TD>セル13 <TD>セル21<TD>セル22<TD>セル23 </TABLE>
2. 具 体 例 3 29 <title> 表 </title> <TABLE border="3"> <TD>セル11<TD>セル12<TD>セル13 <TD>セル21<TD>セル22<TD>セル23 </TABLE> Border 属 性 : 指 定 すると 表 に 罫 線 が 入 る 属 性 値 : 枠 線 ( 外 枠 )の 太 さ(ピクセル 数 )
3. 見 出 し 30 TDのかわりにTHを 使 用 ひとつの 表 に 対 して 先 頭 行 または 先 頭 列 のどちらかだけに 使 用. <title> 表 </title> <TABLE border="3"> <TH> 野 菜 <TH> 果 物 <TH> 魚 <TD>レタス<TD> 桃 <TD> 鯖 </TABLE>
4.セルの 結 合 31 TD 要 素,TH 要 素 に 以 下 の 属 性 を 設 定 (1) 横 のセル 同 士 を 結 合 する 場 合 :colspan= 結 合 するセル 数 (2) 縦 のセル 同 士 を 結 合 する 場 合 :rowspan= 結 合 するセル 数 <title> 表 </title> <TABLE border="3"> <TH colspan="3"> 野 菜 <TD>レタス<TD>なす<TD>ピーマン </TABLE>
4.セルの 結 合 2 32 <title> 表 </title> <TABLE border="3"> <TH rowspan="3"> 野 菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>
5.キャプション( 表 題 )を 付 ける 33 CAPTION 要 素 を 使 用 <title> 表 </title> <TABLE border="3"> <CAPTION> 好 きな 食 べ 物 </CAPTION> <TH rowspan="3"> 野 菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>
6. 表 の 横 幅 の 設 定 34 TABLE 要 素 でwidth 属 性 を 指 定 書 式 :<TABLE width= 横 幅 > 横 幅 :ピクセル 数 あるいはウィンドウに 対 する 割 合 (%) <title> 表 </title> <TABLE border="3" width="100%"> <CAPTION> 好 きな 食 べ 物 </CAPTION> <TH rowspan="3"> 野 菜 <TD>レタス <TD>なす <TD>ピーマン </TABLE>
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 日 本 工 業 大 学 情 報 リテラシーII V. 課 題
1. 課 題 37 自 分 のWebページの 全 世 界 への 公 開 1 次 の 要 件 満 たす 自 分 のWebページのデータファイルの 作 成 2データファイルをWebサーバ(sstu.nit.ac.jp)にUP 提 出 方 法 : 自 分 のホームページを 見 れるようにすること
2. 要 件 1 38 要 件 1: 下 記 の 少 なくとも3ページ 以 上 の 作 成 1トップページ(index.html) 2 自 己 紹 介 ページ(introduction.html) 3 第 3ページ 目 以 降 のファイル 名 は 自 由 ただし 日 本 語 ファイル 名 は 利 用 不 可 要 件 2:ページのタイトルをつけること 自 由 なものでよいが,あまり 受 けをねらわない 普 通 のもの 要 件 3:トップページの 説 明 文 には 改 行 を 入 れること 要 件 4:トップページの 説 明 文 に 色 の 違 う 文 字 が1 文 字 以 上 あること 要 件 5:トップページの 説 明 文 に 斜 字 が1 文 字 以 上 あること 要 件 6:トップページに 罫 線 があること 要 件 7:トップページに 番 号 付 きのリストがあること
2. 要 件 2 39 要 件 8:トップページの 最 後 に 著 者 のリストがあること 要 件 9:トップページに 自 己 紹 介 ページへの リンク を 含 めること 要 件 10: インライン 画 像 を 一 個 以 上 挿 入 し, 説 明 文 を 付 けること 要 件 11: インライン 画 像 に リンク を 含 めること 要 件 12: 自 己 紹 介 ページにもH1レベルの 見 出 しを 付 ける 要 件 13: 自 己 紹 介 ページにトップページと 別 のタイトルを 付 けること. 要 件 14: 自 己 紹 介 は 表 (テーブル)を 用 いて 作 成 すること 要 件 15: 自 己 紹 介 の 表 は 罫 線 をつけること 要 件 16: 自 己 紹 介 の 表 にはセルの 結 合 があること