====================================================================== ● ● ●●●●● ● ● ● ☆ＨＴＭＬ入門講座☆ ● ● ● ●● ●● ● 第２号 98/9/12 ● ● ● ● ●● ● ● ●●●●● ● ● ● ● ● ● ● ● ● ● ● 発行人： ● ● ● ● ● ● 池田蛇足 dasoku Ikeda ● ● ● ● ● ●●●●● =====================================================発行部数 2248部== 第１講：ＨＴＭＬ？？ とっても奇麗なホームページが、インターネット上にはいくつも置いてありま す。画像が動いたり、音楽が流れたり、ゲームができたりするページまで出て きました。きっとあなたにもお気に入りのページがあるはずです。その全てが 基本的にはＨＴＭＬで記述されているのです。 ＨＴＭＬ、ＨＴＭＬって何遍も繰り返していますが、実物を見てもらった方が 理解が早そうですね。ＨＴＭＬっていうのは、こういうモノです。 --【例１：ＨＴＭＬ】-------------------------------------------------- ★青春１８きっぷ★
時刻表補完計画

Welcome to our site!
あなたは 人目のここを訪れ る旅人です。

「青春18きっぷ」を使って国内を鉄道旅行する人々のための情報交換の場
それがメールマガジン「時刻表補完計画」です

--【例１：ＨＴＭＬ】ここまで------------------------------------------ ？？？…何が何やら訳が分からないという人もいらっしゃるでしょう。これが、 この講座で勉強していくＨＴＭＬというものです。最終的には、こんなやつを スイスイ、何も見ずに思い通りに書けるようになっていただきたいと思ってい ます。 しかし、こんな訳の分からない文字の羅列が、あの美しいホームページを作っ ているとは到底信じられないかも知れませんね。信じられない人は、ちょっと 証拠を見てみましょう。まず、あなたのお好きなページへ行ってください。ブ ラウザを起ち上げて、ＵＲＬを記入すればＯＫです。 そのページを記述しているＨＴＭＬを覗いてみましょう。そのページを表示し たままで、ブラウザの画面上でマウスの右ボタンをクリックして下さい。そこ で、出てきたメニューから「ソースを表示」というのを選択してご覧なさい。 おそらく、画像が見事に動き回り、美しい音楽を奏で、奇麗な背景で多彩なコ ンテンツを誇るそのビジュアルなページの裏に、作者の地道な努力の成果であ る、複雑なＨＴＭＬが隠されているはずです。 この訳の分からない文字列＝ＨＴＭＬが、どうしてあんな美しい画面になるの か。これは簡単です。ＨＴＭＬは、一種のコンピュータ用の言語です。これが 記述されたファイル、つまりは【例１】で見たような、単なる文字列のファイ ル（テキスト形式のファイルです）を、ＷＥＢブラウザが解釈して、あのよう な美しい画面を表示しているのです。 そもそもＨＴＭＬファイルは単なるテキスト形式のファイルです。これを、 「サーバー」と呼ばれる場所に置いておきます。だから「サーバー」は倉庫で す。たいていはこの倉庫は巨大なので、中で小さく区分けしています。 みなさんが「ホームページのアドレス」と呼んでいる、多くの場合 http で始 まる文字列をＵＲＬと呼びますが、このＵＲＬは、倉庫に区分けられた一室の 住所に当たります。 たとえば http://www.htmlmag.com/~yuju3/ というＵＲＬは、www.htmlmag.com という倉庫にある、~yuju3 という個室の住所です。このＵＲＬをブラウザに 入力すると、ブラウザは倉庫に問い合わせます。「おたくに、~yuju3 という 個室はありますか？」という具合です。「サーバー」はそれを受け、もしそう いう個室があったら、そこにある「表紙」となるべきＨＴＭＬファイルをブラ ウザに送ってあげます。「ええ、~yuju3 ならありますよ。こういう奴が住ん でいます」といった具合です。 ブラウザは、送られてきたＨＴＭＬを翻訳し始めます。なにしろ、そのまま人 間が読んでも面白くも何ともないですから。ＨＴＭＬでは、ここの文字を太く しろとか、ここは赤い背景だとか、ここにマスコットの絵を入れろとか、ＢＧ Ｍにはこれを流せとか、いろいろな命令が書かれています。ＷＥＢブラウザは、 健気にＨＴＭＬを翻訳し、それを、あの奇麗な画面として表示するのです。 まとめると、 ○サーバー＝倉庫 ○ＵＲＬ＝住所 ○ブラウザ＝翻訳機 という具合になるのでしょうか。 では次号は、早速、そのＨＴＭＬファイルの作り方を勉強しましょう。今日は もちろん、まだオリジナルのものは作れませんから、僕が作った奴を利用して みて下さい。 まずは（Windowsの場合は）メモ帳、またはその他テキストを編集するためのエ ディタを用意しましょう。SimpleText でも Em Editor でも、もちろん YUJU でも構いません。そいつを起ち上げて（起動して）ください。 次に、その画面に、次のＨＴＭＬソースをコピー（複写）し、それをテキストエ ディタにペースト（貼り付け）して下さい。なお、以下からコピーし て下さいね。 ---【例２：ＨＴＭＬファイルの作り方】----------------------------------- ページの名前

