HTML講座


第1回  第2回  第3回  第4回  第5回  第6回  最終回

第1回:根本原理

 ホームページ作成講座じゃなくてHTML講座です。どこが違うんだというと、ホームページを作ろうと思えば、別に専用のソフトを買わなくてもブラウザ付属のソフトを使えば簡単に出来ます。いちいちタグを書いていくのって面倒だし、私だって、表作成の場合、タグから書いていく気にはなれません。じゃ何故?となると、理解出来た分だけ、ソフトでは出来ない事も出来るし、よそ様のホームページのソースから盗むことも出来るし、何より、面白い。基本はめちゃ簡単。普通のコンピューター言語というのは、基本的な仕組みそのものが、ちょっとやそっとじゃ分からないように出来ているから、コードを眺めても原理が分からなくて、文系の人間にはお手上げ。ところがこのHTMLは難解な部分があってもそれは、その部分が難解なだけ。基礎は簡単。簡単だから早く本題に入ろう。
(当方の環境はWindows98,Netscape Communicator 4.51,Wz Editor 2.00Eです。動作が違うという場合は、環境も含めてお知らせ下さい。)

1:HTMLとは?

 Hypertext Markup Language のこと。hyper は「超」markupは「(活字の)組指定」のこと。「超テキスト版組言語」とでも言うのでしょうか? バイナリではなくテキストファイルです。拡張子はhtml(あるいはhtm)。
 

2:HTMLの原理

  テキストファイルであるということは、作成するのに特殊なソフトがいらないというとこです。メモ帳でも一太郎でもテキスト形式で保存ができたらそれでOK。そして、(HTMLを知っている人には驚くべきことに、)普通に文字を入力し、たとえば:

 これこれ

 とだけ入力し、これこれ.html と名前を付けて保存し、ブラウザでファイルを開けば

 これこれ

 と表示されます。嘘だと思ったらやってみましょう。嘘じゃないでしょ。でもこれじゃ、普通のテキストファイルと何ら変わることがない。どこがハイパーなんじゃ?ということで、こいつを拡大文字にします。「これこれ」の前に<h1>、後ろに</h1>を書き足しましょう。

<h1>これこれ</h1>

さてこれを表示すると
 

これこれ

