KAIHATSUGIKEN GROUP

Please use Netscape 3.0~ or Explorer 3.0~
This page is written in Japanease only, thank you.


HOME PAGE 作成入門



1 まずは・・・・

2　ページを作るために

3　タグについて

4　リンクについて

5 ページに絵を張り付けるぞ

6 グラフィックデータを作ってみよう

７小技集一覧




















1 まずは・・・・




そもそもホームページを作りたいと思う人は少なくともパソコンを持っていて自分でインターネットを見ることが出来るようになってから思う一番最初の自己紹介です。

だいたい・・・・
　

自分は人のホームページを面白がって見ているだけで満足だ！！

なんて人はこのページを時間をかけてダウンロードしてまで見ることもないのでここで回線を切断してしまいましょう。

パソコンを始めてアプリケーション（ワードとかエクセルとか一太郎）を躍起になって覚えたけどインターネットの存在を知って

「何だよ　みんなもっとおもしろいページはないのかよ！！」


と思い始めます。

その次からは間違いなく

「おもしろいページがないから自分で作ろうかな・・・」


なんてことを考えます。

難しいプログラムやシステムを勉強するよりも簡単なのでホームページ作りはその

ページのアイディア次第だとも言えます。




まずはどんなホームページを作りたいかを考えてから色々な文法（それほどたいしたものではないので大丈夫）を覚えちゃいましょう。



うんちくを覚えるよりも

まずは１ページでも作ってみる

とだいたい・・・何となく・・・それもさわりだけ・・・でも解るようになって朝まで寝ないで作る羽目になります。



誰が見るとか、こんなホームページ恥ずかしいとかそんなことを気にしてはダメ！！





もっと恥ずかしいページは沢山あるしそうやって格好のいいホームページを作ることが出来る様になるのです。
と、僕は思っています。

まあ、そんなに構えないで気軽にまずは読んでみましょう。









2　ページを作るために




ＨＴＭＬ

　ってよく聞きますが、一体何でしょう？それは
「ハイパーテキストマークアップランゲージ」と言ってホームページを作るための一つの言語なのです。

やっぱり難しいじゃん・・・


と落ち込まずに聞いてよ。　　m(_ _)m ﾍﾟｺﾘ　

ＨＴＭＬの言語を使うホームページ作成には

「タグ」

と呼ばれる記号を使います。
よくホームページを作るのに　「〜ビルダー」　とか　「〜ザイク」を使う人がいますがそう言う人は、はっきり言って

インターネット自体をなめてます。



少なくとも二十歳そこそこの少年少女が必死でＨＴＭＬを勉強してどんなホームページであれ完成に至ったその人達よりも手抜きをして尚かつ

「ホームページを作るのは簡単だぜ！！」

なんて自慢する人の顔がなさけないです。

「夏休みの宿題をみんなに自慢してるけど本当はお父さんに手伝ってもらったんだぜ」


なんて馬鹿にされないように簡単なんだからばっちり頑張りましょう。








まずはこんなことを知っておきましょう。





ウインドウズならメモ帳　マックなら？　何だろう

　僕はマックユーザーじゃないから判りません。
たぶん　ＴｅａｃｈＴｅｘｔとか　ＳｉｍｐｌｅＴｅｘｔでしょうね。
まあとにかく　テキスト文書の書けるファイルを用意しましょう。
ワードとか一太郎は良くないです。

ＨＴＭＬでは、加工された文字は読めないのです。



そう言う文字を（本当はフォントと言う・・別にしゃれではない！！）リッチテキストと言います。 リッチテキストではだめ。あくまでメモ帳にでてくるような

テキスト文章の書けるものを用意してください。エディターでも良いです。


でもワードでもテキストで書けるんだけどね。ただ面倒くさいんだよね。拡張子が結局テキストでないからね。この意味は難しいので分からない人はフリートーク伝言板にでも書いておくように。

その後で　せっかく書いた文書を確認するために

ブラウザー

を用意します。
テキスト文書なら＊＊＊.TXT となってますね。
そのファイルをインターネットエクスプローラーの画面にドラッグします。
それだけであなたのの書いたＨＴＭＬはブラウザーで見たらこんな風に・・と言うことが確認できます。

