1.htmlファイルの基本構成

<HTML>
<HEAD>
<META HTTP-EQUIV="pragma" content="no-cache">
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>ホームページのタイトル</TITLE>
</HEAD>
<BODY bgcolor="000000" text="ffffff" link="008000" vlink="008000" alink="ff0000">

ホームページに表示する内容


</BODY>
</HTML>


  1. ファイル名の拡張子は、html が一般的(htmでも良い)

  2.  書式(文字の大きさ・色等)などを指定するものをタグという。
    タグは <タグ> という型で記述し、タグの条件(値)を書く部分を
    アトリビュートという。タグの有効範囲は、<タグ>〜</タグ>。
    <タグ>だけで、</タグ>の無い物もある。

  3. <HTML>〜</HTML>にホームページを記述する

  4. <HEAD>〜</HEAD>にホームページの概要を記述する

    • <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">は
      使用する文字コードを指定する。

      <META .... content="text/html; charset=Shift_JIS">
      charset=iso-8859-1 英字半角の文字セットが選択されます
      charset=Shift_JIS 日本語(Shift JIS)の文字セットが選択されます

    • <TITLE>〜</TITLE>に記述した内容は、ブラウザの上に表示

  5. ホームページに表示する内容は、<BODY>〜</BODY>に記述する






1) <BODY アトリビュート>

<BODY bgcolor= text= link= vlink= alink= background="ファイル名">


bgcolor背景色
text文字色
link(訪問していない)リンクの文字色・アイコンのボーダー色
vlink 訪問したリンクの文字色・アイコンのボーダー色
alinkリンクの文字・アイコンをクリックした瞬間の文字色・アイコンのボーダー色
background背景に壁紙のファイルを使用する場合の画像ファイル名


・ 色はred等の色名または、をそれぞれ16進数2桁で表現する



 N進数の1桁は、0〜(N-1)を表すN個の記号で表現され、N毎に桁上がりする。
例えば、十進数では0123456789の10個の記号で表現され、十になると桁上がり
して10となる。
 16進数では、0〜15を表す16個の記号が必要となるので、十進数の10〜15
アルファベットA〜Fで表す。

例1)基本色の組み合わせ
FF0000 RED と同じ 00FF00 GREEN と同じ 0000FF BLUE と同じ
FFFF00 YELLOW と同じ FF00FF MAGENTA と同じ 00FFFF CYAN と同じ
000000 BLACK と同じ FFFFFF WHITE と同じ 888888 灰色

例2)赤(R)緑(G)青(B)の輝度を変える

例3)赤(R)緑(G)青(B)の内2色の輝度を変える


壁紙は画面に固定して、コンテンツのみをスクロールさせる
<BODY....>タグに、BGPROPERTIES="FIXED"を追加する


背景色・文字の色・リンクの文字色

背景色・文字の色・リンクの文字色(訪問前、訪問後)の設定を自由にしなさい
  • 小さい窓にはBODYの指定内容を記述する
  • 大きい窓にはホームページの表示内容記述する
[例]・・・ <BR>は改行のタグ

 われわれ人間は実はいつもプロトコルに従っている。<BR>
先ず人間関係に例えてみるとコンピュータネットワーク・<BR>
プロトコルの概念を理解しやすい。さて誰かに今何時か<BR>
尋ねたいときにどうするか考える。<BR>
人間のプロトコル(控えめに言ってマナー)からすれば,<BR>
誰かとコミュニケーションを始めるには,先ず「ハーイ」と<BR>
挨拶をする。「ハイ」と声を掛ければ,「ハイ」という<BR>
返事が返ってくる。気持ちのいい「ハイ」が返って来れば,<BR>
続けて時間を尋ねても問題ないと分かる。<BR>
最初の「ハイ」に対する別の応答(「邪魔しないで」、<BR>
「英語わからない」とか,その他にここにはとても<BR>
書けないニューヨークでよく聞く返事など)ならば<BR>
話をしたくないか出来ないということが分かる。<BR>
このような場合,人間のプロトコルでは時間を尋ねない。<BR>
ときには全く返事が返って来ず,時間を尋ねるのを止める。<BR>
 人間のプロトコルでは,所定のメッセージを送り,<BR>
