ＨＴＭＬ入門講座：広告掲載例

======================================================================

●      ●  ●●●●●  ●      ●  ●           ☆ＨＴＭＬ入門講座☆
●      ●      ●      ●●  ●●  ●           第４号       98/9/19
●      ●      ●      ● ●● ●  ●
●●●●●      ●      ●  ●  ●  ●
●      ●      ●      ●      ●  ●           発行人：
●      ●      ●      ●      ●  ●           池田蛇足 dasoku Ikeda
●      ●      ●      ●      ●  ●●●●●    

=====================================================発行部数 2435部==
[PR]------------------------------------------------------------------

  ★あなたの夢を実現します！！★
    ・無料ディスクスペースの開放
    ・アクセスカウンタＣＧＩサンプルの無料配布
    ・掲示板カスタマイズサービス
             >>>>>>ともかくこちらへ http://www.htmlmagazine.co.jp<<<<<

----------------------------------------------------------------------

第３講：ＨＴＭＬの基本構造

お待たせしました。今回からついにＨＴＭＬを実際に記述していきます。まず
はそのために、ＨＴＭＬの基本的な構造から説明しましょう。

さてみなさん。みなさんは小さい頃、ドアを開けてそのまま閉めずに部屋に入
って「開けたら閉めなさい！」と怒られたことはありませんか？瓶の蓋を開け
たら、普通はしっかりと閉めますね。開けたら閉める。これは実は、ＨＴＭＬ
のタグにも当てはまります。

タグというものは、前回説明しましたが、のような形をしたもので
す。テキストをこれでマークアップしていくわけですが、このタグも、開けた
ら閉めなくてはならないのです。前回の例をもう一度みてみましょう。

【例１：STRONG】------------------------------------------------------

俺は<STRONG>池田蛇足</STRONG>だ。文句あるか！

----------------------------------------------------------------------

これで、「池田蛇足」という文字列は強調表示されるはずですね。<STRONG>と
</STRONG>にはさまれた部分を「強調表示せよ」という命令を意味するわけで
す。ＨＴＭＬでは、（全てではありませんが）タグは開始タグ(<STRONG>)と終
了タグ(</STRONG>)に要素（コンテンツ）をはさみ、そのコンテンツに対して
何らかの指定、命令をする、という形式になっています。

○開始タグ…<Tag name>
○終了タグ…</Tag name>

不等号の後に、終了タグには斜線が入ることに注意しましょう。たとえば、は
さまれる要素が他の文献の引用であることを示すタグに<CITE>がありますが、
このタグで下の文の「芸術は…模倣する」の部分をマークアップするとどうな
りますか？

【例２：問題＝開始タグ＆終了タグ】------------------------------------

芸術は文明を模倣する。オスカーワイルドの言葉である。

----------------------------------------------------------------------

まずは「芸術…」の前に開始タグを挿入します。そして、その要素の最後、つ
まり「模倣する」の後に終了タグを挿入します。答えは、次のようになるでし
ょう。

【例３：解答＝開始タグ＆終了タグ】------------------------------------

<CITE>芸術は文明を模倣する。</CITE>オスカーワイルドの言葉である。

----------------------------------------------------------------------
★YUJU HTML Editor1.0 をお使いの方は、まず文字列を記入し、タグを適用さ
せたい部分を選択して、「引用」ボタンを押して下さい。ワンタッチでタグが
挿入されます。

さてさて、ではＨＴＭＬの基本的な構造について説明していきましょう。ＨＴ
ＭＬファイルは、メモ帳などのテキストエディタで簡単に編集・記述できるこ
とからも分かるように、単なるテキストファイルですね。ですから、そのファ
イルがＨＴＭＬであることをはっきりと示すために、「これはＨＴＭＬで書か
れてるぜ！！」という宣言をしておく必要があります。

エディタを起動させ、次の文字列をコピー＆ペースト（または書き写し）して
ください。

【例４：DOCTYPE宣言】-------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

----------------------------------------------------------------------

これは、「このＨＴＭＬファイルは、ＨＴＭＬのバージョン4.0に従って記述
されていますよ」という、ドキュメント（文書）のタイプを宣言するもので、
DOCTYPE（ドクタイプ）宣言と呼ばれるモノです。まだＨＴＭＬのバージョン
について詳述していないので、今は呪文かマジナイと思って、ＨＴＭＬの最初
に書いておいてください。次号以降で、ＨＴＭＬのバージョンについて説明し
ます。

次に、その下に、<HTML>の開始、終了タグを記述しましょう。

【例５：<HTML>】------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>


</HTML>
-----------------------------------------------------------------------

これにより、<HTML>と</HTML>の間にあるテキストが「ＨＴＭＬでかかれている」
ことが示されました。この<HTML>と</HTML>は、必ず記述しなくてはならないも
のです。

さて、この内部にＨＴＭＬを記述していくわけですが、ＨＴＭＬは殆どの場合、
大きく分けて二つのフィールドから成り立っています。ヘッダ部とボディー部
の二つです。

ヘッダ部は、文章全体の情報を記入するフィールドです。たとえば、「このペ
ージのタイトルはこうだ」とか、「このページは日本語で書かれているぞ」と
か、そういう情報が書かれ、<HEAD>と</HEAD>ではさまれます。

【例６：<HEAD>】------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

  
</HEAD>
</HTML>
----------------------------------------------------------------------

