インターネットのｗｅｂページを作ろう

インターネットのＷｅｂページをフリーソフト（無料ソフト） を使って考察するページです。

目次 参考書はどれがよいか？ アプリケーションは何が必要？ テキストエディターの選択 ディジタルカメラは何にすればよいのか？ 写真を撮った。どうすればよいのか？　ｖｉｘを使ってみる 配置を考察。構想を練る。 プログラムを考察 プログラムに、ヘッダーとフッターを加えると完成です プログラムリストを印字して読んでみよう フリーソフト、縮小専用を使う 転送ソフト、ＦＦＦＴＰの裏技

１．参考書はどれがよいか？

本屋に行くと、ｗｅｂページを作る参考書が多く、どれにするか悩む！！ ホームページを作るエディターと呼ばれるアプリケーションを多く見うけるが、 「ＨＴＭＬ」と言う専用の言語を覚えて、 テキストエディターでプログラムを作る方が、間違いが無い短い見やすい表示ができます。 努力して自分流の定形の表示方法を作り、後はそれをコピーして中身を入れかえれば簡単です。このｗｅｂページの多くが同じように表示されるのも同様の方法で作っているからです。 ずばりお勧めの参考書です。最新版です。 　 小生が数年前から、ある学校で教材に使っているものです。 毎年手が加えられて表紙が変るので探すのに苦労しました。最近番号がつき探しやすくなりました。最近号は第３版です。 　ホームページ辞典　第３版 　著者　　（株）アンク 　発行所　株式会社　翔泳社 　ＵＲＬ　 http://www.shoeisha.com/book/pc/dic/ 　売価　￥２，０００−＋税

２．アプリケーションは何が必要？

参考書の次は、アプリケーション（ソフト）が必要です 　１．テキストエディター 　２．画像処理・加工ソフト 　３．インターネット　エクスプローラー（ＩＥ）またはネットスケープ（ＮＮ） 　４．転送ソフト 　 え、これだけ？そうです。しかもこれらはフリーソフトを入手すれば全部ただです。 (機材としてはディジタルカメラがまだ必要です。) １．テキストエディター TeraPad　Ceditx　等があります。 全角スペースの表示が無いノートパッドなどは実用になりません。   ＴｅｒａＰａｄ　０．７４（原本；tpad074.lzh）   Ceditx(CinnamonEditor 1.2.1.0)（原本；Ceditx.lzh） ２．画像処理・加工ソフト これも軽快なのは、vix　です。 画像を縮小する専用ソフトに縮小専用と言うのがあり、お勧めです。簡便です。 そのほかには、Jtrim　等があります、機能が多いので使いこなすと便利です。   ｖｉｘ２２１（原本；vix221.lzh）   縮小専用１．５０（原本；ShukuSen150.exe）   ｊｔｒｉｍ１４０（原本；jt140.lzh）

３．テキストエディターの選択

テキストエディターに、「全角空白マーク」をオンにする、設定のあるものを選択する 上は、テキストエディター　Ｔｅｒａｐａｄの設定です。 ツールの設定、表示を開いて、 全角空白マークにレ をいれます。 半角空白マークの設定はどちらでもよいでしょう。 プログラムリストのタグ内に全角文字を間違って使わない為に表示します。 別のテキストエディターを使うときには、全角空白を表示できるものを使います。

４．ディジタルカメラは何にすればよいのか？

