HTML

ページの文字コード指定

文書に使っている日本語コード(エンコード)を明示して文字化けを減らす。
間違うと表示する文字が余計化けたり、正しく読み込みできずにリロードを連続し続けるような不調も起きる。
HTMLファイルの文字コードと文字コード表記は必ず一致させること。

シフトJIS
主にWindowsで使われる文字コード。文字化けしやすい
<META HTTP:EQUIV="Content:type" CONTENT="text/html; charset=Shift_JIS">
日本語EUC
UNIXなどのサーバで使われる文字コード
<META HTTP:EQUIV="Content:type" CONTENT="text/html; charset=EUC-JP">
日本語JIS
メールなどで使われる文字コード
<META HTTP:EQUIV="Content:type" CONTENT="text/html; charset=ISO-2022-JP">
UTF-8
全世界共通の統一規格
<META HTTP:EQUIV="Content:type" CONTENT="text/html; charset=UTF-8">

HTMLバージョン明示

HTMLにもいくつかバージョンとかあってそれを最初の行で明示しておくことが望ましい。 が、仕様ごとに使えないタグなどもあってかなり面倒なんで別になくても困らない。 これが書いてあるということは「その仕様に従っている」という意味なのでわかんないなら書かないのが無難。

  • HTML3.2
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    推奨されないタグ
    BGSOUND BLINK
  • HTML4.01 Strict 厳密な仕様。つまり制約が多くて面倒くさい
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    推奨されないタグ
    APPLET BASEFONT BGSOUND BLINK CENTER COMMENT DIR EMBED FONT
    FRAME FRAMESET IFRAME ILAYER LAYER MARQUEE MENU NOBR
    NOEMBED NOFRAMES NOLAYER RB RP RT RUBY S STRIKE U XMP
  • HTML4.01 Transitional 過渡期の仕様。アバウト
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    推奨されないタグ
    BGSOUND BLINK COMMENT EMBED FRAME FRAMESET ILAYER LAYER
    MARQUEE NOBR NOEMBED NOFRAMES NOLAYER RB RP RT RUBY XMP
  • HTML4.01 Frameset フレームでの仕様
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    推奨されないタグ
    BGSOUND BLINK COMMENT EMBED IFRAME ILAYER LAYER MARQUEE
    NOBR NOEMBED NOLAYER RB RP RT RUBY XMP
  • Compact HTML 1.0(i-mode)
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">

ページを開くウィンドウ(タブ)を指定

_blank と _new の違い

  • 参考External Site
    <A HREF="http://www.google.co.jp" TARGET="_blank">Link</A>
    <A HREF="http://www.google.co.jp" TARGET="_blank">Link2</A>
    
    <A HREF="http://www.google.co.jp" TARGET="_new">Link</A>
    <A HREF="http://www.google.co.jp" TARGET="_new">Link2</A>
    _blank は常に新しいウィンドウ(タブ)を生成してページを開き、
    _new は初回のみ新しいウィンドウを生成し、
    2度目からは初回に開いたページにリンク先を開く。
    リンク先が違っていてもそのページ内から開くウィンドウは _new なら固定される。

巡回ロボット制御

Googleのような自動巡回してページを拾っていく検索エンジンなどに対して
特定のページは登録させたくない/させたい場合にMETAタグで命令ができます。
これは、ページを拾うロボット製作者の善意によるものが大きいので
無視はできますが一般的な巡回ロボットはこれに従ってくれる、はず。

<HEAD>
<META NAME="ROBOTS" CONTENT="命令">
</HEAD>

基本的な書式は上記のようになっており赤文字の部分で制御します。
HEAD タグの間に書くことが義務付けられています。

  • すべてのロボット巡回を拒否
    <HEAD>
    <META NAME="ROBOTS" CONTENT="NONE">
    </HEAD>
  • このページの巡回を許可、このページのリンク先の巡回を許可
    <HEAD>
    <META NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
    </HEAD>
  • このページの巡回を許可、このページのリンク先の巡回を拒否
    <HEAD>
    <META NAME="ROBOTS" CONTENT="INDEX,NOFOLLOW">
    </HEAD>

