| 最近「ホームページ ビルダ」や「Word」「一太郎」等の HTML変換機能も なんとか使えるレベルになってきてはいますが、ここではそういう類のソフトについてはほとんどふれません。悪しからず。 この手のソフトは、あくまで補助的に使用なさることをおすすめします。 |
デスクトップ上にエディタとWebブラウザを起動しておき、エディタで書いたら「Save 保存」し、ブラウザで保存したファイルを読み込んで確認します。
修正する場合は、「上書き保存」してブラウザで「再読み込み」すればいいでしょう。
なお、Microsoft の Internet Explorerは、間違った記述のHTMLでも 無視して表示してしまうという困った仕様になっています。したがって、表示確認用として Internet Explorer を使用するのはおすすめできません。
<HTML LANG="ja"><HEAD> <TITLE>たいとる</TITLE></HEAD> <BODY> 本文・・・なんとか、かんとか。<BR> マグマ大使ーっ！ほげほげほげ。おぉ、超低周波の笛の音が ・・血行を良くするぞ。<BR> <BR> と、いうわけで、これがわたしのホームページなのだ！<BR> ぜひご意見ご感想をメイルしてくれ！！<BR> メイルアドレスは、hogera@foo.zcr.jp ですだ。<BR> </BODY></HTML>どうです、簡単でしょう? これを実際にWebブラウザで見るとどうなるかというと、 こうなります。
と、まあ、このような順番になるわけです。
ホームページの約束事である HTML は、文章の論理的な構造を記述する ことを目的に作られた一種の「言語」なのです。本来は、「文書がどう見えるか」ではなく、「文書の中身がどう意味づけられるか」をあらわすものなんですね。
例えばタイトルですが、いかに大きいフォントで文書の中央に書いたとしても <TITLE></TITLE> に挟まれていなければタイトルではなく、それは見出しか、さもなければ単なる本文の一部である・・ということになるわけです。
こういった本来の意味を重視して最近のいわゆる「ホームページ作成支援ソフト」を見ると、「すべて不合格製品である」といっても過言ではありません。なぜなら、考え方が全く逆だからです。
文書の論理的構造は、著者自ら意味づけるものであって、ソフトウェアに勝手にまかせていいものではありませんよね。
ですから「ホームページ作成支援ソフト」を使うのなら、基本を知った上で補助的に使用するのがよい・・と筆者は考えています。実際、細かい修正は必要になりますからね。
<HTML LANG="ja"><HEAD> <TITLE>ex: THE PAGE OF HOGEHOGE!!</TITLE></HEAD> <BODY BGCOLOR="#FFFFFF"><BR> <CENTER><H1>HOGEHOGE の ホームページ だよ！</H1> <IMG SRC="hogera.jpg" ALT="portrait of hogehoge"><BR> ちわーーっす！ <FONT SIZE=5>HOGEHOGE</FONT> でっす！！ <P>みんな、エヴァンゲリオン観てる？感動だよねぇ。<BR> さて、GAINAXって伝説のゼネプロといえば<BR> ヤマタの大蛇の逆襲だったりなんかして、<BR> マグマ大使ーっ！ほげほげほげ。おぉ、超低周波の笛の音が・・<BR> 血行を良くするぞ。こりゃ結構なんちゃってねぇ。 <P>それはさておき、当店の MENUだよ！<BR><BR> <HR> <H2>超マイナー「暗闇仕留人」全話完全解説</H2> <H2>噂の真相！カミーユ ビダン / その後</H2> <H2>英国ロック事情・パンクとプログレの狭間</H2> <HR> <H3>誰も知らなかった HOGEHOGE の正体</H3> <HR> ご意見ご感想を hogera@foo.zcr.jp までメイルしてね！<BR> </CENTER> </BODY></HTML>この例は、Webブラウザで見ると、こうなります。
ちなみに「FF0000」は、赤。「00FF00」は、緑。「0000FF」は、青です。2桁ずつR赤G緑B青の三原色に対応しています。16進数表示なので、0123456789ABCDEFであらわすのです。
なんで10進じゃなくて16進なんだって?・・かんべんしてください。(^^;)
まあ、16進の方がコンピュータは得意なんでしょう。
それはさておき、ダブルコーテイション「"」でくくるのを忘れずに。一部のブラウザでは「"」がなくてもいい場合がありますが、無ければ機能しない場合もあります。すべての人があなたと 同じWebブラウザ(そして同じOS)を 使っているわけではないということを認識していただければ幸いです。
どちらの形式もファイルサイズ圧縮が効いているため、BMP などと比べるとかなり小さいサイズにおさまってくれますが、写真等は jpg、アニメ タッチの絵等は gif の方が圧縮率が高くなりますので、画像の内容によって使い分けるのがいいでしょう。
実際の画像ファイル作成については、お使いのスキャナソフトその他の画像関係ソフトのヘルプをご覧ください。最近ではデジタルカメラによるのがお手軽です。簡易画像処理ソフトも付いてきますし。
画像を表示させるときは、次のように <IMG>TAGを使います。なお、<IMG>TAGは、<BR>や<P>と同じで、「 / 」で閉じる必要はありません。
<IMG SRC="画像ファイル名" ALT="画像の説明">
SRCでファイル名を指定し、ALTで、その画像の説明を文字で書きます。
なぜ説明を文字で書くのかというと、別項で解説してありますが画像を表示しないブラウザを使っている方、はたまた表示できてもわざと (文書表示高速化のため)表示しないように設定している方、さらに (文字はコンピュータが読み上げてくれますが) 画像を見ることができない方などもインターネット上にはいらっしゃるわけですから・・。
また、上の例ではセンタリングしてありますので使わなかったのですが、画像表示領域の右側に文章を「回り込ませる」場合は、次のように「ALIGN」オプションを使って "LEFT"を指定します。(同様に、ALIGN="RIGHT"を指定すると「右寄せ」にすることができます)
<IMG SRC="画像ファイル名" ALT="画像の説明 " ALIGN="LEFT">
画像ファイルは意外とファイルサイズが大きいものです。1ページに貼り付ける画像ファイルのサイズは、できるだけ小さく、ファイル数も少なくした方がいいでしょう。遠方からアクセスしてくる「読者」は、あなたよりも多くの時間をかけてあなたのページを見ることになるのです。
1ページあたりのトータル サイズを 80kB以下にすれば、相手が遅いアナログ28.8Kbpsモデムを使っているとしても、30秒以内での表示が可能になると思います。
また、WIDTH="xx" HEIGHT="yy" のオプションを使えば見かけの画像サイズを変更することができるのですが、巨大な画像をこのオプションで小さく見せるのはやめた方がいいですね。どうしてもというなら、ページに貼り付けるのはあらかじめ縮小した画像ファイルにし、大きなものはサイズ明記の上リンクして読者の判断で見ることができるようにすべきです。
こうしたことからも、自前の画像を使う場合は、なにがしかの「画像処理ソフト」は必須アイテムといえるでしょう。最低「トリミング」「サイズ変更」機能は必要です。
なお、一般的に「画像」には「著作権」「肖像権」などがありますので、ダウンロードしたものを使用する場合は注意が必要です。
なお、例にはありませんが、<FONT COLOR="#RRGGBB">文字</FONT>の形式で文字色を指定することも可能です。( "#RRGGBB" の記述方法は前述のバックカラーと同一の16進表記です)
通常、<P>を使うと、<BR><BR>のように改行を二度行ったように見えます。しかし、いつでもそのように見えるかというと、そうではありません。「段落」という本来の意味が優先するからです。
<P><P>というように<P>を連続して複数回記述しても、1回分しか有効にはなりません。
なお、<HR WIDTH="xx%"> というように「WIDTH」オプションを使うと、画面の幅に対して xx%の長さの横罫線を引くことができます。
<A HREF="リンク先のURLまたはファイル名">キーワード</A>
例えば、ここをクリックすると、「美の国秋田ネット ホームページ」にリンクします。
上の行が実際はどう書かれているかというと、
<p>例えば、<A HREF="http://www.pref.akita.lg.jp/">ここをクリック</A>すると、「美の国秋田ネットホームページ」にリンクします。
基本的に、ホームページというものは公開するために設置するものですから、リンクは自由に設定していいと思います。ただ、他人のホームページにリンクを設定(俗に「リンクを張る」といいます)したら、eメイルなどでその旨を連絡しておくのがいいかもしれません。
このほか、ファイル名について気をつけなければならないことといえば、多くのサーバでは「ファイル名に全角文字は使用できない」ということです。ファイル名は半角英数字でなければなりません。転送前の自分のハードディスクにある時は正常に表示できても、Webサーバへの転送後にエラーになります。
また「ディレクトリ」は「階層構造」になっていますので、「絶対」的な記述の仕方のほかに「相対」的な記述の仕方が可能です。
例えば、このページ(HTMLファイル)があるディレクトリは「/~tada/net/」です。この上の階層に画像ファイルが格納されている「gif」というディレクトリがありまして、このディレクトリは正確には「/~tada/gif/」ですが、「/~tada/net」を基準にして相対的に表わすと「../gif/」と書くことができます。逆に「/~tada/」を基準にして「/~tada/gif/」を相対的に書き表わすと「./gif」となります。
つまり「../」は「階層的に一つ上のディレクトリ」を、「./」は、現在(カレント)のディレクトリを表わします。
単なる「 / 」は、そのサーバの「最上位のディレクトリ」を表わします。つまり自分のプロバイダのTOPページへリンクするには、一般的に「<A HREF="/">このサーバのTOPページへ</A>」というように記述することになります。例えば、「<A HREF="http://www.zcr.jp/">・・」と http:// から記述しても正常にリンクできますが、無駄な通信が発生してレスポンスも遅れます。
同一サーバ内のファイルへのリンクは、「http://・・」を使わないようにしましょう。
つまり、「index.html」というファイル名は、そのディレクトリだけ指定してやれば、省略できるのです。
「index.html」の他に、「INDEX.HTM」「index.htm」なども、たいてい省略できるように設定されています。
だからどうした？・・となると困るのですが、まあ「暗黙の了解事項」とでもいいましょうか、ホームページの先頭ページを「index.html」という名前にすれば、ディレクトリ名だけわかれば簡単にアクセス可能になるわけです。
先頭ページのファイル名が「index.html」「INDEX.HTM」「index.htm」ではない場合、ディレクトリにアクセスするだけで、中身のファイル/ディレクトリ構造がすべて見えてしまうことがあるので、ホームページの構成上、問題になることがあるかもしれません。(ただし、多くのWebサーバでは、index.htmlの存在しないディレクトリ自体へのアクセスは禁止されています)
最後によくある間違いについて・・
リンクの書き方で、ディレクトリを指定するつもりなのに最後が「/」で閉じていないものをたまに見かけます。ディレクトリを指定する場合は、その多くが「index.html」へのリンクだと思いますが、必ず「/」で終わるようにしてください。例えば「/~tada/」というように。
「/」で閉じるのを忘れて「/~tada」としてしまうと無駄な通信が発生し、サーバによっては文字化けすることもあるので好ましくありません。
HTMLでの書き方は、画像の表示と似ています。下の例は、筆者のページで使っていたものです。カウンタの数字を入れたいところに記述してください。
<IMG SRC="/cgi/hi-rasshai/~tada?fg=FFFFFF&bg=0000A0" alt="counter">
前述のようにディレクトリに対応していますので、上の「/~tada」の部分は、あなたのディレクトリに書き換える必要があります。仮に、あなたのIDが「 kaori 」だとすると、「/~tada」の部分は「/~kaori」にしなくてはなりません。
また「?」の後の「fg=」が数字のフォアグラウンド、「bg=」が数字のバックグラウンドの色設定です。色指定については バック カラー のところを参照してください。
残念ながら、数字フォントの選択はできません。 (カウンタはカウントできればいいのであって、飾る必要は無い・・と筆者は考えます。他のサーバのカウンタ サービスを使うこともできますが、意外と「重く」なる場合がありますので注意してください)
実は、これだけではカウンタは動作しません。「countfile」というカウンタの数値を格納するファイル(中身には 0 とだけ書く)をメモ帳などのエディタで作って、該当するディレクトリに転送し、FTPソフトでパーミッションを「666」に書き換える必要があります。
最近では、こんな面倒なことをしなくてもいいカウンタがいろいろあります。カウント数値格納用のファイルも要らなければ、htmlファイル一つ毎にカウント可能というヤツが現在の主流なんですが・・
なお、カウンタは、サーバ上のカウンタ表示プログラムによって表示されますので、ファイルをサーバに転送してはじめて表示可能です。(自分のローカル ディスクのホームページを見ても当然ながらカウンタは表示されません)
アクセス カウンタのCGIプログラムは、ISPによって違いますので、詳しくはISPのサポート担当に問い合わせましょう。
これでこの項は終わりです。HTMLの基礎を中心に好き勝手なことを書かせていただきました。しかし、ホームページはテクニックやギミックを見せるためのものではないのです。原点にかえって、自分の情報・・文章、自作画像、自分で撮った写真・・を発信するという姿勢がやはり大切なのではないでしょうか。
読んでくださってどうもありがとうございました。