と表示されますね。なんと驚くことに、HTMLの原理はこれだけ!!!

 ある命令を実行させたい場合、その命令の開始を<***>で指示し、終了を</***>で指示する。***にはその命令の呪文が入る。前の「<h1>これこれ</h1>」は、「これこれ」の部分をh1、つまりheading No.1=見出し1号で表示せよ。ということ。そんだけ。だからHTMLの難解さは、時として難解な呪文があるということと、NetscapeとIE、あるいはそのバージョンごとに、サポートしている呪文が違っているとか、そういうこと。

 もっと詳しく言うと、

  1. < と >の間は、画面には表示されない。
  2. < と >の間を、ブラウザが解釈する。ここには通常、命令が入る。大文字でも小文字でも、何なら大文字小文字混在させてもかまわない。外国原産なので当然全角文字は不可である。英語ではelementと呼んでいるようだが、日本ではこの命令の呪文と< >構造をひっくるめてタグと呼んでいるようである。ブラウザが対応していない命令は単に無視される。命令以外の呪文にはhtml,head,title,bodyなどのHTMLテキストの構造を示すものや、コメントを書くための<!--ここにコメント-->がある。しかしただコメントを残したいだけなら <これコメントよ>、とやっても十分である。ブラウザが対応していないエレメントは無視されるだけだからである。しかし何が起こるとも限らないので行儀良くする方が無難であろう。
  3. 通常は<***>と</***>を一組セットで使う。命令の開始場所と終了場所である。しかし、中には単独で使う物もある。たとえば、線を引く、<hr>(horizontal rule:水平罫線)、改行マークの<br>(break)などである。


3:HTMLファイルの構造

約束事としてHTMLファイルは、通例

<HTML>
<HEAD>
<TITLE>題名</TITLE>
</HEAD>
<BODY>
ここに本文
</BODY>
</HTML>

の構造を持つ。

 賢明な読者諸氏におかれてはすでに理解されたことであろうが、最初の<html>から最後の</html>までがブロックで、これはHTMLファイルの開始位置と終了位置を示す。こんなんなくてもいいんじゃないか?と当然思うと思うが、何のことはない、(HTML4.0の場合)省略可能なんだそうである。
 次に、head ブロックと、bodyブロックに大別される。「頭」部分には、そのファイルの情報が入り、「身体」部分に、ブラウザで表示される本体部分が入る。ただしこのheadとbodyも省略可能なんだそうである。なんのこっちゃ。
 <title>は題名を入れる箇所であるが、こいつも省略しても差し支えないようである。普通<***>と</***>に挟まれた部分が、ブラウザで画面表示されるのだが、こいつはブラウザの左上隅のアイコンの右に表示される。またブックマークに登録したときに、ここに書いてある題名で登録される。
 なお、改行は人間が読みやすいように入れているだけで、全く改行しなくても動作します。

 以上で第1回の終了。おつかれさまでした。
 


第1回  第2回  第3回  第4回  第5回  第6回  最終回

  
第2回:フレーム

 第2回は順当な順番なら、本文のレイアウト関係の話になるはずです。ですが、それは別にタグを書かなくてもブラウザ付属のHTML作成ソフトで(Internet ExplorerならFrontPage,NetscapeならComposer)、一通りのことは出来るはずです。とりあえずは付属ソフトで出来ないこと、出来るけどタグ書いた方が簡単なこと、から話をすすめましょう。本題にはいる前に、分かりやすくするために、好きな背景色をしたHTMLファイルを4つばかり付属ソフトで作成して下さい。私は意固地にタグ書いて作成することにします。

<body bgcolor=red></body>と書いて、red.htmlと名前を付けて保存。

 body=本文の、bgcolor=background color=背景色を赤にしろ、という指定です。
 以下、<body bgcolor=green></body>でgreen.html、<body bgcolor=blue></body>でblue.html、<body bgcolor=yellow></body>でyellow.html。<html><head>等のお約束事はあってもなくてもかまいません。どうせテスト用のファイルですから。
 

1:フレームの作り方
 
 
 
 

のようなフレームを作成してみましょう。今回はお約束事に従います。
THMLファイルの構造は以下のようでした。

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

フレームを作る場合は、フレームの枠組みを決めるファイルを作り、作られたフレームに表示したいファイルを呼び出す、という形式をとります。つまり。
 

 これから作る(例えば)frame.htmlというファイルで、枠組みを指定し、上の部分に作成した、red.htmlファイルを、下に、green.htmlファイルを呼び込むという手順になります。

 枠組みを指定するファイルの特徴は、枠組み指定に徹するため<body>が使えないことです。本文なしで枠組みのみ。その指定を<frameset>で行います。

この場合は、上下、2行に分割するので、row:行、街の並び(DylanのDesolation Row のrowです)をセットします。セットの仕方はパーセント表示。

<frameset rows=50%,50%>

 frameset:フレームをセットしてね。rows=:行=横に分割してね。%50%,50%:上から順に50%,50%でお願いします。これで分割されます。しかし、これだけでは、ブラウザで表示させても、真っ白な画面が表示されるだけです。次に呼び出すファイルを指定します。これも上から順番に。

<frame src="red.html">
<frame src="green.html">

 frame:フレームだよ。src=sourceソース=源は"red.html"でお願いしま〜す。 この2つのタグには終タグはいりません。<>の中で処理が終わるからです。
しかしframesetはその影響が後ろに続いていくので終タグで終了させます。

</frameset>

タイトルはフレームとでもしておきましょう。
 

<html>
<head>
<title>フレーム</title>
</head>
<frameset rows=50%,50%>
<frame src="red.html">
<frame src="green.html">
</frameset>
</html>

これを、frame.htmlとでも名前を付けて保存しましょう。ところで、スペルミスはないでしょうか?私は最初作った時に、50%,50%のコンマをピリオドに打ち間違えて無駄な苦労をしてしまいました。さあブラウザで表示です。
 
 
 
 

 できたできた。ホームページの読みやすさを考えたら2つ程度だと思いますが、3つ(以上)に分割したかったら、<frameset rows=25%,25%,*,10%>のようにすればできます。*は計100%になるようにブラウザで計算してね、という記号です。もちろん、自分で計算して40%と書いた方がいいと私は思います。

 次は縦。縦にするのには、cols:colums:円柱、列=上下を使います。
<html>
<head>
<title>フレーム</title>
</head>
<frameset cols=50%,50%>
<frame src="red.html">
<frame src="green.html">
</frameset>
</html>

これを表示すると:
 
   

次は縦横の組み合わせ。4分割しましょう。

<html>
<head>
<title>フレーム</title>
</head>
<frameset rows=50%,50% cols=50%,50%>
<frame src="red.html">
<frame src="green.html">
<frame src="blue.html">
<frame src="yellow.html">
</frameset>
</html>

これを表示すると:
 
   
   
 
<frameset rows=50%,50% cols=50%,50%>の部分はrows,colsが逆になっても(<frameset cols=50%,50% rows=50%,50%>)同じ結果が得られます。どっちが先だったっけと悩む必要はありません。ただし、

<frameset rows=50%,50%>
<frameset cols=50%,50%>

と2つ分けて書くとしくじります。出来ないことはないのですが

<frameset rows=50%,50%>
<frameset cols=50%,50%>
<frame src="red.html">
<frame src="green.html">
</frameset>
<frameset cols=50%,50%>
<frame src="blue.html">
<frame src="yellow.html">
</frameset>
</frameset>

といったなんでこうなるの?といった設定が必要になります。一つに纏めて書きましょう。

次はこれ
 
 
   

さあ、どうする?
フレームの指定は、ちょうど横書きするように、左から右、上から下に設定します。一行目は分割されていませんから、最初に列方向(左右)の分割は必要ありません。まず行方向(上下)に分割します。

<frameset rows=50%,50%>

そして1行目に入るファイルを指定します。

<frame src="red.html">

次に2行目。これは列方向(左右)に分割されていますから

<frameset cols=50%,50%>

そして2つのファイルを、左から右に指定します。

<frame src="green.html">
<frame src="blue.html">

そして、フレーム分割終了の印です。<frameset>を2つ使用しているので終タグも2つ必要です。

</frameset>
</frameset>

以上

<html>
<head>
<title>フレーム</title>
</head>
<frameset rows=50%,50%>
<frame src="red.html">
<frameset cols=50%,50%>
<frame src="green.html">
<frame src="blue.html">
</frameset>
</frameset>
</html>

で完成です。

さて、次。
 
   
 

 <frameset rows=50%,50% cols=50%,50%>と指定すると、画面全体が4分割されてしまいます。2行目が分割されていないので使えません。2行目が分割されていないので、行方向の分割のバリエーションと考えます。ということで、最初に行方向に2分割。

<frameset rows=50%,50%>

次に列方向へ2分割です。

<frameset cols=50%,50%>

ここで、一行目赤と緑を指定。

<frame src="red.html">
<frame src="green.html">

次に2行目。2行目は列で分割されていませんから、上での指定を取り消す必要があります。

</frameset>

 開始タグと終了タグは近い方で(入子状に)対応します。つまり、 ○ ● ◎ ◎ ● ○ というように対応しているので、上の</frameset>は2行目の<frameset cols=50%,50%>を終了させます。

次に、2行目に入るファイルの指定。

<frame src="blue.html">

最後に、frameset終了の印。

</frameset>

以上

<html>
<head>
<title>フレーム</title>
</head>
<frameset rows=50%,50%>
<frameset cols=50%,50%>
<frame src="red.html">
<frame src="green.html">
</frameset>
<frame src="blue.html">
</frameset>
</html>

でOK。ただし、私が買ったタグ本は:

***
</frameset>
<frameset cols=100%>
<frame src="blue.html">
</frameset>
</frameset>
***

と、<frameset cols=50%,50%>を終了させたら、自然に100%に戻るはずなのに、わざわざ<frameset cols=100%>と100%指定をだめ押ししていました。不必要だと思うのですが、ブラウザの種類によると必要なのかもしれません。(NetscapeでもInternet Explorereでも正しく表示されます)

 
これで終わり。

後は練習問題。次のようなフレームを作れ。解答はすぐ下にあります。
 
 
   
 
 

答え

右の列が分割されていないので列分割の応用。
<frameset cols=50%,50%>
最初の(左側の)列が3行に分割されているので、行方向に3分割。
<frameset rows=33%,34%,33%>
そして、緑、青、黄色とファイル指定。
<frame src="green.html">
<frame src="blue.html">
<frame src="yellow.html">
行方向のフレーム分割が終わったので、終タグ。
</frameset>
赤ファイルの指定。
<frame src="red.html">
忘れずに終タグ。
</frameset>

以上。

<frameset cols=50%,50%>
<frameset rows=33%,34%,33%>
<frame src="green.html">
<frame src="blue.html">
<frame src="yellow.html">
</frameset>
<frame src="red.html">
</frameset>
 

最後の問題です。
 
 
   
 

答え

行分割の応用だから
<frameset rows=25%,50%,25%>
赤ファイルの指定
<frame src="red.html">
列分割してファイルの指示
<frameset cols=50%,50%>
<frame src="green.html">
<frame src="blue.html">
列分割の終了
</frameset>
黄色ファイルの指定
<frame src="yellow.html">
忘れずに終タグ
</frameset>

以上

<frameset rows=25%,50%,25%>
<frame src="red.html">
<frameset cols=50%,50%>
<frame src="green.html">
<frame src="blue.html">
</frameset>
<frame src="yellow.html">
</frameset>
 
 

2:フレームに呼び出すファイルの指定。

 わたしのホームページは下のラベンダーのindexの指示で、右のベージュのフレームのページを入れ替える設定になっています。(開設当初のデザインです。)
 
 
   

 その設定方法の説明です。

まず、入れ替え可能なフレームを指名します。これは当然、フレームを設定しているファイルで行います。
ベージュのフレームに呼び出すファイルを設定する箇所で、名前を付けます。ここではmainとつけましょう。具体的には

<FRAMESET rows=20%,80%>
<FRAME SRC="gainsboro.html">
<frameset cols=10%,90%>
<FRAME SRC="lavender.html">
<frame src="beige.html" name=main>  <!--ここで名前をつける-->
</FRAMESET>
</frameset>

とやります。

次、下・左のラベンダーのファイル。

<HTML>
<HEAD><TITLE>index</TITLE>
<base target="main">                           <!--ここでベースとなるターゲットを設定-->
</HEAD>
<BODY bgcolor=lavender>
<h3><center>index</h3></center>

<p><a href="main.html">巻頭</a></p><!--第3回で説明しますが、普通通りのリンクの張り方-->
<p><a href="html_01.html">HTML講座</a></p><!--同上-->
<br>
<br>
<br>
<a href="mailto:kawa_s@mx3.tiki.ne.jp" align="right">E-MAIL</a>
</BODY>
</HTML>

 ここでは指定したフレームは1つだけだから、上の例のように、纏めて<base target=***>を設定すれば終わりです。もし、複数のフレームを使用したいなら、使用するだけのフレームに名前を付けて、

<a href="main.html" target="frame1">巻頭</a>
<a href="html_01.html" target="frame2">HTML講座</a>

のように、呼び出すファイルごとに、各々使用したいフレームを指定してやればできます。
 
 

以上で2回目の終了。お疲れさまでした。


第1回  第2回  第3回  第4回  第5回  第6回  最終回


  第3回:リンク

1:同じファイル内に飛ぶ。

 あの〜。飛べったって何処に飛んだらいいのか分かんないんですけど・・・。ということで、飛ぶ前に着地地点を指示する必要があります。

 タグは<A></A>, anchorの略です。anchorは錨。ここに錨を下ろす、つまり船を止めてね、ということで錨地点に適当な名前を付けます。

<a name="come here1">こっちの水は甘いよ1</a>

と書いても、

<a name="come here2"></a>
こっちの水は甘いよ2

と書いても同じです。(私の使っているWz Editor Ver.2.00Eは2の書き方するとふて腐れるんですが、最新バージョン[今は4]にアップしろってことか?)

 これで、着地地点が出来ました。次は飛ぶ指令を出しましょう。これにも<A>を使って、hrefを続けて指示。名前の前に#を付けるのを忘れないように。

<a href="#come here1">こっちの水は甘いよ1に飛ぶ</a>
<a href="#come here2">こっちの水は甘いよ2に飛ぶ</a>

これを表示すると:

こっちの水は甘いよ1に飛ぶ
こっちの水は甘いよ2に飛ぶ

クリックすると:

こっちの水は甘いよ1


こっちの水は甘いよ2

 ということです。参考までに、存在しない名前を指定すると、文頭に飛びます。ということは文頭に飛ぶ場合は<a name="top"></a>なんてしなくてもいいってことです。ま、した方が無難でしょうが。

 私、何故、anchor:錨、というネーミングなのか今でもよく分かりません。<a name="***"></a>の使い方は、船が錨を下ろす場所=到着地点だから、<錨 名前は「**」>と、分かりやすい。けど、行き先を指定する時にも、<錨>を使うのがよく分かりません。船が錨を下ろす場所=船着き場。船着き場は、「ここに船が着くぞ」という地点でもあり、同時に、「ここから船が出るぞ」という地点でもある。それで<錨>から船が出航して・・・ということなんかなと、とりあえず納得しておくことにしました。もっと分かりやすい解釈があれば教えていただきたいです。

 とまれ、「ここから船が出るぞ」の場合には、<a に続けて、href=を指定します。hypertext reference:ハイパーテキスト参照ということです。refertoなら文字数は多いけどすぐ分かるのにとか、文句を言っても仕方ないですね、はい。
 

2:船の行き先指定方法、普通に言えばリンクの張り方
 

同一ファイル内では、上で述べたように、
 <a href="#***">コメント</a>

別のファイルでは:

 絶対パス指定。

 <a href="http://ww3.tiki.ne.jp/~kawa_s/html_01.html>このファイルだよ</a>
のように、ぜーんぶ書くやり方です。行き先が他のサーバーにあるとこの手法しか使えません。

 相対パス指定。

 絶対指定は、めんどくさいですし、サーバにアップする前に、自分とこのハードディスクでは使えません。そこで、相対指定を使うと、自分のハードディスクでテストしたまんまサーバにアップしても使えるので便利です。その仕方。

 同じディレクトリ、あ、ディレクトリとは上の/と/で囲まれた部分のことです。MacとかWindowsでフォルダと呼ばれているものに相当します。あ、最近の人はパスも知らねーんだった。あれ、ちと尊大な態度になった。しかしDosの知識があっても近頃ほとんど使わないんだから、笑って許して。(正確に言うと、UNIXの真似をしたDosの知識ですが、う、くどい。)と言っても簡単で、パスとは、ファイルのある場所の示し方っていうだけ。Dosの時代にはバスが通っていないと、「コマンドまたはファイル名がちがいます」って文句言われ、しかし、コマンドもファイル名も正しかったりして、初心者を悩ましたものです。懐かしいなあ。ま、分かる人にしか分からない話はやめましょう。

 相対パスとは、ブラウザが表示しているファイル、あるいは現在作成中のファイルから見て、お目当てのファイルがどこにあるか教えてやる、ということです。

a. 同じディレクトリにあるとパスを教える必要はない。だって同じとこにいるんだもの。ということで

 <a href="***.html">comment</a>

 で十分。

b. 下のディレクトリにあるファイルは、例えば一つ下のareareディレクトリにある***.htmlを指定するには

 <a href="areare/***.html">comment</a>

   areareの更に下のsoresoreにあるファイルなら

  <a href="areare/soresore/***.html">comment</a>

  以下必要なだけ下がっていけばよろしい。

c. 上位のディレクトリにあるファイルですが、ここで考えましょう。あるディレクトリより下のディレクトリというのは複数存在することができます。ですから具体的にディレクトリ名を指定する必要があります。しかし、あるディレクトリより上のディレクトリは??そうです1つしか存在しません。と、いうことは、いくつ上がっていくかだけを指定すれば十分ですし、逆に、そうしないと(具体的に名前を書いたりすると)2.の下がっていく場合との区別が鬱陶しくて仕方ありません。
 ということでシンプルに、一つ上がるのなら

 <a href"../***.html">comment</a>

二つ上がるのなら、"../../***htmlのように、「ピリオド2つとスラッシュ」を必要なだけ重ね、上のディレクトリを指示します。

d. さて問題。<a href="../../../sys/bin/***.html">とは、どこにあるのか?簡単ですね。3つ上がって、2つ下がったbinというディレクトリにある***.htmlを指定しています。

e. ファイル指定につづけて#***を指定すると、ファイルの場所を指定してリンクできます。他のファイルで、

<a href="html_01.html#come here1">こっちの水は甘いよ1に飛ぶ</a>

のように指示すると、他のファイルから、このファイルの「こっちの水は甘いよ1」地点に飛んできます。
 

 以上、簡単でした。

 忘れてた。リンクで飛ぶとき、新しいウインドウというか、もう一つブラウザを起動させて、そこに呼び出すやり方。

For further Information abut Ancor go to 
<a href=http://www.htmlhelp.com/reference/html40/special/a.html" target="_blank">http://www.htmlhelp.com/reference/html40/special/a.html</a>

のようにtargetを使います。targetはフレームのところで使いました。ここで、指定する名前は任意でいいようですが、"_blank"がおすすめです。(勝手な名前をつけてうまくいかない時がありました。その名前を思い出せないのですが・・・。)詳しい説明は上を表示させた下のサイトを参照下さい。

  For further Information abut Ancchor,  go to http://www.htmlhelp.com/reference/html40/special/a.html
 

 The TARGET attribute is used with frames to specify in which frame the link should be rendered. If no frame with such a name exists, the link is rendered in a new window unless overridden by the user. Special frame names begin with an underscore:

           _blank renders the link in a new, unnamed window
           _self renders the link in the current frame (useful for overriding a BASE TARGET)
           _parent renders the link in the immediate FRAMESET parent
           _top renders the link in the full, unframed window

って書いてあります。テストのため、呼び出して見ました。ついでに該当個所をコピーしちゃいました。
 

3:アンカーの他の使い方

 他の使い方といっても、<a href="**">に変わりはなく、呼び出すものが、htmlファイルじゃない場合、ってことだけです。これがまた呆れるくらい簡単なんだなあ。

 画像を表示する場合。画像を指定するだけ。普通、gifとjpg=jpeg。bmpも指定できるが、quicktimeのplug-inを入れてたらquicktimeが呼び出す。妙な感じです。Windows原産のファイルをMac原産のソフトが呼び出します。私のノートパソコンはGV(画像ビューワー)を呼び出したからデフォルトのウィンドウマシンではペイントブラシが呼び出されるのだろうと思います。ま。誰もbmpなんか使わないからいいんですが。

<a href="***.jpg">comment</a>
commentをクリックすると***.jpgが表示される。

<a href="large.jpg"><img src=small.jpg></a>
表示されている小さな画像をクリックすると、大きな画像が表示される。<img:イメージ表示 src=source:源は"small.jpgでお願い>。<img>には</img>は不要。

<a href="large.jpg" target="_blank"><img src=small.jpg></a>
上のバリエーション。別のウィンドウを呼び出して画像表示。
 注:srcの場合のファイルは同じディレクトリにある必要はない。他のディレクトリにある時は、上で述べた、絶対あるいは相対パスで指定すればよい。

 もうくどい説明は要りませんよね。lzh, zipを指定すると、開くか保存するか聞いてきます。exeを指定すると(そんな人いるんだろうか・・・あ、自己解凍タイプのlzhやzipがあった。)保存する場所を聞いてきます。txtなら普通に表示。拡張子が無かったらどうなるんだろう?と少しやってみると、テキストファイルは普通。lzh, zipはテキストとして開くから、バイナリをテキストとして開いた時の、あの意味不明画面。そうか拡張子が無いとテキスト扱いかと思えばさにあらず、gif, jpegは拡張子が無くても画像表示。htmlファイルも拡張子なしで表示された。びっくりしたのう。

忘れてました。(こんなんばっか)メイルを送るようにしていするには

<a href="mailto:**@**">comment</a>のようにすればいいです。簡単でしょ。

ということで、第3回目の終了。お疲れさまでした。
 


第1回  第2回  第3回  第4回  第5回  第6回  最終回


 

第4回:表

1:基本

表を作成するには、tableを使います。tableには表の意味もあります。
まず、単純な見本を見てもらって、それから説明。

<table border>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
</table>

これを表示させると
 
1
2

となります。表の開始位置に<table>、終了位置に</table>。
borderは枠を付けろという指示です。borderを省略、またはborder=0を指定すると、
 
1
2

と表示されます。

trはtable rowの略です。フレームのところででましたが、rowは行でした。必要な行数だけ<tr></tr>を続けます。
tdはtable dataの略です。セル(一こま)の中に入るデータを指定します。データが入っていないと文句を言います。
例えば2を削って、

<table border>
<tr><td>1</td></tr>
<tr><td></td></tr>
</table>
とすると
 
1

と表示されます。ブラウザ付属のエディタの画面では正常表示されるみたいですが、いざブラウザで表示させると駄目です。空白にしたければ<tr>&nbsp;</tr>のように空白を表す記号&nbsp;を入れます。全角のスペースも使えます。(テキストエディタの場合です。ブラウザ付属のエディタで、GUI で半角のスペースを入れると&nbsp;に処理されます。)
 
1
 

全角の空白文字を入れました。全角だから、セル(表の一コマ)の幅が全角になりました。

横にセルを増やすには、<td>データ1</td><td>データ2</td><td>データ3</td>・・・のようにします。
 

<table border>
<tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td></tr>
<tr><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
</table>

を表示させると、
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4

これで表の基本は終わりです。

基本は簡単ですが、表は奥が深いです。これでもかというほど、属性(attribute)が多い。属性というのは<table border>のborderのように細目指定の呪文のことです。(tableの方はelementと呼ばれます。)
 

2:セルをくっつける。
 
 
データ1-1/2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4

のように、横方向に広げるには、colspanを使います。ここでは、計2セルになりますから、colspan=2。

<table border>
<tr><td colspan=2>データ1-1/2</td>         <td>データ1-3</td><td>データ1-4</td></tr>
<tr><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
</table>

見て分かりやすくするために、スペースを空けましたが、不要です。(あっても文句は言われません。)
横幅いっぱいに広げてももちろんかまいません。また、途中に入ってもかまいません。

<table border>
<tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td></tr>
<tr><td colspan=4>データ2-1/2/3/4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
</table>

とすれば
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1/2/3/4
データ3-1 データ3-2 データ3-3 データ3-4

となります。
上下に広げたければ、rowspanを使います。

<table border>
<tr><td rowspan=2>データ1/2-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td></tr>
<tr><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
</table>

とすると
 
データ1/2-1 データ1-2 データ1-3 データ1-4
データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4

と表示されます。2行目には、まだ指定されていない3つのセルだけ指定します。
間違えて4つのセルを入れてしまうと、
 
データ1/2-1 データ1-2 データ1-3 データ1-4
データ2-2 データ2-3 データ2-4 間違えたセル
データ3-1 データ3-2 データ3-3 データ3-4

と表示されます。
 
     
       
   
     

と表示したかったら、

<table border width=120>
<tr><td colspan="2"> </td><td> </td><td> </td></tr>
<tr><td> </td><td rowspan="2"> </td><td> </td><td rowspan="2"> </td></tr>
<tr><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td colspan="2"> </td></tr>
</table>

と書きます。空白は全角スペース。半角では意味を持ちません。width=120は幅を120ピクセル(画素)でとってねということです。これを設定しないと左右に圧縮された表になります。

根気の続くだけ、複雑な表を作って下さい。

 蛇足ですが、最初、セルを横に広げるから、rowspanになるんじゃないの?何故colspanになるんだろう?と思っていましたが、行も列も100%の場合、つまり下の例のように、行あるいは列しか存在しない場合を考えてみると:
 
 
row 1
row 2
row 3
row 4
col 1 col 2 col 3 col 4

 rowをつなげて上下が増え、colsをつなげて左右が増える。と考えれば、rowspan、colspanの意味も納得できると思います。
お疲れさま。
 


第1回  第2回  第3回  第4回  第5回  第6回  最終回


 

第5回:表のレイアウト

 テーブルのレイアウトは鬱陶しいです。というのも、NetscapeとInternet Explorerで表示画面が異なる場合があります。

実例(1)

<table border=10 bordercolor="red" width=100% height=150>
<tr><th>データ1-1</th><th>データ1-2</th><th>データ1-3</th><th>データ1-4</th></tr>
<tr><td>データ2-1</td><td>データ2-2</td><th>データ2-3</th><td>データ2-4</th></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
</table>

を表示させると。

Internet Exlporerでは:

IE

Netscape Navigatorでは:


と表示されます。(これらの実体はgifファイルです)

どちらも、bordercolor="red"を指定してます。困ったもんだ。IEはかっちょ悪いし、NNは紫ちゃう?って色です。
もっとも、bordercolorを指定しないと、どちらでも
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4

のように表示されます。(この表は画像ではありません) IEの方針の不統一さ・・・。
 

実例(1)で使っているタグ、属性

borderはピクセル単位で指定。border=0はborder省略と同じ。borderとだけ指定すると、border=1で処理される。border=200とかでも設定できます。気が向いたら試して下さい。

bordercolorはIEとNNで表示画面が異なるので注意が必要。色の指定は、html作成ソフトで色指定すると、RGBを16進法で表示した数字で指定されます。2桁ごと、Red, Green, Blue です。ちなみに、16進法は、0123456789ABCDEFで表します。000000が黒、FFFFFFが白だそうです。こりゃ人間には困るので私はタグ本に載っている色見本を見ながら"Gainsboro""Beige"とかカラーネームで指定しました。クオーテーションマークは省略可です。なお、カラーネームは、html作成ソフトが勝手に#DCDCDCのように書き換えたりします。

次はwidth、幅。画面に対するパーセント指示とピクセル単位での指示と2つ可能です。

次がheight、高さ。これもパーセントおよびピクセル指示の2つが可能。上のIEとNNの画像を見比べて下さい。IEではきれいに3等分されていますがNNの場合3行目が異様に太いですよね。これはIEの勝ち。NNの場合は、諦めるか、他で処理をするかです。(次で触れるcellpaddingでほぼ可能です。)もっとも意図通りに等分されて表示される場合もあるようです。謎だ。

<th>は、table headerの略で見出しに使います。実例(1)のように、太字になってセンタリングが行われます。<td>との違いはただそれだけです。2行目のように、何処にあるセルでも使用できます。
 

実例(2)

<table BORDER CELLSPACING=0 CELLPADDING=20 WIDTH="80%" bordercolor="black" >
<tr><td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td></tr>
<tr><td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td></tr>
<tr><td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td></tr>
<tr><td>データ4-1</td><td>データ4-2</td><td>データ4-3</td><td>データ4-4</td></tr>
</table>

を表示させると、IEでは:

NNでは:

と表示されます。

cellspacingは罫線の太さをピクセル単位で指定します。省略するとcellspacing=2扱いになります。

cellpadding(セルの詰め物)は、罫線と文字(画像も可)との間隔をピクセル単位で指示します。省略すると=1扱いです。cellpaddingで指定すると、NNでも上下の均等割付が可能です。

bordercolorは、枠の色を設定するものでしたが、IEでは罫線の色にもなります。実例(1)のIEを見て下さい。罫線が赤。cellspacingを省略しているので=2扱い。2ピクセル分だけ、赤と赤の間にスペースが開いています。実例(2)では、cellspacingをゼロで設定しているので、ちょうどワープロの罫線のようになります。NNではbordercolorは外枠の色しか指定しませんので、罫線は変化しません。(蛇足ですが、cellspacingをゼロにしても罫線は消えません。消そうと思えば、border省略あるいは=0指定でした。)
 

実例(3)

<tr height="**">で、行単位に高さを指定できます。パーセントはなく、ピクセルのみの指定です。クオーテーションマークは省略可能です。

<table BORDER CELLSPACING=0 WIDTH="60%">

<tr height="20">
<td>データ1-1</td><td>データ1-2</td><td>データ1-3</td><td>データ1-4</td>
</tr>

<tr height="30">
<td>データ2-1</td><td>データ2-2</td><td>データ2-3</td><td>データ2-4</td>
</tr>

<tr height="70">
<td>データ3-1</td><td>データ3-2</td><td>データ3-3</td><td>データ3-4</td>
</tr>

<tr height="100">
<td>データ4-1</td><td>データ4-2</td><td>データ4-3</td><td>データ4-4</td>
</tr>
</table>
 

これを表示させると、IEでは:

NNでは:

の様に無視されます。本によるとNNも4まではフォローしているらしいのですが、4.5以降は抜け落ちたようです。
 

実例(4)

tdあるいはthでセルの幅を変更できます。パーセントおよびピクセルでの指定です。どの行で指定してもいいようですが、最初の行で指定するのが普通でしょう。

<table BORDER CELLSPACING=0 >
<tr>
<td WIDTH="45%">データ1-1</td>
<td WIDTH="30%">データ1-2</td>
<td WIDTH="15%">データ1-3</td>
<td WIDTH="10%">データ1-4</td>
</tr>
以下省略

を表示すると以下のように表示されます。
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4
データ4-1 データ4-2 データ4-3 データ4-4

実例(5)

データのセル内での配列を指示するにはalign属性を使います。alignment:整列の略です。
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4
データ4-1 データ4-2 データ4-3 データ4-4

<table BORDER CELLSPACING=0 width="100%">*widthの設定を忘れると表が広がりません。

<tr align=center>*行単位で中央。
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
<td>データ1-4</td>
</tr>

<tr align=right>*行単位で右。
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
<td>データ2-4</td>
</tr>

<tr>
<td>データ3-1</td>
<td align=center>データ3-2</td>*セル単位で中央。
<td align=right>データ3-3</td>*セル単位で右。
<td align=left>データ3-4</td>*セル単位で左。
</tr>

<tr align=center>*行単位で中央。
<td>データ4-1</td>
<td>データ4-2</td>
<td align=left>データ4-3</td>*行単位の指示を覆して左。
<td align=right>データ4-4</td>*同上で右。
</tr>
</table>

蛇足ながら、すべて中央にしたいから、tableで全体に設定、は出来ません。
<table align=enter>は表そのものを画面の中央に持ってくる指定です。left, rightも使えます。
ただし、table align=centerはIEでもNNでも正しく表示されますが、composerは受け付けません。保存すると消されてしまいます。composerを使っている人は、table全体を<center></center>でくくって下さい。
 

実例(6)

上下の配列を決めるには、valign:vertical alginmentを使います。middle(center)がデフォルト、top, bottomです。
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4
データ4-1 データ4-2 データ4-3 データ4-4

<table BORDER CELLSPACING=0 HEIGHT="200" >

<tr VALIGN=TOP>*行単位で上に指定。
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
<td>データ1-4</td>
</tr>

<tr VALIGN=BOTTOM>*行単位で下を指定。
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
<td>データ2-4</td>
</tr>

<tr>
<td VALIGN=TOP>データ3-1</td>*セル単位で上を指定。
<td VALIGN=BOTTOM>データ3-2</td>*セル単位で下を指定。
<td>データ3-3</td>
<td>データ3-4</td>
</tr>

<tr VALIGN=TOP>*行単位で上を指定。
<td>データ4-1</td>
<td VALIGN=MIDDLE>データ4-2</td>*行単位の指定を覆して中を指定。
<td VALIGN=BOTTOM>データ4-3</td>*同上で下を指定。
<td>データ4-4</td>
</tr>
</table>
 

なお、composerはmiddleをcenterに置き換えます。centerでもIEで意図通りに表示されます。
また、alignとvalignは同時に使用できます。別に例は要らないと思いますので省略。
なお、文字データで説明しましたが、画像データでも同様にalign, valignが使えます。
 

実例(7)
 
データ1-1 データ1-2 データ1-3 データ1-4

文字に変化を付けるには、通常のやり方を、セル単位で地道にするしかないようです。例えば、テーブル全体の文字を大きくしてやれと、

<font size=7>
<table></table>
</font>

と全体をくくっても、単に無視されます。ぐす。ま。ここらはブラウザ付属のエディタでGUIでやる方が簡単だと思います。ということで軽い説明。

<table BORDER CELLSPACING=0 WIDTH="100%" >
<tr>
<td><i><font size=+1>データ1-1</font></i></td>
<td><font color="red" size=+4>データ<sup><blink>1-2</sup></font></blink></td>
<td><strike>データ1-3</strike></td>
<td><u><font size=+1>データ1-4</font></u></td>
</tr>
</table>

<i>はイタリック
<font size=**>は1〜7の絶対指定、あるいは<basefont size=*>で指定したフォントサイズに対する相対指定で行います。<basefont>を省略すると、3が基準となりますから、+4〜−7の範囲で指定します。+5で指定しても、絶対指定の7以上には大きくなりません。
<font color=**>色の指定は上で述べたとおり。
<sup>は原語がよく分からないがsuperなどは「上の」って意味。上付き文字。<sub>が下付き文字。subordinateかなあ?
<blink>は字の通り点滅ですが、NNのみ有効。IEでは無視されます。
<strike>または<s>は字消しの横線。
<u>はunderline。
 

実例(8)

背景色の指定方法と、テーブルの中のテーブルの見本です。
 
 
 
データ1-1 データ1-2 データ1-3 データ1-4
データ2-1 データ2-2 データ2-3 データ2-4
データ3-1 データ3-2 データ3-3 データ3-4
 

 
 

<table BORDER=0 CELLSPACING=0 WIDTH="100%" HEIGHT="400" BGCOLOR="lightcyan">
*table単位で背景色を指定。省略するとページの背景色と同じ。
borderを省略するとborder=0のはずですが、何故かNNでは罫線が白く表示されます。border=0とだめ押しをすれば白線が消えます。(これ解決するのに時間かかった〜)
<tr>
<td WIDTH="15%"> </td>

<td WIDTH="70%">
<table BORDER=0 CELLSPACING=0 WIDTH="100%" HEIGHT="300">
<tr bgcolor="paleturquoise">*行単位で背景色を指定。
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
<td>データ1-4</td>
</tr>

<tr>*背景色を指定していないので、lightcyanで表示。
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
<td>データ2-4</td>
</tr>

<tr bgcolor="tan">*行単位で背景色を指定。
<td>データ3-1</td>
<td bgcolor="coral">データ3-2</td>*セル単位で背景色を指定。
<td>データ3-3</td>
<td bgcolor="coral">データ3-4</td>*同上
</tr>
</table>
</td>

<td WIDTH="15%"> </td>
</tr>
</table>

ということです。テーブルの中のテーブルの作成法は上をじっくり読めば分かるのでは?、と不親切な私。

 なお、<td><th>の終タグは普通省略可能だそうですが、このようにテーブルの中にテーブルを作る場合は必須なんだそうです。
 ちなみに、tableでも背景の画像を、background="ファイル名"で指定できますが、NNとIEで表示結果が異なるので、取り扱いません。

 こんなもんでどうでしょう? お疲れ〜。


第1回  第2回  第3回  第4回  第5回  第6回  最終回

第6回:画像・表のレイアウト
 

(1)align="top"/"center"or"middle"/"bottom"
 

 top, middle又はcenter, bottomは画像(テーブル)と文章との上下関係を規定します。画像から見た、文字の位置になります。なお、これらは表には使えません。

 例えば<img src="smallbilbo.jpg" align=top>は、 このように、画像からみて、文字は上に来ます。<img src="smallbilbo.jpg" align=middle>は、 このように文字が中央、<img src="smallbilbo.jpg" align=bottom>は、 文字が下になり、ディフォルトはbottomだから、<img SRC="smallbilbo.jpg" >はbottomと同じに表示されます。

  他にもtexttop, absmiddle, absbottom, baseline がありますが、top, middle, bottomとの違いがよく分からない上に、IEは(absmiddleに)対応していないようです。

 top, middle,bottomの普通の使い方


<img src=bilbo.jpg><br>と、<br>=breakで改行させて、画像の下に文章。
 

<img src="bilbo.jpg" align=top>です。上と同じように、改行を入れないと、文章はカッコ悪く、次に続いて行きます。○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

<img src="bilbo.jpg" align=center><br>
です。
 

This is Bilbo.
This is Bilbo.<img src="bilbo.jpg" align=center><br>です。
 

(2) align="right"/"left"

 align=right, leftで、画像を右寄せ、左寄せにします。これは表でも使えます。

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<img SRC="bilbo.jpg"  align=LEFT>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<img SRC="bilbo.jpg"  align=RIGHT>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
を表示させると、

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
 

と表示されます。これはブラウザで見て下さい。Composer, FrontPageとも意図通りには表示されないようです。画像を中央によせようとすれば、<center><img src="**"></center>で中央に来ますが、(align=centerは文字列が画像の中央にくる指定でした)、以下のように画像の左右には文字は来ません。

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

画像の左右に文字をもってきたかったら、テーブルを作って、borderを省略、または0に指定して作成するしかないようです。

<img SRC="bilbo.jpg"  align=LEFT>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
○○○○<br>
○○○○○○○○○○○○<br clear>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
を表示すると、下のようになります。
 
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
○○○○
○○○○○○○○○○○○
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

<br>で改行しても、画像の下には行きません。画像の下に改行したい場合は、<br clear>を使います。<br clear="left">のように、alignが左ならleft、右ならrightと指定することもできます。省略すると<br clear="all">と同じで、左も右も一度に解除します。普通は何も考えずに、<br clear>だけで十分でしょう。
 しかし、composerでもFrontPageでも、保存する場合に<br clear>は普通の<br>に置き換えられてしまいます。最後の仕上げの段階になって、テキストエディタで手直しすればいいのだろうが、絶対忘れる!!う〜ん。困ったもんだ。

 ということで、上の例は実際は:

<table>
<tr>
<td><img src="bilbo.jpg"></td>
<td valign=top>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>
○○○○<br>
○○○○○○○○○○○○
</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br>

とテーブルを使って書いています。画像と文字との間隔が気持ちだけ広がるようですが、後は同一の表示結果が得られます。これなら無断で書き換えられることはないです。

(3)hspace, vspace/height, width
横(水平)でスペースをとるには、hspace = horizontal space、
上下(垂直)なら、vspace = vertical spaceを使います。
 この箇所は、

<p><b>(3)hspace, vspace/height, width</b><br>
<img SRC="bilbo.jpg" VSPACE=50 height=133 width=129 align=LEFT>
横(水平)でスペースをとるには、hspace = horizontal space、
上下(垂直)なら、vspace = vertical spaceを使います。<br>

 と記述されています。
(3)hspace, vspace/height, widthから
画像までが、50ピクセル離れている、という指定です。
 
これは当然、下にも影響を与えます。
そのことを、(改行)
示すために、(改行)
無駄な、(改行)
文字を(改行)
重ねて(改行)
います。(改行)
これで充分でしょう。
 

hspaceで水平=左右のスペースを入れます。
これは、

<img SRC="bilbo.jpg" HSPACE=50 height=133 width=129 align=left>
hspaceで水平=左右のスペースを入れます。<br>

と記述しています。
左側にも余白がつきます。これを回避したければ、またborder=0の表に登場願う他ないと思います。(あったら教えて下さい。)
hspace, vspaceは表にも当てはまります。

height, width は文字通り、高さと幅です。htmlエディタで、画像の挿入なり、ドラッグ・アンド・ドロップなりで指定すると、勝手に記入してくれます。この数値を指定して形を変えることも出来ます。height=70 width=129 とかheight=40 width=40と、ピクセルで指定すると、指定された、高さ・幅で表示されます。
 

なお、ものの本によると、width,heightの指定をする方がブラウザでの表示が高速になるそうです。

お疲れさま。


第1回  第2回  第3回  第4回  第5回  第6回  最終回

最終回:おまけ
 

前回までで主要なタグは終わりです。

あとはブラウザ付属のcomposerなりFrontPage ExpressなりでGUIでやった方がいいと思います。ざっと触れとくと、

 hr:horizontal rule:水平罫線。

width=で幅を、ピクセルあるいはパーセントで指定。無指定=100%。
size=で太さを、ピクセルで指定。無指定=2。
align=left/ center/ right で指定。無指定=center。
IEでは、color=で色指定可能。
noshadeで影のない線。

 h1〜h6:headlie見出し。
align=left/ center/ middle
色を指定したければ、<h1><font color="red"> h1〜h6:headlie見出し。</font></h1>
のように、fontタグと組み合わせる。

blockquote:ブロック状に引用。上下左右にスペースをとって引用。

リスト、はブラウザ付属のエディタでしたら??複雑なリストは私使いそうにないんで・・・・。

<bgsound src="ファイル名" loop=回数>バックグランドサウンド。読んでの通りです。
mid, wav, auが可能。midiはともかく、音出すと重たいでしょう・・・。loop=-1 or =infiniteで無限繰り返し。

こんなもんかなあ?
 

後、私には取り扱う能力がない領域。

1:java script

Sunのjavaとは全く無関係。Netscape 社製。<script></script>中に記述する。

例)

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript Applet -------------------

/* Copyright (C)1996 Web Integration Systems, Inc. DBA Websys, Inc.
   All Rights Reserved.
This applet can be re-used or modified, if credit is given in the source code.
   Chris Skinner, January 30th, 1996.   Hacked for CNNfn by RD, Jan. 31, 1996
*/

