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ブラウザでしか解釈できないタグも存在するため,表示するページのレイアウトが崩れることもある.


3.3.1 タグの書式

HTMLでは `<' と `>' の間に書かれた文字がタグとして扱われる. 基本的にタグは開始タグ(<tagname>)と終了タグ(</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進数による色指定の詳細については第1部 1.1.2を参照すること.

#RRGGBB


表 3.1: 色名を直接指定
色名 表記 色名 表記
red blue
white black
green yellow


特殊文字

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


表 3.2: 特殊文字
特殊文字 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>


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


HTML文書を作る場合には,どのバージョンのHTMLに準拠する文書なのかを明記する必要がある.ここでは,<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 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 情報公開の手順