ちなみにネットスケープの場合はいちいちＨＴＭＬファイルの拡張子を＊＊＊.txt から＊＊＊.htmlに変換することが必要です。
これがとっても面倒くさい！！


ウインドウズの人はインターネットエクスプローラーを使うことをお奨めします。



そう言えば　ＨＴＭＬエディターというものが出ていますが当然前文に書いたようにそんな物は必要ありません。
多分　タグを書かずにクリックして必要なタグを選択して決定と言う作業だとは思いますが、そんなことなら直接書いた方が早いに決まっています。






では 早速次の文章を書いてみましょう。

<html>
<head>
<title>/* 自分の名前　*/ のホームページ </title>
</head>

<body>

<h1>
ここに書いた文章は字がでかい！！
</h1>

<h3>
<b>
この文章はそれほどでもないね
</b>
</h3>

</body>
</html>


突然ですが・・・

文書の体裁を指示する文字列のことをタグと言います。


ＨＴＭＬのタグは<b>と</b>の様に範囲を指定してその記号の持つ範囲の終わりには</>で閉めます。


とにかくＨＴＭＬと言う物は < >で始まって</>で終わると言う風に覚えてください。











3　タグについて




タグの基本は

タグとタグで文章を挟み込む

ことです。
範囲の先頭と末尾を挟み込むようにペアにして記述するのです。
範囲を閉じる方のタグには「／」がつきます。


正しいタグの入れ方


<b>ここからボールド<i>ここからイタリック</i>またボールド</b>
となります。ちなみに<b>のbはボールド文字（太字)の意味で<i>のiはイタリック文字（斜体）の意味です。
これは　ワードやエクセルの基本ですね。知らなかった人はここで覚えておきましょう。



<html><head><body><title>タグについて


<html>
<head>
*
*
*
</head>
<body>
*
*
*
</body>
</html>

<html>〜</html>

このタグは「これはＨＴＭＬ文書です。」と宣言するためのタグです。ファイルの先頭と末尾にこのタグを記述します。

<head>〜</head>

ここにはホームページのヘッダー用のタグが入りますよ。と言う意味です。この後に出てくる<title>がそのタグです。このホームページで言うとページの上にあるHOMEPAGE 作成入門　になりますね。

<body>〜</body>

これはここの間に本文を入れるよ。と言う意味です。結局ブラウザーの中に表示される内容を記述します。

<title>〜</title>

これは先ほど書いたヘッドの中に入れるタグです。タイトルと締めタイトルで囲まれた文字列はブラウザーの上にあるタイトル名を記述することが出来ます。




余談ですが・・・大きなプログラムを作っていたリ、すると前に書いたプログラムの意図が分からなくなっちゃった・・・なんて事が良くあります。
ＨＴＭＬでもそう言うことを良く聞きます。
そんなときのために

<!--**********-->

 をプログラムの行の最後に記述しておくと後から
？　なんだったっけ？なんて事にならないです。



ここまでのおさらいをしましょう。



<html>
<head>
<title> /* 自分の名前　*/ のホームページ
</title>

<body>
まずはこんな感じになりました。
</body>
</html>


まずここまでをメモ帳（当然ウインドウズのメモ帳です。手元にメモ帳を用意した人はかなりおもしろい人です)に記入してファイルから名前を付けて保存を選んで保存します。
保存したアイコンをそのままインターネットエクスプローラーの画面にドラッグしてください。

画面にはちゃんとでましたか？





文字を大きくしたり

小さくしたり
してみようぜ！！


やっぱり文字を大きくしたり小さくしたりなんて言うのは必要なことです。文字のことをフォントと言いますが簡単に言うと

<font size="3">がふつうの文字サイズで<font size="7">が最大です。


当然文字の数字が大きくなれば字も大きくなります。基準は"3"だと覚えておきましょう。

それとよく使われるのは見出しの文字サイズです。
見出しと言っているようにはっきり言って見出しです。？？？？
じゃあ文字サイズと見出しの文字サイズはなにが違うの？と言う人がとても多いですけど違いは

見出しの文字サイズは<h1>〜</h1>と書かれていれば勝手に改行されてしまう点です。


だから