またまた難題です。ディジタルカメラはどれにするか？ 前述のエディターと画像ソフトは道具もしくは工具の類でしょうが、ディジタルカメラは、嗜好品に入るかも知れません。 機能で、メーカーで、使っているメモリーカードで、画像の転送方法で、画素数で、価格で、大きさで、電池の種類で、どれにするか迷っていると何時までも入手できません。 お勧め　その１ 今までの自動カメラのように、あちこち持ち歩きたい。人物や風景を手軽に撮りたい。 画素数が２００から３５０万で、ＳＤメモリーカード、もしくは、コンパクトフラッシュカードを使い、単三電池で動き、それなりにコンパクトで、１年くらい前に発売されて、現在￥３０．０００−以下の機種をとりあえず購入する。 これは探せば限がありません。ソニー以外のほとんどのメーカーにあります。 お勧め　その２ こだわりのメーカーで、専用のメモリーカードで、専用の充電電池で、小型のもので、 最新の機種を。これはソニーでしょう。 お勧め　その３ 被写体が作品または製品なので、カメラを固定して綺麗に撮りたい。 これが１番選択が難しい。カタログにこの機能が搭載されてない。メーカーに問い合わせてもサービスカウンターの「おねーさま」では判らない。 仕様書に「Ｔｗａｉｎ」対応または、「Ｔｗａｉｎ」でＵＳＢに接続とあるものを探す。 ＣＡＮＯＮの大部分の機種が対応している。購入時に確認すること。 この機種は、パソコンとつないで、パソコンのモニターを見ながら、ズーム、フォーカス、を設定し、パソコンからシャッターを押せます。露出補正は、ＥＶ値をパソコンから変更できます。１／３ステップで＋−２までです。シャッター速度と、絞りを、個々に設定することは出来ません。 画像は設定で、１枚づつパソコンに送られます。同時に画像の確認も出来ますので、気に食わないのですぐに消去も可能です。 その他の問題 ディジタルカメラの購入には注意が必要です。 これを買うと１式全部そろっています、というのが初心者には安心です。 欠点は、メモリーカードの容量が小さい。これは容量の大きいものを別途購入する。 ＯＬＹＭＰＵＳの機種に多い。ほかのメーカーにもある。 通常、カメラ以外に、メモリーカード、電池と充電器、画像の転送コードとアプリケーション、または、メモリーカード読み取り器、画像の加工ソフトが必要です。 カメラ以外にこれらを購入すると、本体より高かったなんて事も生じます。 小生の使用機器 その１の考え方で、半値でＰＥＮＴＡＸ　Ｏｐｔｉｏ２３０（２００万画素　３倍ズーム）を購入し、現在使っています。 その前に、ＫＯＤＡＫ　ＤＣ３８００（２００万画素　ディジタル２倍ズーム）を入手し、 外出時はどちらかを使います。電池は共に単三２本で充電式ニッケル水素電池を使っています。コンパクトフラッシュカードは共通です。 その３用で、ＣＡＮＯＮ　Ｇ１を使っています。これを持ち歩く事はありません。 被写体を綺麗に撮るために、専用の照明台なども自作しました。現在では、被写体の影も出ず、取り扱い説明書作りには欠かせません。 そのほかに、前世紀の遺物とも言える３０万画素のものも２台あります。 追加の項目 ドットとピクセルは画面上では同じです。 パソコンの表示サイズの多くは、１０２４×７６８　です。単位はドット。 ディジタルカメラの２００万画素は、１６００×１２００　です。単位はピクセル。 ３２０万画素は、２０４８×１６００　です。 このページの表示されている枠の幅は、６００ピクセルです。 上の本の画像は、画像幅１４０ピクセル、高さ２００ピクセルです。 ３０万画素のカメラは６４０×４８０ピクセルです。 画素数の大きなカメラは、必要な部分のみのトリミングをしても画質が低下しません。 その為、撮影時に画角を神経質に考え無くても、後でパソコン上で加工が出来ます。

５．写真を撮った。どうすればよいのか？　ｖｉｘを使ってみる

ディジタルカメラで撮った写真をパソコンに転送してから、どうするの？？ 画像を、vixで表示し、加工する画像をマウスでダブルクリックすると、その画像だけの画面が起動します。 ここで編集をクリックし、画像の トリミング（切り取り）と リサイズ（通常は小さくする）を実行します。 ここで、画像に効果を与える機能、 エフェクト等があるとさらに画像が見やすく加工できます。 これは原本の画像です。原本は1600×1200ピクセル、994kbです。 見やすいように500×375、43kbにリサイズしています。 この中の右のおもちゃを切り取り加工します。実物は手の大きさです。 つまり手のひらに載ります。リモコンで動いていたので少しぶれています。 フリーの「ＶＩＸ」を使ってトリミングです。 切り取る寸法を数値で入れられるので簡単です ２５０×２００で切り取りました。 次に、 「明るさ＋１０、コントラスト＋１０」 したものです。 これ以上の加工（エフェクト）は、出来ません。 切り取った画像が大きい場合には、リサイズの時に少し画像の加工が出来ます。 シャープネスをクリックしてリサイズすると、もう少し画像が鮮明になります。

