HTML によるWebページ作成


第１回目

1. 準備: UNIX の使い方

 詳しくは「情報教育用計算機システム 利用の手引き」p.~33〜を参照

「端末エミュレータ」と「dtpad」の起動方法

dtpat 画面下の左から４番目のアイコンをクリック
端末エミュレータ 「dtpad」のアイコンの上にある，三角のアイコンを クリック
→ 「端末エミュレータ」のところをクリック
○ 「端末エミュレータ」 --- 様々な命令を入力, 実行するときに使用

○ 「dtpad」 --- HTMLファイル, プログラムなどのテキストファイル（文書） 作成に使用

「端末エミュレータ」の使い方

typist, netscape などの命令を入力して, 「Enter」キーを押すと実行．

「dtpad」の使い方

http://www.dais.is.tohoku.ac.jp/~shioura/html/dtpad.html を参照

2. まずは簡単なWebページを作ろう!

 (1) 適当な文章をdtpad などを使って書き，***.html というファイル名で保存．

例： myself.html
名前  塩浦昭義
住所  仙台市
(2) netscape を使って，作ったhtmlファイルを表示．

netscape のメニューバー「ファイル」を選択
→ サブメニュー「ページを開く」を選択
→ 先ほど作ったファイル(myself.html)を指定し， 「Navigatorで開く」ボタンを押す
→ 内容が画面に表示される

例： myself.html を表示させると．．．
名前 塩浦昭義 住所 仙台市
改行や空白が無視されてしまう

3. レポートの提出方法

 ※火曜日の授業を受講している学生は，下記の "b1i" を "b1h" に置き換える

端末エミュレータで,
「cp ***.html /www/campus/b1i/users/自分のアカウント」
という命令を実行する．
（今回の場合, 「cp myself.html /www/campus/b1i/users/a1e1****」 を実行）
⇒ 作成したHTMLファイル ***.html が公開される（ただし学内のみ）

公開したページを見るためのURL は
http://www.cs.ecip.tohoku.ac.jp/campus/b1i/users/自分のアカウント/
※締切日までのファイルの公開をもって提出と見なす

4. HTMLの機能を使ってみる

 先ほど作った myself.html はHTMLの機能を全く使っていないので，見栄えが 悪い
⇒ HTMLの機能をいろいろ使って見栄えを良くしよう

これらの記号のことを「タグ」と呼ぶ. 色の名前については http://www.dais.is.tohoku.ac.jp/~shioura/html/html.html 参照

例： myself2.html
<TITLE> 自己紹介 </TITLE> <BODY BGCOLOR="yellow"> <H1 ALIGN="center"> 自己紹介 </H1> <HR> <FONT COLOR="blue"> 名前</FONT> 塩浦昭義 <BR> <FONT COLOR="blue"> 住所</FONT> 仙台市 <P>生まれは新潟です．１８年暮しました．</P> <P>６月に仙台に引っ越してきました．なかなか住み良いところです．</P> </BODY>
myself2.html の表示結果はここをクリック

第１回目レポート課題:
今回習ったタグをなるべくたくさん使って, 自己紹介のページを作成せよ．
（ただし，ページは学内に公開されるので,
電話番号や詳しい住所など, あまり私的な情報は書かないこと）
締め切り:
※金曜日の授業を受講している学生 →１０月１８日（木）正午まで
※火曜日の授業を受講している学生 →１０月２２日（月）正午まで
２回目の内容へ