HTMLタグのカンニング集

日本語環境ではJIS S-JIS EUC等いろいろな文字コードがありますが、ブラウザーでは通常自動判別の機能でコードを認識して文字化けが起こらないようになっています。
しかし、ブラウザーが自動判別に設定されていなかったり、自動判別がうまく機能しなくて文字コードを間違って解釈することもあります。
特にS-JISでHTMLを書いて、CGIはEUCを使っている時などは起こりやすいそうです。
これを防ぐためには、HTMLのMETAタグでこのページはどんな文字コードを使って書かれているかを記述しておけば良いそうです。
方法は、簡単 <HEAD>と</HEAD>の間に以下のタグを記述して下さい。 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-2022-jp">

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">
OR
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-euc-jp">
OR
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=EUC-JP">

charsetが文字コードを表していますので使っている文字コードと同じ物を記述して下さい。
通常WindowsやMacでは x-sjis、UNIXではeucが標準で使われています。
FTPソフトなどでは、転送時にコード変換する物もありますので注意して下さい。

<PRE>タグ

ソース ブラウザーの表示
<PRE>タグの無い場合 <BR>タグを打たないで普通にテキストを書いていくと、いつまでも繋がって改行されません。
<PRE>タグで囲んだ場合 <PRE>タグで囲まれた文字はエディタの固定ピッチフォントで、書いた通りに改行し、スペースもそのまま表示される。また、改行していないところは折り返されない。

罫線の種類

ソース ブラウザーの表示
<HR>
<HR NOSHADE>
<HR SIZE=1>
<HR SIZE=5>
<HR SIZE=10>
<HR WIDTH=100>
<HR WIDTH=50%>
<HR WIDTH=50% ALIGN=LEFT>
<HR WIDTH=50% ALIGN=RIGHT>
<HR COLOR=RED>
<HR COLOR=*****> はMSIE3以降のみサポートされています。

リストのタグの種類

ソース ブラウザーの表示
<LI>項目1 <LI>項目2
  • 項目１
  • 項目２
    • <UL>
    <LI>項目1
    <LI>項目2
    </UL>
    • 項目１
    • 項目２
    <OL>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <OL TYPE=1>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <OL TYPE=A>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <OL TYPE=a>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <OL TYPE=i>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <OL TYPE=I>
    <LI>項目1
    <LI>項目2
    </OL>
    1. 項目１
    2. 項目２
    <DL>
    <DT>見出し1
    <DD>項目1
    <DD>項目2
    <DT>見出し2
    <DD>項目1
    <DD>項目2
    </DL>
    見出し1
    項目１
    項目２
    見出し2
    項目１
    項目２

    リンクを張る

    <A></A>タグは文字でも画像でも挟むとリンクになる。
    リンクされた文字はデフォルトで下線が付き、この文字がリンクであることが分かるようになっている。
    文字の色もあらかじめ<BODY>タグで指定した色になる。<BODY>タグで指定が無いときは、ブラウザーのデフォルトのリンク色が使用さる。
    <A HREF="sample.html">リンクするテキスト</A>
    画像にリンクを張る場合はイメージタグをリンクで挟む
    <A HREF="sample.html"><IMG SRC="sample.gif"></A>
    HREF=" "の中にはリンク先の場所を入れます。
    ほとんど(つまりUNIX)のサーバーは英語の大文字小文字を区別するから、間違えないようにしてね。
    間違いの無いようにファイル名はすべて小文字にしている人も多いんだ。そうすると、このファイルは大文字だったっけ？？何て事がなくなるんだ。 FTPソフトによってはアップロードするとき強制的にすべてのファイル名を小文字にしてくれる機能もあるんだよ！

    絶対パス、相対パス

    場所の指定は絶対パスか相対パスで指定する。

    絶対パスとは、http://wwwから始まる指定の方法で、基本的にはサーバー名の後に"/"と"~"そしてあなたのIDと"/"と"*****.html"いう形になります。

    相対パスは、リンクを張ったファイルから見てリンク先がどこにあるかを指定する書き方になります。

    今、右下図の様な構成のAAAフォルダにある"std．html" からリンクを張るとすると、
    自分と同じフォルダーにあるファイルはそのままファイル名を書く、
    自分のフォルダーの下にあるファイルを指定するには、フォルダー名に続けてファイル名を書く！
    自分の親フォルダーを指定するには"．．/"を書く。
    まとめると左下のようになる。
    TOPフォルダ
    top.html
    AAAフォルダ BBBフォルダ
    std.html
    aaa.html
    CCC
    フォルダ
    ccc.html

    bbb.html
    DDD
    フォルダ
    ddd.html
    左の図の様な構成になっていたとして、
    std．htmlから見た相対位置はこうなる。
    ｔｏｐ．html ．．/ｔｏｐ．html
    ａａａ．html ａａａ．html
    ｃｃｃ．html ＣＣＣ/ｃｃｃ．html
    ｂｂｂ．html ．．/ＢＢＢ/ｂｂｂ．html
    ｄｄｄ．html ．．/ＢＢＢ/ＤＤＤ/ｄｄｄ．html

    表示画面の分割 　　<FRAMESET >

    ブラウザーの表示画面の中を分割して、別々のページを表示するにはFRAMEタグを使います。 FRAME は上下でも左右でも、さらに３分割・４分割というようにいくつでも分割することができます。
    フレームを上下に分割するには、ROWSを、左右に分割するには、COLSを使います。
    フレームセットはネストする（入れ子にする）ことにより、 複雑なレイアウトをする事も可能です。
    フレームを作るには、フレームの指示するhtmlとそのフレーム１つ１つのhtmlが必要になります。
    つまり、２分割する場合３つのhtmlが必要になります
    ソース ブラウザーの表示 
    <FRAMESET ROWS="60%,40%">
