[PR]〈特集〉内側からの美容法:うるおい美人の秘密を公開!キューサイ

 
あひるたん♪ホーム > 第四回  ( 1. 2. 3. 4. 5. 6. )
 

HTMLの書き方講座 第四回

製作日:1999年4月14日

ゾクゾク!!今日の一言!

二日で三つの会社を回り、ちょー自己満足の編集長です。不思議なことに、控えめで謙虚だと自他ともに認める(...本当か?)私も、面接の回を重ねるごとにだんだん図々しくなってきました。緊張しなくなったし、さぞかし出来るかのごとくもっともらしくホラ吹いたり...。こんな事でちゃんとプーの道から足を洗えるのか?こうご期待!
こんなしょうもない心配をしつつ、第四回、スタートです。めざせ、Web Createrへ、ゴーゴー!!(死語を使うのはやめましょう)

ついに本題 か?

ついにタグの解説に入ります。

とは言うものの、いきなり一つ一つ解説していっても、読む気が失せるだけですから、ここはひとつ、なにか書きたいページを想定して、実際それをホームページ化する事にしましょう。なお、ここで取り上げるHTMLの文法は3.2とします。

編集長の豆知識*** どうしてHTML3.2? ***
HTMLはW3Cによって決められたバージョン(種類)があり、(詳しくはご案内のページ参照)現在は4.0が最新です。しかし、けーたい(i-modeなど)やPDA(ザウルスとか)などではいまだに3.2対応が主流ですし、それでも別に困らないので、今回は3.2に沿って解説していこうと思います。(実は野望として、HTML講座がひと段落したら、すすめ!スタイルシートへの道(タイトルは仮称)というスタイルシート解説ページに入ろうと思っている事も理由に挙げられます>スタイルシートを使うとそんなに細かいタグを覚える必要がないので)
また、それ以前の問題として、『編集長は4.0の内容をよく知らないけど別に困っていない』というのもあります。あれ、実はこれが本当の理由か?

まずは内容

えーと、このページのモットーは『とにかく手打ちを読者にやらせる』でしたから(??ほんとにそんな内容だっけ?)、なるべく単純な例にするかわりに、サンプルをあまり表示しません。どういう感じになるのかは自分で打ち込んで確かめましょう!それでは、まいります。次の文、

このページは工事中です。
もう少し 待っててね。

という文が書かれたホームページを作成してみましょう。
なんてせこいページ!と文句言うのはやめましょう。だって、最初ですから。この企画を読んでいれば、あなたにも、世界のどんなページにも負けないかっこいいホームページが書けるようになるんですよ。ね、いいでしょ。(意味不明)

編集長の豆知識*** 工事中 ***
どの世界にも業界用語というものがあります。当然Webの世界にもあります。そのひとつがこの工事中です。これは、リンク(リンクについては後日解説)は貼ったものの、そのページを準備する暇がなかったときに、『これからこのページを出来る限り早く作るつもりだけど、まだ出来てないよ。ごめんね。』という意味を込めて書き込んでおくものです。もともとインターネットはアメリカ産ですから、当然業界用語も英語なのですが、“Under Construction”を和訳して『工事中』になったようです。ちなみに最近はあまり使われない用語になってしまいました。(だったら載せるな!)

作業開始!

まずは、Macの人はSimpleTextを、Windowsの人はメモ帳を開きましょう。いつもの通り、真っ白な画面が出てきましたね。ここにタグを書き込んでいけばいいんです。それでは行きましょう。

まず、<html>と書き込みましょう。タグは大文字小文字を区別しませんので、HTMLでもHtmlでもhTmLでも構いませんが、読み易さと手軽さゆえにすべて小文字で統一することをお奨めします。このhtmlとは、ブラウザ君に対して『これはホームページなんだよ』って優しく教えてあげるおまじないなので、ちゃんと最初に書きましょう。

そして、改行します。改行の情報もブラウザ君は無視してしまうので、本当はどうでも良いのですが、タグごとに改行した方が、後で手直しするときに非常に楽です。というか、改行しないで作り上げたホームページのデータ(これをソースといいます)は、作者ですら理解不能なカオスなソースになって、ページを更新する気がへにょへにょとなくなっていきます。そうならないためにも、こまめな改行を心がけましょう。

