ここからはレイアウトに関することやリンク、入力画面に関することを説明していきます。ここまででサーバー側Javaを組む上で必要と思う必要最低限のことは把握できると思います（入出力画面やデータの渡し方など）。

　いよいよHTMLの特徴であるハイパーテキスト（Hyper Text）、他の文書や文書の他の部分へのリンクの張り方について説明します。

　リンクの指定には <a> タグを使います。書き方は <a href="飛び先のURL">表示文字</a> です。

　飛び先URLの指定には、http://から指定する絶対パス指定と、サーバー上で自分が（この.htmファイルが）置かれているディレクトリを基準にした相対パス指定があります。今見ているこのページの一番下にあるリンクを元に、実際の例を見ていきましょう。

・ｗｅｂサイトホームへのリンク（絶対指定）

ソース		実際の表示
<a href="http://www.nihon-eng.co.jp/">Ｗｅｂサイトホーム</a>		Ｗｅｂサイトホーム

・ＨＴＭＬ編先頭（相対指定−同じディレクトリ上の別ファイル）

ソース		実際の表示
<a href="HTML_Top.htm">ＨＴＭＬ編先頭</a>		ＨＴＭＬ編先頭

・サーバーＪａｖａ入門先頭（相対指定−一つ上のディレクトリにあるファイル）

ソース		実際の表示
<a href="../TechNoteJava.htm">サーバーＪａｖａ入門先頭</a>		サーバーＪａｖａ入門先頭

　リンクを張ってある個所はブラウザの設定にも依るんですが、表示文字の下に下線が付き、表示文字のようになります。ブラウザの設定に関わり無くこの下線を出したくない場合（例えば文章の一部にリンクを埋め込んでいるなど）、<a> タグに対して style= パラメータを使い style="text-decoration:none;" と指定します。

・リンクに下線を表示したくないとき

ソース		実際の表示
<a href="HTML_Top.htm" style="text-decoration:none;"> ＨＴＭＬ編先頭</a>		ＨＴＭＬ編先頭

　ここまでの説明は別のページを表示する場合のリンクについてでした。次に同一ページ内の別の場所に移動する場合のリンク指定について説明します。

　リンクを張る個所には別ページの場合と同じように <a> タグを使います。書き方が少し変わって <a href="#飛び先の名称">表示文字</a> になります。「この飛び先の名称って何だ？」ということになるんですが、これは飛んでいって欲しい場所に自分で名前を付けます。付け方はその場所に <a name="名称">表示文字</a> と宣言しておくわけです。hrefを指定するときにその名称の頭に#を付けて、href="#名称"とするわけです。

　例えば今見ているこの章には ◇リンクについて という見出しがついてますが、そこには
<a name="link1">　◇リンクについて</a> というように名称を付けてます。したがって

ソース		実際の表示
<a href="#link1" style="text-decoration:none;"> リンクについて</a>		リンクについて

としてやれば右側の実際の表示の部分のリンクをクリックすると、この章の先頭に移ります。

　ここまでの別のページを表示する場合のリンクと、同一ページ内の別の場所に移動する場合のリンクの合わせ技も可能です。つまり別のページの特定の場所に移動する場合です。

　書き方は <a href="飛び先のURL#飛び先の名称">表示文字</a> です。ここの前にあたるページ、「初めてのHTML」にある「文字の装飾」に移るリンクを張ってみましょう。
　「文字の修飾」には <a name="font"gt;　◇文字の装飾</a> と名称を付けてます。そこで

ソース		実際の表示
<a href="HTML_1st.htm#font" style="text-decoration:none;"> 文字の修飾</a>		文字の装飾

としてやれば右側の実際の表示の部分のリンクをクリックすると、該当ページの該当個所に移ります。

　テーブルとは文字通り画面上に表形式で表示するためのものです。

　しかし使い方として表形式の編集・表示だけでなく、レイアウト設定用に利用することも多いです。レイアウト設定は本来はスタイルシートを使用するのが筋らしいのですが、スタイルシートに完全対応したブラウザが少ないのと、レイアウトまでスタイルシートで設定するのは、特に手でするのはなかなか大変なこともあって専門家（ウェブデザイナーとかウェブクリエイターとか）でもない限りテーブルを流用するのが手っ取り早いです。