６．配置を考察。構想を練る。

どのような構成でページを作るかの考察です ここで問題があります。プログラム言語、ＨＴＭＬ、がわからないとページは出来ませんが、ＨＴＭＬの勉強だけしてもうまくいきません。 １．最初に必要なのは、配置等の構想と作文能力です。デザインと文。 ２．次に、それらを表現する方法を考える力です。プログラムです。 これら二つがまったく別の物だ、と言うことが頭の中で整理できないとプログラムは書けません。 １．は本人の能力とひらめきで、良くも悪くも手抜きも出来ます。 ２．は経験と努力です。プログラムの作り方を勉強する必要があります。 １．最初に必要なのは、配置等の構想と作文能力です。デザインと文。 これを考察します。 配置で簡単なのは、全部中央に配置して、画像、文、画像、文、と交互に表示する方法です。「家の悪餓鬼です」などという、どうでもよい初心者のページでよく使われます。２度と見るもんか！というページです。 これに対して、全画面を使って横に長い文章のページもあります。どちらも読みにくいです。 そこで、本箱もしくは本棚を考え、棚に画像と文を配置する事を考えます。 幅は、印字したときにＡ４サイズになるようにします。長さは適当に切ります。 もうおわかりですね。例えば、横に２分割、縦に２段の箱を考え、左側に画像を縦に２枚、右側にそれらの説明をと考えれば、配置の構想が出来あがります。 文は適当に考えることにして・・・ 画像 文章 画像 文章

７．プログラムを考察

２．次に、それらを表現する方法を考える力です。プログラムです。 これを考察します。 本箱を配置するタグは「ＴＡＢＬＥ」です。詳細はあんちょこを見ること。 ｔａｂｌｅの幅を５００ピクセルにして画像と文を前述の構想のように配置すると縦の長さは、画像の縦の長さの合計＋本箱の枠の幅で決まります。又、文章のほうが長ければ収まるように長さが伸びます。幅は変りません。文章は、画像の縦より短ければ、上下に隙間が出来るように配置されます。 例を次に表示します。

あはは、期待に反した表示ですね。 原因は幾つかあります。 表示位置を画面中央に指定していません。指定をしないと左端に表示されます。 画像の横幅が同じではありません。 左端から表示をしたかったと言えば、位置はＯＫですね。 画像の幅が違うのが致命的です。上の画像の幅を広げれば全体に大きくなって間抜けな配置になるし、下の画像を上の幅と同じにすれば、詳細は解からなくなります。どうすればよいでしょう？ 無理に出した結論。本箱を２個重ねればよい。これを中央に配置する様に考察

ずばりお勧めの参考書です。最新版です。 　 小生が数年前から、ある学校で教材に使っているものです。 毎年手が加えられて表紙が変るので探すのに苦労しました。最近番号がつき探しやすくなりました。最近号は第３版です。 　 　ホームページ辞典　第３版 　著者　　（株）アンク 　発行所　株式会社　翔泳社

次に、 「明るさ＋１０、コントラスト＋１０」 したものです。 これ以上の加工（エフェクト）は、出来ません。 切り取った画像が大きい場合には、リサイズの時に少し画像の加工が出来ます。 シャープネスをクリックしてリサイズすると、もう少し画像が鮮明になります。

本箱が２個重なっているのが判りますね。 次に、画像と文の間に隙間がないと少し読みにくいのを手直しします。 この方法には、幾つかの方法があります。 １．本箱の縁の幅を広げる。ｂｏｒｄｅｒ＝５ ２．縁と、画像もしくは文章までに隙間を作る。ｃｅｌｌｐａｄｄｉｎｇ＝５ ３．画像の左右に隙間を作る。ｈｓｐａｃｅ＝５ ４．横の分割を３個にして中央に細い棚を設ける。 ＜ｔｄ＞＜ｂｒ＞＜/ｔｄ＞を追加する ５．文章の周囲に隙間を作る。＜blockquote＞タグを使う では、また、プログラムの手直しです。 １．最後の５を使う ２．上下の区切りに横罫線 ＜hr＞を入れる ３．下の部分の左右を入れかえる ４．本箱の縁を表示しないようにする ５．横幅をＡ４サイズにする為に、周囲に額縁をつける ６．文章も考察しましょう

