初心者のためのホームページ作り:第3号

                  毎週金曜日配信 What's New 2002/5/31
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
           初心者のためのホームページ作り
           http://www.scollabo.com/banban/
                <第3号>

  誰でもすぐ分かるHTMLタグを丁寧に解説しながら勉強していく講座です。
  講座をすすめる中で分からない点があったらメールください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

 この講座はタグを覚えてテキストだけでホームページを作るという、どちらか
というとやや専門的な作業が中心になります。

 マイクロソフトの FrontPageや IBMのホームページ・ビルダーとは一線を画し
て、思い通りのHPを作ることが出来ます。

 時には専門的な難解な言葉も出てきますが、なるべく初心者にも分かりやすく
解説していきます。どうぞ、気軽な気持ちでお付き合いください。

 なお、このマガジンは等幅・等長フォントでお読みください。基本的に全角36
文字にて書かれています。

  今週の課題■各種の設定(今週は難しいぞーっ!!)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆決まりごと・・DTD(Document Type Definition:文書型定義)の宣言

(HTML文書のバージョンの宣言)
これはHTMLでの必須条件です。今まで講座のサンプルでは無視してきましたが、
今後のサンプルではなるべく記入するようにします。

 文書型定義が宣言されていないHTML文書は、 HTML2.0仕様書によると「ブラウ
ザは HTML2.0として扱え」となっていますが、HTML4.01ではこの考え方では現状
に対応できないとの見解をW3Cが示しております。つまり、それなりのバージ
ョンとして扱った方がいいということでしょう。

 同時に、全要素、属性に対して、誤った記述をブラウザ側で正常に表示するよ
うに求めており、この文書型定義の明示如何に関わらず、一応正常に表示される
はずです。ただし、誤った記述に依存したHTML設計は良くないとのことも明言し
ていますので、HTMLを書く場合、常に文法に気を使わなければなりません。

 つまり、あらゆるHTML文書の行頭にバージョンを明示する文を加えなければな
りません。この文は、HTML要素の外で構いません。(通常はHTML文書の1行目)
これは、タグではなく宣言であるということです。

 また、大文字と小文字の区別があるので、下記のように記述します。
DTD(Document Type Definition)は大きく以下の3つに分けて考えることができ
ます。

◆HTML4.01 Strict DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
あるいは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3c.
org/TR/html4/strict.dtd">

廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義されて
います。 将来、このDTDに統合されていく予定です。

 早い話が、HTML4.01で定義されている要素と属性しか扱えないという非常に難
しい文法です。当然ブラウザ独自によるタグも扱えません。非常に厳格な文法し
か許されていません。慣れてしまえば簡単なのかもしれませんが、私の頭の中に
は昔の悪い「癖」があるゆえ、「困難」な作業になってしまいます。これが完璧
に使いこなせないと、XHTMLには行けないのかなぁ、なんて思ってます。

◆HTML4.01 Transitional DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
あるいは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww
w.w3c.org/TR/html4/loose.dtd">

廃止予定の要素や属性を含むすべての要素と属性が定義されています。
 W3Cでは将来、この宣言は廃止予定ですが、ブラウザはこれらをサポートす
る必要があります。廃止予定とは将来的なもので期間は言明はしておりません。
 この宣言型は、過渡的なものとして多くのWebページで採用されています。

 今後廃止予定の要素が今のところ使えるという点では、ありがたい宣言です。
講座では、なるべく廃止予定の要素は使わないよう心がけていくつもりです。

◆HTML4.01 Frameset DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

 フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されて
います。将来、これも廃止予定ですが、ブラウザはこれらをサポートする必要が
あります。
 早い話が、Transitionalにフレーム要素が追加されたものと思ってください。
なお、フレームに関する講座はいずれ予定しております。

 ちょっと古いHTML参考書では、上記文書型の宣言は省略しても良い、なんて書