　テーブルに関するタグの構成要素は次のとおりです。この中で <table> タグの border= パラメータで指定しているのは、枠線を表示する、という意味です。ここに"0"を指定すれば枠線は表示されませんし、"2"や"3"を指定すればもっと太い枠線になります。

ソース		実際の表示
<!-- テーブル定義の開始　これは１行２列の例 --> <table border="1"> <tr> <!-- 行定義の開始 --> <td> <!-- １セル定義の開始 --> 　　　１つ目のセルの内容 </td> <td> <!-- １セル定義の開始 --> 　　　２つ目のセルの内容 </td> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

ソース		実際の表示
<!-- テーブル定義の開始　これは２行１列の例 --> <table border="2"> <tr> <!-- 行定義の開始 --> <td> <!-- １セル定義の開始 --> 　　　１つ目のセルの内容 </td> </tr> <tr> <!-- 行定義の開始 --> <td> <!-- １セル定義の開始 --> 　　　２つ目のセルの内容 </td> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

　テーブルの個々のセルは一つの描画領域と見なせます。個々のセル内に、これまで説明してきた区切り線を引いたり文字の装飾するタグを書いたり、さらに入れ子でテーブル定義のタグを書くこともできます。実際、今まで示してきた例は画面上左側に「ソース」があり、右側にそのソースで表示される「実際の表示」がありました。これらはテーブルを利用してレイアウトさせてます。

　テーブル全体の幅を指定するには <table> タグに width= パラメータを指定します。

　一つはピクセル数を使って絶対値で指定する方法です。例えば表示しているブラウザの横幅を広げても、 width= パラメータで指定した以上にテーブルの幅が広がることはありません。

　もう一つは％指定で、描画領域に対する割合で指定する方法です。表示しているブラウザの横幅を変えると、つまり描画領域の幅を変えるとそれに応じてテーブルの幅も変わります。

　明示的に幅を指定しない場合は、セル内に表示する行の文字数（横方向の文字数）によって動的に幅が決まります。

　この width= パラメータはセル毎に <td> タグに対して指定することも出来ます。

　セル毎に絶対値で指定した場合、行方向のセルの幅の合計値がテーブルの幅になります。

　セル毎に割合で指定した場合、それはそのセルを含む描画領域に対する割合いになります。そのセルを含むテーブルの幅が指定されていればそれに対する割合になりますし、テーブルの幅が指定してなければテーブルを含む描画領域に対する割合となります。

　以下の例では幅を指定する width= パラメータしか示しませんが、高さを指定する場合は height= パラメータをいます（ width= の部分を height= に変えて試してみてください）。

テーブルの幅を絶対値指定

ソース		実際の表示
<table border="1" width="400"> <tr> <td> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

テーブルの幅を相対指定

ソース		実際の表示
<table border="1" width="95%"> <tr> <td> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

セルの幅を絶対値指定

ソース		実際の表示
<table border="1"> <tr> <td width="100"> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td width="400"> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

セルの幅を相対指定

ソース		実際の表示
<table border="1"> <tr> <td width="60%"> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td width="30%"> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

テーブルの幅を決めてセルの幅を相対指定

ソース		実際の表示
<table border="1" width="400"> <tr> <td width="60%"> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td width="30%"> </tr> </table>		１つ目のセルの内容 ２つ目のセルの内容

　テーブルに対する表題は <table> タグの後ろに <caption> タグと </caption> タグで囲って付けます。例えばこの直前の例の「テーブルの幅を決めてセルの幅を相対指定」は、この capton で指定しています。

　またテーブルに対して見出し行を設定することも出来ます。個々のセル定義は <td> 〜 </td> でしたが、見出しは <th>見出し</th> になります。例に出てくる「ソース」や「実際の表示」はこれを使っています。

ソース		実際の表示
<table border="1" width="400"> <tr> <th> セル１見出し </th> <th> セル２見出し </th> </tr> <tr> <td width="60%"> １つ目のセルの内容 </td> <td> ２つ目のセルの内容 </td width="30%"> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容

　テーブル全体やセル単位に背景色を設定することができます。指定方法は <bgcolor= パラメータを <table> タグや <tr> タグ、 <td> タグ、 <th> タグに対して指定することによって行います。

　指定の優先順位はより狭い範囲、つまり<td>、 <th> <= <tr> <= <table> になります。背景色を指定していないセルについては、その上位で指定されている背景色がデフォルトとして使用されます。

テーブル全体の背景色を指定する