じゃあ、さっそくこのヘッダ部にページのタイトルを記入しましょう。ここに
記述するタイトルは、ファイル名と一致させる必要はありません。ですから、
index.html というＨＴＭＬファイルに「蛇足のページ」とかいうタイトルを
つけても一向に構いません。

このタイトルは、ＩＥやＮＮなら画面左上のタイトルバーに、Lynxなどのブラ
ウザでは画面内の右上に表示されます。また、Yahoo! や goo などの、いわゆ
る検索サイトでは、このタイトルが見出しとして表示されます。ですから、一
見して何のページなのかが分かるタイトルが好ましいと言えるでしょう。たと
えば「その２」「続編」「意外な結末！！」などのタイトルは、ページの様子
がよく分かりませんね。

タイトルは <TITLE>と</TITLE>ではさまれます。ですから「池田蛇足のお部
屋」というページタイトルは、次のように記述すればよいです。

【例６：<TITLE>】-----------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE>池田蛇足のお部屋</TITLE>
</HEAD>
</HTML>
----------------------------------------------------------------------

ヘッダ部に記述すべき内容は他にもありますが、それは追々やっていきましょ
う。次は、ボディー部です。

ボディー部には、本文を記述します。結局、ブラウザで見るのはボディー部に
記述された内容ということになりますね。<BODY>と</BODY>ではさまれた部分
がボディー部で、ここに様々なＨＴＭＬを記述していくことになります。



<<中略…バックナンバーを参照してください>>



今回の講義をまとめましょう。

○タグには<tag name>（開始タグ）と</tag name>があることが多い。
○ＨＴＭＬファイルの冒頭には、DOCTYPE宣言が必要。
○ＨＴＭＬは、<HTML>と</HTML>の間に記述される。
○<HTML>と</HTML>の間には、ヘッダ部とボディー部が置かれる。
○ヘッダ部にはページ情報を記述する。
○ヘッダ部にはページのタイトルを記述する。<TITLE>と</TITLE>の間に記述。
○ボディー部はページ本文。<BODY>と</BODY>の間に記述する。

ふー。盛りだくさんでしたね。

●宿題

★次の条件のＨＴＭＬファイルを記述しなさい。

・タイトルは「ＨＴＭＬの基本構造について」
・本文に、次の文を段落として記述する
    さてみなさん。みなさんは小さい頃、ドアを開けてそのまま閉めずに部屋
    に入って「開けたら閉めなさい！」と怒られたことはありませんか？瓶の
    蓋を開けたら、普通はしっかりと閉めますね。開けたら閉める。これは実
    は、ＨＴＭＬのタグにも当てはまります。

がんばってね(^○^)

★お詫びと訂正★

第三号のソースコードにおいて、文字コードの指定により、一部環境で文字化
けの発生が懸念されるコードがありました。もし、第三号のコードをエディタ
にコピーし、ブラウザに表示させて文字化けが出てしまった場合は、

<META HTTP-EQUIV="Content-Type" 
        CONTENT="text/html;charset=Shift_JIS">

の部分を削除するか、または Shift_JIS を ISO-2022-JP または EUC-JP に変
更してみてください。

★編集後記★

・鬼怒川温泉よかった。温泉に七回つかりました。台風で増水し、鬼怒川はそ
  の名に恥じぬ暴れっぷり。しかし連夜の飲み会で、余計に疲れた？？

・ではまた！感想メール待ってます。(^O^)/~

----------------------------------------------------------------------
●ご意見・御感想をお待ちしています！

「こんなコーナー作って！」とか「これが知りたい」とか、ＨＴＭＬに関する
質問など、何でも、ともかくお便りください。このマガジンに返信すれば、発
行人のところに届くシステムになっています。いやぁ、「まぐまぐ」って偉い
っすね。

●YUJU HTML Editor1.0

ＨＴＭＬをテキストベースで編集することに特化したエディタです。「シェア
ウェア（５００円）」ですが、当マガジン読者には無料で配布します。是非、
ダウンロードしてお使い下さい。なお、無料でお使いになる場合は、下記アド
レスまで一言、お便りくださいね。ちなみに、拙作のソフトです。性能は…そ
んなにすんごいモノじゃありませんので、期待しないように (^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
★ソフトへのご要望、ありがとうございました。未熟なソフトですみません。
バージョンアップに際して考慮します。ありがとうございました。

●鈍行での旅行を愛する人々へ

メールマガジン「時刻表補完計画」は、「青春１８きっぷ」などの格安切符を
利用し、国内を、主として鉄道などの公共交通手段を使って旅行するために必
要な情報の収集、交換、公開を目的として運営されているマガジンです。投稿
型なので、未知の情報満載。購読登録・解除はこちらでどうぞ。
★『時刻表補完計画』ホームページ
http://www.geocities.co.jp/SilkRoad/7818

●ではまた！次号は９月中旬発行予定です。

 ===================================================================  
 このメールマガジンは、インターネットの本屋さん『まぐまぐ』を利用し
 て発行しています。( http://www.mag2.com/ )
 ===================================================================

[PR]------------------------------------------------------------------

  ★あなたの夢を実現します！！★
    ・無料ディスクスペースの開放
    ・アクセスカウンタＣＧＩサンプルの無料配布
    ・掲示板カスタマイズサービス
             >>>>>>ともかくこちらへ http://www.htmlmagazine.co.jp<<<<<

----------------------------------------------------------------------
----------------------------------------------------------------------
ＨＴＭＬ入門講座 第４号
発行人：池田蛇足 dasoku@geocities.co.jp   9月19日発行  発行部数 2435部