それに対する返事のメッセージや出来事(応答が無いなど)に<BR>
対して次の行動をしている。やり取りする言葉やそれに<BR>
対する態度が,人間のプロトコルで中心的な役割を<BR>
果たしているのは間違いない。もし異なったプロトコル<BR>
(例えば,マナーをわきまえている人とそうでない人,<BR>
時間ということが分かる人と分からない人)が存在すると,<BR>
共同して何かをすることが出来なくなる。<BR>


使用できる壁紙ファイル
bk01.jpg bk02.jpg bk03.jpg bk04.jpg

<HTML>
<HEAD>
<TITLE>ページ全体の設定</TITLE>
</HEAD>

<BODY >

リンクのタグ例(背景が黒)&表示(背景が黄色)<br> <a href="link1.html">リンク-1</a><br> <a href="link2.html">リンク-2</a><br> <a href="link3.html">リンク-3</a><br> </body> </html>


実行結果





2) 標題文字<H* ALIGN="テキストの位置">について

3) 文字の大きさ・色・フォント等について

  1. 文字の大きさの指定 : <FONT SIZE=文字の大きさ>

    • <FONT SIZE=5>表示する文字</FONT>で指定する。
      この場合は、SIZE=の数値が大きいほど文字は大きくなる。

    • <FONT SIZE=+1>デフォルトのサイズより1だけ大きく</FONT>
    • <FONT SIZE=-1>デフォルトのサイズより1だけ小さく</FONT>

      のように指定することも可能。

  2. 文字の色の指定(部分的に指定する) : <FONT COLOR=文字の色>

    • 色の指定法は<BODY....>と同様、以下のように行う

      <FONT COLOR=RED>文字の色</FONT>
      <FONT COLOR=0088AA>文字の色</FONT>

  3. 文字フォントの指定 : <FONT FACE="フォント名">

    • <FONT FACE="DF行書体">行書体</FONT>
    • <FONT FACE="MSゴシック体">ゴシック体</FONT>


  4. デフォルトの指定 : <BASEFONT SIZE=大きさ COLOR=色 FACE="フォント名">

  5. 文字に関するその他の指定
    • <B>ボールド(太字)</B>
    • <I>イタリック(斜体)</I>
    • <U>下線付き</U>
    • <S>打ち消し線付き</S>
    • <TT>タイプライタテキスト(固定フォント)</TT>
    • <SUB>下付き</SUB>
    • <SUP>上付き</SUP>
    • <BLINK>ブリンク</BLINK>
    • <STRONG>最も強い強調(太字)</STRONG>


例) 数式の作成
fa(x)=x2+x+15

<font size=7>
<B><I>
 f<SUB>a</SUB>(x)=x<SUP>2</SUP>+x+15 
</I></B>
</font><br>

4) 箇条書き(+インデント)


<ol type="i">
<li>文字の大きさの指定
<li>文字の色の指定(部分的に指定する)
<li>文字フォントの指定
</ol>



  1. 文字の大きさの指定
  2. 文字の色の指定(部分的に指定する)
  3. 文字フォントの指定

<ol type="A">
<li>文字の大きさの指定
<li>文字の色の指定(部分的に指定する)
<li>文字フォントの指定
</ol>



  1. 文字の大きさの指定
  2. 文字の色の指定(部分的に指定する)
  3. 文字フォントの指定

<ul type="disk">
<li>文字の大きさの指定
<li>文字の色の指定(部分的に指定する)
<li>文字フォントの指定
</ul>



  • 文字の大きさの指定
  • 文字の色の指定(部分的に指定する)
  • 文字フォントの指定

5) 改行・段落・センタリング・横線

  1. 改行 : <BR>

  2. 段落 : <P ALIGN="テキストの位置"></P>

    • 改行して、その後に一行あける
    • テキストの位置(省略すると左)
      • 左  : LEFT
      • 中央 : CENTER
      • 右  : RIGHT


  3. 行揃えしてテキストを表示 : <DIV ALIGN="テキストの位置"></DIV>

    • テキストの位置(省略すると左)
      • 左  : LEFT
      • 中央 : CENTER
      • 右  : RIGHT


  4. センタリング : <CENTER></CENTER>