function scrollit_r2l(seed){
  var m1  = "K's Korner へようこそ.                    ";
  var m2  = "Welcome to K's Korner.                    ";
  var m3  = "ご意見 ご感想をお待ちしております.                    ";
  var m4  = "Any kind comments and advice will be appreciated.                    ";
  var msg=m1+m2+m3+m4;        var out = " ";        var c   = 1;
  if (seed > 100) {                seed--;                var cmd="scrollit_r2l(" + seed + ")";
  timerTwo=window.setTimeout(cmd,100);        }        else if (seed <= 100 && seed > 0) {                  for (c=0 ; c < seed ; c++) { out+=" ";           }                out+=msg;                seed--;
  var cmd="scrollit_r2l(" + seed + ")";                    window.status=out;
  timerTwo=window.setTimeout(cmd,100);        }        else if (seed <= 0) {
  if (-seed < msg.length) {                        out+=msg.substring(-seed,msg.length);                       seed--;                        var cmd="scrollit_r2l(" + seed + ")";
  window.status=out;                    timerTwo=window.setTimeout(cmd,100)          }                else {   window.status=" ";            timerTwo=window.setTimeout("scrollit_r2l(100)",75);
                }        }}// -- End of JavaScript code -------------- -->
</SCRIPT>
<body  onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);">