自動ページ移動/リロード

  • 指定した秒数だけ待ち、自動的に指定したページへ移動させる。
    <META HTTP-EQUIV="Refresh" CONTENT="10; url=http://www.foo.com/">
    この場合は10秒後。区切りは半角セミコロン ;
    サイト移転時の自動ジャンプに使われる。
    大手ブラウザは対応しているがすべてが META タグを解釈するとは限らないので
    移動先へのリンクも沿えておくといい。
  • 移動先を指定しないと自分自身を指定した秒数後に読み込みなおす。
    <META HTTP-EQUIV="Refresh" CONTENT="10">
    CGIなどでページを更新する必要がある時以外は
    同じページを読み直すのはあまり使わないほうがいい。
    HTMLファイルを読み込みなおすのはあまり意味がない。
  • 待たずに即座にジャンプする。
    <META HTTP-EQUIV="Location" CONTENT="http://www.foo.com">

アイコン読み込み

LINK タグで指定したところにアイコン画像を置いておくと
ブックマークやURL表示のアイコンにこれが使われる。
ico は多分WIN版のIEしか対応してないだろう。
アイコンサイズは32×32か16x16ピクセル固定。32の場合は16の方に縮小される。
IE6ではアドレスバーには出ないがお気に入りのアイコンに表示される。

<HEAD>
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
</HEAD>

一般的な画像でのアイコンも使えるらしいがブラウザの対応がよくわからん。
とりあえずネスケ6では使えたがIE6はダメだった。両方書けばいいのかね。
アイコンサイズは16×16ピクセル。

<HEAD>
<LINK REL="icon" HREF="favicon.png" TYPE="image/png">
</HEAD>
<HEAD>
<LINK REL="icon" HREF="favicon.jpg" TYPE="image/jpeg">
</HEAD>
<HEAD>
<LINK REL="icon" HREF="favicon.gif" TYPE="image/gif">
</HEAD>

スタイルシート(css)読み込み

スタイルシートを記述したcssファイルを読み込む。

<HEAD>
<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">
</HEAD>

JavaScript(js)読み込み

JavaScriptを記述したjsファイルを読み込む。 IEではファイルの文字コードをシフトJISにしなければ読めない。

<SCRIPT LANGUAGE="JavaScript" SRC="jscript.js"></SCRIPT>

アンカー(リンク)

HTMLでページ間を移動するタグ。
TARGETを指定して新しいウィンドウを開いたり特定のウィンドウを更新できる。
頭に _ が付いている名前は特別な意味を持つ。

それ以外の名前を付けるとそのウィンドウ固有のIDとして
そのウィンドウが存在する間、そのIDを指定したアンカーはそのウィンドウにページを開く。
ブラウザによっては認識できないので自分で付けるTARGET名は半角英数字を使うことが望ましい。
ファイル名に日本語は使わないほうがいい。
IDを明示する方法は主に特定のフレーム内にページを開かせる場合に使う。
フレームとの連携については後述。

  • 基本
    TARGETを省略すると _self と同じ効果を持つ。
    今開いているウィンドウにページを開く。
    <A HREF="html.html">>アンカー</A>
    
    <A HREF="html.html" TARGET="_self">>アンカー</A>
  • ターゲット指定/新しいウィンドウを開く
    <A HREF="html.html" TARGET="_blank">>アンカー</A>
  • ターゲット指定/MYWINDOWというIDのウィンドウに開く
    そのウィンドウがなければ新しく開いてこのIDになる。
    <A HREF="html.html" TARGET="MYWINDOW">>アンカー</A>
  • ターゲット指定/フレームを一段だけ解除
    今開いているウィンドウのフレームを一段解除してからページを開く
    フレームに囲まれてなければ基本と同じ
    <A HREF="html.html" TARGET="_parent">>アンカー</A>
  • ターゲット指定/フレームをすべて解除
    今開いているウィンドウのフレームを全て解除してからページを開く
    フレームに囲まれてなければ基本と同じ
    <A HREF="html.html" TARGET="_top">>アンカー</A>
  • 同ページ内移動
    <A NAME="here">HTMLでページ間を移動するタグ。</A>
    上に NAME 属性で here というジャンプ先の名前をつけてある。
    アンカータグのURLに #here と付ければこのページの here とついた場所へジャンプする。
  • 別ページ内移動
    上の応用で違うページの指定ジャンプ先に移動させる。
    もちろん、移動するページには NAME でジャンプ先名が指定してなければいけない。
    これで「html.html というページの here というジャンプ先に飛べ」という意味になる。
    この場合は同じページになっているが # の前が移動先ページなので必要に応じて変える。
    <A HREF="html.html#here">>アンカー</A>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規新規下位 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-11-06 (日) 01:30:29 (2149d)