タグの例(背景が黒)&表示(背景が黄色)
太枠内を画面の横幅と考えて下さい
<CENTER><FONT SIZE=5>
TDMA with Parallel Transmission : TDMA/PT<BR>
</FONT></CENTER><br>
<P ALIGN=RIGHT>Osamu Akizuki</P>
<P ALIGN=LEFT>Abstract</P>
In this paper, we propose a new access protocol named <BR>"TDMA with Parallel Transmission (TDMA/PT)" for <BR>packet radio networks. With this protocol, we can attain <BR>the throughput performance more than one, even if a single <BR>channel is used for whole area. <BR><BR>
TDMA with Parallel Transmission : TDMA/PT

Osamu Akizuki

Abstract

In this paper, we propose a new access protocol named
"TDMA with Parallel Transmission (TDMA/PT)" for
packet radio networks. With this protocol, we can attain
the throughput performance more than one, even if a single
channel is used for whole area.

  1. 原稿をそのまま表示する : <PRE></PRE>

    • 原稿内の連続した2個以上の空白は1個の空白と見なされる

    • 改行を指定するタグ(<BR>等)が無ければ改行しない

    • 原稿をそのまま表示する場合は、<PRE></PRE>の間に原稿を書く


タグの例(背景が黒)&表示(背景が黄色)
太枠内を画面の横幅と考えて下さい
<PRE><FONT SIZE=5>

   H    H   H   HHH   HHHHH  H   H  H   H   HHH
  H H   H  H     H        H  H   H  H  H     H  
 H   H  H H      H       H   H   H  H H      H   
 HHHHH  HH       H      H    H   H  HH       H 
 H   H  H H      H     H     H   H  H H      H 
 H   H  H  H     H    H      H   H  H  H     H 
 H   H  H   H   HHH   HHHHH   HHH   H   H   HHH  

</FONT></PRE>

   H    H   H   HHH   HHHHH  H   H  H   H   HHH
  H H   H  H     H        H  H   H  H  H     H  
 H   H  H H      H       H   H   H  H H      H   
 HHHHH  HH       H      H    H   H  HH       H  
 H   H  H H      H     H     H   H  H H      H  
 H   H  H  H     H    H      H   H  H  H     H  
 H   H  H   H   HHH   HHHHH   HHH   H   H   HHH  

  1. 横線 : <HR WIDTH=長さ SIZE=幅 COLOR=色>

    • 長さは数値で記述 : PIXEL値または画面横幅に対する%値(省略すると画面横幅になる)
    • 幅は数値で記述 : PIXEL値(省略すると1になる)
    • 色はred等の色名または、をそれぞれ16進2桁で表現する


横線のサンプル
<HR>


<HR COLOR=RED SIZE=5>


<HR COLOR=RED SIZE=5 WIDTH=400>


<HR COLOR=RED SIZE=5 WIDTH=200>


<HR COLOR=00FF00 SIZE=15 WIDTH=75%>


<HR COLOR=00FF00 SIZE=15 WIDTH=50%>


<HR COLOR=00FF00 SIZE=15 WIDTH=25%>



<CENTER>
<HR COLOR=00FFCC SIZE=5 WIDTH=75%>


<HR COLOR=00FFCC SIZE=15 WIDTH=50%>


<HR COLOR=00FFCC SIZE=25 WIDTH=25%>


</CENTER>

6) イメージを張り付ける : <IMG アトリビュート>