見出しの文字サイズ！！

と何度も言っているでしょう。でも以外に使いあわせると便利です。






ここまでのおさらいをしましょう。



<html>
<head>
<title> /* 自分の名前　*/ のホームページ
</title>

 <body>
まずはこんな感じになりました。
<h2>大きな文字を書きました
</h2>
</body>
</html>


と、ここまで入力して先ほどのように保存して（さっきのメモ帳に新しい部分を書き足してね今度は上書き保存でいいよ）ブラウザーにドラッグしてみてください。
どうですか？
なりましたか？


一番大切なことは改行と段落なのだ！！


タグにもいろいろあるけれど全部覚えるとそりゃもう大変です。
そもそもあんなに沢山あるものをいきなり覚えるのは無理です。
とりあえずこの章の最後の重要なことそれは

改行

です。
でも、心配無用。重要なくせに簡単です。
要するに、

改行したいところにいちいち<br>を付けるのさー

結局強制改行をいちいちしなくてはいけないのです。これを入れないとどうなるかというと簡単です。
ページの端まで行ってから

仕方なく惰性で改行することになります。



段落分けをしたい時は<p>を使います。
 要するに

<p>よりも幅が広い改行

です。




ここまでのおさらいをしましょう。



<html>
<head>
<title> /* 自分の名前　*/ のホームページ
</title>

<body>
まずはこんな感じになりました。
<h2>大きな文字を書きました
</h2>
<h5>小さな文字も書きましょう
</h5>
<p>
ここまでくれば文字だけなら<br>
ホームページも作れるよね<br>
次の章はリンクについてだよ<p>
頑張ってね<br>
</body>
</html>


と、ここまで入力して先ほどのように保存して（さっきのメモ帳に新しい部分を書き足してね今度は上書き保存でいいよ）ブラウザーにドラッグしてみてください。
どうですか？
なりましたか？

ここまでの事は基本中の基本。まずは丸暗記だ！！
次からはリンクのお話です。










4　リンクについて




いよいよＨＴＭＬの特徴であるリンクを作ります。あるキーワードをクリックするとそれと関連づけられたページにジャンプすると言うのがリンクです。



よくあるページの中のアイコンをクリックすると元のホームページに戻ったり、このページに見られるような関連づけられた場所にいきなりジャンプしてしまったり、全然違うホームページにびゅーんと飛んでいったりと言ったものはみんなリンクになります。

よくホームページ作成の参考書に

<a href="リンク先のページ">キーワード</a>

と書いてありますが、いまいちピンとこないでしょう。


a href　というのは　「ここはリンクの部分だよ」と言う意味なんです。


たとえば僕のページにリンクを張りたい場合は
<a href="http://www.mnet-jp.com/kg-group/">INTERNET　START PAGE</a>


となります。

リンクを張りたい時は　"a href" 最初にアドレス後文字列

締めにはスラッシュ "</a>　で締めろ!!


と　覚えましょう。

しかし、他のページにジャンプするだけじゃなくて自分のページの中でジャンプしたいときもあるでしょ。
例えば

１ページ目のこの部分をクリックすると２ページ目に飛ぶ！！
なんて時は
 <a href="****.html">お次のページはここよ</a>


 とすると ２ページ目にぶっ飛んでくれます。




じゃあ　こんなリンクの場合はどうなってるんでしょうか？
同じページの中であっち行ったりこっち行ったりなんて言う時。
それはジャンプする前のキーワードとジャンプした後のキーワードが同じであればビューンとジャンプします。
このページの頭にある目次とジャンプした後のＨＴＭＬを見てみましょう。

同じページの中でぶっ飛びたいときは


<a href="#3　タグについて">3　タグについて</a>



をぶっ飛ぶスタート地点に書いておいて

<a name="3　タグについて">3　タグについて</a>


をぶっ飛び着地点に書いておきます。




同じページでぶっ飛ぶときは"a name"

着地は　a href " # " も付ける


と言う風に覚えましょう。

# を付けるのを忘れがちです。忘れないように！！



でもそんな簡単な移動だけではないはず。
そうです。
これを読んでいる人の質問で多いのは自分のホームページのディレクトリーがありますよね。
その中には***.html と言う拡張子のページを入れます。

