ホームページはＨＴＭＬという形式で書きます。最近のワープロ・ソフトはＨＴＭＬ文書を自動的に作ってくれます。でも、自分らしいホームページを作りたければ、ＨＴＭＬを勉強しても損にはなりません。
ＨＴＭＬは基本的にはテキスト・ファイルです。テキスト・ファイルというのは、文字記号だけを使ったシンプルなファイルのことです。ワープロで作ったファイルには、プリンターやフォント、書式などの情報が、スクリーンに文字として表わせないコードで詰め込まれています。しかもワープロ・ソフトによってファイル形式が違うので、あるソフトで作ったファイルは他のソフトではそのままでは読み込めません。ソフトの側での変換作業が必要です。ところがテキスト・ファイルは、どんなソフトでも読むことができるので、汎用性があり、サイズもコンパクトですので、保存するのにも便利です。
インターネットでは、異なった機種のコンピューターをケーブルでつないでデーターのやりとりをする訳ですから、データーをテキスト・ファイル形式にするという約束ごとがあります。それで、ホームページはＨＴＭＬ形式のテキスト・ファイルで書くのです。私は MS Windows では WZ を、Linux では XZ を使っていますが、ここでは Linux で ＨＴＭＬ の編集に XZ、画像の編集に GIMP、ブラウザには Mozilla 0.9.3、Web Server は Apache という環境でお話しを進めます。(初級篇では、こうしたことはあまり関係ありませんが…)
ふつうのテキスト・ファイルをＨＴＭＬに変えるマジックは、<>で囲まれた「タグ」と言われるコメントの文字です。
では練習をしましょう。エディターで次の文章を書いてください。
ぼくのホームページにようこそ！ 先週は、ネコの「ミースケ」の話題をとりあげましたが、 今週はイヌの「一太郎」のお話しです。 コメントがありましたら、boku@home.net までお願いします。
これをＨＴＭＬ文書にするには、次のように、文章の最初と終わりにタグを入れればいいのです。
<html> ぼくのホームページにようこそ！ 先週は、ネコの「ミースケ」の話題をとりあげましたが、 今週はイヌの「一太郎」のお話しです。 コメントがありましたら、boku@home.net までお願いします。 </html>
タグは半角文字でなければなりません。タグはペアになっていて<html>ではじまったら</html>で終わらなくてはなりません。（いくつかの例外もあります。それはあとでお話しします。）大文字でも、小文字でも、両方取り混ぜてもかまいませんが、XHTML では小文字で書きます。スペルを間違ったら、タグは無効になります。<hmtl>としたら、当然ですが、働きません。
では、タグをつけた文章を、.htmlという拡張子をつけて保存しましょう。ホームページの目次にあたるファイルは index.html というファイル名にするのが通例ですので、これを index.html という名前で保存します。
XZ のメニューから「再読み込み」を選びます。すると、XZ はＨＴＭＬモードに変わります。次にこれをブラウザで表示します。日本語が出ない？ブラウザの文字コードを設定してください。
＜次のように表示されます＞
| ぼくのホームページにようこそ！先週は、ネコの「ミースケ」の話題をとりあげましたが、今週はイヌの「一太郎」のお話しです。コメントがありましたら、boku@home.net までお願いします。 |
そうです。改行は無視されています。改行は<br>です。改行したいところに<br>と入れれば良いのです。
<html> ぼくのホームページにようこそ！<br> 先週は、ネコの「ミースケ」の話題をとりあげましたが、<br> 今週はイヌの「一太郎」のお話しです。<br> コメントがありましたら、boku@home.net までお願いします。<br> </html>
＜次のように表示されます＞
| ぼくのホームページにようこそ！ 先週は、ネコの「ミースケ」の話題をとりあげましたが、 今週はイヌの「一太郎」のお話しです。 コメントがありましたら、boku@home.net までお願いします。 |
前の行とのあいだに空行をつけたい時は<p>を使います。これも</p>がなくても良いのですが、XHTML では</p>がかならず必要です。できるだけ<p> ..... </p>
のように書きましょう。センタリングは<center> ..... </center>を使います。これは</center>を省略できません。
<html> <center> ぼくのホームページにようこそ！ </center> 先週は、ネコの「ミースケ」の話題をとりあげましたが、<br> 今週はイヌの「一太郎」のお話しです。<br> コメントがありましたら、boku@home.net までお願いします。<br> </html>とすれば最初の行だけがセンタリングされ
<html> <center> ぼくのホームページにようこそ！<br> 先週は、ネコの「ミースケ」の話題をとりあげましたが、<br> 今週はイヌの「一太郎」のお話しです。<br> コメントがありましたら、boku@home.net までお願いします。<br> </center> </html>とすれば全体がセンタリングされます。
それにしても「ぼくのホームページにようこそ！」が小さいと思いませんか。これを大きくしたい時は次のようにします。
<h1>
ぼくのホームページにようこそ！</h1><h2> ぼくのホームページにようこそ！</h2><h3> ぼくのホームページにようこそ！</h3> |
この中では<h1>が一番大きく、<h3>が一番小さくなります。タグを取り替えながらブラウザで確認してみてください。
ブラウザのタイトルに自分のページのタイトルを表示させるには、次のように<head>と<body>に分けて、<head>の中に<title> ..... </title>を書きます。の部分はブラウザの本体には表示されません。
<html> <head> <title> ぼくのページ・一太郎の話題 </title> </head> <body> <center> ぼくのホームページにようこそ！ </center> 先週は、ネコの「ミースケ」の話題をとりあげましたが、<br> 今週はイヌの「一太郎」のお話しです。<br> コメントがありましたら、boku@home.net までお願いします。<br> </body> </html>
画面の背景色は通常は silver です。body タグのなかに bgcolor= を追加すると、この色を変えることができます。色の指定には RBG の値を16進数でする方法がありますが色が定義されている色の名前のなかから選ぶほうが便利です。<body bgcolor="white">としてみましょう。body と bgcolor の間にはスペースが必要です。文字の色は通常は black ですが、text= で自由に変えられます。text="white" bgcolor="white" にしてしまったら、何も見えなくなりますから、ご注意を。ここでは、<body text="white" bgcolor="black">にしておきましょう。text="white" と bgcolor="black" の順序はどちらが先になってもかまいません。両方の間にスペースが必要です。= の後に入るものは、引用符でくくらなくても動きますが、XHTML ではかならず引用符でくくることになっていますので、今からその習慣をつけておくといいでしょう。
＜次のように表示されます＞
| ぼくのホームページにようこそ！ 先週は、ネコの「ミースケ」の話題をとりあげましたが、 今週はイヌの「一太郎」のお話しです。 コメントがありましたら、boku@home.net までお願いします。 |
無事に index.html をブラウザに表示することができました。これだけなら、ＨＴＭＬの威力は何も示されていません。ＨＴＭＬのすごいところは、画面のどこかをクリックしたら、指定したファイルを示してくれるところにあります。画面のある部分を指定するのは <a ... > ..... </a> で表わします。<a ... >は単独で用いられることはなく、<a href=" ... "> <a name=" .... ">などと、href= や name= を伴います。(XHTML では name のかわりに id を使いますが、id に対応していないブラウザのために name を併用することが勧められています。)
次のように、<a href= > </a> を埋めこんでみましょう。
<html> <head> <title> ぼくのホームページ </title> </head> <body> <center> <h1>ぼくのホームページにようこそ！<h1> </center> 先週は、ネコの<a href="neko.html">「ミースケ」</a>話題をとりあげましたが、<br> 今週はイヌの「一太郎」のお話しです。<br>< コメントがありましたら、<a href="mailto:boku@home.net">boku@home.net</a>までお願いします。<br> lt;/body> </html>
＜次のように表示されます＞
|
ぼくのホームページにようこそ！ 先週は、ネコの「ミースケ」の話題をとりあげましたが、今週はイヌの「一太郎」のお話しです。 |
「ミースケ」の部分とメールアドレスの部分が色が変わりましたね。この色は <body link=" ... "> で変えることができます。背景色との関係で、見易い色を指定すればいいのです。色の変わった部分をクリックすれば、そのファイルが表示されます。クリックした瞬間に文字の色が変わりますが、その色を変えたければ alink=" ... " で指定できます。一度そこに行って戻って来ると、リンク元の色が再び変わっています。この色は vlink=" ... " で指定します。
neko.htmlが同じディレクトリーにあれば、画面はneko.htmlを表示します。なければブラウザに「ファイルがありません」と叱られます。メールアドレスをクリックすると、ネットスケープのメールプログラムが動き、宛て先に、boku@home.net が自動的に入ります。href=の後は必ず" ... " でくくらなければなりません。
指定したファイルのある部分にジャンプさせたい時は、<a href="neko.html#picture">ネコの写真</a>などと、#を使ってファイルの中の場所を指定します。neko.htmlのファイルの中に、<a name="picture"></a>というタグを置かなければなりません。name=の方には#を付けてはいけません。<a name="picture"> と </a>の間に何かをはさみ込んでもいいし、何もいれなくてもかまいません。ファイルの先頭に行きたい時は<a href="#top">を使います。IE ではこの場合、ファイルの先頭に<a name="top"></a>を書かなくてもいいのですが、他のブラウザでは<a name="top"></a>を書いておく必要があります。このジャンプ機能は、長いファイルの場合、画面をスクロールさせなくても各項目にすぐに行けるので、便利です。
このように、文書の各部分を相互にリンクしていくことを「ハイパーリンク」といいます。ＨＴＭＬの「Ｈ」や http:// そして href の「ｈ」は「ハイパーリンク」の意味なのです。ある部分をクリックして、そこから、インターネット上の別のところに移りたい時は、<a href="http://www.netscape.com/software/navigator.html"> ..... </a> というふうにします。この場合も " ... " を忘れないように。
|