*HTMLのバージョンと文字コードを設定する [#pd7afda7] ここまで、 HTMLファイルでよく使われるタグについて見てきました。 しかし、HTMLファイルを公開するときには、 書かれた内容が、 ブラウザで正しく表示されるように、 ファイルに関する情報を設定しておく必要があります。 主な情報として、HTMLファイルで使っている 「''HTMLのバージョン''」と「''文字コード''」の設定を説明します。 **HTMLのバージョンを設定する [#yf1d3772] HTMLには、[[前に紹介したように>Lecture/InfoDesignB2004/3rd/HTML#od7a64a0]]、 いくつかのバージョンがあります。 さらに、 現在よく使われるバージョンである、「HTML 4.01」や「XHTML 1.0」には、 「推奨されている書き方がされているか」「以前のバージョンと互換があるか」など、 3種類の区別があります。 そのバージョンや区別を設定するには、 「''DOCTYPE''宣言」を使います。 #pre(novervatim){{ COLOR(red):<!DOCTYPE COLOR(black):... COLOR(red):> </pre> }} DOTYPE宣言は、HTMLファイルの最初の行に書きます。 ここでは、HTML 4.01を準拠し(守って)、 比較的に自由にいろいろなタグを使えるという設定を紹介します。 ''課題で作るファイルには、次の設定をしてください。'' すべて半角文字で入力してください。 (下の内容には全角文字が含まれているので、コピーするときには注意してください) #pre(novervatim){{ COLOR(red):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" COLOR(red): "http://www.w3.org/TR/html4/loose.dtd"> </pre> }} 「Transitional」の部分が、HTMLの書き方の種類を決めている部分です。 書き方には、「推奨している書き方をしているか/いないか」などで、 次の3種類があります。 また「"http〜.dtd"」の書き方も変わります。 -Strict (厳格に・推奨していない書き方は使わない) -Transitional (移行的・推奨していない書き方をしてもよい) -Frameset(フレームが使える・推奨していない書き方をしてもよい) **言語の設定 [#hf37fc21] html要素に''lang''属性を設定することで、 HTMLファイルがどのような言語で書かれているかを指定できます。 #pre(novervatim){{ COLOR(red):<html lang="COLOR(black):言語コードCOLOR(red):"> </pre> }} lang属性は、その要素が書かれている言語を設定するものです。 言語コードは、各言語を示す単語が指定されます。 「ja」は「日本語の言語コード」という意味になります。 ほかには「en」(英語)、「es」(フランス語)、「zh」(中国語)などがあります。 ''課題で作るファイルには、次の設定をしてください。'' #pre(novervatim){{ COLOR(red):<html lang="COLOR(blue):jaCOLOR(red):"> </pre> }} **文字コードを設定する [#u3f82fa4] HTMLファイルが書かれた''文字コード''(コンピュータ上の文字の表現方法)を、 設定することができます。 設定するには、''meta''要素を使って、 head要素の中に書きます。 #pre(novervatim){{ COLOR(red):<meta http-equiv="Content-Type" content="text/html; COLOR(red): charset=COLOR(black):文字コードCOLOR(red):"> </pre> }} 文字コードには、言語ごとにいくつかの種類があります。 日本語で使われる主な文字コードには、次の4種類があります。 パソコンでよく使われるのは、「シフトJIS」です。 -シフトJIS(Shift_JIS) -JIS(iso-2022-jp) -EUC(EUC-JP) -UTF-8(UTF-8) ''課題で作るファイルには、次の設定をしてください。'' #pre(novervatim){{ COLOR(red):<meta http-equiv="Content-Type" content="text/html; COLOR(red): charset=COLOR(black):Shift_JISCOLOR(red):"> </pre> }} **設定ができると... [#w77ddb9a] ここで説明した設定をすると、 HTMLファイルの最初の数行は、次のようになります。 #pre(novervatim){{ COLOR(red):<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 COLOR(blue):TransitionalCOLOR(red)://EN" COLOR(red): "COLOR(blue):http://www.w3.org/TR/html4/loose.dtdCOLOR(red):"> COLOR(red):<html lang="COLOR(blue):jaCOLOR(red):"> <head> COLOR(red):<meta http-equiv="Content-Type" content="text/html; COLOR(red): charset=COLOR(blue):Shift_JISCOLOR(red):"> </pre> }} &br; &navi2(Lecture/InfoDesignB2004/4th,next);進んでください。 ---- #navi2(Lecture/InfoDesignB2004/4th,prev,toc,next) }} |