roy > naoya > 情報リテラシーII > (6)HTML[3]
htmlファイルは大きく分けるとhead部とbody部に分けることができる。head部（<head>から</head>まで）はページのタイトルや作成者等を記載する。body部（<body>から</body>まで）には本文を記載する。ブラウザで表示されるのはbody部に書かれた内容のみである。
head内の情報はあまり意味がないようにも思われるが、文字化けを防ぐための情報を記載するなどの重要な役割も有している。また次週とりあげるWebページのデザインを規定するCSSの設定もhead内に記述する。
これまでは<body>〜</body>の間を重点的に作成してきたが、本日は<head>〜</head>内の記述方法について確認しよう。
以下は先週作成したindex.htmlの<head></head>の部分である。青色の文字の部分を自分で作成したページにあうように書き直す必要があるが、まずは各行の働きについて確認しよう。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="author" content="作成者の氏名">
<meta name="description" content="このページの説明。">
<meta name="keywords" content="このページのキーワード">
<title>ページタイトル</title>
<link rev="made" href="mailto:連絡用メールアドレス">
<style type="text/css">
<!--
body {
background-color: #ffccff;
}
h1 {
color: #cc0066;
}
address {
text-align: right;
}
.normal {
font-style: normal;
font-weight:bold;
}
-->
</style>
</head>
<body>
略
</body>
</html>
htmlにはバージョンが幾つかあり、過去のバージョンでは使用できた要素（タグ）が新しいバージョンでは使用できなくなっているなど、バージョンにより若干の違いがある。htmlファイルでは必ず1行目にどのバージョンで書いているのかを宣言する（DOCTYPE宣言）。現行の最新バージョンは4.01であり、HTML4.01の場合の書き方を以下に示す。3種類あるのでどれでも好きなものを選ぶ。
HTML4.01のDOCTYPE宣言
lang="ja"をつけ、日本語で書かれていることを明示する。その他の言語コードには例えば以下がある。
ar | アラビア語 |
de | ドイツ語 |
en | 英語 |
eo | エスペラント語 |
es | スペイン語 |
it | イタリア語 |
ko | 韓国語 |
ru | ロシア語 |
fr | フランス語 |
zh | 中国語 |
文字コードを指定する。文字はコンピュータ内では1と0の配列で表現されており、この配列と個々の文字の対応関係を示した表が文字コードである。日本語をあらわす文字コードは複数あり、どれを利用しているのかを明示しておかないと文字化けを起こす可能性がある。royで作成した場合は"EUC-JP"となる。自宅のWindowsで作成した場合はShift-JISになる。
文字コードの指定方法
デザインを指定する上でCSSを使用していることを示す。CSSを使用する場合は必ず記入する（現時点では不要だが、来週CSSを使うので前もって書いておく）。
javascriptを使用していることを示す。javascriptを使用する場合は必ず記入する（授業では使用しないが、将来的に使うこともありうるので一応入れておく）。
ページの作成者を記載する。
ページの説明を記載する。Google等の検索エンジンによる検索結果では、ここに記載された内容が説明として表示されることがある。
このページのキーワードを示す。
ページのタイトルを記載する。ブラウザ左上に表示されるとともに、Google等での検索結果として表示される際のタイトルとなる。
作成者の連絡先（メールアドレス）を記載する。
CSSの設定。このページに適用するデザインをここで指定している。次週解説する。
ページが完成したら、正しい文法で書けているかどうか採点してみよう。以下のリンク先で採点することができる。DATAの部分を選択し、テキストエリアに作成したソースを貼り付けチェックボタンを押す。100点満点で採点されるが、減点項目が多い場合マイナスの値がでることもある。
ソースを貼り付ける場合、emacsで範囲選択を行うとうまくいかないことが多いので、ブラウザのメニューの[表示]からソースを表示して、コピーして貼りつける。
先週の作業の続きを行う。本日新しく実施できるようになったのは以下の作業である。今日の内容を忘れないように以下を先に行っても良いし、先週の続きを先に行っても良い。
今日の課題：作業の進捗状況をメールで報告する。Another HTML-lint Gatewayで採点してみた場合は得点も報告する。