HTML によるWebページ作成

第１回目

まずは簡単なWebページを作ろう!
段落や区切りに関するタグ
見出しに関するタグ
作成したページの公開方法
LaTeX 文書の web ページへの変換

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

(1) 適当な文章をテキストエディタを使って書き，???.html というファイル名で保存．

例： intro.html

名前  塩浦昭義
住所  仙台市

(2) netscape を使って，作ったhtmlファイルを表示．

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

例： intro.html を表示させると．．．

名前塩浦昭義住所仙台市

改行や空白が無視されてしまう

intro.html はHTMLの機能を全く使っていないので，見栄えが悪い
⇒ HTMLの機能（タグ）をいろいろ使って見栄えを良くしよう

２. 段落や区切りに関するタグ

※タグを書く場合, アルファベットの大文字と小文字の区別はありません．どちらで書いても同じです．

<BODY BGCOLOR="色の名前"TEXT="色の名前"> ... </BODY>

ページの背景色及び文字の基本色を指定する．ページ全体をこのタグではさむ．
色の名前については http://www.dais.is.tohoku.ac.jp/~shioura/html/html.html 参照
<BR>
改行を行うタグ．
<P> ...</P>
一つの段落をつくる．ただし, 段落の前後に空行ができる．
<P ALIGN="left(または center または right)"> ...</P>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<DIV> ...</DIV>
一つの段落をつくる．ただし, 段落の前後の空行はなし．
<DIV ALIGN="left(または center または right)"> ...</DIV>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<HR>
区切り線を書くタグ．

使用例: intro2.html

<body bgcolor="blue" text="white" > <p align="center"> 私のホームページ </p> <hr> 名前 --- 塩浦昭義 <hr> 出身 --- 新潟県 <p> 現住所 --- 仙台市 <div align="right"> 新潟で１８年暮した後, 大学進学のために東京に行き， <br> それから１３年ほど東京近辺に住んでいましたが， <br> ２年前に仙台に引っ越してきました． </div> <hr> </body>

３. 見出しに関するタグ

<H1> ...</H1>, <H2> ...</H2>, ..., <H6> ...</H6>
見出しを書くためのタグ．数字が小さいほど文字が大きい．
見出しを左寄せ(またはセンター寄せ，または右寄せ)するには
<H1 ALIGN="left(または center または right)"> ... </H1>
のようにする．

使用例: intro3.html

<body bgcolor="blue" text="white" > <h1 align="center"> 私のホームページ </h1> <hr> <h3> １．名前 </h3> 塩浦昭義 <hr> <h3> ２．出身及び現住所 </h3> 出身 --- 新潟県 <p> 現住所 --- 仙台市 <div align="right"> 新潟で１８年暮した後, 大学進学のために東京に行き， <br> それから１３年ほど東京近辺に住んでいましたが， <br> ２年前の６月から仙台に引っ越してきました． </div> <hr> </body>

４. 作成したページの公開方法

これまで皆さんが作成したページは、まだ他の人には公開されていません。
皆さんが作成したページは, 東北大学内限定で公開することができます.

公開の方法：ページを新たに作成したり, 修正を加えるたびに以下を実行します．
例: intro.html というページを公開する場合
- 金曜日３講時受講生(教育学部)の場合：
  cp 　　 intro.html　　/www/campus/c3e/users/自分のアカウント [Enterキー]
- 金曜日４講時受講生(経済学部)の場合：
  cp 　　 intro.html 　　/www/campus/c3f/users/自分のアカウント [Enterキー]
- コマンドの途中の空白を忘れないこと．
公開したページを見るためのURL は
- 金曜日３講時受講生の場合： http://www.cs.ecip.tohoku.ac.jp/campus/c3e/users/
  金曜日３講時受講生のページ一覧へ
- 金曜日４講時受講生の場合： http://www.cs.ecip.tohoku.ac.jp/campus/c3f/users/
  金曜日４講時受講生のページ一覧へ

５. LaTeX 文書の web ページへの変換

以下では LaTeX 文書の名前が event.tex の場合について説明します．
違う名前の場合は, 下記の説明の中で event.tex を自分のファイル名に置き換えて下さい．

LaTeX 文書を web ページへ変換するには：
端末エミュレータで以下のコマンドを実行
jlatex2html event.tex [Enter]
変換されたページを公開するには：
端末エミュレータで以下のコマンドを実行
- 金曜日３講時受講生(教育学部)の場合：
  cp 　　-r 　　 event　　/www/campus/c3e/users/自分のアカウント [Enterキー]
- 金曜日４講時受講生(経済学部)の場合：
  cp 　　-r 　　 event 　　/www/campus/c3f/users/自分のアカウント [Enterキー]
公開されたページを見るには：
- 金曜日３講時受講生のページ一覧もしくは金曜日４講時受講生のページ一覧へ移動．
- 自分のアカウント名をクリック．
- event と書いてあるところをクリック．

レポート課題:

LaTeX のレポート（イベントの案内）を web ページに変換し, 公開しなさい．
簡単な自己紹介のページ（数行程度)を作って公開しなさい。

締め切り: ６月６日（金）授業終了時まで