Lecture/InfoDesignB2004/4th/definition の変更点

追加された行はこの色です。
削除された行はこの色です。
Lecture/InfoDesignB2004/4th/definition へ行く。
*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の書き方の種類を決めている部分です。
書き方には、「推奨している書き方をしているか／いないか」などで、
次の３種類があります。
また「"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)

}}
KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2004/4th/definition の変更点

メニュー

大学関係リンク

今日の5件

最新の5件