ソース		実際の表示
<table border="1" bgcolor="gray"> <tr> <th>セル１見出し</th> <th>セル２見出し</th> </tr> <tr> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容

行毎に背景色を指定する

ソース		実際の表示
<table border="1"> <tr bgcolor="gray"> <th>セル１見出し</th> <th>セル２見出し</th> </tr> <tr bgcolor="aqua"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> <tr bgcolor="yellow"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容

セル毎に背景色を指定する

ソース		実際の表示
<table border="1"> <tr bgcolor="silver"> <th>セル１見出し</th> <th>セル２見出し</th> </tr> <tr> <td bgcolor="aqua">１つ目のセルの内容</td> <td bgcolor="blue">２つ目のセルの内容</td> </tr> <tr bgcolor="pink"> <td bgcolor="orange">１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容

　枠線の色を変える場合は <bordercolor=> パラメータを使います。これも <table> タグや <tr> タグ、 <td> タグ、 <th> タグ単位に指定できます。

枠線の色を指定する

ソース		実際の表示
<table border="1" bordercolor="aqua"> <tr bgcolor="gray"> <th>セル１見出し</th> <th>セル２見出し</th> </tr> <tr bgcolor="silver"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> <tr bgcolor="silver"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容

行毎に枠線の色を指定する

ソース		実際の表示
<table border="1" bordercolor="aqua"> <tr bgcolor="gray"> <th>セル１見出し</th> <th>セル２見出し</th> </tr> <tr bgcolor="silver" bordercolor="green"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> <tr bgcolor="silver" bordercolor="blue"> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容

セル毎に枠線の色を指定する

ソース		実際の表示
<table border="1" bordercolor="aqua"> <tr bgcolor="gray"> <th bordercolor="white">セル１見出し</th> <th>セル２見出し</th> </tr> <tr bgcolor="silver" bordercolor="green"> <td>１つ目のセルの内容</td> <td bordercolor="black">２つ目のセルの内容</td> </tr> <tr bgcolor="silver" bordercolor="blue"> <td bordercolor="red">１つ目のセルの内容</td> <td>２つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容

　セル内の文字について横方向の配置（右詰、左詰、中央）や縦方向の配置（上詰、下詰、中央）を指定する場合、横方向なら align= パラメータ、縦方向なら valign= パラメータで使用します。

　このパラメータを <tr> タグ（行全体に対する指定）や <td> タグ（セル単位の指定）に対して指定します。

　指定するパラメータ値は横方向の場合は "right" （右詰）、 "left" （左詰）、 "center" （中央）、縦方向の場合は "upper" （上詰）、 "bottom" （下詰）、 "middle" （中央）のいずれかになります。

セル内の配置

ソース		実際の表示
<table border="1"> <tr height="80" valign="top"> <td width="200" align="left">左詰&上詰</td> <td width="200" align="center">中央&上詰lt;/td> <td width="200" align="right">右詰&上詰lt;/td> </tr> <tr height="80"> <td width="200" align="left" valign="middle">左詰&中央</td> <td width="200" align="center" valign="middle">中央&中央</td> <td width="200" align="right" valign="middle">右詰&中央</td> </tr> <tr height="80" valign="bottom"> <td width="200" align="left">左詰&下詰</td> <td width="200" align="center">中央&下詰</td> <td width="200" align="right">右詰&下詰</td> </tr> </table>		左詰&上詰 中央&上詰 右詰&上詰 左詰&中央 中央&中央 右詰&中央 左詰&下詰 中央&下詰 右詰&下詰

　テーブル表示されている中のセルを、Excel97以降の「セル結合」のように連結させることが出来ます。

　横方向に連結させたい場合、開始セルの <td> タグに colspan= パラメータで連結させるセルの数を指定します。

　縦方向に連結させたい場合、開始行の連結させたいセルの <td> タグに rowspan= パラメータで連結させるセルの数を指定します。

セルの連結（横方向）

ソース		実際の表示
<table border="1" bgcolor="silver" bordercolor="aqua"> <tr bgcolor="gray"> <th>セル１見出し</th> <th>セル２見出し</th> <th>セル３見出し</th> </tr> <tr> <td>１つ目のセルの内容</td> <td colspan="2">２つ目のセルの内容</td> </tr> <tr> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> <td>３つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し セル３見出し １つ目のセルの内容 ２つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容 ３つ目のセルの内容

セルの連結（縦方向）