次に<body>と打ち込みます。これはまさにここからホームページの本体だよという宣言です。実は今までの<html>や<body>などのタグは、書かなくってもブラウザはおりこうさんなので、ちゃんと理解して表示してくれることがほとんどです。しかし、ばかよけのために書く習慣を付けましょう。

編集長の豆知識*** ばかよけ(foolproof) ***
突然すごい言葉が出てきましたが、これは立派な情報処理用語で、うっかりミスや,ちょっとした勘違いで起きるミスに対しての防御を指します。日本語の「ばかよけ」が英語になって,フールプルーフになったようです。本来はオペレータのうっかりミスなどでデータが簡単に消えてしまわないように対策することを言うのですが、ここではちょっと意味が違います。
そもそもコンピュータは人間の指示に非常に忠実に従います。ですから、あなたが出した間違った指令にもそれに忠実に実行しようとします。その結果、エラーになるわけです。あなたもわたしも「おばかさん」ですから、コンピュータを悩ませないように、気を付けて書きましょうね。

さて、本体の中身ですが、改行の後、 このページは工事中です。<br>もう少し 待っててね。 と打ち込みます。<br>というのは、『ここで改行しましょう』という意味です。そして、「もう少し」と「待っててね。」の間のスペースはいくつ入れても構いませんが、何個入れようがブラウザ君は1個しか入れてくれません。ですから、スペースは1個という習慣を付けた方がいいかもしれません。そして、最後に</body>と打ち込むことによって、本体部分が完了です。

編集長の豆知識*** タグは2人で一つ?! ***
ほとんどのタグは二つを一セットで使います。世の中に男女がいるのと同じ事です(?)。最初に<●●●>と書いたら、最後には</●●●>と書いてそのタグはやっと完了します。そして、そのひと組のタグに挟まれたものが、そのタグの内容に従うのです。いま<body>というタグを打ちましたが、それは</body>との間が本体だよーと言うことを意味しているのです。ちなみに一組ではなく、単独で使うものに<br>や<hr>などがあります。
さらに改行した後、</html>と打ち込んで、最初のホームページ作りは完了です。ちなみにソースは以下のようになっているはずです。

<html>
<body>
このページは工事中です。<br>もう少し 待っててね。
</body>
</html>

見てみよう!

さて、こうしてホームページ処女作が出来上がりました。でも、「よっしゃー見まくってやるぜー!!」という気持ちを抑えて(それほどのこともないか)、まずは保存しましょう。保存場所は何処でも構いません。ファイル名は、●●●.htmlとしましょう。●●●の所は、半角英数字なら何でも構いませんが、i65481339403.htmlとかmufufu.htmlなどの内容が分からないファイル名はあまり奨められません。後でそのファイルを見たとき、内容が分かるようなファイル名にしましょう。これは結構大事です。

編集長の豆知識*** 拡張子 ***
Windowsユーザーでは当たり前、Macユーザーは?、なのが拡張子です。そのファイルがどういう種類かを示すしるしと覚えておきましょう。で、その拡張子ですが、Windowsでは英字で3文字と決められています。ですが、私はあえてhtmlの4文字をお奨めします。
いやー別にマイクロソフトが嫌いだからとかそういう理由ではないんですよ。インターネットのサーバにはUNIXというOSが多く使われていて、UNIXの拡張子は4文字だからなのです。ただし、状況によって変わりますので、自分がホームページを出そうとしている所(プロバイダ等)のご案内のページをチェックしてみましょう。
保存が出来たら、そのファイルをブラウザ(IEやNN)のアイコンにドラッグしてみましょう。どうです?ちゃんと表示されましたか?ダメな場合、もう一度ソースを見直してみましょう。間違いはないですか?よくやる間違いでは"<"や">"が"("や")"になっているなどが挙げられます。気を付けましょうね。

さて、次回はホームページの華、リンクの張り方について解説しようと思います。それでは、よりよりホームページ生活を目指して、グッドラック!!!

 

トップに戻る

トップに戻る

第五回へ行く

第五回へ行く

あひるたん♪への励まし、愛情、記事のメールは こちら へどうぞ。

 


[PR]超新世代相性占いが[無料!]:カンタン計算式で占うアノ人との相性は?