インターネットのサーバーはあなたのページを見たいなんて言う人がいるとまずその人から
〜のホームページ見せてよ！！とサーバーに連絡が入ります。

そこでサーバーは急いであなたのホームページのあるディレクトリーを探してその中から****.html と言うファイルを見つけます。
その
****.html と言うファイルは　あなたのホームページの内訳が書いてあるのです。
結局のところはＨＴＭＬなんだよね。





でも***.html にするのは最後の確認作業の時で

最初は***.txt　でよろしい。





話がそれたけど多い質問というのはその

****.htmlファイルが沢山あるとき・・・

えっ　何それ？
なんて思う人はそれは仕方のない人です。
早くそう思えるようにここで勉強しましょう。
その　****.html ファイルが沢山ある時というのは一番上のフォルダーに自分の１ページ目の****.html が入っていますよね。
そのフォルダーの中には、そのページを作るための音声や画像やそれに似たメイルポストの動画だったり、かわいいお気に入りのアイコンだったりする訳ね。

１枚のページに必要な物はみんな同じフォルダーにしまう事！！


そうなると自然と２ページ目を作るときはそのフォルダーの中に２ページ目のためのフォルダーを作る必要があります。

１ページ目からジャンプして２ページ目に行くんでしょ？だから１ページ目のフォルダーの中に２ページ目のフォルダーを入れる訳よ。




だから ****.html と言うファイルは１ページ目のフォルダにもあるし２ページ目のフォルダにもあるし、フォルダのあるところには必ず ****.html　があります。（****.index）でもいいんだけどそれはそれでよし!!


重要な事はここから・・・


３ページ目は１ページ目からジャンプします。だから１ページ目のフォルダーに入れなくてはいけません。
４ページ目は２ページ目からジャンプします。だから２ページ目のフォルダーに入れなくてはいけません。




では問題です。

１ページ目のフォルダーの中には２ページ目のフォルダーと３ページ目のフォルダーがあります。
４ページ目は２ページ目のフォルダーの中にあります。
では、１ページ目から４ページ目のフォルダーにある****.html にジャンプしたいときはどうしたらいいのでしょうか？



ＨＴＭＬファイルではこう記述します。

<a href="２ページ目のフォルダ名/４ページ目のフォルダ名/４ページ目の****.html">キーワード</a>

です。




ある特定のフォルダーを基準として階層をたどるには

ＭＳ−ＤＯＳやウインドウズでは　￥　マークを使いますがＨＴＭＬでは　/　マークを使います。


そう言う記述の仕方をパスを通す　と言います。
確認の仕方は至って簡単です。




パスの通し方が違っていればそのファイルが表示されないのです。



では、気分を変えて

人様のホームページにリンクする場合はどうするのでしょうか？


もう　ここまでくると何となくわかりますよね

<a href="http://www.kantei.go.jp/index-j.html">首相官邸のホームページ</a>


です。
ジャンプしようとしているページには　首相官邸のホームページ　と書いてあってアンダーラインが引いてあります。
そこをクリックすると、ＵＲＬを使ってリンクします。
上のＵＲＬを見て気がつきませんか？
そうなんですよ。やっぱり首相官邸のホームページと言っても "index-j.html" と言うファイルをたどって見ることになるのです。スラッシュ　"/"　で区切ってあるのは一番上のフォルダーだよ。
と言う意味なのです。






リンクは大事。超重要。それに沢山あると便利だよね。
次は　絵を貼っちゃうぞ！！











5 ページに絵を張り付けるぞ




ホームページには絵がないとと言うか絵を張り付けることで楽しいページになります。

でもあまり貼りすぎるとページ全体の重さ（体重だな、簡単に言うと）が増えてしまって ジャンプしてから画像が出終わるまですごく時間が掛かるようになってしまいます。



そこそこに絵を入れてやることでバランスの良いページを作ろう！！



しかしこのページは絵が一枚もなくて自分でも可哀想ですけどそれはどうせみんなはこれを毎回見て勉強するのではなくて、

”編集”〜”全てを選択”〜”コピー”とか何かして ワードか何かにコピーしてしまうんでしょう？