タグの例(背景が黒・黄色の文字は表示するテキスト)&表示(背景が黄色)
太枠内を画面の横幅と考えて下さい
<IMG SRC="port.jpg" ALIGN=TOP>
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
画像の右側の文章は、最上部に1行だけ表示され、残りの文章は画像の下に表示される
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
<IMG SRC="port.jpg" ALIGN=CENTER>
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
画像の右側の文章は、中央部に1行だけ表示され、残りの文章は画像の下に表示される
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
<IMG SRC="port.jpg" ALIGN=BOTTOM>
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
画像の右側の文章は、最下部に1行だけ表示され、残りの文章は画像の下に表示される
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
<IMG SRC="port.jpg" ALIGN=LEFT>
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
画像は画面の左に表示される。
文章は画像の右側に画像の高さ分だけ表示され、残りの文章は画像の下に表示される
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
<IMG SRC="port.jpg" ALIGN=RIGHT>
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.
画像は画面の右に表示される。
文章は画像の左側に画像の高さ分だけ表示され、残りの文章は画像の下に表示される
Osamu Akizuki was born in Wakayama, Japan, on October 1, 1954. He received the B.E., M.E. amd Ph.D degrees from Shinshu University, Nagano, Japan, in 1978, 1980 and 1998, respectively. From 1980 to 1989, he worked on R & D of electron tube at Iwatsu Co. Ltd., Tokyo, Japan. From 1989 to 1997, he had been with Gunma Nat. College of Technoogy, Gunma, Japan. Since April 1997, he has been with Miyagi University, where he is currently a Professor of Information Engeneering. His research interests lie in the areas related to packet radio networks.


画像の大きさの指定
元画像(110X145)
・ WIDTHまたはHEIGHTのみを指定した場合、元画像の
 縦横比を保って拡大・縮小


<IMG SRC="port.jpg" WIDTH=220>
<IMG SRC="port.jpg" HEIGHT=290>
・ WIDTHHEIGHTの両方を指定した場合、元画像の
 縦・横をそれぞれ拡大・縮小


<IMG SRC="port.jpg" WIDTH=165 HEIGHT=230>


・ WIDTHHEIGHTを%で指定した場合、ウィンドウ画面の
 大きさに対する相対値となる


・ ウィンドウ画面の大きさ220X290に対する例

<IMG SRC="port.jpg" WIDTH=50% HEIGHT=75%>

試してみる



7) リンク : <A HREF="リンク先">リンク先を示す文字/画像</A>

  1. リンク先(ファイル)

    1. 他のサイトのファイルはURLを指定する
      (例)http://www.myu.ac.jp/~akizuki/profile.html


    2. 同じフォルダ内のファイルはファイル名だけでよい
      (例)koyomi.html


    3. 下位の(サブ)フォルダ内のファイルはフォルダ名/ファイル名
      (例)fish/fish.html


    4. リンク先がHTNLファイルの場合、ファイルの先頭にリンクする

    5. リンク先を示す文字/画像は、<A HREF="リンク先"></A>の間に
      書けば、混在していても良い



  2. リンク先(ファイル)を開く場所の指定

    1. 通常は同じ画面に表示される(置き換わる)

    2. 表示画面を指定する場合、target="画面(フレーム)"を付ける
      詳細については、「表・フレーム」で説明する
      (例)<A HREF="fish/fish.html" target="frame1">


    3. 新しい画面を開いて表示する場合、target="_blank"とする
      (例)<A HREF="fish/fish.html" target="_blank">




リンク先を文字で示す
<A HREF="http://www.myu.ac.jp/~akizuki/profile.html"> Akizuki's Homepage</A>
Akizuki's Homepage


リンク先を画像で示す
<A HREF="http://www.myu.ac.jp/~akizuki/profile.html"> <IMG SRC="port.jpg"></A>



新しい画面を開いて表示する
開いた画面はブラウザの機能で閉じて下さい
<A HREF="fish/fish.html" target="_blank"> カレンダー</A>
カレンダー


  1. リンク先(ファイル内の特定の場所)

    1. リンク先(特定の場所)に<A NAME="場所を示す名前">を指定する
      場所を示す名前はそのファイル内でユニークであれば何でもよい


    2. リンクする先はURLの後に#場所を示す名前を書く
      (例)http://www.myu.ac.jp/~akizuki/profile.html#education


    3. 同じファイル内にリンク先がある場合は#場所を示す名前だけでよい
      (例)#title