ソース		実際の表示
<table border="1" bgcolor="silver" bordercolor="aqua"> <tr bgcolor="gray"> <th>セル１見出し</th> <th>セル２見出し</th> <th>セル３見出し</th> </tr> <tr> <td>１つ目のセルの内容</td> <td rowspan="2">２つ目のセルの内容</td> <td>３つ目のセルの内容</td> </tr> <tr> <td>１つ目のセルの内容</td> <td>３つ目のセルの内容</td> </tr> <tr> <td>１つ目のセルの内容</td> <td>２つ目のセルの内容</td> <td>３つ目のセルの内容</td> </tr> </table>		セル１見出し セル２見出し セル３見出し １つ目のセルの内容 ２つ目のセルの内容 ３つ目のセルの内容 １つ目のセルの内容 ３つ目のセルの内容 １つ目のセルの内容 ２つ目のセルの内容 ３つ目のセルの内容

　横方向の連結は直感的に分かりやすいんですが、縦方向の場合は（特に複数の場所に連結セルを作りたい場合）どこに rowspan= を入れれば良いか、連結を含む行の <td> タグをどう指定するか、なかなかに厄介です。特に一つのテーブル中に横方向と縦方向の連結が混在する場合なんか・・・　まあ頑張ってみてください。

　これまで例えば背景色はテーブル単位、行単位、セル単位、あるいはテーブル以外に対しては body 単位（表示域全体）について説明してきました。また文字の装飾については <font> タグ 〜 </font> タグ で囲った任意の範囲について指定できることを説明しました。

　HTMLにはこれらとは別に、範囲を指定するためのタグが何種類かあります。

　主なものを挙げると、 <div> タグ 〜 </div> タグ、 <p> タグ 〜 </p> タグ、 <span> タグ 〜 </span> タグです。

　 <div> タグはブロック、区域を指定します。
　 <p> タグはParagraph、段落の指定に使います。
　 <span> タグはより狭い、ある文の一部を指定するときに使います。

　 <div> タグや <p> タグで囲んだとき、 </div> タグ、 </p> タグがあると必ず改行コードが挿入されます。 <span> タグの場合は改行コードは挿入されません。

　また文章構造の階層でいうと <p> タグは <ul> タグや <table> タグと同レベルです。 <div> タグはもっと上位レベルになるので、 <div> タグの中に <ul> タグや <table> タグを含めることができます。

　実際にこれらの範囲指定が便利なのはスタイルシートと組み合わせた場合だと思います。文章のある部分だけの背景色を変える、行間を変える、といったことが可能になります。このへんはスタイルシートの方を参照してください。

　純粋に範囲指定の意味からは少し外れますが、 <nobr> もここで説明しておきましょう。これは改行しないという意味になります。

　HTML文書を表示する際はブラウザーの画面幅に合わせて改行して表示されますが、 <nobr> と </nobr> で囲むとその間はこの自動改行をしなくなります。明示的に <br /> で改行を指定したところでだけ改行されるようになります。

　このページの画面は次に説明するフレーム構成をとっており、左フレームでは目次を表示しています。この目次用のHTMLの中では <nobr> により自動改行を抑止しています。

　色を指定するには３通りの方法があります。

1. 標準の１６色に付いている色名で指定
2. その他の色にも付いている色名で指定
3. R（赤）G（緑）B（青）毎に２桁ずつの１６進数で数値指定

　このうち２についてはなにぶん数が多いので、ここではこれ以上触れません。

　１について、標準で定められている色名を以下に示します。これはおよそどのブラウザを使っても表示できるはず（実際の色調は使用しているモニタ等で変わるので、全ての環境において全く同じ色になるわけではありません）。

　指定方法は今までにも背景色、枠線の色、フォントの色などで説明してきましたが、例えば背景色なら bgcolor="色名" といった指定になります。

標準の色名

aqua	black	blue	gray
green	lime	fuchsia	maroon
navy	olive	purple	red
silver	teal	white	yellow

　３の１６進数で数値指定の場合は例えば背景色なら bgcolor="#RRGGBB" という指定方法になります。パラメータ値の最初にある # が、「１６進数による数値指定」を意味し、これ以降の RR が赤、 GG が緑、 BB が青に対する１６進数値になります。

　数値部分は00からffまでの値をとり、数値が大きいほどその色が明るい（強い）ことを意味します。例えば白は#ffffff、黒は#000000、赤は#ff0000、青は#0000ff、といった具合です。