第6章 HTMLとMETA情報について
HTMLについて
HTMLとは、
HyperText Markup Languageの頭文字をとったものです。
この名前を少し丁寧に解釈すれば、「ハイパーテキストのための、
文書に目印を付ける方法を定めた文法上の約束」ということになります。
簡単に言うならお約束事すね。
ここで始まりここで、終わりを設定します。
例ですが、右クリック→ソースの表示を選択するとMEMO帳に
タグが表記されます。最初の辺りと終わりをみるとこんな記述が
あるはずです。
<![CDATA[
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;
CHARSET=SHIFT_JIS">
<META NAME="keyword" CONTENT="ATELIER TM,タグ講座,JAZZ,アート">
<META NAME="description" CONTENT="ATELIER TM">
<META NAME="robots" CONTENT="all">
<TITLE>ATELIER TM</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
]]>
具体的に解説していきますと
<![CDATA[<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">]]>
これは、HTMLのバージョン表記で特に記述しなくては
表示できないものではありません
<HTML>ここから始まるよということ
<HEAD>この間にMETA情報を入れます。
必ずここに入れてください。詳しくは後述
<TITLE>この中にファイルのタイトルをいれます
</TITLE>
</HEAD>
<BODY>
この間にホームページの本文をいれます。
実際に表示されるのはこの中身だけです。
</BODY>
</HTML>
ここで終了の意味
こうなってるよ！ あー−どーやって編集するかってか？メモ帳でも可ですが、
フリーソフトのテキストエディタTeraPadがお勧めです！
次に、<body> </body>内を編集します。背景、画像、文字等、自分が表現したいように編集してください。
余白を設定するタグ
<LEFTMARGIN="ピクセル数"
TOPMARGIN="ピクセル数">
インターネットエクスプローラーのみ1ピクセルは0.35ミリ
LEFTMARGINは文書全体の左の余白、
TOPMARGINは上の余白を指定します。
基本はここまで。
META情報について
<![CDATA[meta は METAinformation（メタ情報）の略です。英語の meta- は、後から（after）、
超えて（beyond）、共に（with）、変化（change）などのニュアンスを持つ接頭語です。
「それまでの機能に加えて、後から機能を追加するためのもの」といった意味でしょうか。
<meta>タグは、HTML の規約で定義されているものに加えて、いろいろな目的で使用されます。
<meta name="name" content="content"> の形式は、ブラウザや検索エンジンのロボットに情報を与えます。
<meta http-equiv="name" content="content">の形式は、HTTPヘッダに
name: content というフィールドを追加したのと同じ働きをします。
詳細は、使用例を参照してください。]]>
文字化け対策に！
<![CDATA[
文字コード文書の文字コード(キャラクタセット）を指定します。
日本語を用いる場合は指定したほうがいいです。
Shift_JIS はシフトJIS、euc-jpは EUC、iso-2022-jpは、JISコードの時に指定します。
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
<meta http-equiv="Content-Type" content="text/html;
charset=euc-jp">
<meta http-equiv="Content-Type" content="text/html;
charset=iso-2022-jp">
シフトJISは、昔は x-sjis となっていましたが、
現在では Shift_JIS に変更されています。]]>
Javascript使用時に！（現在しなくてもいい）
<![CDATA[
基準スクリプト言語文書中の onclick="..."
などで呼び出すスクリプトの基準言語を指定します。
（language 属性で変更可能です。）
javascriptを用いる時は
記述しておくことが推奨されています。
<meta http-equiv="Content-Script-Type"content="text/javascript">]]>
CSS(スタイルシート）使用時に！
<![CDATA[
基準スタイルシート言語文書中の style 属性で使用する
スタイルシートの基準言語を指定します。スタイルシートの
基準言語も大抵が CSS なので、指定しなくてもほとんど
問題はありませんが、スタイルシートを用いる際は
指定しておくことが推奨されています。
<meta http-equiv="Content-Style-Type" content="text/css">]]>
著作者を明記したい時！
<![CDATA[
文書の著者文書の著者を明記します。
画面上では表示の変化はありません。
contentの部分にはメールアドレスを
書いても可。
<meta name="Author" content="ATELIER TM">]]>
キーワードを指定し検索を速くしてもらえる！
<![CDATA[
文書のキーワードこの文書に関連する
キーワードを指定します。
検索ロボットの中にはこのキーワードを
読取るものがあります。
<meta name="Keywords" content="ATELIER TM,ART,HTML">]]>
検索ロボットに読込んでもらう！(アクセスUP!)
<![CDATA[
文書の概要この文書に関連する説明（description）
を指定します。
検索ロボットの中にはこのキーワードを
読込むものがあります。
<meta name="Description" content="ATELIER TM">]]>
画面の再描画文書を 10秒毎に再描画します。
<![CDATA[
この機能をクライアントプルと呼びます。IE3.0、
Netscape Navigator 2.0 でサポートされています。
<meta http-equiv="Refresh" content="10">]]>
別のページに自動ジャンプ！
<![CDATA[
HP引越したとき便利です。
別ページへの自動ジャンプ指定秒後に
URL=...で指定したURLにジャンプします。
IE3.0、Netscape Navigator 2.0 でサポートされています。
<meta http-equiv="Refresh" content="指定秒数;飛ぶURL">]]>
キャッシュの有効期限を指定
<![CDATA[
この文書がキャッシュから
消去されるべき時刻を指定しています。
ブラウザによりサポート状況は異なります。
<meta http-equiv="Expires"
content="Sta, 3 Jan 2009 14:25:27 GMT">]]>
最新のページを見てもらう！
<![CDATA[
キャッシュ制御文書がブラウザ側にキャッシュされるの
を防ぎます。
(サポート状況はブラウザによって異なります)
<meta http-equiv="Pragma" content="no-cache">]]>
検索ロボットに登録しアクセスUPさせます。
<![CDATA[
検索ロボット制御goo や Google などの
検索ロボットへの登録を促します。
index は検索を許可、
noindex は検索を禁止、
follow はリンク先をたぐることを許可、
nofollow はリンク先参照を禁止します。
登録させるタグの例
<meta name="robots" content="index">
<meta name="robots" content="index,follow">
禁止させるタグの例
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noindex, nofollow, noarchive">]]>
トランジション指定したい時！
<![CDATA[
ページを移動する時のビジュアル効果を指定します。（ワイプ効果）
<meta http-equiv="Page-Enter"
content="blendTrans(Duration=0.8)">]]>
イメージツールバーの無効化！
<![CDATA[
IE6.0 でサポートされたイメージツールバー（画像にマウスを乗せたときに表示される
印刷・保存などのツールバー）を無効化します。
<meta http-equiv="imagetoolbar" content="no">
]]>