画像と文章の配置

ずばりお勧めの参考書です。最新版です。 　 小生が数年前から、ある学校で教材に使っているものです。 毎年手が加えられて表紙が変るので探すのに苦労しました。最近番号がつき探しやすくなりました。最近号は第３版です。 　 　ホームページ辞典　第３版 　著者　　（株）アンク 　発行所　株式会社　翔泳社

これは手の平に載る大きさの、おもちゃのブルトーザです。 車体の上部に見える緑色の板にマイコンが載っていて、別のリモコン本体にもマイコンが搭載されています。リモコンでこれをコントロールして動かしています。

画像と文章の配置・完成

８．プログラムに、ヘッダーとフッターを加えると完成です

完成に近づいてきました。ヘッダーとフッターを加えます 多くのプログラムリスト上で、改行は無視します。改行はリストの見やすさだけです。 また、ＨＴＭＬ文ではタグの大文字と小文字は区別しません。 タグは半角で記します。全角の場合はタグとみなしません。 以下の記述で＜と＞は全角で表示しています。これはこのページのリストを印字すると正確に印字されないので使いました。実際には＜と＞は半角で記します。 ヘッダー部分を記すと ＜html＞＜head＞＜title＞タイトル＜/title＞＜/head＞ ＜body bgcolor=tan＞ フッター部分を記すと ＜/body＞＜/html＞ このヘッダーとフッターをひとつ前のプログラムに加えます。 次ページでこれを確認します。 その１ 少し違うものも作りました。 こちらの方が table を足していく構造なので解り易いかもしれません。 その２ 上の　その２　の border の表示を 0 にして普通に表示する。 その３

９．プログラムリストを印字して読んでみよう

他人のプログラムリストを読む 表示されているページを名前をつけて保存し、印字するとプログラムリストを読むことが出来ます。 このページのリストは９７５行です。 その１のリストは５０行です。 ぜひ印字して、ＨＴＭＬを理解して、ｗｅｂページを作りましょう。 あとは、あんちょこと首っ引きで勉強して下さい。

１０．フリーソフト、縮小専用を使う

縮小専用１．５を便利に使おう 縮小専用１．５を起動すると上の画面になります。 最初に、左上を設定します。現在640ｘ640です。 縮小変換後の画像サイズは内接で決定されるので、 1600ｘ1200の画像を右下にドラッグ&ドロップすると640ｘ480に縮小されます。 1200ｘ1600の画像の場合は、360ｘ480になります。 左下のオプションはこのままでよいでしょう。右上は設定して使います。 画像が多数あり、急いでＷｅｂページを作る時には、非常に便利です。 作者に感謝！！ 蛇足 ディジタルカメラで撮影するときの注意。 Ｗｅｂにアップするのだからと解像度を低くして撮る人がいますが、 それでは宝の持ち腐れというものです。 カメラの解像度は最大に設定し、画像のバイト数を最大で１Ｍｂ位にすると、 撮影可能枚数と画質のバランスが丁度よいでしょう。例えば、 記録サイズ（解像度）１５３６×２０４８ピクセルを、スーパーファインにすると倍以上のファイルバイト数になりメモリーの容量がすぐなくなります。

１１．転送ソフト、ＦＦＦＴＰの裏技

転送ソフトをフロッピディスクで使う利点 苦労して作ったＷｅｂページをほかの人にみてもらうには、プロバイダーの指定するところへ転送する必要があります。このソフトがＦＦＦＴＰです。 手に入れたら、フロッピーディスクに解凍して使うと、以下のような利点があります。 ユーザ名、パスワード等がパソコンに記録されません。 ディスクを持参すれば、他人のパソコンからも転送できます。 通常ユーザ名やパスワードはパソコンのレジストリーに記録されます。 これをフロッピー上のＩＮＩファイルに保存すれば、ＰＣには記録されません オプション、その他を次のように設定します。 「設定をレジストリーでなくＩＮＩファイルに保存する」の前に「レ」を入れます。 フロッピーディスクは書込み可能状態で使います。