自己紹介のページの作成

次のページを作ってゆきます。

このページを作る上でのポイントは

1,テーブルを使う。

 

の1点のみです。


1、準備

このページでも、画像を使います。その画像を準備します。
このページで利用する画像は

[hosi_pink.gif] と

[hosi_kabe2.gif] の3つです。

この3つをpage1.htm と同じフォルダ(マイドキュメント)に用意します。


2、作成編

(画像をクリックすると、大きい画像が出てきます)

1,復習

ランチャーから、「開く」を選択し、
フォルダを移動して、page1.htmを開きます。

タイトルを「自己紹介」と設定します。

HEADとBODYの設定をします。
BODYの設定で背景画像は、 「hosi_kabe2.gif」を選択します。
BODYの中身の文章を入力して、改行をします。

このとき、テーブルの中身の文章はあとで入力するので、うたなくていいです。


また、画像を張り付けます。

「本田智美」、「Back」はそれぞれ、フォントサイズ「6」、色を「ff80c0
として、太字(<B>)にします。

右の図はそこまで終えた例です。


3,テーブルを使う。

テーブルを作成します。 文章中で作成したい場所に「テーブルWizard」をクリックします。

右のようなダイヤログが出てきます。
今回は、6行2列のテーブルなので、行の数を「6」列の数を「2」 にします。

「次へ」をクリックします。


それぞれの行に対する内容を入れていきます。

このとき、改行キーを押すと、「終了」になってしまうので、
文字の確定以外では押さないように注意して入力しましょう。

ただ、間違えてもあとで修正は可能です。

右の図は文章を入力し終わったあとです。
このなかで表示出きる部分は一部だけなので文章が切れてます。

全部終われば終了を押します。

このとき、下の表の左のように文章が出てくるので、右のように修正して行きます。

文章は見やすくするために間隔を変更してます。
まずは、「BGCOROR="#FFFFFF"」の部分を消します。

次に、<TR>の文字の部分をマウスでダブルクリックします。
みぎのようなダイヤログが出るので、「行揃え」の「センタリング」を選択して「OK」を押します。

すると、「ALIGN="center"」の部分が挿入されます。

修正前
修正後

<TABLE BODER>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">生年月日</TD>
  <TD>1978年2月2日 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">血液型</TD>
  <TD>O型 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">好きなもの</TD>
  <TD>ここをクリック </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">部活</TD>
  <TD>軟式野球部 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">所属</TD>
  <TD>数理情報2年 </TD>
 </TR>
 <TR BGCOLOR="#FFFFFF">
  <TD BGCOLOR="#FFFFFF">メールアドレス</TD>
  <TD>s9841018@edu.yamaguchi-u.ac.jp </TD>
 </TR>
</TABLE>

<TABLE BODER>
 c
  <TD>生年月日</TD>
  <TD>1978年2月2日 </TD>
 </TR>
 <TR ALIGN="center">
  <TD>血液型</TD>
  <TD>O型 </TD>
 </TR>
 <TR ALIGN="center">
  <TD>好きなもの</TD>
  <TD>ここをクリック </TD>
 </TR>
 <TR ALIGN="center">
  <TD>部活</TD>
  <TD>軟式野球部 </TD>
 </TR>
 <TR ALIGN="center">
  <TD>所属</TD>
  <TD>数理情報2年 </TD>
 </TR>
 <TR ALIGN="center">
  <TD>メールアドレス</TD>
  <TD>s9841018@edu.yamaguchi-u.ac.jp </TD>
 </TR>
</TABLE>

つぎに、「ここをクリック」の部分に「page2.htm」へのリンクをはります。
このとき、<TD>と</TD>の間にリンクのタグが入るようにします。

(正)<TD><A href="page2.htm">ここをクリック</A></TD>
(誤)<A href="page2.htm"><TD>ここをクリック</TD> </A>

これを間違えているとテーブル自体がおかしくなります。


あとは、最後の一行の「Back」に「index.html」へのリンクを張り
全体的にセンタリングすると「psge1」作成は終了です。

最終的なソースの例


テーブルのタグの仕組み

テーブルを使うとタグがたくさんでてきて、どのタグがどう関係しているかわかりにくいかもしれません。

左の図は
2行2列のテーブルのタグの関係をイメージであらわしています。

<TR></TR>で行全体が決められてます。
ですから、上のページづくりで
<TR ALIGN="center"> として、センタリングするようにしています。

表示する文章を入力するのは、<TD>から</TD>の間になります。
<TR>から<TD>の間や</TD>から<TD>の間に
文章を入力するのはHTMLの文法が間違っているので気をつけましょう。
この場合、表示自体がおかしくなります


また、それぞれで、背景色を指定したりできるのですが、
TABLE<TR<TDの順に、作用が強くなります。

例えば、<TR>で背景色を「FFFFFF(白)」にしていて、
その中の<TD>で背景色を「00FFFF(赤)」にすると、
その部分では<TD>が優先され、背景色は赤になります。

どこも色指定していなければ、<BODY>の背景色が反映されます。

Hyper EditではテーブルWizardを利用してテーブルをつくると、  
<TR BGCOLOR="#FFFFFF"> <TD BGCOLOR="#FFFFFF"></TD></TR>
となるのが仕様になっているようなので、背景色には注意しないといけません。