今 日 の 学 習 内 容 エディタ(emacs)を 使 った 基 本 的 なHTML の 書 き 方 Webページの 公 開
HTMLの 基 礎 知 識 HTML(Hyper Text Markup Language)は Webページを 作 るための 必 要 な 記 述 言 語 HTMLにおける 指 定 の 内 容 は: 1. 文 章 (テキスト)に 対 する 役 割 2. 文 章 やイメージなどのページ 要 素 に 対 する 表 示 方 法 HTMLで 作 成 するWebページの 最 大 特 徴 は ハイパーリンク HTML 中 身 はテキストファイルですが 保 存 する 時 ファイル 名 に.html or.htm を 付 ける HTMLファイルを 表 示 するために Firefoxコミューティエディションが 必 要
HTMLの 基 本 構 成 <HTML> HTML 文 書 の 始 まりを 示 すタグ <HEAD> <TITLE> Wakayama s Home Page ページのタイトル </TITLE> </HEAD> =================================== <BODY> 本 文 表 示 される 内 容 </BODY> </HTML> HTML 文 書 の 終 わりを 示 すタグ <>で 囲 んだ 部 分 をタグと 呼 び タグには 大 文 字 と 小 文 字 の 区 別 はない!
EmacsでWebページを 作 る 練 習 cd ~/kadai (kadaiというディレクトリの 下 へ 移 動 ) emacs testhp.tex & (emacsを 起 動 ) 赤 線 内 の 内 容 を 入 力 ========================================= <HTML> <HEAD> <TITLE> Wakayama s Home Page </TITLE> </HEAD> <BODY> 私 が 和 歌 山 大 学 システム 工 学 部 情 報 通 信 システム 学 科 の 学 生 です <BR> 2014 年 6 月 6 日 emacsでwebページの 作 り 方 を 学 んでいます </BODY> </HTML> ========================================= test.htmlという 名 前 でファイルを 保 存
Webページの 公 開 注 意 事 項 : 1. 他 人 の 知 的 所 有 権 やプライバシーに 配 慮 2. 自 分 の 知 的 所 有 権 やプライバシーを 守 る 方 法 : URLで 参 照 できるのは ディレクトリpublic_htmlの 中 のものだけ 作 ったWebページと 使 用 している 画 像 ファイルは すべてディレクトリpublic_htmlに 移 動 する 必 要 あり TAに 連 絡 するURLは 以 下 の 通 り: http://com.center.wakayama-u.ac.jp/~s1910??/( 例 :MyPage).html
Webページを 公 開 するため 作 ったWebページと 使 用 した 画 像 ファイルを 全 て public_htmlディレクトリに 移 動!!! 現 在 ~kadaiというディレクトリの 下 で 作 業 しているので cp test.html ~/public_html (Enter) また 前 回 の 画 像 は 各 自 のホームディレクトリの 下 の Imageというディレクトリに 保 存 されているとすると cp../image/kadai5.jpg ~/public_html (Enter)
Webページを 公 開 するため 1. 自 分 のホームディレクトリに 移 動 cd (Enter) 2.public_htmlディレクトリを 作 る mkdir public_html (Enter) ***** 以 上 1 回 だけOKです ***** 3. 作 ったWebページと 使 用 した 画 像 ファイルを 全 て public_htmlディレクトリに 移 動!!! 例 :cd ~/kadai (ファイルのあるディレクトリに 移 動 ) cp test.html ~/public_html (Enter) cp kadai5.jpg ~/public_html (Enter) 注 : 課 題 5の 画 像 が 各 自 のkadaiのディレクトリの 下 にない 場 合 まずkadai の ディレクトリにコピーしてください
自 分 で 確 認 : 1) Menu 作 ったWebページを 表 示 インターネット Firefoxウェブ ブラウザ よりFirefoxを 起 動 2)URL 所 に http://com.center.wakayama-u.ac.jp/~s1910??/test.html を 入 力 すると 画 面 に 私 が 和 歌 山 大 学 システム 工 学 部 情 報 通 信 システム 学 科 の 学 生 です 2014 年 6 月 6 日 emacsでwebページの 作 り 方 を 学 んでいます が 表 示 される
テキスト 関 連 (FONTタグ) 1.サイズ 指 定 n は1=>7 文 字 サイズ=> 大 <FONT SIZE= n > 文 字 列 </FONT> 2. 色 指 定 color は 色 名 (red, green, blue, yellow ) or 配 色 (#RRGGBB; 16 進 数 (00~FF))でRGBの 割 合 を 指 定 <FONT COLOR= color > 文 字 列 </FONT> 配 色 の 例 : 赤 :#FF0000 緑 :#00FF00 青 :#0000FF 黄 :#FFFF00 黒 :#000000 白 :#FFFFFF
テキスト 関 連 (Hタグ) サイズや 表 示 場 所 を 指 定 <Hn ALIGN= option > 文 字 列 </ Hn > n は1=>6 文 字 サイズ=> 小 option は left, center, right を 指 定 ( 省 略 も 可 )
テキスト 関 連 ( 文 字 飾 りタグ) <B> 文 字 列 </B> 太 字 <I> 文 字 列 </I> 斜 体 <S> 文 字 列 </S> 取 消 線 <U> 文 字 列 </U> 下 線 <TT> 文 字 列 </TT> 等 幅 <SUP> 文 字 列 </SUP> 上 付 き 文 字 <SUB> 文 字 列 </SUB> 下 付 き 文 字 <EM> 文 字 列 </EM> 強 調 <DEF> 文 字 列 </DEF> 定 義 <CITE> 文 字 列 </CITE> 引 用 <CODE> 文 字 列 </CODE> コード P.155の 表 8.1を 参 照
タグの 記 述 練 習 1 emacsでtest.htmlファイルを 修 正 し test1.htmlファイル に 保 存 cp test1.html ~/public_html (Enter) してから Firefoxでその 記 述 結 果 を 確 認 =============================== <HTML> <HEAD> <TITLE> Wakayama s Home Page </TITLE> </HEAD> <BODY> <font color=blue> 私 が 和 歌 山 大 学 システム 工 学 部 情 報 通 信 システム 学 科 </font>の 学 生 です <BR> <font color=#00ff00>2014 年 6 月 6 日 </font> <BR> <font size=4><i>emacs</i>で<b>webページ</b></font>の<h5> 作 り 方 </h5>を 学 んでいます </BODY> </HTML>
基 本 レイアウト(BR, NOBR,Pタグ) 改 行 の 指 定 前 の 文 字 列 <BR> 後 の 文 字 列 改 行 しない 指 定 <NOBR> 文 字 列 </NOBR> 段 落 の 指 定 option は left, center, right を 指 定 <P ALIGN= option > ( 省 略 可 ) 文 字 列 </P>
基 本 レイアウト(HRタグ) 横 罫 線 を 引 く(オプションの 複 数 指 定 可 能 ) <HR> 影 付 きの 横 罫 線 <HR NOSHADE> 平 面 的 な 横 罫 線 <HR SIZE= size > size は 50 のようにピクセル 数 を 指 定 <HR WIDTH= width > width は 50% のようにウィンドウの 幅 の 割 合 を 指 定 <HR ALIGN= option > option は left, center, right を 指 定
基 本 レイアウト(BODYタグ) ページ 全 体 のレイアウトの 構 成 <BODY> 以 下 のcolor 部 分 は 色 を 指 定 (FONTタグを 参 照 ) <BODY BGCOLOR= color > 背 景 色 <BODY TEXT= color > 文 字 色 <BODY LINK= color > 未 リンク 部 分 を 指 定 されたcolor にする <BODY BACKGROUND= FileName > 背 景 (BACKGROUND) 属 性 には 画 像 ファイル (FileName)を 指 定 し 背 景 に 表 示 する
基 本 レイアウト(レイアウトのタグ) 表 示 位 置 などのレイアウトについて <PRE> 文 字 列 </PRE> そのまま <BLINK> 文 字 列 </BLINK> 点 滅 <CENTER> 文 字 列 </CENTER> 中 央 揃 え <DIV ALIGN= option> 文 字 列 </DIV> option は left, center, right を 指 定
タグの 記 述 練 習 2 emacsでtest.htmlファイルを 修 正 し test2.htmlファイ ルに 保 存 する (Firefoxでその 記 述 結 果 を 確 認 ) =============================== <HTML> <HEAD> <TITLE> Wakayama s Home Page </TITLE> </HEAD> <BODY bgcolor= blue > <center> 私 が 和 歌 山 大 学 システム 工 学 部 情 報 通 信 システム 学 科 の 学 生 です </center> <div align= right >2014 年 6 月 6 日 </div> <hr width= 80% > <p>emacsでwebページの 作 り 方 を 学 んでいます </p> </BODY> </HTML>
リスト(ULタグ OLタグ LIタグ) マーク 付 きリスト(ULタグ) type は disc 黒 丸, circle 白 丸, square 四 角 を 指 定 <UL> < LI TYPE= type > </UL> 番 号 付 きリスト(OLタグ) type は A, a 英 字, I, i ローマ 字, 1 算 用 ; n は 数 字 を 指 定 <OL> < LI TYPE= type > < LI VALUE= n > </OL>
リスト(DLタグ) マーク 番 号 なしリスト <DL> 定 義 語 をリストで 表 示 <DT> 見 出 し 部 分 <DD> 内 容 部 分 リストタグの 組 み 合 わせ それぞれP.153の 使 用 例 を 参 照
テーブル <TABLE> ~ </TABLE>の 中 に <TR> <TD>を 組 み 合 わせ 記 述 する P.154~155を 参 照
画 像 の 表 示 (IMGタグ) SRC 属 性 は 必 ず 指 定 filename に 画 像 ファイル 名 またはURLを 指 定 align は top, center, bottom, left, right を 指 定 width と height は 画 像 の 表 示 サイズを 指 定 BORDERの 属 性 は 画 像 に 枠 を 付 ける < IMG SRC= filename > < IMG SRC= filename ALIGN= align > < IMG SRC= filename WIDTH= width > < IMG SRC= filename HEIGHT= height > < IMG SRC= filename BORDER= n >
画 像 の 表 示 練 習 3 emacsでtest.htmlファイルを 修 正 し test3.html ファイルに 保 存 する(Firefoxで 記 述 結 果 を 確 認 ) 課 題 5の 画 像 (kadai5.jpg)はtest.htmlのあるディレクトリにコピー =============================== <HTML> <HEAD> <TITLE> Wakayama s Home Page </TITLE> </HEAD> <BODY> 私 が 和 歌 山 大 学 システム 工 学 部 情 報 通 信 システム 学 科 の 学 生 です <BR> 2014 年 6 月 6 日 <BR> emacsでwebページの 作 り 方 を 学 んでいます <BR> <IMG SRC= kadai5.jpg > </BODY> </HTML>
課 題 6 見 本 : http://www.wakayama-u.ac.jp/~wuhy/htmlsample.pdfと http://www.wakayama-u.ac.jp/~wuhy/htmlsample.html を 参 考 して 自 分 のWebページを 作 成 して 下 さい 内 容 が 指 定 された 部 分 以 外 自 由 に 作 成 してください (サンプルの 中 のすべての 項 目 が 全 部 含 まれていること が 最 低 限 です;) (もちろん それ 以 上 ならばbetterです) ( 課 題 5で 作 成 編 集 した 画 像 を 全 部 WEBに 公 開 し そ れぞれどんなツールで 得 られた 画 像 の 説 明 も 入 れて ください) 注 意 : 今 週 はレポートの 提 出 がありませんが 今 日 まで 勉 強 した 内 容 を 理 解 した 上 で できる 範 囲 内 のページ を 作 って 下 さい