リンク先のファイル(link.html)

<HTML>
<HEAD><TITLE>link</TITLE></HEAD>
<body bgcolor=ffffdd text=ffaa88 background="bk02.jpg">

<a name="top">
 われわれ人間は実はいつもプロトコルに従っている。<BR>
先ず人間関係に例えてみるとコンピュータネットワーク・<BR>
プロトコルの概念を理解しやすい。さて誰かに今何時か<BR>
尋ねたいときにどうするか考える。<BR>
人間のプロトコル(控えめに言ってマナー)からすれば,<BR>
誰かとコミュニケーションを始めるには,先ず「ハーイ」と<BR>
挨拶をする。「ハイ」と声を掛ければ,「ハイ」という<BR>
返事が返ってくる。気持ちのいい「ハイ」が返って来れば,<BR>
続けて時間を尋ねても問題ないと分かる。<BR>
最初の「ハイ」に対する別の応答(「邪魔しないで」、<BR>
「英語わからない」とか,その他にここにはとても<BR>
書けないニューヨークでよく聞く返事など)ならば<BR>
話をしたくないか出来ないということが分かる。<BR>
このような場合,人間のプロトコルでは時間を尋ねない。<BR>
ときには全く返事が返って来ず,時間を尋ねるのを止める。<BR>

<a name="bottom">
 人間のプロトコルでは,所定のメッセージを送り,<BR>
それに対する返事のメッセージや出来事(応答が無いなど)に<BR>
対して次の行動をしている。やり取りする言葉やそれに<BR>
対する態度が,人間のプロトコルで中心的な役割を<BR>
果たしているのは間違いない。もし異なったプロトコル<BR>
(例えば,マナーをわきまえている人とそうでない人,<BR>
時間ということが分かる人と分からない人)が存在すると,<BR>
共同して何かをすることが出来なくなる。<BR>

</BODY>
</HTML>



リンクのタグ例(背景が黒)&表示(背景が黄色)

<a href="link.html#top" target="_blank">最初から読む</a><br>
<a href="link.html#bottom" target="_blank">途中から読む</a><br>

最初から読む
途中から読む


上のリンク先をクリックすると








8) テーブル(表) : <TABLE アトリビュート></TABLE>

アトリビュート(各項目は個別に設定・省略可能)
 ・ Border=”テーブルの外枠の幅(ピクセル値)”
 ・ BorderColor=”テーブルの外枠の色(影なし)”
 ・ BorderColorDark=”立体的な枠線の暗い部分の色”
 ・ BorderColorLight=”立体的な枠線の明るい部分の色”
 ・ BgColor=”テーブル内のバックグラウンド色”
 ・ BackGround=”表の背景にする画像ファイル名”
 ・ WIDTH=”イメージの横幅(ピクセルか画面に対する%値)
 ・ HEIGHT=”イメージの高さ(ピクセルか画面に対する%値)”
 ・ CellSpacing=”外枠以外の罫線の幅(ピクセル値)”
 ・ CellPadding=”セル内のデータと罫線の間隔(ピクセル値)”


縦罫線 <TD アトリビュート></TD>   通常のセル
    <TH アトリビュート></TH>   太字・センタリング


アトリビュート(各項目は個別に設定・省略可能)
  • ALIGN="セル内のデータの水平位置"

    • CENTER : 中央部 
    • LEFT : 左に寄せて
    • RIGHT : 右に寄せて
  • ALIGN="セル内のデータの垂直位置"

    • TOP : 上部 
    • CENTER : 中央部
    • BOTTOM : 下部
  • NOWRAP セルからデータがはみ出す場合も改行しない
  • BGCOLOR="セル内のバックグラウンド色"
  • BackGround="セルの背景にする画像ファイル名"
  • WIDTH="セルの横幅(ピクセルかテーブルに対する%値)"
  • HEIGHT="セルの高さ(ピクセルかテーブルに対する%値)"
  • ROWSPAN="N" 他のセルのN倍の高さにする
  • COLSPAN="M" 他のセルのM倍の幅にする