私のホームページの、アンダーバーに表示されるメッセージのスクリプトです。
This applet can be re-used or modified, if credit is given in the source code.
という条件を守って、好きに使って下さい。私は鮎川誠のページから無断で取ってきました。

2:CGI

Common Gateway Interfaceの略。ページに書き込みしたりできるようにするとき必要。
言語はC, C++,も可能らしいが、一般的にはPerlが使われる。私の契約しているプロバイダはCGIのサービスはカウンタだけ。それ以上を希望する場合は、無料だが、別の特約プロバイダに登録して1Mのスペースを貰う。言語はPerlのみ。
 

Appendix

「HTML タグリファレンス」 磯野康孝+蔵守伸一 ナツメ社
HTML3.2ですので、お薦めしませんが、この本とトロント大学のを主に参考にしました。

とほほのWWW入門
Java Script, CGI,Perl, などを知りたいときにどうぞ。

HyperText Markup Language Home Page
英文ですが。

http://www.htmlhelp.com/
日本語もあります。http://www.htmlhelp.com/ja/reference/html40/へどうぞ。

http://www.utoronto.ca/webdocs/
トロント大学のページです。これをプリントアウトして読みました。平易な英語です。

Web Design BBS
日本語です。基礎的な質問は私に、専門的な質問はここにすれば助けてもらえるのでは?

K's Korner HOME