いてあったものがありましたが、これはまったくの嘘です。W3Cではとっくの
昔から必須条件として明記しています。HTML2.0 からだったと思いますが・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆決まりごと・・文字の設定(文字コードセットの設定)

 皆さんがインターネットでいろんなページを閲覧するとき、時々文字化けする
サイトに出会ったことがあると思います。そのほとんどが文字設定を忘れている
場合があります。正統派を目指すうえで必ず<head>の中に使用する文字を設定し
ましょう。私たち日本語を使うものにとって、必須条件です。

文字コードセット設定のタグを紹介します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<title>初心者のためのホームページ作り</title>
</head>

◆解説

 通常<html>には属性がないのですが、HTML文書全体が日本語で書かれているこ
とを明記するために、<html lang="ja">と示します。

 <meta>の部分は改行せずに1行で書きましょう。この文字設定は SHIFT-JISで
圧倒的に多くのサイトで採用されています。この文字コードセットはIANAという
組織が管理しています。現在、SHIFT_JIS、ISO-2022-JP、ECU-JPの3つの日本語
文字コードが認定されています。

 <title>を後に置いたのは文字を設定する前では、漢字である非アスキー文字が
使えないという文法によるものです。この点は重要です。<meta>は、<head>内
のみで使われる、定義の設定で、HTTP(後述)に伝える要素です。

(誤りの例)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html lang="ja">
<head>
<title>初心者のためのホームページ作り</title> <!-- 設定の前に漢字 -->
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
</head>

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆決まりごと・・MIMEタイプの設定

 実は上記の言語設定でMINEの設定がありました。MIME(マイムと呼ぶ)とは、
少し難しいですが、Multipurpose Internet Mail Extensions の略で、インター
ネットの電子メールのプロトコル(通信手順)です。
 もともとインターネットの電子メールでは半角の英数字しか送ることができな
かったのですが、MIMEに対応している電子メールソフトを使うと、漢字などの2
バイト文字が扱え、画像や音声などのバイナリデータをやりとりできるわけです。
これは Webページにも当てはまります。

 HTTP( HyperText Transfer Protocol)は、情報の転送を依頼するリクエスト
とそれに対するサーバのレスポンスから構成されています。URL やユーザー名と
パスワード、Webブラウザの種類、使用言語などの情報をWebサーバ側に送信する
と、Webサーバはそれに応じてデータやエラーコードなどを転送してきます。
 データのヘッダにはリクエストの可否、現在の時刻、サーバの種類などが記載
されており、これとHTMLなどの要求されたデータ本体が返答されてきます。

 また、MIMEの定義に基づいたデータの属性についても、返答が戻されます。Web
ブラウザは、返信されてきたHTMLファイルを解析し、画像ファイル等があれば再
度送信を要求し、返信されてきた画像を読み込んで、表示することになります。
 リクエストには、ほかにもフォームなどに入力したデータを送信するPOSTや、
データの更新日時やサイズなどの情報を取得するHEADといったメソッドが用意さ
れているのです。

 長くなりましたが、サーバーへの情報の引渡しにMIME設定が必要であることは
理解できたかな?これは少し初心者には難しいかもしれません。

<meta http-equiv="Content-Type" content="text/html; cahrset=Shift_Jis"> 
このテキストはHTML文書で文字コードにShift_JisであるというMIME設定

<meta http-equiv="Content-Style-Type" content="text/css">
このテキストスタイルは CSS文書であるというMIME設定

<meta http-equiv="Content-Script-Type" content="text/javascript">
このテキストで書かれたスクリプトはJavaで書かれたスクリプトであるという設
定。

◆まとめ:何故上記のような各種の設定が必要なのでしょうか?

 私たちがインターネットに接続するということは、サーバーに接続するという
ことです。サーバーにはいろんな種類があって、UNIX、NT、Linux、FreeBSDなど
が使われています。それらのサーバーへの橋渡しとしてHTTPという手順が存在し
そのHTTPに対して、私たちが設定した定義を送信するために、MIMEタイプにして
送り込んでいます。
 そうすることによって、様々なサーバーに接続し、インターネットを閲覧して
