Powered by SmartDoc

11 最終課題の準備

11.1 パソコンをVirusから守る方法

先週末から,MMLのメーリングリストにウイルスに感染した電子メールが頻繁に流れています.ウイルスに感染しないように以下の点に注意してください.

「アンチウイルス」「ウイルス基礎知識」にはウイルスから身を守る方法などが詳しく書かれていますので,一度読んでおくことをお勧めします.

11.2 HTML認定サイト

11.3 W3CのValidatorで認定マークをもらうために修正すべき個所

W3CのHTML Validation Service

以上をまとめると,以下のようなテンプレートになります.(これはあくまで一例です.)

リスト 11.3.1 認定マークをもらうためのHTML文書のテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" \
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
    <title></title>
  </head>
  <body>


    <hr>
    <address><a href="mailto:XXXX@twcu.ac.jp">Your Name</a></address>
    <p><!-- Created: Mon Jul  1 09:41:46 JST 2002 -->
    <!-- hhmts start -->
    Last modified: Mon Jul  8 10:15:25 JST 2002
    <!-- hhmts end --></p>
  </body>
</html>

HEAD部には他にも作者の名前なども入れることもできます.参考までに私がよく使うパターンをお見せします.

リスト 11.3.2 HTML文書のDOCTYPE宣言とHEAD要素の書き方の別例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
	<link rev="made" href="mailto:nabe@twcu.ac.jp">
	<meta name="author" content="Takayuki Watanabe">
	<meta name="keywords" content="TWCU, education, Watanabe">
	<link rel="stylesheet" type="text/css" \
    href="http://www.twcu.ac.jp/~nabe/article.css">
	<title>東女での授業の情報</title>
</head>

HTML文書の第1行目に書いてあるDOCTYPE宣言の意味も説明しておきましょう;これはこの文章がどういう文法に則って書かれているかを示す宣言です.HTMLそのものについて説明する宣言なのでHTML要素より外側のページの先頭に書くことになっています.W3CのValidatorは,これが書かれていないページを検証してくれません.それもそのはず,どういう規則に則って書かれているかわからなければ,その規則に則しているかどうか検証しようがないからです.通常のWebブラウザーはこのDOCTYPE宣言がなくても表示してくれますが,Webブラウザーはそれだけ適当というか,曖昧な文でも何とか形になるように表示するように作ってあるのです.

HEAD部で文字コードを明示していないとValidatorが困ってしまうのは,どの文字コードで書いてあるのかわからなければデータを解析しようがないからです.通常のWebブラウザーが文字コードがないHTMLでもたいていの場合文字化けせずに表示できるのは,日本語であることを仮定できるのと,データそのものをみて文字コードを類推することがある程度可能だからです.

11.3.1 Emacsで文字コードを変換する方法

Emacsで編集中のバッファの文字コードをISO-2022-Jp(別名JISコード,junet)に変更するには,以下の操作をします.

  1. Ctrl+x,Enter,fとタイプする.又はXEmacsの「Mule」メニューの下の「Set coding system of buffer file」を選択する.
  2. すると画面最下行のミニバッファに「File coding system:」というプロンプトが現れるので,junetと入力してEnterキーを押す.
  3. バッファを保存する.

11.3.2 画像

画像を使うときは以下の例のようにALT属性を入れてください.ALT属性には画像の短い説明を入れます.これが書いてあると視覚障害者でもそれが何の絵なのかとか何のためにおいてある絵なのかがわかります.

<img src="hello.jpeg" alt="私の似顔絵">

「不適切なHTMLの例」

ただし,単なるボタンのような意味のない画像にまでいちいち丁寧な説明をつける必要はありませんし,あえてALTによる説明をつけないほうが耳で聞いたときにわかりやすい場合もあります.このような場合は,説明の代わりに全角スペースを入れておくのもよいかもしれません.要は,絵が見えない環境でHTMLを表示させた時にも意味が通じるような説明を入れておくことと,絵が見える場合とできるだけ同じような情報を提供することが大事なのです.

11.3.3 背景画像などの入れ方

皆さんが作った頁を見てみると,背景画像を使ったり背景の色を変えたりしたい人が多いようです.でも<body background="foo.gif" text="blue">というような指定をしてはいけません.表示スタイルは以下の例のようにスタイルシートで指定しましょう.

リスト 11.3.3.1 背景画像などの指定
BODY {
    background: url(foo.gif); /* 色を指定する場合は background: red; */
    text: blue;
}

外部スタイルシートを使いたくない場合,スタイルシートをHTML文書の中に埋め込むこともできます.

リスト 11.3.3.2 HTMLのhead要素内でスタイルを指定する方法
  <head>
    <style type="text/css">
    <!--
      BODY {
        background: url(foo.gif); /* 色を指定する場合は background: red; */
        text: blue;
      }
    -->
    </style>
  </head>

ただし,データとスタイルを分離しておけば複数のHTMLでスタイルシートを共通にできるので,外部スタイルシートを推薦します.

リスト 11.3.3.3 外部CSSを使う方法
<head>
<link rel="stylesheet" type="text/css" \
    href="http://www.foo.org/example.css">
</head>

11.3.4 Frameを使う場合

Frameを使う場合はFrameを使うHTMLファイルだけDTDを以下のように変えてください.

リスト 11.3.4.1 認定マークをもらうためのHTML文書のテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" \
    "http://www.w3.org/TR/html4/frameset.dtd">

以下の内容だけでも大丈夫です.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

スタイルシートやFrameの詳細は市販の本やWeb上の情報を参考にしてください.

HTML Validation Serviceのエラーメッセージの意味がわからない場合は,Another HTML-lint gatewayでチェックしてみて下さい.後者は日本語で書いてあるし解説もあるので参考になるはずです.

Validatorでエラーがでるのにその理由がわからない人は遠慮せずに渡辺に聞いてください.授業中に質問しきれない場合は,作っているページのURLとエラーになる場所及びその内容を電子メールで送ってくれてもよいです.

11.4 最終課題の詳細