法政大学市ヶ谷基礎科目
情報処理演習II
担当 重定 如彦
2004年12月1日
第9回 ウェブページ製作(その4)
1. ブロックレベルタグ
HTMLでは、文章の中で見出しのようにひとつのまとまった意味をもつ部分をブロック(block)と呼び、ブロックを表現するタグのことをブロックレベルタグと呼びます。ブロックレレベルタグの前後では一般的に自動的に改行されることになっています。主なブロックレベルタグには以下のものがあります。
·
H1〜H6、HR、TABLE、UL、OL
見出し(H1〜H6)、罫線(HR)、テーブル(TABLE)、箇条書き(UL、OL)。
·
P
Pタグは文章の段落を表すタグで、Pタグの前後でさらに改行(1行分のスペースが表示される)が行われます。段落を分けずにだらだらと記述された文章は大変読みにくいものなので、文章を内容で区切って段落分けしそれぞれの段落をPタグで囲うことをお勧めします。PタグにはALIGN属性を記述ができ、LEFT、CENTER、RIGHTのいずれかの値を設定することで、左揃え、中央揃え、右揃えを指定することができます。
<P>
ここが第一段落の内容です。
</P>
<P ALIGN=“CENTER”>
ここが第二段落の内容です。
</P>
なお、Pタグを使うと自動的に一行空けて改行されるのでよくPタグを改行の代わりに使う人がいますが、それは誤った使い方です。改行はBRタグで行って下さい。
·
DIV
DIVタグはその内容が一まとまりの意味を持つブロックであるということを表します。DIVタグもALIGN属性で文字の揃えを指定でき、一般的にDIVタグで囲まれた部分の文章の揃えを指定する為に使われます。DIVタグはPタグと異なり余分な改行は行われません。上記のサンプル文章のPをDIVに書き換えて表示を更新して下さい。
·
CENTER
CENTERタグで囲まれた文章は中央揃えで表示されます。CENTERタグは
<DIV ALIGN=“CENTER”>と記述した場合と同じ意味を持ちます。
·
ADDRESS
ADDRESSタグはその内容がそのページの製作者の連絡先(アドレス)や問い合わせ先部分であることを表しています。一般にこのタグの中は斜体で表示されます。
<ADDRESS>
このホームページに対するご意見・お問い合わせは下記のメールアドレズへどうぞ。<A HREF=“mailto:メールアドレス”>メールアドレス</A>
</ADDRESS>
·
PRE
通常HTML文章の中の半角スペースや改行は実際の表示の際には無視されますが、PREタグで囲まれた文章の中の半角スペースや改行はそのまま画面に表示されます。また、PREタグの中身は等幅フォントで表示され、横幅がいくら長くなっても自動改行されなくなります。PREタグは入力した文章をそのままウェブページに表示したい時に良く使われます。下記の文章を表示し、次にPREタグを削除した場合と比べて下さい。また、PREタグの中と外で半角のアルファベットの表示がどうかわるかを比べて下さい。
<PRE>
PREタグの中のスペース や改行
はそのままブラウザに表示されます。
abcdefg
</PRE>
abcdefg
2.
インラインタグと文字の修飾
AタグやIMGタグのように、文章の一部分として記述するタグはインライン(in-line)タグと呼びます。インラインタグは、ブロックレベルタグと異なりタグの前後で改行されることはありません。ここでは、文字の修飾の為のインラインタグについて説明します。
·
EM と STRONG
EMタグで囲まれた部分を強調して表示します。STRONGタグはEMよりもさらに強い強調を行いたい場合に使います。一般にEMタグで囲まれた文章は斜体、STRONGタグで囲まれた文章は太字で表示されます。
<EM>注意!!</EM><STRONG>この薬剤を服用の際には次の点に注意して下さい。</STRONG>
·
B、I、TT、SUP、SUB、U、S
これらのタグは囲まれた部分の文章の表示スタイルを指定する為のタグです。なお、これらのうち、UタグとSタグの使用は非推奨とされているので使わないほうが無難です。
それぞれのタグの表示スタイルは、B:太字、I:斜体、TT:等幅フォント、SUP:上付き文字、SUB:下付き文字、U:下線、S:取消線です。
これは<B>太字(bold)</B>です。<BR>
これは<I>斜体(italic)</I>です。<BR>
これは<TT>等幅フォント(teletype)</TT>です。<BR>
これは<SUP>上付き文字(superscript)</SUP>です。<BR>
これは<SUB>下付き文字(subscript)</SUB>です。<BR>
これは<U>下線(underline)</U>です。<BR>
これは<S>取消線(strike)</S>です。
·
BIG、SMALL
BIGタグは囲まれた部分の文字を大きく、SMALLタグを小さく表示します。
<BIG>大きな文字</BIG>標準<SMALL>小さな文字</SMALL>
·
FONT
FONTタグで囲まれた部分のフォントを指定します。フォントは属性を使って指定し、SIZE属性で文字の大きさを指定することができます。また後で説明しますが、文字の色を設定することも可能です。SIZE属性には1から7までの数字を設定することができ、数字が小さいほど小さな文字で表示されます。なお、標準サイズの文字は3です。
<FONT SIZE=“1”>サイズが1の文字</FONT><BR>
<FONT SIZE=“2”>サイズが2の文字</FONT><BR>
<FONT SIZE=“3”>サイズが3(標準)の文字</FONT><BR>
<FONT SIZE=“4”>サイズが4の文字</FONT><BR>
<FONT SIZE=“5”>サイズが5の文字</FONT><BR>
<FONT SIZE=“6”>サイズが6の文字</FONT><BR>
<FONT SIZE=“7”>サイズが7の文字</FONT>
また、SIZE属性の中に+1や−1のように+や−記号をつけた数字を指定するとそれまでのフォントのサイズに数字を加算(又は減算)したサイズのフォントになります。
3.
色の指定方法
HTML文章では文字や背景色などに色を指定することができます。色の指定には2種類の方法があり、一つは色を英単語で指定する方法、もう一つは数字で指定する方法です。
英単語で指定する場合、下記の16色を標準なブラウザで使うことができます。
BLACK、SILVER、GRAY、WHITE、MAROON、RED、 PURPLE、FUCHSIA、GREEN、LIME、OLIVE、YELLOW、 NAVY、BLUE、TEAL、AQUA
普通にページを作る場合は、この16色が使えれば充分でしょう。これ以外にもIEやNetscapeでは多くの色の名前が定義されていますが、そちらは書籍や、HTMLを解説しているウェブページに詳しく載っていますのでそちらを参照して下さい。
数字で指定する場合は、色を赤と青と緑の3色の明るさの組み合わせで指定します。それぞれの色の明るさは16進数(16進数は一桁を0〜9、A、B、C、D、E、Fの16種の数字で表します)で指定し、 #RRGGBB の形で表現します。
RR、GG,BBの部分はそれぞれ赤、緑、青の明るさを16進数で記述したもので、00が最も暗く、FF(=10進数で255)が最も明るいことを表します。こちらの指定方法には授業ではこれ以上詳しく説明しませんが興味のある方は各自調べてください。
参考:http://www.page.sannet.ne.jp/mtoga/html/bih-h_x3.htm 名前と色の対応表
http://www.page.sannet.ne.jp/mtoga/html/bih-h_x1.htm 16進数と色の対応表
HTML文章では上記の方法を使って以下の様々なものに色を指定することが出来ます。
·
文字の色
文字の色はFONTタグのCOLOR属性で指定できます。
<FONT COLOR=“red”>赤色の文字です</FONT><BR>
<FONT COLOR=“green”>緑色の文字です</FONT><BR>
<FONT COLOR=“blue”>青色の文字です</FONT>
·
ブラウザの全体の文字色と背景色と背景画像
ブラウザ全体の文字色はBODYタグの中のTEXT属性で指定することができます。又、ブラウザ全体の背景色は、BODYタグの中のBGCOLOR属性で指定できます。
<BODY TEXT=“white” BGCOLOR=“black”>
上記は文字色を白、背景色を黒に指定する方法です。色とは直接関係ありませんが、ウェブページの背景を画像で埋めることができます。これを行うにはBODYタグのBACKGROUND属性に背景に表示したい画像のURLを記述します。
<BODY BACKGROUND=“image/tv.jpg”>
·
テーブルの背景色と背景画像
テーブルのそれぞれのタグにBGCOLOR属性で背景色を設定することができます。
Ø
TABLEタグに設定した場合はそのテーブルの全体の背景色を設定します。
Ø
TRタグに設定した場合はその行のセルすべての背景色を設定します。
Ø
TDタグに設定した場合はそのセルの背景色を設定します。
また、BODYタグの場合と同様にBACKGROUND属性を指定することで、テーブルの背景に指定した画像を表示することができます。
homepage.htmlのテーブルの最初の3行を以下のように変更して表示を更新してください。
<TABLE BORDER BGCOLOR=“red”>
<TR BGCOLOR=“blue”>
<TD BGCOLOR=“green”>名前</TD>
<TD>○○ ○○</TD>
</TR>
略
</TABLE>
また、TABLEタグを以下のように変更して表示を更新してください。
<TABLE BORDER
BACKGROUND=“image/tv.jpg”>
·
リンクの色
ウェブページの背景色や文字色を例えば青色に変更した場合、リンクの色が背景色にまぎれて見えにくくなる場合があります。そのような場合は、BODYタグに以下の属性を記述することでリンクの色を変更することができます。
属性名 |
意味 |
LINK |
まだ見ていないリンクの色 |
VLINK |
すでに見たリンクの色 |
ALINK |
リンクをマウスでプレスした時のリンクの色 |
homepage.htmのBODYタグの内容を下記のように変更して表示を更新して下さい。
<BODY TEXT=“WHITE” BGCOLOR=“BLUE” LINK=“RED” ALINK=“PURPLE”>
4.
文字参照
HTMLでは、半角の < > “ & などの記号はタグの中で使用されるのでそのまま文章に記述しても表示されない場合があります。例えば
<abc>
と記述するとこれはタグだと解釈され、ブラウザには何も表示されません。
これらの記号を表示するには、文字参照という特別な方法で記述する必要があります。文字参照は 「&」記号の後に記号を表す文字列を書き最後に「;」記号を記述します。例えば、 < を表す文字列は lt(lesser
thanの頭文字) なので < と記述すると表示することができます。以下に主な文字参照で記述できる記号の一覧を記します。
記号 |
記述方法 |
|
記号 |
記述方法 |
< |
< |
|
& |
& |
> |
> |
|
“ |
" |
これ以外の記号を表示するための文字参照については書籍などを参考にして下さい。
文字参照を使って先ほどの文章 <abc> を以下のような方法で記述できます。
<abc>
5.
コメント
HTMLで凝ったページを記述すると、タグをたくさん記述しなければならず、後で自分が書いたHTMLの文章を見て意味がわからなくなることがしばしばあります。そのようなことをなくすため、HTMLの中にブラウザで表示したときには表示されないコメント(注釈)を記述することができます。コメントは<!-- と --> で囲って記述します。
<!-- ここから私のプロフィールをテーブルで記述します -->
<TABLE BORDER>
略
コメントで囲われた部分には基本的に何を記述してもその部分は実際のブラウザには表示されません。コメントは必ず書かなければならないというものではありませんが、後でHTML文章を手直しする時に役に立ちますので適度に記述することをお勧めします。
6. これまでの授業で出てきたタグと属性の一覧
ここまで授業で説明したタグを知っていれば一般的なウェブページを作成することは充分可能ですが、実際にはHTMLにはまだまだ多くのタグが用意されています。それらのタグも基本的な記述の方法はこれまで説明したタグと変わりありません。授業で出てきた以外のタグについて知りたい方は各自HTMLの解説の書籍やHTMLを解説したウェブページなどを参考にして下さい。
最後にこれまでにでてきたタグを次のページから一覧にまとめます。
·
HTMLタグとヘッダとボディ
タグ |
意味 |
終了タグ |
属性 |
備考 |
HTML |
HTML文章の開始と終了 |
必須 |
|
|
HEAD |
ヘッダの開始と終了 |
必須 |
|
|
TITLE |
ウェブページのタイトル |
必須 |
|
HEADタグの内部に記述する |
BODY |
本体のデータの開始と終了 |
必須 |
TEXT BGCOLOR BACKGROUND LINK VLINK ALINK |
文字色 背景色 背景画像 味読のリンク色 既読のリンク色 クリック時のリンク色 |
上記のBODYタグの属性でBACKGROUND以外の設定値には全て色(色の指定方法は後述)を記述します。BACKGROUND属性には画像のURLを記述します。
·
ブロックレベルタグと属性(TABLEタグを除く)
注:ブロックレベルタグは、基本的にその前後で改行されます。
タグ |
意味 |
終了タグ |
属性 |
備考 |
H○ |
見出し |
必須 |
ALIGN |
○は1〜6 |
UL |
記号の箇条書き |
必須 |
|
|
OL |
数字の箇条書き |
必須 |
|
|
LI |
箇条書きの項目 |
省略可 |
|
|
HR |
罫線 |
無し |
ALIGN WIDTH |
揃え 幅 |
P |
段落 |
省略可 |
ALIGN |
揃え |
DIV |
ブロック |
必須 |
ALIGN |
揃え |
CENTER |
中央揃え |
必須 |
|
|
ADDRESS |
連絡先 |
必須 |
|
斜体で表示 |
PRE |
等幅フォントで半角スペース、改行をそのまま記述 |
必須 |
|
|
属性 |
設定値 |
意味 |
ALIGN |
LEFT |
左揃え |
CENTER |
中央揃え |
|
RIGHT |
右揃え |
|
WIDTH |
数字 |
ドット数で幅を指定 |
数字% |
ウィンドウのサイズの割合で幅を指定 |
·
画像とリンクと改行
注:IMGタグとAタグはインラインタグの一種です。
タグ |
意味 |
終了タグ |
属性 |
備考 |
IMG |
画像の表示 |
無し |
SRC ALT WIDTH HEIGHT ALIGN |
SRCは必須 ALTは推奨 |
A |
リンクの表示 |
必須 |
HREF |
HREFは必須 |
BR |
改行 |
無し |
|
|
属性 |
設定値 |
意味 |
SRC |
URL |
表示する画像ファイルの保存場所 |
ALT |
文字列 |
画像の内容を文字で表記する |
(IMGタグの)ALIGN |
TOP |
左右の文字列の位置を画像の上部に合わせる。 |
MIDDLE |
左右の文字列の位置を画像の中央に合わせる。 |
|
BOTTOM |
左右の文字列の位置を画像の下部に合わせる。 |
|
LEFT |
画像を右揃えにし、文字を画像の左で折り返すようにする。 |
|
RIGHT |
画像を左揃えにし、文字を画像の左で折り返すようにする。 |
|
WIDTH、HEIGHT |
数字 |
ドット数で幅を指定 |
数字% |
ウィンドウのサイズの割合で幅を指定 |
|
HREF |
URL |
リンク先のウェブページのファイルの保存場所 |
·
文字を修飾するインラインタグと属性
タグ |
意味 |
終了タグ |
属性 |
備考 |
EM |
強調 |
必須 |
|
|
STRONG |
さらに強い強調 |
必須 |
|
|
B |
太字 |
必須 |
|
|
I |
斜体 |
必須 |
|
|
TT |
等幅フォント |
必須 |
|
|
SUP |
上付き文字 |
必須 |
|
|
SUB |
下付き文字 |
必須 |
|
|
U |
下線 |
必須 |
|
非推奨 |
S |
打消線 |
必須 |
|
非推奨 |
BIG |
大きな文字 |
必須 |
|
|
SMALL |
小さな文字 |
必須 |
|
|
FONT |
フォント |
必須 |
SIZE COLOR |
文字サイズ (1〜7) 文字色 |
·
テーブル
タグ |
意味 |
終了タグ |
属性 |
備考 |
TABLE |
テーブルの開始と終了 |
必須 |
BORDER WIDTH HEIGHT ALIGN CELLSPACING CELLPADDING BGCOLOR BACKGROUND |
外枠の幅 横幅 高さ 揃え 内枠の太さ 内枠とセルの中身の幅 背景色 背景画像 |
TR |
テーブルの行 |
省略可 |
HEIGHT ALIGN VALIGN BGCOLOR BACKGROUND |
行の高さ 横の揃え 縦の揃え 背景色 背景画像 |
TD |
テーブルのセル |
省略可 |
WIDTH HEIGHT ALIGN VALIGN COLSPAN ROWSPAN BGCOLOR BACKGROUND |
セルの幅 セルの高さ 横の揃え 縦の揃え 横方向の結合 縦方向の結合 背景色 背景画像 |
CAPTION |
テーブルの見出し |
必須 |
|
|
属性 |
設定値 |
意味 |
BORDER |
数値 |
テーブルの外枠のドット数 |
WIDTH |
数値、% |
横幅。TDの場合の%はテーブルの横幅に対する比率 |
HEIGHT |
数値、% |
縦幅 |
TABLEタグのALIGN |
LEFT |
テーブルを右揃えにし、テーブルの前後の文字をテーブルの右で折り返すようにする。 |
RIGHT |
テーブルを左揃えにし、テーブルの前後の文字をテーブルの左で折り返すようにする。 |
|
CENTER |
テーブルを中央揃えにする。 |
|
TR,TDタグのALIGN |
LEFT |
セルの中身を左揃えにする |
CENTER |
セルの中身を(横方向に対して)中央揃えにする |
|
RIGHT |
セルの中身を右揃えにする |
|
VALIGN |
TOP |
セルの中身を上揃えにする |
MIDDLE |
セルの中身を(縦方向に対して)中央揃えにする |
|
BOTTOM |
セルの中身を下揃えにする |
|
CELLSPACING |
数値 |
表の内枠のドット数 |
CELLPADDING |
数値 |
内枠とセルの中身の幅のドット数 |
COLSPAN |
数値 |
セルを数値の数だけ右方向に結合する |
ROWSPAN |
数値 |
セルを数値の数だけ下方向に結合する |
BGCOLOR |
色 |
背景色 |
BACKGROUND |
URL |
背景画像のファイルのURL |
·
色の設定値
BLACK、SILVER、GRAY、WHITE、MAROON、RED、 PURPLE、FUCHSIA、GREEN、LIME、OLIVE、YELLOW、 NAVY、BLUE、TEAL、AQUA などを設定可能。
·
コメント
<!-- と --> で囲まれた部分はコメントとみなされブラウザには表示されません。
·
文字参照
以下の記号は文字参照という方法で指定する必要があります。
記号 |
記述方法 |
|
記号 |
記述方法 |
< |
< |
|
& |
& |
> |
> |
|
“ |
" |
7.
課題と来週の授業
自分のウェブページを作って下さい。作成の際には以下の点に注意して下さい。
·
トップページをwwwフォルダの下にファイル名をindex.htmlで作成する。
·
トップページのタイトル(TITLEタグの中身)は○○のホームページとすること。
·
ページの内容は特に指定しないが、作成したホームページの中で最低一つはどこかに箇条書きとテーブルを使うこと。また、index.html以外に最低2つ以上、別のファイルにHTMLを記述しそのページへのリンクをindex.htmlの中に記述すること。(例:リンク集のページやプロフィールなどのページ)
なお、URLは日本語を使えないという決まりになっていますので、ウェブページを作成する際には、ページや画像のファイル名に日本語を使わないようにして下さい。
·
出来た方は課題のメールの本文に作成したページのURLを(半角で)記述してください。URLは http://www.edu.i.hosei.ac.jp/~ユーザID です。この課題に限り、課題のメールの宛先は私のメールアドレス sigesada@edu.i.hosei.ac.jp にお願いします。
·
締め切りは来年の1月16日です。それ以前に完成して、課題のメールを出した場合でも1月16日までの間に内容を変更するのはかまいません。
·
この課題の評価はホームページの出来栄えで行います。内容やレイアウトを凝ったページは高い評価をつけますのでがんばって作成して下さい。また、授業で説明していないタグを自分で勉強して調べて使うのはかまいません。
·
なお、授業で作成したhomepage.htmlをベースに作成するのはかまいませんが、そのままほとんど手を加えずに提出するのは不可とします。最低限半分以上は自分で考えた新しい内容を付け加えて下さい。
来週の授業は画像編集ソフトの使い方とウェブページ作成のガイドラインを説明した後はこの課題を行う時間に当てる予定です。こういうページを作りたいがどうすれば良いかわからないなどの質問を受け付けますのでネタを温めておいて下さい。
出席、課題のメールは ta04k007@edu.i.hosei.ac.jp までお願いします。
質問のメールなどは、 sigesada@edu.i.hosei.ac.jp までお願いします。
授業の資料の最新版は http://www.edu.i.hosei.ac.jp/~sigesada/ にあります。