法政大学市ヶ谷基礎科目

情報処理演習II

担当 重定 如彦

2004121

 

9回 ウェブページ製作(その4)

1.      ブロックレベルタグ

HTMLでは、文章の中で見出しのようにひとつのまとまった意味をもつ部分をブロック(block)と呼び、ブロックを表現するタグのことをブロックレベルタグと呼びます。ブロックレレベルタグの前後では一般的に自動的に改行されることになっています。主なブロックレベルタグには以下のものがあります。

·          H1〜H6、HR、TABLE、UL、OL

 見出し(H1〜H6)、罫線(HR)、テーブル(TABLE)、箇条書き(UL、OL)。

·         

 Pタグは文章の段落を表すタグで、Pタグの前後でさらに改行(1行分のスペースが表示される)が行われます。段落を分けずにだらだらと記述された文章は大変読みにくいものなので、文章を内容で区切って段落分けしそれぞれの段落をPタグで囲うことをお勧めします。PタグにはALIGN属性を記述ができ、LEFTCENTERRIGHTのいずれかの値を設定することで、左揃え、中央揃え、右揃えを指定することができます。

 <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

画像を左揃えにし、文字を画像の左で折り返すようにする。

WIDTHHEIGHT

数字

ドット数で幅を指定

数字%

ウィンドウのサイズの割合で幅を指定

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/ にあります。