HTML によるWebページ作成

第２回目

1. 前回の内容の補足

この講義のホームページのURLは http://www.dais.is.tohoku.ac.jp/~shioura/html/web.html です．
端末エミュレータにて netscape を実行するときは

netscape &
のように，最後に & を付けてください．
Web ページの公開の手順を簡単にするために，以下のことを行ってください
- 端末エミュレータにて
  ln -s /www/campus/b1i/users/自分のアカウント www [Enter]
  と命令を入力する.
  b1i の "1(数字の「いち」)" と"l(アルファベットの「える」)" を間違えないこと．
  火曜日授業の学生は b1i を b1h に置き換えること．
今後，作成したWeb ページの公開をするには，

cp ***.html www [Enter]
と命令を入力するだけでＯＫ．
(上記のln -s ... という命令を今後実行する必要はありません）
公開した Web ページのチェックを簡単にするために，以下のことを行ってください
- netscape の「編集」メニューをクリック, 「設定」を選ぶ．
- 「navigator」のところをクリック．
- 「ホームページ」の欄にURL
  http://www.cs.ecip.tohoku.ac.jp/campus/b1i/users/自分のアカウント/
  を記入
- 左下の「確認」ボタンを押す．
以上の作業を行った後は，netscape の「ホーム」アイコンをクリックするだけで公開したWebページの一覧を見ることができます．

2. HTMLファイルの骨組みをつくるタグ

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

<HTML> ... </HTML>
HTMLファイルであることを表すタグ．ファイル全体をこのタグではさむ．
<BODY> ... </BODY>
本文を表すタグ．
<HEAD> ... </HEAD>
この文書のタイトルや作者などの情報を表すタグ．
<TITLE> ... </TITLE>
この文書のタイトルを表すタグ． <HEAD> ... </HEAD> の間に書く．

使用例: struc.html

<HTML> <HEAD> <TITLE> HTMLファイルの構造について </TITLE> </HEAD> <BODY> ここが本文になります．ここに書きたいことを書き連ねます． </BODY> </HTML>

Webページの背景や文字の基本色を付けるには．．．

<BODY> を <BODY BGCOLOR="色の名前"> に置き換え
ページの背景の色を指定する．
<BODY> を <BODY TEXT="色の名前"> に置き換え
ページの文字の基本色を指定する．

色の名前については http://www.dais.is.tohoku.ac.jp/~shioura/html/html.html 参照

使用例: color.html

<HTML> <HEAD> <TITLE> HTMLファイルの色の付け方 </TITLE> </HEAD> <BODY BGCOLOR="blue" TEXT="white" > 背景の色が青, 文字の色が白に変わっていることが分かるでしょうか． </BODY> </HTML>

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

<BR>
改行を行うタグ．
<P> ...</P>
一つの段落をつくる．ただし, 段落の前後に空行ができる．
<P ALIGN="left(または center または right)"> ...</P>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<DIV> ...</DIV>
一つの段落をつくる．ただし, 段落の前後の空行はなし．
<DIV ALIGN="left(または center または right)"> ...</DIV>
段落の中で各行を左揃え(またはセンター揃え，または右揃え)する．
<HR>
区切り線を書くタグ．

使用例: parag.html

<HTML> <HEAD> <TITLE> 段落の作り方 </TITLE> </HEAD> <BODY> <P> 最初の段落です．<BR> 改行してみました．確かに改行されました．<BR> この文で最初の段落が終わります． </P> <P ALIGN="center"> ２番目の段落です．確かに段落の間に空行がありますね．<BR> この段落がセンター揃えになっていることにも注意． </P> <HR> 区切り線で仕切ってみました． <HR> <DIV> 今度は DIV を使って段落を作りましょう．<BR> 最初の段落です．この文で最初の段落が終わります． </DIV> <DIV ALIGN="right"> ２番目の段落です．確かに段落の間に空行がありませんね．<BR> この段落が右揃えになっていることにも注意． </DIV> </BODY> </HTML>

4. 見出しに関するタグ

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

使用例: header.html

<HTML> <HEAD> <TITLE> 見出しの書き方 </TITLE> </HEAD> <BODY> <H1>一番大きい見出しです． </H1> <H2 ALIGN="center">２番目に大きい見出しです．中央に置いてみました．</H2> <H3 ALIGN="right">３番目に大きい見出しです．右側に置いてみました．</H3> <H4>４番目に大きい見出しです． </H4> <H5>５番目に大きい見出しです． </H5> <H6>一番小さい見出しです． </H6> </BODY> </HTML>

5. 文字に関するタグ

<FONT SIZE="1から7までの数字"> ...</FONT>
文字の大きさを部分的に変更するタグ．数字が大きいほど文字が大きくなる．

１２３４５６７
<FONT COLOR="色の名前"> ...</FONT>
文字の色を部分的に変更するタグ．あかあおきいろ
<B> ...</B>
文字を太字にするタグ．

太字はこのような文字です
<I> ...</I>
文字を斜体にするタグ．

斜体の文字はこのような感じです
<SUP> ...</SUP>
上付き文字を書くためのタグ． 2⁸ = 256 東北大学^注１
<SUB> ...</SUB>
下付き文字を書くためのタグ． a₁ = 1, a₂ = 2, a₃ = 4, a₄ = 8, ...
<U> ...</U>
文字に下線を引くためのタグ． HTML言語はWebページを書くときに用いられる言語である
<S> ...</S>
文字の上に取り消し線を引くためのタグ．レポートの締め切り： ~~９月３０日~~ １０月７日
上記のタグを組合せて使うことも可能
例１： <FONT SIZE="7" COLOR="red"> ...</FONT>
---> 大きさ７の赤い文字
例２： <B> <I> ... </I> </B>
---> 斜体の太字

第２回目レポート課題:
今回習ったタグを全て使って, 自己紹介のページを充実させなさい．
ファイル名: myself3.html
締め切り:
※金曜日の授業を受講している学生 →１０月２５日（木）正午まで
※火曜日の授業を受講している学生 →１０月２９日（月）正午まで

３回目の内容へ