next up previous contents
Next: 3.4 スタイルによるページのデザイン Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.2 情報公開



3.3 ページの作成

HTMLでは,文章の段落構造,見出し,表組み,そしてWWWシステムの特徴でもある文字以外の情報(画像,音声,動画など)の貼りつけや他の情報へのリンクをタグによって表記する.HTMLのページの基本的な形を図3.4に示す.


図 3.4:HTMLのソースファイル
図 3.4:HTMLのソースファイル


まったく同じタグを使って作成されたページでも,WWWブラウザにより表示が異なる場合がある.これは,WWWブラウザごとにタグの解釈が微妙に異なることが原因で生じる.また,特定のWWWブラウザでしか解釈できないタグも存在するため,表示するページのレイアウトが崩れることもある.


3.3.1 タグの書式

HTMLでは <> の間に書かれた文字がタグとして扱われる. 基本的にタグは開始タグ(<TA
GNAME>
)と終了タグ(</TAGNAME>) の2つが対になっている.

<TAGNAME>
タグの設定対象となる部分
</TAGNAME>

ただし例外として,対になっていないタグ(<BR>タグ, <HR>タグ,<IMG>タグなど)もある.また,タグでは大文字と小文字は区別されない.例えば,<title><Title><TITLE>はすべて同じ意味に解釈される.


属性

属性を指定できるタグもある.属性とはそのタグの効果を細かく指定するものであり,開始タグの中で指定する.属性には値を持つものと持たないものがあり,値を指定するものは次のように記述する.

<TAGNAME 属性1="値1" 属性2="値2"...>
タグの設定対象となる部分
</TAGNAME>


色の指定

ページの背景や文字の色を変更するには,16進数で表現されたR (赤),G (緑),B (青)の3色の濃淡の組合せにより指定する.例えば,"#FF0000"は, それぞれの色の濃淡がFF (赤),00 (緑), 00 (青)であり,これは"純粋な赤"を意味する.なお,最初に#をつけるのを忘れないようにすること.16進数による色指定の詳細については第VII部 1.1.2を参照すること.

#RRGGBB


特殊文字

HTMLで特殊な意味を持つ文字(<>&"など)は,そのままではファイルに記述してもWWWブラウザに表示されない.ページ内でこれらの文字を表示させるときは,表3.1のように記述する.



表 3.1: 特殊文字
特殊文字 HTMLでの表記 特殊文字 HTMLでの表記
< &lt; " &quot;
> &gt; 半角スペース &nbsp;
& &amp;    


図 3.5:特殊文字タグのサンプル
特別な書き方が必要な文字もあります。<BR>
&lt;&gt;大なり、小なりカッコと&amp;アンドと、<BR>
&quot;ダブルクォーテーションです。<BR>
半角スペース(ここ→&nbsp;←)です。<BR>
一方ここでは(これ→←)スペースは入れてません。



コメントアウト

<!--と--> に囲まれた部分はコメントと呼ばれ,HTMLのソースファイルには書いてあっても,WWWブラウザの画面には表示されない.しかし,タグを<!--と-->で囲むと,そのまま表示してしまうWWWブラウザもあるので注意すること.


3.3.2 ページ全体を設定するタグ

ページを作成するには,本文を書く前にまずページ全体の設定を行う<HTML><HEAD><TIT
LE>
<BODY>などのタグを書き込む.これらのタグは,ページのタイトルを設定したり,ページの本文とそれ以外の部分(ヘッダ)を区別する役割がある.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
ヘッダ
</HEAD>
<BODY>
本文
</BODY>
</HTML>


ページの文書型を宣言する

WWW上の情報については,文書がどのような構造で記述されているのかを指定しなければならない.ここでは,<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">として,この文書がHTML4.0の規格に従って記述されていることを宣言している.

ページ全体を設定する - <HTML>タグ

HTML形式のファイルであることを明示するために,ファイルの最初と最後を <HTML>タグと</HTML>タグで囲む.

ページのヘッダを設定する - <HEAD>タグ

<HEAD>タグと</HEAD>タグで囲まれた部分をヘッダと呼び,ページのタイトルやそのページの構成情報など本文に記述しない情報を記述する.ヘッダに記述した部分はページには表示されない.


ページの本文を設定する - <BODY>タグ

<BODY>タグと</BODY>タグで囲まれた部分にはページの本文を記述する.

next up previous contents
Next: 3.4 スタイルによるページのデザイン Up: 3. WWWサーバによる情報公開 - 基礎編 Previous: 3.2 情報公開