Microsoft PowerPoint - InfPro_I9.pptx

(1)

今日の学習内容



エディタ

(emacs)を使った基本的なHTML

の書き方

(2)

HTMLの基礎知識

◎_HTML_{(Hyper Text Markup Language)は}

Webページを作るための必要な記述言語 ◎_{HTMLにおける}指定の内容は：１．文章（テキスト）に対する「役割」２．文章やイメージなどのページ要素に対する「表示方法」 ◎_{HTMLで作成するWebページの}最大特徴は、ハイパーリンク ◎_{HTML中身は}テキストファイルですが、保存する時、ファイル名に「_.html」 _or「_.htm」を付ける ◎_{HTMLファイルを}表示するために、 Firefoxコミューティエディションが必要

(3)

HTMLの基本構成

<HTML> ・・・_{HTML文書の始まりを示すタグ}

<HEAD> <TITLE>

Wakayama’s Home Page ・・・ページのタイトル

</TITLE> </HEAD> =================================== <BODY> 本文・・・表示される内容 </BODY> </HTML> ・・・_{HTML文書の終わりを示すタグ} ＜＞で囲んだ部分をタグと呼び、タグには大文字と小文字の区別はない！

(4)

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という名前でファイルを保存}

(5)

Webページの公開

◎注意事項：１．他人の知的所有権やプライバシーに配慮２．自分の知的所有権やプライバシーを守る ◎方法： URLで参照できるのは ディレクトリ

public_html

の中のものだけ作った_{Webページと使用している画像ファイルは} すべてディレクトリ_{public_html}に移動する必要あり ※ _{TAに連絡するURLは以下の通り：} http://com.center.wakayama-u.ac.jp/~s1910??/(例：MyPage).html

(6)

Webページを公開するため

作った_{Webページと使用した画像ファイルを全て}

public_htmlディレクトリに移動!!!

現在 _{~kadaiというディレクトリの下で作業しているので}

cp test.html ~/public_html (Enter)

また、前回の画像は各自のホームディレクトリの下の

Imageというディレクトリに保存されているとすると、

(7)

Webページを公開するため

１．自分のホームディレクトリに移動

cd (Enter)

２．_{public_htmlディレクトリを作る}

mkdir public_html (Enter) ***** 以上1回だけOKです *****

３．作った_{Webページと使用した画像ファイルを全て} public_htmlディレクトリに移動!!!

例：cd ~/kadai (ファイルのあるディレクトリに移動)

cp test.html ~/public_html (Enter)

cp kadai5.jpg ~/public_html (Enter)

注：課題5の画像が各自のkadaiのディレクトリの下にない場合、まずkadai の

(8)

作った

Webページを表示

◎自分で確認：１）「_Menu」  →「インターネット」  →「Firefoxウェブ・ブラウザ」よりFirefoxを起動 ２）_URL所に http://com.center.wakayama-u.ac.jp/~s1910??/test.html を入力すると、画面に「私が和歌山大学システム工学部情報通信システム学科の学生です。 2014年6月6日emacsでWebページの作り方を学んでいます。」 が表示される

(9)

テキスト関連

(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

(10)

テキスト関連

(Hタグ)

◎サイズや表示場所を指定

<H

n

ALIGN=

option

>

文字列

</ H

n

>

…

n は1=>6  文字サイズ=>小

…

option は “left”, “center”, “right”を指定

(11)

テキスト関連

(文字飾りタグ)

<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を参照

(12)

タグの記述練習１

◎_{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>

(13)

基本レイアウト（

BR, NOBR,Pタグ)

◎改行の指定前の文字列_<BR> 後の文字列 ◎改行しない指定 <NOBR> 文字列 </NOBR>

◎段落の指定_…_{option は“left”, “center”, “right”を指定}

<P ALIGN= option > （省略可）

文字列

(14)

基本レイアウト（

HRタグ)

◎横罫線を引く（

オプションの複数指定可能

）

<HR> 影付きの横罫線 <HR NOSHADE> 平面的な横罫線 <HR SIZE= size > size は“50”のようにピクセル数を指定 <HR WIDTH= width > width は“50％”のようにウィンドウの幅の割合を指定 <HR ALIGN= option >

(15)

基本レイアウト（

BODYタグ)

◎ページ全体のレイアウトの構成

<BODY>

以下のcolor 部分は色を指定（FONTタグを参照）

<BODY BGCOLOR= color > 背景色

<BODY TEXT= color > 文字色

<BODY LINK= color > 未リンク部分

を指定されたcolor にする

<BODY BACKGROUND= “FileName” >

背景（_{BACKGROUND）属性には画像ファイル}

(16)

基本レイアウト（レイアウトのタグ

)

◎表示位置などのレイアウトについて

<PRE> 文字列 </PRE> そのまま

<BLINK> 文字列 </BLINK> 点滅

<CENTER> 文字列 </CENTER> 中央揃え

<DIV ALIGN= option> 文字列 </DIV>

(17)

タグの記述練習

2

◎_{emacsでtest.htmlファイルを修正し、 test2.htmlファイ} ルに保存する。_{(Firefoxでその記述結果を確認)} ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <HTML> <HEAD> <TITLE>

Wakayama’s Home Page </TITLE> </HEAD> <BODY bｇcolor=“blue”> <center>私が和歌山大学システム工学部情報通信システム学科の学生です。 </center> <div align=“right”>2014年6月6日</div> <hr width=“80%”> <p>emacsでWebページの作り方を学んでいます。</p> </BODY> </HTML>

(18)

リスト（

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 >

(19)

リスト（

DLタグ）

◎マーク・番号なしリスト

<DL> 定義語をリストで表示

<DT> 見出し部分

<DD> 内容部分

◎リストタグの組み合わせ

それぞれ_{P.153の使用例を参照}

(20)

テーブル

<TABLE> ~ </TABLE>の中に

<TR> <TD>を組み合わせ記述する

(21)

画像の表示（

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 >

(22)

画像の表示練習３

◎_{emacsでtest.htmlファイルを修正し、 test3.html} ファイルに保存する（_{Firefoxで記述結果を確認）} ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <HTML> <HEAD> <TITLE>

Wakayama’s Home Page </TITLE> </HEAD> <BODY> 私が和歌山大学システム工学部情報通信システム学科の学生です。 <BR> 2014年6月6日<BR> emacsでWebページの作り方を学んでいます。 <BR> <IMG SRC= “kadai5.jpg”> </BODY> </HTML> ●課題_{5の画像（kadai5.jpg）はtest.htmlのあるディレクトリにコピー}

(23)

課題

6

見本：

http://www.wakayama-u.ac.jp/~wuhy/ＨＴＭＬsample.pdfと http://www.wakayama-u.ac.jp/~wuhy/ＨＴＭＬsample.html を参考して自分の_{Webページを作成して下さい。} 内容が指定された部分以外、自由に作成してください。（サンプルの中のすべての項目が全部含まれていることが最低限です_;） （もちろん、それ以上ならば_{betterです）} （課題_{5で作成・編集した画像を全部WEBに公開し、そ} れぞれどんなツールで得られた画像の説明も入れてください）注意：今週はレポートの提出がありませんが、今日まで勉強した内容を理解した上で、できる範囲内のページを作って下さい。