初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。
初心者でもタグやスタイルシートを学んで、思い通りのホームページが作成できる講座を、現在メールマガジンにて配信しています。当サイトを利用するに当たって、是非メールマガジンを購読することをお勧めします。なお、未だ購読されていない方はこちらから登録できます。念のため無料です。毎週金曜日配信 What's New 2002/5/31 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 初心者のためのホームページ作り ＜第３号＞ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・DTD(Document Type Definition：文書型定義)の宣言 これはHTMLでの必須条件です。今まで講座のサンプルでは無視してきましたが、 今後のサンプルではなるべく記入するようにします。 文書型定義が宣言されていないHTML文書は、 HTML2.0仕様書によると「ブラウ ザは HTML2.0として扱え」となっていますが、HTML4.01ではこの考え方では現状 に対応できないとの見解をＷ３Ｃが示しております。つまり、それなりのバージ ョンとして扱った方がいいとのことでしょう。 同時に、全要素、属性に対して、誤った記述をブラウザ側で正常に表示するよ うに求めており、この文書型定義の明示如何に関わらず、一応正常に表示される はずです。ただし、誤った記述に依存したHTML設計は良くないとのことも明言し ていますので、HTMLを書く場合、常に文法に気を使わなければなりません。 あらゆるHTML文書の行頭にバージョンを明示する文を加えなければなりません。 この文は、HTML要素の外で構いません。（通常はHTML文書の１行目）つまりこれ は、タグではなく宣言であるということです。 HTML4.01におけるDTDの基本 DTD(Document Type Definition) は大きく以下の３つに分けて考えることができ ます。 HTML4.01 Strict DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">←互換型 あるいは、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3c.org/TR/html4/strict.dtd"> ←標準準拠型 廃止予定の要素や属性とフレーム関連を除く、すべての要素と属性が定義され ています。将来、このDTDに統合されていく予定です。 非常に巌格な文法で、制作には文法書とにらめっこで困難を極めます。 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://www.w3c.org/TR/html4/loose.dtd"> ←標準準拠型 フレーム関連を除く、廃止予定の要素や属性を含むすべての要素と属性が定義さ れています。将来、廃止予定ですが、ブラウザはこれらをサポートする必要があ ります。現在のWebサイトを見ると、ほとんどがこの宣言によって書かれています。 HTML4.01 Frameset DTD <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> フレーム関連と廃止予定の要素や属性を含むすべての要素と属性が定義されてい ます。将来、廃止予定ですが、ブラウザはこれらをサポートする必要があります。
◆標準準拠型と互換型には明確な差異があります。
筆者はほとんどTrnsitional互換型を使用していますが、実は下記のようにこれだけ表示に違いがあります。環境＝WindowsXP Proffsional、Microsft IE6.02
 |
 |
| Transitional標準型 | Transitional互換型 |
左側標準型は、テーブルにおけるフォントサイズが親要素（この場合、body）を継承して表示されていますが、右側の互換型は親要素が無視されています。このためにテーブル内での見栄えについては、個別にスタイルシートで記述する必要が出てきます。「サンプル」と書かれたフォントのサイズが親要素で指定したものです。
まったく同じ記述のHTML文書ですが、DTD宣言の型をどう取るかでこれほど表示に差が出るのです。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・文字の設定（文字コードセットの設定） 皆さんがインターネットでいろんなページを閲覧するとき、時々文字化けするサ イトに出会ったことがあると思います。そのほとんどが文字設定を忘れている場 合があります。正統派を目指すうえで必ず<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>の部分は改行せずに１行で書きましょう。この文字設定は SHIFT-JISで、圧倒的に多くのサイトで採用されています。
この文字コードセットはIANAという組織が管理しています。現在、SHIFT_JIS、ISO-2022-JP、ECU-JPの３つの日本語文字コードが認定されています。
<title>を後に置いたのは文字を設定する前では、漢字である非アスキー文字が使えないという文法によるものです。この点は重要ですよ。<meta>は、<head>内のみで使われる、情報や定義の設定で、HTTPに伝える要素です。
（詳しくは、Tipsの言語をご覧ください。）
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 決まりごと・・MIMEタイプの設定 実は上記の言語設定でMINEの設定がありました。MIME（マイムと呼ぶ）とは、少 し難しいですが、Multipurpose Internet Mail Extensions の略で、インターネ ットの電子メールのプロトコル（通信手順）です。もともとインターネットの電 子メールでは半角の英数字しか送ることができなかったのですが、MIMEに対応し ている電子メールソフトを使うと、漢字などの２バイト文字が扱え、画像や音声 などのバイナリデータをやりとりできるわけです。これは Webページにも当ては まります。 HTTP（ HyperText Transfer Protocol）は、情報の転送を依頼するリクエスト とそれに対するサーバのレスポンスから構成されています。URL やユーザー名と パスワード、Webブラウザの種類、使用言語などの情報をWebサーバ側に送信する と、Webサーバはそれに応じてデータやエラーコードなどを転送してきます。 データのヘッダにはリクエストの可否、現在の時刻、サーバの種類などが記載 されており、これとHTMLなどの要求されたデータ本体が返答されてきます。 また、MIMEの定義に基づいたデータの属性についても、返答が戻されます。Web ブラウザは、返信されてきたHTMLファイルを解析し、画像ファイル等があれば再 度送信を要求し、返信されてきた画像を読み込んで、表示することになります。 リクエストには、ほかにもフォームなどに入力したデータを送信するPOSTや、 データの更新日時やサイズなどの情報を取得するHEADといったメソッドが用意さ れているのです。
◆解説
HTTPは、あらゆる主要なネットワーク接続の標準化されたTCP/IPという通信手順（プロトコル）に適合し、インターネットやイントラネット上でHTML文書形式の文書を受け渡すための通信手順です。
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 前回までの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> <h3>初心者のためのホームページ作り</h3> </body> </html> Transitionalの場合はDTDの部分を <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> と書き直してください。
次回はこれらを踏まえて、ページを作成します。
＜今週のタグ＞<meta>