横罫線 : <TR アトリビュート></TR>
アトリビュート(各項目は個別に設定・省略可能)
  • ALIGN="セル内のデータの水平位置"

    • CENTER : 中央部 
    • LEFT : 左に寄せて
    • RIGHT : 右に寄せて
  • ALIGN="セル内のデータの垂直位置"

    • TOP : 上部 
    • CENTER : 中央部
    • BOTTOM : 下部


タグの例(背景が黒)&表示(背景が白色)
基本的な4行3列の表(罫線は1ピクセル幅)

<table border=1>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43
表全体の背景を黄色にする

<table border=1 bgcolor=yellow>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43
表全体の背景を黄色にして、CELL_32の背景を水色にする

<table border=1 bgcolor=yellow>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td bgcolor=cyan>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43
1行目の3個のセルをまとめて(2行目以降の3倍の幅)背景を水色にする

<table border=1>
<tr>
<td COLSPAN=3 bgcolor=cyan>1行目</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

1行目
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43
1列目の4個のセルをまとめて(2列目以降の4倍)背景を水色にする

<table border=1>
<tr>
<td ROWSPAN=5 bgcolor=cyan>1列目</td>
<td>
<tr>
<td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_42</td><td>CELL_43</td>
</td>
</tr>
</table>

1列目
CELL_12CELL_13
CELL_22CELL_23
CELL_32CELL_33
CELL_42CELL_43


タグの例(背景が黒)&表示(背景が白色)
各セルの幅を200Pix./高さを100Pix.にする(3行3列の表)

<table border=1>
<tr>
<td width=200 height=100>CELL_11</td>
<td width=200 height=100>CELL_12</td>
<td width=200 height=100>CELL_13</td>
</tr>
<tr>
<td width=200 height=100>CELL_21</td>
<td width=200 height=100>CELL_22</td>
<td width=200 height=100>CELL_23</td>
</tr>
<tr>
<td width=200 height=100>CELL_31</td>
<td width=200 height=100>CELL_32</td>
<td width=200 height=100>CELL_33</td>
</tr>
</table>


CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33

セル内のデータの表示位置(左右はalign 上下はvalign)を変える

<table border=1>
<tr>
<td width=200 height=100 align=left   valign=top>CELL_11</td>
<td width=200 height=100 align=center valign=top>CELL_12</td>
<td width=200 height=100 align=right  valign=top>CELL_13</td>
</tr>
<tr>
<td width=200 height=100 align=left   valign=center>CELL_21</td>
<td width=200 height=100 align=center valign=center>CELL_22</td>
<td width=200 height=100 align=right  valign=center>CELL_23</td>
</tr>
<tr>
<td width=200 height=100 align=left   valign=bottom>CELL_31</td>
<td width=200 height=100 align=center valign=bottom>CELL_32</td>
<td width=200 height=100 align=right  valign=bottom>CELL_33</td>
</tr>
</table>


CELL_11 CELL_12 CELL_13
CELL_21 CELL_22 CELL_23
CELL_31 CELL_32 CELL_33

ボーダーを10ピクセル幅にする

<table border=10>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43


タグの例(背景が黒)&表示(背景が白色)

以下の説明はIEを基本にしていますので、Netscape(Firefox)では表示のされ方が違います。
Netscape(Firefox)では、表示結果で使用するオプションを決めて下さい。

ボーダーを10ピクセル幅にして、立体的な枠線の明・暗部分の色(緑系)を指定する

<table border=10 BorderColorLight=88ff88 BorderColorDark=00aa00>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43
ボーダーを10ピクセル幅にして、(影無しの)青の枠線にする

<table border=10 BorderColor=blue>
<tr>
<td>CELL_11</td><td>CELL_12</td><td>CELL_13</td>
</tr>
<tr>
<td>CELL_21</td><td>CELL_22</td><td>CELL_23</td>
</tr>
<tr>
<td>CELL_31</td><td>CELL_32</td><td>CELL_33</td>
</tr>
<tr>
<td>CELL_41</td><td>CELL_42</td><td>CELL_43</td>
</tr>
</table>