いるわけなのです。

 つまり、私たちが作ったWebページはこうしたサーバーに転送(FTP)し
て置くことにより、全世界の人々が閲覧できるわけです。難しかったかな?
 FTP(ファイル転送)については、講座で必ず取り上げます。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆スタイルシートの言語設定

 スタイルシートにも言語設定が要るのか、と言われると「う〜む」と唸ってし
まいます。実は、私の経験上HTMLでの言語設定で 「ISO-2022-JP」を使用し、か
つ外部スタイルシートファイルもこの言語で書いたところ、一部のブラウザでス
タイルシートが無視されてしまいました。
 そこで、外部スタイルシートを SHIFT_JISで書いてみると見事に反映されたの
です。以来、私は外部スタイルシート専用のエディタを用意し SHIFT_JISで書き
かつ、

<link rel="stylesheet" href="stylesheet.css" type="text/css"
 charset="Shift_Jis">

 と設定しています。なぜかと言うと、HTML文書を書くエディタの言語設定を固
定して、ISO-2022-JP で使っているからです。
 少し前までは SHIFT−JISが使えなかったために、ほとんど癖に近い感覚でこ
の文字コードセットを利用しています。
 これで書いたHTML文書やテキストは他のテキストエディタソフトでは文字化け
してしまいます。

 厳密に言うと、MIME設定でスタイルシートの言語設定を行うことがベストです。
<meta http-equiv="Content-Style-Type" content="text/css; chaset=Shift_Ji
s">

 もっと厳密に言えば、コンテンツのすべてに文字コードセットの設定が必要で
あるということですが、ほとんど省略しているのが現状です。

 エディタによって初期設定(デフォルト)がどのような言語設定になっている
のか、それぞれのソフトで確認してください。選べるものがあればベターです。
 結論として、HTML文書そのものを SHIFT_JISで書くならスタイルシートの言語
設定は必要でなく、そうでない場合は設定しておくと安全です。(経験上)

ちなみに、Windowsの「メモ帳」、MachintoshのSimpleTextはどちらもShift_Jis
です。私もスタイルシートだけはこのどちらも使っています。
 今週の講座は難解な言葉が多く、理解できたかどうか少々心配です。読者の中
には初めて出会う単語に、「えーっ、そんなこと必要なの?」と思われる方も居
るでしょうが、必要なんです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

前回までのHTML文書をそれぞれの決まり事に則って書いてみましょう。

(Strictの場合)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>初心者のためのホームページ作り</title>
</head>

<body>
<h1>初心者のためのホームページ作り</h1>

</body>
</html>

(Transitionalの場合)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
<title>初心者のためのホームページ作り</title>
</head>

<body>
<h1>初心者のためのホームページ作り</h1>

</body>
</html>

というような文書になります。かなり本格的なHTML文書になりました。

 なお、講座では、StrictとTransitionalを併用して使うことにします。なるべ
くならStrictがいいのですが、今後使用する要素(タグ)と属性がStrictで動く
かどうかについての検証が難しい場合には、安全を期してTransitionalを使うよ
うになります。

 要素と属性の関係などにあまり自信がない場合には、Transitionalを使ったほ
うが安心です。かくいう私もどちらかというとあまり自信がないので、もっぱら
Transitionalを中心にHTML文書を書いています。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今回はここまで、ではでは・・
今週のおさらいはWebページにも掲載しましたので、是非見ておいてください。
Webページは画像が使えるので、より分かりやすく説明しています。
(今週のおさらい)
http://www.scollabo.com/banban/magazine/

 次回は、実戦的にページを作成します。課題はテキストです。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆ホームページ作りのポイント

 ホームページを閲覧する際のブラウザによっては、表現できたり出来なかった
りします。代表的なブラウザとして、マイクロソフトのインターネット・エクス
プローラー(以下IE)とネットスケープ社のネットスケープ・コミニュケータ
ー(以下NS)では、お互いに独自の機能があり、互換性がありません。

 制作者の意図に反して、IEで表現できてもNSでは無視され、その逆もあり