そう言う事を考えてわざわざばかばかしいくらい長いファイルを作っているのだよ・・



さて本題に入ります。まずは貼りたい絵を探します。

どういう風に探すかというと、インターネットをしているときに

「 おっ　これは　かっこいいなー！！」


と思ったらすかさずその絵を画面の外（ブラウザーの外･･･デスクトップだな）に

ドラッグしてください。



デスクトップにアイコンがドラッグできないようであればあなたが下手なだけです。
何も壊れていないので何度でも練習しましょう。



絵を貼ったり音楽を流したりなんて言うことをするためにはフォルダーを作らないといけないよね。
そのフォルダーには .html　は勿論のことこれから必要な画像（今ドラッグしたそのデスクトップのアイコンだよ）をみんな入れましょう。

そのページにを表示させるのに必要な物は全フォルダー入れます。


　 そうしたら準備はＯＫです。同じフォルダーに入っている画像はその .html　に記述してあげればどんな物でも張り付きます。

記述したい場所にこう書いてください。

<img src="イメージファイルのファイル名と拡張子">

img src とは　「ここに貼るぞー」と言う意味です。


イメージファイル名と拡張子とは例えば・・・
red.gif とか　　cat.gif　とかの事で正確でないと画像は張り付けられません。
ウインドウズであれば、画像を右クリックしてプロパティを見て正確なファイル名を確認しましょう。

当然この img src="　はここに貼るよーと言う意味であって文章と扱いは同じです。
だから、文章の途中に持ってきても良いのです。
文章と文章で絵を両端から挟み込むことも出来る！！と言うことだな。



そう言えばこんな事も出来ます。

alt　表示

<img src="イメージファイルのファイル名"alt="その解説文">


ブラウザーにはページの表示速度を速めるためにイメージ画像を表示しない機能があります。
このとき　alt　を記述することによってイメージ画像の部分にはブラウザー内蔵のアイコンが表示されます。
alt　を使うとそのアイコンの横に短いイメージの解説文を付けることが出来ます。

インターネットエクスプローラーではその記述によってマウスポインタをイメージに近づけると、その解説文がポップアップメニューで表示されます。
当然画像を表示しない機能をオフにしておいたときは同じようにアイコンの横に解説文が記述されることになります。



アドレス表示

<address> 名前　メールアドレス</address>

この記述によってアドレスタグで挟み込まれた範囲の文章はイタリック文字で表示されます。

このような記述がポピュラーです。

<a href="mailto:メールアドレス">表示されるリンクの文章</a>



この形式の記述を使うとメールを書くためのブラウザーのウインドウが自動的に起動します。
当然リンクになるので

　</a>


を忘れずに！！


よく　ポストのアイコンをクリックするとメールウインドウが自動で立ち上がると言うのを良く目にしますが、画像と組み合わせるには

<a href="mailto:kg-group@ra2.so-net.or.jp">
<img src="mail.gif" alt="MAIL TO ME"> </a>




となります。


mailto: の後に自分のメールアドレスを入力してmail.gif の部分にイメージアイコンのファイル名を入れて完了です。






ちなみに

文章や画像を画面のど真ん中に持ってくるとき･･それは

<center>

 です。
注意しなくてはいけないのは

<center>　で始まって必ず </center> で終わる。

と言うことです。例外はありません。


ちなみに左揃えは　<p align=a> イメージや文章　</p>


ついでに右揃えは　<div align=a> イメージや文章　</p>



となります。
左や右に揃えたらちゃんと改行をしたりセンターに寄せた後は <p> とかで　いつもよりも大きめに改行幅をとってやらないとバランスが悪いです。

ちなみに改行は　<br>
新たに段落を始めるときは改行よりも改行幅の多い　<p>
を使いましょう。


忘れた人は前のページに戻って復習しなさい！！




復習のために

文字を大きくするときは


<font size=5> とか <font size=3> とかで大きくします。

見出しの時は　<h2> とか　<h5> で記述します。

くれぐれも

</font> とか　</h2> の締めを忘れずに






ついでに今日は文字の色の変え方も書いておきましょう。

文字の色を変える



文字の色の変え方は非常に簡単で "#rrggbb" で表します。