CELL_11CELL_12CELL_13
CELL_21CELL_22CELL_23
CELL_31CELL_32CELL_33
CELL_41CELL_42CELL_43









9) フレーム

<FRAMESET ROWS="r1,r2,…">        : 画面を縦方向に分割
  <FRAME アトリビュート>
  <FRAME アトリビュート>
       : 
  <FRAME アトリビュート>
</FRAMESET>


<FRAMESET COLS="c1,c2,…">        : 画面を横方向に分割
  <FRAME アトリビュート>
  <FRAME アトリビュート>
       : 
  <FRAME アトリビュート>
</FRAMESET>
 ★ r1,r2,…あるいはc1,c2,…は分割された画面の大きさで、
  ピクセル値または、全画面に対する%値で指定する。

   <FRAMESET COLS="100,*,200"> のように*を指定した場合、*の部分
  (中央部)は左100ピクセル,右200ピクセルとした余りの大きさとなる


アトリビュート
  • SRC="ロードするHTMLファイル名"
  • NAME="分割されたフレーム(画面)に付ける名前" : リンクターゲット名になる
  • SCROLLING="スクロールバーの有無"

    • YES : 必ず付ける 
    • NO : 付けない
    • AUTO : 内容が収まらない場合に自動的に付ける
  • MARGINWIDTH="フレーム内での左右マージン(ピクセル)"
  • MARGINHEIGHT="フレーム内での上下マージン(ピクセル)"
  • NORESIZE  フレームサイズをユーザーがマウスで変更できないようにする
 # フレーム構成とした場合のリンクは、

    <A HREF="表示するファイル名" TARGET="リンクターゲット(表示画面)">


フレーム(画面分割)を定義するファイル : frame.html
<HTML>
<TITLE>フレーム</TITLE>
<FRAMESET ROWS="170,*">
  <FRAME SRC="head.html" NAME="ue">
  <FRAMESET COLS="200,*">
    <FRAME SRC="left.html" NAME="hidari">
    <FRAME SRC="right.html" NAME="migi">
  </FRAMESET>
</FRAMESET>

<NOFRAME>フレームが使えないブラウザのためのタグ</NOFRAME>

</HTML>
  1. 表示ウィンドウ(画面)を上[水色:170Pixel]下[黄色:残り]に2分割する
    <FRAMESET ROWS="170,*">

  2. 上側のフレーム(画面)にueという名前を付け、
    (初期状態として)head.htmlを表示する
    <FRAME SRC="head.html" NAME="ue">


  1. 下[黄色]側のフレーム(画面)左[薄緑:200Pixel]
    右[ピンク:残り]に2分割する
    <FRAMESET COLS="200,*">

  2. 左側のフレーム(画面)にhidariという名前を付け、
    (初期状態として)left.htmlを表示する
    <FRAME SRC="left.html" NAME="hidari">

  3. 左側のフレーム(画面)にhidariという名前を付け、
    (初期状態として)right.htmlを表示する
    <FRAME SRC="right.html" NAME="migi">

ue
hidari migi

各フレームに表示されるファイル内容
[left.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=aaffaa text=black link=black alink=red vlink=black>
<center>
<a href="head.html"   TARGET="ue">  上 </a></br>
<a href="head1.html"  TARGET="ue">  上1</a></br>
<a href="right.html"  TARGET="migi">右 </a></br>
<a href="right1.html" TARGET="migi">右1</a></br>
<a href="right2.html" TARGET="migi">右2</a></br>
</center>
</body>
</HTML>



[head.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=00ffff text=000000>
<center>
<font size=6>フレームのサンプル</font>
</center>
</body>
</HTML>

[head1.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=00ffff text=000000>
<center>
<font size=6>フレームのサンプル(1)</font>
</center>
</body>
</HTML>



[right.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=ffaaaa>
</body>
</HTML>

[right1.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=red>
</body>
</HTML>

[right2.html]

<HTML>
<TITLE>フレーム</TITLE>
<BODY bgcolor=blue>
</body>
</HTML>

フレームの表示イメージ(約1/2に縮小)

実際の画面で表示