(7) 11/14の授業内容:HTML(4) head内の記述
<head></head>内の記述について
htmlファイルは大きく分けるとhead部とbody部に分けることができる。head部（<head>から</head>まで）はページのタイトルや作成者等を記載する。body部（<body>から</body>まで）には本文を記載する。ブラウザで表示されるのはbody部に書かれた内容のみである。
head内情報はあまり意味がないようにも思われるが、文字化けを防ぐための情報を記載するなどの重要な役割も有している。また次週とりあげるWebページのデザインを設定するCSSもhead内に記述する。
<html><head> <title> Welcome to Naoya's Page!!!!! </title> </head><body> <h1>自己紹介</h1> <p>神田直弥です。宜しくお願いします。</p> </body></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 name="author" content="Naoya KANDA"> <meta name="description" content="神田担当の情報リテラシーIIの第7回目です。"> <meta name="keywords" content="自由製作時間、head内の記述"> <title>情報リテラシーII第7回</title> <link rev="made" href="mailto:naoya@e.koeki-u.ac.jp"> </head>
各行について説明する。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
htmlファイルでは一番上に<html>と書くとしていたが、厳密には<html>の上の行に上記を記載する。HTML言語はバージョンが幾つかあり、現行のバージョン4.01では、かつてのバージョンで使用できたタグが使用できなくなっている。使用できないタグは主に見栄えを規定するタグで、例えばアンダーラインを引く<u>タグや、文字の大きさや色を変える<font>タグなどがある。
私たちは通常重要であるものを表現するときに、赤色で書いたり大きな文字で書いたり、下線を引いたりする。しかし、赤文字や下線そのものは本来重要という意味があるわけではない。それを見た私たちが重要であると解釈しているだけである。
Internet ExplorerやFireFoxを用いる限りにおいては赤文字や大きな文字でも実質的には問題がないが、これらの表現手段をもたないブラウザもある。例えば携帯電話でWebページを閲覧する場合は大きな文字の表現ができないし、視覚障害者向けの読み上げブラウザでは赤色を表現できない。
重要であるということを伝えるために<strong>タグを使用していれば、読み上げブラウザを使っていても大きな声で読むというような対応が可能である。しかし、赤文字や下線は、これらを利用する意図がコンピュータには理解できないため、代替手段を用いて表現することができず、結果的に非対応のブラウザを用いることで伝達できる情報に差が生じてしまうことになる。
このような問題を防ぐために、現行のHTML4.01では意味をあらわすタグのみが利用可能であり、見栄えをあらわすタグは使用してはならないことになっている。見栄えは次週扱うCSSで定義する。
1行目に書いた、<!DOCTYPE HTML PUBLIC〜はHTMLのバージョン4.01で書いていることをあらわす。
<html lang="ja">
これまでは<html>と書いてきたが、通常はlang="ja"をつけ、日本語で書かれていることを明示する。
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
文字コードを指定する。文字はコンピュータ内では1と0の配列で表現されており、この配列と個々の文字の対応関係を示した表が文字コードである。日本語をあらわす文字コードは複数あり、どれを利用しているのかを明示しておかないと文字化けを起こす可能性がある。royで作成した場合は"EUC-JP"となる。自宅のWindowsで作成した場合はShift-JISになる。
<meta http-equiv="Content-Style-Type" content="text/css">
デザインを指定する上でCSSを使用していることを示す。CSSを使用する場合は必ず記入する（現時点では不要だが、来週CSSを使うので前もって書いておく）。
<meta name="author" content="Naoya KANDA">
ページの作成者を記載する。
<meta name="description" content="神田担当の情報リテラシーIIの第6回目です。">
ページの説明を記載する。Google等の検索エンジンによる検索結果では、ここに記載された内容が説明として表示されることがある。
<meta name="keywords" content="自由製作時間、head内の記述">
このページのキーワードを示す。
<title>情報リテラシーII第6回</title>
ページのタイトルを記載する。ブラウザ左上に表示されるとともに、Google等での検索結果として表示される際のタイトルとなる。
<link rev="made" href="mailto:naoya@e.koeki-u.ac.jp">
作成者の連絡先（メールアドレス）を記載する。
完成したページを採点しよう
ページが完成したら、正しい文法で書けているかどうか採点してみよう。以下のリンク先で採点することができる。DATAの部分を選択し、テキストエリアにemacsで作成したソースを貼り付けチェックボタンを押す。100点満点で採点されるが、減点項目が多い場合マイナスの値がでることもある。
課題
Another HTML-lint gatewayで自分の作成した2つのページを採点し、それぞれ何点取れたかを報告する。時間があれば間違いを修正しながら繰り返し採点して、高得点を目指してみよう（この場合は最終的な得点を報告する）。
- 提出先：naoya@e.koeki-u.ac.jp
- メールの件名（Subject）：literacy(7)
- 提出期限：授業終了時
- 電子メールの使い方に自信がない場合：Mewの主要コマンドについてを確認しよう