<FRAME SRC="frame1.html" NAME="frame1">
<FRAME SRC="frame2.html" NAME="frame2">
</FRAMESET>

    　　　Frame１　　　
    　　　Frame２　 
    <FRAMESET COLS="40%,60%">
<FRAME SRC="frame1.html" NAME="frame1">
<FRAME SRC="frame2.html" NAME="frame2">
</FRAMESET>

    Frame

    １
    　Frame２　
    		 
    <FRAMESET ROWS="30%,70%">
<FRAME SRC="frame1.html" NAME="frame1">
<FRAMESET COLS="40%,60%">
<FRAME SRC="frame2.html" NAME="frame2">
<FRAME SRC="frame3.html" NAME="frame3">
</FRAMESET>
</FRAMESET>

    　　　Frame１　　　

    Frame

    　２
    　Frame３　    		 
    <FRAMESET COLS="40%,60%">
<FRAME SRC="frame1.html" NAME="frame1">
<FRAMESET ROWS="40%,60%">
<FRAME SRC="frame2.html" NAME="frame2">
<FRAME SRC="frame3.html" NAME="frame3">
</FRAMESET>
</FRAMESET>

    Frame

    　１

    　Frame２

    　Frame３　

    特定のフレームにリンクする。

    フレームの中でリンクを使う場合、どのフレームにリンク先のページを表示するかを指定する事が出来ます。また、新しいウインドウを作ってそこにリンク先を表示する事もできます
    <A HREF="target.html" TARGET="****" >リンクするテキスト</A>
    この****のところにいれるオプションによってリンク先を自由自在に操れます。
    _blank 新しいウインドウを開いてそこにリンク先のページを表示します
    _parent 親フレームに表示します。 フレームをネストしたときに使います。
    _self 同じフレーム内に表示します
    _top ウインドウ前面に表示します。 フレームを解除するときに使います。
    フレーム名 特定のフレームに表示するときに使います。
    フレーム名はフレームセットのNAMEに指定した名前を使います。
    frame1 frame2
    frame3
    たとえばこんなフレームがあったとします。 "frame3"に同一フォルダー内にある"text1.html"を表示するためにはこう書きます。
    <A HREF="text1.html" TARGET="frame3" >フレーム３に表示します</A>
    新しいウインドウに表示する場合はこう書きます。
    <A HREF="text1.html" TARGET="_blank" >新しいウインドウに表示します</A>

    ページの中の特定の位置にジャンプする

    リンク先は特定のファイルだけとは限りません。ページの中の特定の位置にジャンプする事も可能です。
    特に一枚のページにいろいろな項目がある場合は便利な機能です。
    特定の場所にジャンプするためにはジャンプ先に目印が必要です。目印を付けるにもアンカータグ<A>を使います
    たとえばページの先頭に目印を置いてページを下まで読み進んだときにすぐにページの先頭にジャンプする場合などに良く使われます
    目印の場所に下のようにアンカータグを置きます。
    <A NAME="toppage" >ここはtop pageです</A>
    NAMEには好きな名前をつけられます。
    空白行に目印を付けるときには、次ようにテキストを空にしても大丈夫です。
    <A NAME="point1" ></A>
    そして、目印にジャンプするにはリンク先を目印の名前の前に"#"を付けたものにします。
    上記の目印にジャンプするにはこのようにタグをつけます。
    <A HREF="#point1" TARGET="_blank" >point1にジャンプします</A>

    文字をスクロールさせる

    <MARQUEE SCROLLAMOUNT="オプションを指定">動かすテキスト</MARQUEE>
    オプションには、数値を直接指定する。数値が大きいほど速い。

    scrollamount=2　　　 scrollamount=5　　 scrollamount=10　　　　 scrollamount=20　　　

    遅くする場合は
    <MARQUEE SCROLLDELAY="オプションを指定">動かすテキスト</MARQUEE>
    オプションには、数値を直接指定する。数値が大きいほど遅くなる

    scrolldelay=50 scrolldelay=100 scrolldelay=200 scrolldelay=400

    ＨＴＭＬのタグをそのまま表示させる

    通常、ＨＴＭＬのタグをそのまま表示させることはできませんが、 ＸＭＰタグ（整形テキスト）を使うことで可能になります。

    表示例

    <font color="#FF0000" size="5">整形テキスト

    記述例

    <XMP><FONT SIZE="5" COLOR="#FF0000">整形テキスト</FONT></XMP>

    備考

    ＸＭＰタグの上下は強制的に改行されます。

    自動的にページを移動させる

    リンクをクリックしたりせずに自動的に次のページに移動する方法です。この技を連続して使うことでちょっとしたアニメの様な効果を出すこともできます。

    記述例

    <META HTTP-EQUIV="refresh" CONTENT="5;URL=abc.html">

    備考

    METAタグはＨＴＭＬファイルの一番最初に記述します。
    CONTENTの値は、次のＨＴＭＬファイルを読み込むまでの時間（秒）と次のＨＴＭＬファイルのファイル名です。

    全ての環境とブラウザーで聴けるＢＧＭを流す

    ＢＧＭを流す方法はいくつかありますが、ブラウザーやプラグインなどによって記述方法が違います。IEでは聴けるがNNでは聴けなかったり、その逆もあったりと頭を悩ませるところです。
    そこで、環境を問わず聴けるようにする方法を紹介します。

    記述例

    <OBJECT>
    <embed src="abc.mid" width=200 height=60 autostart=true loop=true repeat=true volume=50 control=console panel=0>
    </OBJECT>
    <BGSOUND SRC="abc.mid" LOOP=INFINITE>

    備考

    embedタグでは、いろいろなプラグインに対応させる為、あらゆる属性を付けています。
    IEの場合は、BGSOUNDタグを実行します。OBJECTタグは、IEにEMBEDタグを無視させるためのダミーです。

    メールの件名を指定する
    ＆
    複数のアドレスへメールを送信する

    リンクタグで mailto: を使ってメールアドレスにリンクする際に、メールの件名（Subject）を指定したり、カーボンコピー（Cc）やブラインドカーボンコピー（Bcc）を指定する方法を紹介します。ただし、IE3.0に添付のInternet Mailでは、うまく動作しません。

    表示例

    メールをください

    記述例

    <A HREF="mailto:test@samp.co.jp?subject=Hello&cc=abc@test.ne.jp&bcc=xyz@test.or.jp">メールをください</A>

    備考

    通常は「mailto:」の後ろにメールアドレスを記述するだけですが、？マークに続けて、メールの件名やCcのアドレスを指定することもできます。
    また、カンマ（,）で区切って複数のアドレスを指定することもできます。
    尚、件名に日本語を使用すると、うまくいかないことがあります。