r　はレッド
g　はグリーン
b　はブルー

で00〜ff 迄の16進数で表します。
フォントの場合もいつもと同じで必ず

<font color="#rrggbb">〜</font color>で締めることを忘れずに。



<font color="#000000"> 黒の文字　</font color>
<font color="#ff0000"> 赤の文字　</font color>
<font color="#0000ff"> 青の文字　</font color>
<font color="#ff00ff"> 紫の文字 </font color>
<font color="#00ff00"> 緑の文字 </font color>
<font color="#00ffff"> 水色文字　</font color>
<font color="#ffff00"> 黄色文字　</font color>
<font color="#ffffff"> 白色文字　</font color>



ここまでの事は基本中の基本。まずは丸暗記だ！！
次からはグラフィックデータのお話です。










6 グラフィックデータを作ってみよう




最近よく見かけるのがグラフィック画像の凝ったホームページです。
例えば

インターレースgif

です。


これはどんな物かというとふつうは画像が出るまでにある程度時間が掛かってそれから、 パチッと絵が貼られる。
なんて物ですが、ここで紹介するのは



はじめは荒いイメージ画像が表示されてだんだんと細かく鮮明に表示される。

なんて物です。
htmlの表示タグは普段と変わらず



<img src="***.gif>

で良くって、何がどう違う操作をするかというと、まずそうするのに必要なソフトが必要です。
これは”イメージ画像変換 ”と言う感じで検索エンジンで検索するとタダでダウンロードできます。
タダなんだからダウンロードしましょう。
メジャーな物では

GIX PRO

と言う物がでています。
探してください。
どうしてもないときは、僕のスタートページのダウンロードと言うところをクリックして グラフィック変換と言うところで探すとあります。

操作は簡単で、インターレースしたい画像をそのソフトの画面にドラッグして画面上に 表示させて、変換をクリックしてオプション〜インターレースを選択してクリックするだけです。
これで、あなたの画像は

じわじわと絵が表示される

と言うわけです。





次に紹介するのは

トランスペアレントGIF

です。

良くおもしろい画像を持ってきたんだけどその画像は気が利かなくでその画像のバックの画面に色が付いていて、自分のホームページのバックの色と合わなくてその絵だけ四角く表示されてて

何か浮いてる？？？

なんて事が良くあります。
その絵、もしくはアイコンの色の部分を透明化して張り付けたい場所の色と同化させたいときに使います。

僕のページはバックが黒だけどなかなかバックが黒いアイコンとかは巷にはなくて最初の頃は、とってつけたようなアイコンを貼ってました。
このトランスペアレントの機能を使うと

指定した一部分を無色にしてあたかも透明化したように見えます。



操作は簡単で先ほどのソフトを使って、
トランスペアレントしたい画像をそのソフトにドラッグして変換をクリックしてオプション〜トランスペアレント選択してクリックするだけです。






これは面白いです。

イメージマップ機能

と言ってまたの名を"クリッカブルイイメージ"とも言います。
これはどういう物かというとイメージ画像のある部分をクリックすると別のページを表示させることが出来る。と言う物です。

イメージマップ機能を使うにはＨＴＭＬで記述されたページのファイルの他に

2つのファイルが必要です。



１つはページ内に張り付けているイメージ画像ファイルで、２つ目はもう１つは

コンフィギュレーションファイル

と言います。
このファイルにはどこをクリックするとどのページを表示させるか？
と言う情報が書かれています。
このファイルはサーバー上で管理されていてページを見る人は目にすることはありません


　

イメージマップ機能の欠点


１　サーバーで管理するコンフィギュレーションファイルが必要なためデスク上のファイルをデスク上で開くことは出来ない。

２　サーバーによってコンフィギュレーションファイルの記述の仕方が異なる。

３　クリック先のページがどこにリンクしているのかが実際にクリックしてみないと解らない。

４　クリックしてからページが表示されるまで時間が掛かる。


しかしネットスケープナビゲーター2.0以降やインターネットエクスプローラー等はＨＴＭＬが拡張されているためＨＴＭＬタグを使ってサーバーに移管することなくブラウザー側で機能を処理できるようになっています。





ＨＴＭＬで記述する例


