====================================================================== ● ● ●●●●● ● ● ● ☆HTML入門講座☆ ● ● ● ●● ●● ● 第3号 98/9/14 ● ● ● ● ●● ● ● ●●●●● ● ● ● ● ● ● ● ● ● ● ● 発行人: ● ● ● ● ● ● 池田蛇足 dasoku Ikeda ● ● ● ● ● ●●●●● =====================================================発行部数 2334部== 第2講:マークアップ言語について HTMLが大体どんなモノかということは、もう前号でお分かりいただけまし ね?今回は、じゃあそのHTMLを実際に記述するための、最低限の知識を掲 載しましょう。題して、「マークアップ言語について」! HTMLは略語です。Hyper Text Markup Language の頭文字をとってHTML という名で呼んでいます。ここで注目したいのは Markup Language (マークア ップ言語)という名がついていることです。 このメールマガジンは、テキストデータで送信されています。テキストデータ は文字のみを情報とするデータです。ですから、たとえば文字を強調したり、 色を変えたり、下線を引いたりすることはできません。しかし、世の中のホー ムページの多くでは、文字の色やフォントが様々に表示されています。HTM Lはテキストデータのファイルでした。じゃ、文字の色や大きさやフォントの 種類を指定できないテキストデータであるHTMLが、どうやって文字の色を 変えたりするのでしょうか? HTMLはWEBページの設計図だというお話は前回しました。この設計図に は、「ここの文字を赤くしろ」とか、「ここは下線を引け」とか、「ここを強 調しろ」といった命令が書かれています。その命令は、HTMLの中の、タグ と呼ばれるモノの中に書かれているのです。 「タグ」。HTMLはタグに始まりタグに終わると言っても過言ではありませ ん。タグとは、HTMLにおける、 < から > までの部分のことです。た とえば【例1】をご覧ください。 【例1:タグ】--------------------------------------------------------
HTMLは皆さんの夢をインターネット上に実現させるです。とても手軽で分かりやすいマークアップ言語 だから、誰でもすぐに習得できちゃいます 。みんな頑張って勉強しましょうね。
---------------------------------------------------------------------- *なお、このソースコードを前号の要領でエディタにコピー&ペーストし、拡 張子 html で保存してブラウザで見てみると、より分かりやすいと思います。 だのだの、何だかよく分からない記号がたくさん書いてありま すね。すべて <----->という形式であることに注目してください。この<----> の部分が、HTMLの「タグ」です。たとえば【例1】のソースコードは、タ グを取り除けばたったこれだけの文章に過ぎません。 「Sample Tag」 「HTMLは皆さんの夢をインターネット上に実現させる設計図です。とても 手軽で分かりやすいマークアップ言語だから、誰でもすぐに習得できちゃいま す。みんな頑張って勉強しましょうね。」 【例1】をブラウザでご覧になった方はよくお分かりいただけると思いますが、 ブラウザでは赤い文字や点滅文字(Netscape Navigatorのみ)、太字の文字と して表示されていた文章は、単なる文章のテキストと、それから、変てこりん な「タグ」という奴だけだったのです。つまりテキストに「タグ」を挿入する ことで、単なるテキストデータを装飾し、整文し、レイアウトすることができ るというわけです。 マークアップ言語とは、こういう、テキストに「タグ」を挿入して表示方法を 規定するような言語のことです。ここで本当は、HTMLの基となったSGM Lについても言及すべきなのですが、私自身SGMLについて詳しくないとい うこともあるし、またSGMLを知らずともHTMLを習得できると思います ので割愛します。 たとえば「俺は池田蛇足だ。文句あるか!」という文に、タグを挿入し、文字 を強調したい場合、たとえば「池田蛇足」を強調したいならば次のように記述 します。 【例2 タグの例】----------------------------------------------------- 俺は池田蛇足だ。文句あるか! ---------------------------------------------------------------------- 上のコードは、とに挟まれた文字である「池田蛇足」を強 調表示せよ、という命令なのです。この命令を受けて、ブラウザは「池田蛇足」 を強調して表示してみせてくれるわけです。 なお、タグの詳細については次々号で。ここまでの内容をまとめます。 *----------------------------------------------------------------------* |HTMLは、マークアップ言語。 | |<---->はHTMLのタグ。これでテキストをマークアップ!! | *----------------------------------------------------------------------* さてさて、ここからは読者の方の質問にお応えする形になりますが、ちょっと 脇道にそれてみましょう。読者の方から意外に多い質問として、こんなものが あります。創刊号のFAQで書いたことと一部重複しますが…。 「FrontPageでホームページを作りたい。HTMLの知識は必要か?」 「Wordで簡単にホームページを作れた。基礎はいいから応用を」 「FrontPage Expressを使いたい。HTMLの知識よりこれの操作法を」 質問というよりも要望ですが、こういうご意見を頂くことが大変に多いです。 これを説明するためには「WYSIWYG方式」ということを説明しなきゃい けません。 WYSIWYG方式…。何だその長ったらしい名前は!とお思いでしょうが、 中身は簡単。What You See Is What You Getの略です。この What は先行詞を 含む関係代名詞ですね(^O^)。訳すと「(あなたが)見ているものが、(あな たの)得られるものだ」ということになります。何だかことわざめいています が、意味は簡単です。 たとえば MicroSoft Word98 やら、一太郎8やら、世の中には様々なワープロ ソフトがあります。Windows に標準装備されているワードパッドだって、ま、 ワープロですね。これらを扱ったことのある人は多いでしょう。これらのワー プロソフトは、たとえば「もの文字を太くしよう」と思ったら、所定の操作を すれば、見ている画面の文字が太く表示され、かつ印字された文字も太くなっ ています。編集中に画面上で「見ているもの」と、出力として「得るもの」が ほぼ一致している、つまりWYSIWYGの編集方式だというわけです。 それに対し、エディタで、テキストベースでHTMLを編集する作業は、エデ ィタの画面上で見ているもの、つまりタグを含むHTMLソースコードと、実 際にWEBブラウザで出力されるもの、得られるものは、全く異なります。つ まり非WYSIWYG方式、What you see is not what you get の方式である というわけですね。 「WYSIWYG方式の方が便利じゃん」とおっしゃる方もいらっしゃいます。 実際、実は僕も、表の作成などではWYSIWYG方式のHTMLエディタを 使用することはあります。便利で、分かりやすい。にも関わらず、WYSIW YG方式のエディタをオススメしないのには理由があります。 理由1: WYSIWYG方式のエディタ(FrontpageやWordなど)では、必ずしも正しい HTMLが生成されない。…実にいい加減な、よく分からないHTMLを生成す るWYSIWYGエディタが案外多いです。 理由2: 細部の設定ができない。…細かいレイアウトなどに関して、WYSIWYGエ ディタには制約が多くて自由にできないことがあります。 理由3: HTMLを勉強できない。…WYSIWYG方式は、HTMLソースをブラッ クボックス化してしまいます。HTMLを知らずにホームページを簡単に作れ る反面、他の優れたページからHTMLの技術を盗むこともできないわけです。 理由4: 最新の機能を使うことができない。…HTMLは進化し続けています。特にパ ッケージソフトは、どうしても開発期間+製造期間+流通期間などのタイムラ グから、最新の仕様についていけません。CSSやスクリプトを挿入しようと いう時にも、WYSIWYG方式では思うようにできないことが多いです。 まとめましょう。 *----------------------------------------------------------------------* |やっぱり自分でHTMLを書こうよ! | *----------------------------------------------------------------------* ってことね。 今回から宿題を出します。今日の宿題は、これです。 ★次のHTMLソースをエディタにコピーし、との間のテキストを自由に変更してブラウザに表示させ、遊びなさい。また、 テキストを変更したらお好きな場所をとで囲んで強調表示さ せてみなさい。 注意事項!! ・タグは半角文字で記入すること ・後でまた詳述しますが、HTMLでは空白・改行は原則的に無視されます。 したがって、テキストの改行位置がずれても問題ありません。 ・YUJU HTML Editor1.0 をお使いの方は、まずはコピー&ペーストして PREVIW ボタンを押し、拡張子(html)を付して保存してください。ブラウザが起動 して、HTMLにしたがって画面を生成します。ここで、ブラウザを最小化 してタスクバーに入れてしまってください。その上で、YUJU Editor の編集 画面上でいろいろテキストを変更して PREVIEW を押してください。変更が 反映された画面を表示したHTMLブラウザが元の大きさに戻るはずです。 これを何度か繰り返して遊びましょう。 次に、STRONGタグを挿入してみます。まずは強調したい文字列を範囲指定し て(選択して)下さい。文字が反転表示されましたね?そこで「強調」ボタ ンをマウスでクリック。おおっ!ワンタッチでSTRONGタグがっ!! PREVIW を押して、本当に強調表示されているかを確認してみてください。 -----------------------------------------------------------------------ロラン・バルトという、フランスの構造主義者がいる。バルトを「構造主義 者」と呼んでしまうのにはかなりの抵抗があり、ジョナサン・カラーによれ ば、構造主義者であると同時に文学史家、神話分析家、批評家、論争家、記 号論者であるということになろうし、或る区別に従うならポスト構造主義に 属する思索家でもあろう。ともかくそのバルトは、「作者の死」を宣言し、 「作品からテクストへ」というテーゼを高らかに謳い上げた。その著『物語 の構造分析』における、バルトによる「テクスト」と「作品」の相違に関す る言及を見てみよう。
---------------------------------------------------------------------- ★お詫びと訂正★ 前号の【例1】のソースコードに一部不適切な箇所がありました。たとえば、 当方の不注意ですが、HEADタグを閉め忘れています。外にも、改善すべき箇所 が何箇所かありました。【例1】はあくまでもHTMLの雰囲気を知ることを目的 とするってことで勘弁してください。m(__)m 今後の記事には細心の注意を払うことをお約束します。指摘して下さった読者 の方がいらっしゃって助かりました。今後も、何かありましたらメールを下さ い。温かく見守ってね(^O^) ★編集後記★ ・夏風邪治らぬまま、9月15・16日、鬼怒川温泉へ行きます。仲間とゆっ くりしてきます。当然、その期間はマガジンは発行できません。不定期で申 し訳ないのですが、末永くお付き合いください。 ・読者の方から、今後の簡単な見通しを教えてくれ、というご要望を頂きまし た。お答えします。未定です(^O^)。いや、その、決していい加減なのでは なく、読者各位さまの反応を見ながら進めてみるからです。ですから、早く 進んでほしい方はその旨、もっとゆっくりしてほしい方も、ともかくメール を下さい。(このマガジンにリプライしてね)。 ・…とは言っても、だいたいどんな順序でやるのかは考えています。次号では HTMLファイルの構造、構造タグ、ドクタイプ宣言などを説明し、以後し ばらくは論理タグ、物理タグ、水平線を引きましょう、なんてことをやって 行きます。その後、ハイパーテキストの概念を説明し、ハイパーリンクをや りましょう。後は画像だの何だのオブジェクト系を処理していきます。 ・なんか、読者が破竹の勢いで増加しています。吃驚です。いや、その、はじ めましての方もいらっしゃいますね。はは。未熟者ですがよろしくm(__)m これからも頑張って発行しちゃうぞ! ・ではまた!感想メール待ってます。(^O^)/~ ---------------------------------------------------------------------- ●ご意見・御感想をお待ちしています! 「こんなコーナー作って!」とか「これが知りたい」とか、HTMLに関する 質問など、何でも、ともかくお便りください。このマガジンに返信すれば、発 行人のところに届くシステムになっています。いやぁ、「まぐまぐ」って偉い っすね。 ●YUJU HTML Editor1.0 HTMLをテキストベースで編集することに特化したエディタです。「シェア ウェア(500円)」ですが、当マガジン読者には無料で配布します。是非、 ダウンロードしてお使い下さい。なお、無料でお使いになる場合は、下記アド レスまで一言、お便りくださいね。ちなみに、拙作のソフトです。性能は…そ んなにすんごいモノじゃありませんので、期待しないように (^O^) あくまで 教育目的の仮バージョンってことで。実用版 2.0 はそのうちリリース。 ★なお、このソフトは Windows95 98 NT4.0以上の環境でお使いになれます。 Download URL http://www.vector.co.jp/vpack/browse/software/win95/net/sn073890.html Mailto dasoku@geocities.co.jp ★ソフトへのご要望、ありがとうございました。未熟なソフトですみません。 バージョンアップに際して考慮します。ありがとうございました。 ●鈍行での旅行を愛する人々へ メールマガジン「時刻表補完計画」は、「青春18きっぷ」などの格安切符を 利用し、国内を、主として鉄道などの公共交通手段を使って旅行するために必 要な情報の収集、交換、公開を目的として運営されているマガジンです。投稿 型なので、未知の情報満載。購読登録・解除はこちらでどうぞ。 ★『時刻表補完計画』ホームページ http://www.geocities.co.jp/SilkRoad/7818 http://hp.vector.co.jp/authors/VA014079/seishun18/ ●ではまた!次号は9月中旬発行予定です。 =================================================================== このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用し て発行しています。( http://www.mag2.com/ ) =================================================================== ---------------------------------------------------------------------- HTML入門講座 第3号 発行人:池田蛇足 dasoku@geocities.co.jp 9月14日発行 発行部数 2334部