ます。これは、JavaScriptでも内容によって同様の現象があります。
 この講座では、どんなブラウザでも対応できるようにするため、基本的に独自
タグは使わないように心がけています。ま、困った状況ですわい。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆米Netscape Communications社は22日(現地時間)、老舗Webブラウザーやメー
ルソフトを含むインターネット関連ソフト群の次世代バージョンNetscape v7.0
Preview Release 1(PR 1)をリリースしました。

 現在、Windows 95/98/Me/NT 4.0/2000/XPに対応するWindows版については日本
語、英語、ドイツ語、フランス語の各言語版が、MacOS X版とPowerPC版、UNIX版
については英語版が入手可能で同社のWebサイトから無償でダウンロードできます。
なお、Windows版のインストールは、先にセットアップファイルだけをダウンロー
ドし、セットアップを実行すると必要な構成ファイルが自動的にダウンロードさ
れる仕組みになっています。おっつけ日本語版が出るハズです、多分。

□Netscape.com  http://www.netscape.com/

◆The Mozilla Organizationは23日(現地時間)、オープンソースで開発を進め
ているWebブラウザー「Mozilla」v1.0 Release Candidate 3(RC 3)を公開しま
した。
 今回公開されたRC 3は、計画では正式版公開前の最終的な候補版に位置づけら
れるもので、RC 2を使用したユーザーから報告のあった 139種類の不具合の修正
が主な変更点としています。

□mozilla.org  http://www.mozilla.org/

 Netscapeがバージョンアップしたことはうれしいニュースですが、せっかく完
成したばかりのHTMLリファレンスにどんな変更が出るのかは今のところ不明です。

 おそらく1年後ぐらいには色々と判明するでしょうからその時に改定するつも
りです。また、時期的にMicrosoft社も最新版を出すでしょうね。 XHTML、XMLが
中心の時代が来たんだなぁという心境です。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

質問・ご意見ははこちらまで→ banban@scollabo.com
なお、ご質問の際には、お使いのOS、通常使っているブラウザ、また他に持って
いるブラウザ、使っているテキストエディタなど、なるべく分かりやすく制作環
境を明記していただけると回答しやすくなると思います。
誤字・脱字・変換ミスについてはご容赦ください。

発行者 ばんばん
協 力 スズキ・コラボレーション http://www.scollabo.com/

配信の変更や中止は下記メールマガジンの配信元で行えます。
配信エンジン まぐまぐ http://www.mag2.com/  (ID 0000090196)
       melma!    http://www.melma.com/ (ID m00063462)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

<えでぃた〜ず・るーむ>

サッカーのワールドカップが始まりますね。世の中W杯一色です。個人的にはサ
ッカーはあまり興味がないのですが、やはり日本チームは気になります。
 W杯では、世界中のプロ中のプロが集まるわけですから、サッカーファンには
たまらない魅力だと思います。オリンピックでは年齢制限があるので、そういう
意味でも今回のW杯サッカーは、きっと見ごたえがあるのでしょう。

 でも勝った、負けただけで選手やチーム、国を評価しないようにして欲しいも
のです。勝負は時の運というものもありますし、一概に技術レベルだけでは判断
できないものもあるでしょう。何たってアトランタ五輪で日本がブラジルをやっ
つけたことだってあるんですし。

 Webサイトでも、かなり間違った文法を書いているものの中にもキラリと光
る優れたページがあります。やっぱコンテンツなんですよねぇ。と、溜め息・・

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

◆著作権について

個人がご自分のPCに保存して利用する以外の記事の転載、引用は基本的に応じ
ておりません。記事中のすべての内容についての著作権は放棄していません。
無断で使用することを固く禁じます。

      Copyright(C) 2002  www.scollabo.com/banban/
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■



Copyright(C) 2002-3003 banban@scollabo.com