<img src="***.gif" USEMAP="#***map">

<map name="***map">

<area shape="polygon"coords="208,13,160,29,144,83,216,85"href="***.html>
<area shape="polygon"coords="227,12,224,87,299,85,291,21"href="***.html>
<area chape="circle" coords="284,160,34"href="***.html">
<area shape="circle" coords="148,158,35"href="***.html">
<area shape="polygon"coords="150,25,128,88,76,101,69,167,374,165,370,109,309,94,285,15,215,2"href="***.html">
</map>





説明



<img src="イメージファイル"USEMAP="マップ情報のＵＲＬ">


<map name=マップ名>

<area shape="領域の形状" coords="座標" href="リンク先のＵＲＬ">

</map>










shape属性とcoords属性

領域の形を指定します。
四角形は　shape="rect"　左上角(x1,y1) 右下角(x2 円は　rect="circle" 円の中心点(x,y)　半径(r)
三角形は　shape="polygon" 三角形の頂点(x1,y1)　下角(x2,y2)下角(x3,y3)
となります。




href

 リンク先のＵＲＬを指定します。


イメージマップの属性は新しい機能なのでこれを処理できないブラウザもあります。
そのようなブラウザのために従来のイメージマップ機能も併用できます。

<a href="コンフィギュレーションファイルの呼び出し">
<img src="イメージファイル"ismap usemap="#マップ名">
</a>

コンフィギュレーションファイルの呼び出しとは今の***.htmlからcgi-binディレクトリに向かってのパスを記述します。
サーバーの環境設定、及び***.conf(コンフィギュレーションファイル）をおくディレクトリーによって違ってきます。




コンフィギュレーションマップの記述例


folder名/***.conf
default/folder名/***.html
poly(208,13)(160,29)(144,83)(216,85)/フォルダ名/***.html // リンク先
poly(227,12)(224,87)(299,85)(281,21)/フォルダ名/***.html // リンク先
circle(284,160)34/フォルダ名/***.html //リンク先
circle(148,158)35/フォルダ名/***.html //リンク先
poly(150,25)(128,88)(76,101)(69,167)(374,165)(370,109)(309,94)(285,15)(215,2)/フォルダ名/***.html //リンク先


このコンフィギュレーションファイルの座標はブラウザ側で処理するイメージマップの情報の座標と一致しています。






次に紹介するのは

GIFアニメーションについて


今迄はページ内でアニメーションを再生するには ＪＡＶＡ アプレットや ショックウエーブ 等を使う方法がありましたが、このＧＩＦアニメーションを使えば

ずっと簡単にアニメーションを作ることが出来ます。





ＧＩＦアニメーションとは、基本的に ぱらぱら漫画 です。少しずつ絵柄を変えたイメージファイルを複数作成し、ＧＩＦアニメーション作成ツールを使って、それらを全て連結して一つのＧＩＦファイルに変換します。
当然ページに張り込むときは img src=" を使います。




ウインドウズの場合は GIF CONSTRUCTION SET
マッキントッシュの場合は　GIF BUILDER


を使います。

　

ちなみに僕はウインドウズマンなので　GIF CONSTRUCTION を使います。

１　起動して最初のウインドウで１枚目のGIFを選択します。

２　表示されているリストで　IMAGE...を選択状態にしてINSERTをクリックします。

３　１と２を繰り返します。

４　FILE - SAVE AS コマンドを選んで新しいファイル名を付けて保存します。

５　VIEW　ボタンをクリックするとアニメーションが再生されます。

６　背景を透明化するにはイメージの一つ上の行を選択してからINSERT ボタンをクリックして CONTROL　ボタンをクリックします。

７　CONTROL　と言う行が表示されるのでそれをダブルクリックします。

８　TRANSPARENT　CONTROLに　チェックを入れます。

９　アニメーションの速度を変えるには　８と同じようにCONTROLの行をダブルクリックしてウインドウの中のDELAYボックスで時間を指定します。

１０　アニメーションをループさせたいときはINSERTボタンをクリックして　LOOPボタンをクリックしてLOOPと言う行を追加します。

１１　LOOPの行をダブルクリックするとウインドウが表示されるのでそこで回数を設定する。



これらはJAVA　を勉強するよりもとても簡単にアニメを作る事が出来ます。
是非、やってみよう。







今までのおさらいを次はしちゃうよ
どんどん利用しよう。








７小技集一覧




ここまでくるとおさらいも兼ねて書き連ねておくので必要な物をコピーしてください。



タイトル表示

<title></title>

アドレス表示

<address></address>

コメントを記入する

<!--********-->

背景・文字色指定

<body text="#rrggbb"> 文字色の指定
<body link="#rrggbb">　　リンク色の指定
<body vlink="#rrggbb"> 行ったことのあるリンク色の指定
<body alink="#rrggbb">　　リンクをクリックしたときの色の指定
<body bgcolor="#rrggbb">　　胚へ移植の色指定
<body background="画像ファイル名">　　背景に貼る画像ファイルの指定

ファイルのリロード

<meta http-equiv="refresh"content="time">

?秒後に違うファイルにアクセスする

<meta http-equiv="refresh"content="time;URL">

見出しを書く

<h?></h?> (?=1〜6)

見出し位置の指定

<h? align="center"> 真ん中
<h? align="right"> 右寄せ
<h? align="left"> 左寄せ

フォントスタイル

<b></b> ボールド文字
<i></i> イタリック斜体
<tt></tt> 等幅タイプライタ
<sup></sup> 上付文字
<sub></sub> 下付文字
<u></u> アンダーライン
<s></s> 取消線
<strong></strong> 強調文字

基本フォントサイズ指定

<basefont size="?"> (n=1〜7)

フォントサイズ変更

<font size="?"></font > (?=1〜7)

文章の表示位置

<div align="****"></div>
(****=left.center.right)

テキスト色の指定

<font color="#rrggbb"></font>

改行する

<br>

段落を作る

<p>

超便利!!テキストのとうりに自動改行表示

<pre></pre>

水平線を引く

<hr>

罫線の種類

<hr size="?" (太さを入力)
width="?" (横幅の長さの割合を入力)
align="***" (right.left.center)
noshade&g (陰なしにする時に記入)

センタリングする

<center></center>

文字を点滅させる(ネットスケープのみ)

<blink></blink>

この文字が点滅しているならあなたのブラウザーはネットスケープです。

インデント設定

<ul>
<li>　こんな項目
<li>　あんな項目
<ul>
<li>　そんな項目
<ul>
<li>　どんな項目
</ul>
</ul>
</ul>

  • こんな項目
  • あんな項目
    • そんな項目
      • どんな項目


文章の頭にマークを付ける

<li type="****">
(****=disc.circle.square)

改行なしのインデントネットスケープのみ

<dl compact>
<dt> maido
<dd> aisatsu
</dl>

maido
aisatsu


画像説明ポップアップ

<img src="画像ファイル名" alt="説明文">

マウスポインタをポストに当てて・・・
mail to

画像の周りにテキスト文を配置

<img src="../../image/mail.gif" aligin="left">
こんな感じです。

こんな感じです。


<img src="../../image/mail.gif" align="right">
こんな感じかな

こんな感じかな？ポストまでずいぶん遠いなー



リンク設定

<a href="http://www.mnet-jp.com/kg-group/">ここをクリックするとスタートページに戻ってしまうから、クリックしないでね</a>

ここをクリックするとスタートページに戻ってしまうからクリックしないでね



メールウインドウを自動的に起動する

<a href="mailto:kg-group@ra2.so-net.or.jp">クリックしてみ</a>

クリックしてみ



特定の場所へのリンク

<a name="７小技集一覧">７小技集一覧</a>
<a href="#７小技集一覧">７小技集一覧</a>

７小技集一覧



表組について

枠線なし
<table>
<tr>
<th>***<th>***<th>***
<tr>
<td>***<td>***<td>***
</table>


枠線あり
<table border>
<tr>
<th>***<th>***<th>***
<tr>
<td>***<td>***<td>***
</table>


枠線ありの立体型
<table border="10>
<tr>
<th>***<th>***<th>***
<tr>
</table>




この次は上級編です。
フレーム機能やサウンドを鳴らすための記述。
ムービー等にもふれちゃうよ。
MAIL TO ME