あなたのお名前

ブラウザは、送られてきたＨＴＭＬを翻訳し始めます。なにしろ、そのまま人 間が読んでも面白くも何ともないですから。ＨＴＭＬでは、ここの文字を太く しろとか、ここは赤い背景だとか、ここにマスコ ットの絵を入れろとか、ＢＧＭにはこれを流せとか、いろいろな命令が書かれて います。ＷＥＢブラウザは、健気にＨＴＭＬを翻訳し、それを、あの奇麗な画面 として表示するのです。

まとめると、 という具合になるのでしょうか。 ------------------------------------------------------------------------- コピー＆ペーストは、今後何度も多用する基本的な技術ですから、必ず習得して おきましょう。コピーしたい先頭の文字にマウス・カーソルを合わせ、そこでマ ウスの左ボタンを押します。クリックではありません。押したままにして下さい。 そして、それを押したまま、離さずに、コピーしたい部分の最後尾までカーソル を移動させます。そこで離してください。コピーしたい文字列は、今、「選択さ れた」状態です。（反転表示されているのではないでしょうか？）その「選択さ れた」部分の上で、マウスの右ボタンをクリックします。すると、多くのエディ タでは様々なメニューが現れるはずです。メモ帳ならば、基本的な４機能（貼り 付け・切り取り・削除・複写）、YUJU HTML Editor1.0 ならばそれに加えてパラ グラフ化・エスケープタグ化・コメント化などのメニューがありますね。そこか ら「複写」または「コピー」などを選んでください。 この時点で、「選択された」文字列は、コンピュータの脳みその中に記憶されま した。これをコピー（複写）と言います。さらに、その記憶されたデータを、他 の部分に貼り付けたい時は、コピーし終えた後、貼り付けたい場所でマウスの右 ボタンをクリックし、現れるメニューから「貼り付け」または「ペースト」を選 択して下さい。簡単に、複写された内容が貼り付けられます。この作業がペース トです。コピー（複写）とペースト（貼り付け）の、二つの作業を総称してコピ ー＆ペースト（Ｃ＆Ｐと表記される場合もあります）と呼んでいます。 さて、エディタに貼り付ける作業は終わりましたか？終わったら、これをＨＴＭ Ｌ形式で保存します。エディタの機能にしたがって、適当なファイル名でこれを 保存してください。ただし、拡張子には .html （ピリオドを忘れないで）付け てください。拡張子とは、ファイルのタイプを識別するためにファイル名の末尾 に付す英数字３〜数文字の文字のことで、ピリオドの後に書かれます。たとえば ファイル名は magazine.html のような形で保存してください。 ★YUJU HTML Editor1.0 をお使いの方は、「Preview」ボタンを押してください。 名前を付けて保存するよう指示が出るはずです。それにしたがって、拡張子を付 して保存すればＯＫです。 これでＨＴＭＬファイルができあがりました。これを開いてみましょう。拡張子 htmlと関連付けられたブラウザがある場合は、ＨＴＭＬファイルのアイコンをダ ブル・クリッすればＯＫです。拡張子という概念のないＯＳをお使いの方は、ブ ラウザを起ち上げて、そこから開いて下さい。さて、どうでしょうか。あの、変 てこな文字列が、何だかホームページっぽいものになって映し出されたはずです。 ＨＴＭＬが、扱いやすいテキスト形式のファイル（アスキーファイル）で、たと えば VisuaBasic や Pascal のようなプログラム言語と違い、コンパイルなどの 作業も不要だということがご理解いただけたと思います。 では、今日の内容をまとめましょう。 *----------------------------------------------------------------------* |ＨＴＭＬはＷＥＢページの設計図！ | |テキストエディタでＨＴＭＬを記述し、拡張子.html(.htm)を付けて保存すれ | |ばそれだけで完成しちゃう。 | |ブラウザは、僕らのＨＴＭＬを翻訳してくれる翻訳機！ | *----------------------------------------------------------------------* ★編集後記★ ・YUJU HTML Editor1.0 を使いたいというメールが多数届きました。あんまり 多いので、お一人お一人にメッセージをお返しすることはできないかも知れ ませんが、どうぞ御自由にお使いください。ただし、YUJU は、ＨＴＭＬの 教育目的に作成したエディタですので、この講座でＨＴＭＬを習得された後 には、さらに高性能の（でもちょっと高いかな？）エディタをお使いになる ことをオススメします。 言い訳ですが、教育目的ということで、たとえば文書に変更がある状態で閉 じようとしても警告を出さないなどの、あまり実用に向かない仕様になって います。実用版は YUJU HTML Editor2.0 として公開しようと考えています。 YUJU 1.0 は、しかしタグ挿入エディタとしては十分な機能を誇りますから、 たとえば「全てコピー」ボタンをうまく利用して、ＨＴＭＬに特化しない、 他のメイン・エディタのサブ・エディタとしてお使いになるとよろしいかと 思います。 ・YUJU HTML Editor1.0は、残念ながら Windows環境以外ではお使いいただけま せん。これは、配布を通知する時にはっきりと告知すべきでした。ごめんな さい。僕は実は反帝国主義者でして、自分のパソコンにＵＮＩＸを共存させ ていたり（Free BSD）、VisualBasic でなくあえて Delphi を買ったりと無 駄な抵抗をしとります。ですから、Mac な人を見捨てるつもりはありません。 一種の敬意と羨望の眼差しで眺めております。（iMacがほしい）今後の記事 では Windows環境以外の方にも配慮し、ソフトウェアの紹介にあたっては、 少なくとも for Win と for Mac の両者を掲載することとします。 ・多かった質問が二つ。直接、メールでお答えしたいのですが時間が無かったの で誌面でお答えします。 質問１：「YUJU HTML Editor1.0をダウンロードしたが開けない。どのアプリ で開くのかと聞いてくる。どうすればいいか？」 解答：YUJU HTML Editor1.0 は、Vectorさんに置いて貰っていますが、基本的 に Vector や窓の杜などのダウンロードサイトに置かれているオンライン ソフトは『圧縮』されています。圧縮されたファイル（書庫ファイル）は 『解凍』しないと使えません。最もメジャーな解凍用のフリーソフト Lhasa などをダウンロードして使用し、解凍してから使ってください。な お、Lhasa も Vector （ http://www.vector.co.jp ）にあります。検索 してダウンロードしてください。 質問２：「メールクライアントって何ですか？」 「等幅フォントにしたいが設定がわからない」 解答：メールクライアントとは、一般に「メーラー」あるいは「メールソフト」 と呼ばれている、電子メールの送受信に使われるソフトです。みなさん からのメールを見ると、次のようなメールクライアントをお使いの方が 多いようです。 ・Microsoft Outlook Express ・Windows Eudora Pro ・Macintosh Eudora Pro ・Becky! Internet Mail しかし圧倒的多数は Outlook Express！うーん。おそるべし帝国パワー。 ちなみに、僕は Becky! のファンです。さて、等幅フォントに設定する方 法ですが、実はメーラーによって違います。しかし、普通は「設定」とか 「表示」とか「オプション」とかいうメニューがあるはずです。そこで表 示フォントを選択する時に、フォント名に「Ｐ」がついていないものを選 ぶといいでしょう。「ＭＳＰゴシック」ではなく「ＭＳゴシック」などを 選べば、等幅フォントになります。 なお、Outlook Express には色々問題があります。現に、僕がＨＴＭＬメ ールを読むことができる環境か、できない環境かを知らないのに、僕のと ころにＨＴＭＬメールを送付される方が何人かいらっしゃいました。ま、 Becky! ちゃんはＨＴＭＬメールもちゃんと表示してくれるからいいんで すけど…。まだまだＨＴＭＬメールは、ネットの世界ではデフォルトとは 言えないと思います。設定を変えないとＨＴＭＬメールを出してしまうあ たり、帝国の身勝手さが溢れているように感じるのは僕だけでしょうか。 ・ご安心ください。編集後記が長いのは今回だけです(^O^) ・なお、しばらくは短いスパンで発行します。これは、ある程度ＨＴＭＬの基本を 理解していらっしゃる読者さんが多い様子だからです。もちろん素人中の素人さ んも見捨てたりしません。ですが、ちょっと急いで勉強してもらうことになりま す。頑張ってね。 ・次号は「マークアップ言語について」 ・夏風邪が大流行中。僕は喉が痛いです。読者各位様もお体には十分お気を付けく ださい。 -------------------------------------------------------------------------- ●ご意見・御感想をお待ちしています！ 「こんなコーナー作って！」とか「これが知りたい」とか、ＨＴＭＬに関する質問 など、何でも、ともかくお便りください。このマガジンに返信すれば、発行人のと ころに届くシステムになっています。いやぁ、「まぐまぐ」って偉いっすね。 ●YUJU HTML Editor1.0 ＨＴＭＬをテキストベースで編集することに特化したエディタです。「シェアウェ ア（５００円）」ですが、当マガジン読者には無料で配布します。是非、ダウンロ ードしてお使い下さい。なお、無料でお使いになる場合は、下記アドレスまで一言、 お便りくださいね。ちなみに、拙作のソフトです。性能は…そんなにすんごいモノ じゃありませんので、期待しないように (^O^) ★なお、このソフトは Windows95 98 NT4.0以上の環境でお使いになれます。 Download URL http://www.vector.co.jp/vpack/browse/software/win95/net/sn073890.html Mailto dasoku@geocities.co.jp ●ではまた！次号は９月中旬発行予定です。 ---------------------------------------------------------------------- ＨＴＭＬ入門講座 第二号 発行人：池田蛇足 dasoku@geocities.co.jp 9月12日発行 発行部数 2248部