文字化け という症状には、これから悩まされることでしょう。パソコンでテストしてる時には問題ないのに、サーバーへ
アップロードしたホームページをブラウザで見ると読解不可能文字になってしまうなんて経験を積むことになります。
原因は「ＨＴＭＬで書いた文字コードとブラウザが解釈した文字コードが異なるとき」に発生します。ＨＴＭＬがshift-JISなのに
ブラウザがUTF-8と認識した場合です...とか言っても難解ですね。
原因は横に置いておいて、対処方法をマスターしましょうか。
■１■ 文字化け対処
<HEAD> と </HEAD> の間に下記の１行を加えるだけです。
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
|
サーバーによっては文字化け対処コードが変わります。こちらもお試し下さい。
<META HTTP-EQUIV="Content-Type" charset="UTF-8">
|
ＨＴＭＬ文の先頭から書けば、
<HTML><HEAD><META〜〜></HEAD><BODY〜〜>という流れになりますね。
アップロード後にホームページが何故か文字化けするって場合は大抵この１行で問題解決する筈です。
では、今まで作成中のＨＴＭＬ文に書き足してみましょうか。下記の通りです。
<HTML>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
<head/>
<BODY background="bg01.gif">
<center>
<FONT SIZE=5><FONT COLOR="BLUE">
私は YourNAME。これは私のホームページです。
<BR><BR>
<table border=8><TD>
<TABLE BORDER=1><TD>
<TABLE BORDER=2><td>
<img src="MSM.jpg"><br>
</td></TABLE>
</TD></TABLE>
</td></table>
</FONT></font>
</center>
<BR>
<DIV align="right">
<font color="green" size=4>
コンテンツを増やして行くのでご期待ください。
</font>
</DIV>
<center><table border=1>
<TR><TD> 名 前 </TD><TD bgcolor="#ffccff">Your NAME</TD></TR>
<TR><TD> 住 所 </TD><TD bgcolor="#ccffff">東京都中央区銀座1-2-3</TD></TR>
<TR><TD> 電 話 </TD><TD bgcolor="#ffffcc">03-1234-5678</TD></TR>
<TR><TD> メール </TD><TD bgcolor="#ccffcc"><A HREF="mailto:info@misteroz.net">
Your ADDRESS</TD></TR><TR><TD>お気に入り</TD><TD bgcolor=ccdd11>
<A HREF="https://misteroz.net/ozland/">遊園地</A>
</TD></TR>
</table>
</center>
</BODY>
</HTML>
|
文字化け防止タグを書き込んだら、また myHP フォルダに保存しておいて下さい。
■２■ 検索エンジン対策
<META> タグの便利機能に検索エンジン対応があります。
ロボット型検索エンジン （例えば、googleやBINGなど）はエンジン側でホームページを自動的に拾って行ってくれるタイプです。
それならキーワードを並べておいてロボットに拾ってもらおうって機能です。キーワードの数に制限はありませんが
７個繰り返させると無効になったり多すぎると登録不可だったりする場合もあるようですので厳選した言葉で記載しましょうね。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３">
|
ロボット検索エンジンは前方に記述されているキーワードを
より重要視する傾向があるようですから順番にはご配慮ください。
※但し、Googleでは、このタグの乱用が多くなったことで正しい検索結果が得られないと判断して、
meta keywordsを評価対象から外しているとのこと。この点を認識しましょう。
さて、反対に内緒のページが自動的に登録されたら困りますよね。そういうページでは 検索エンジン登録お断り技 を使いましょう。
上記の登録METAの代わりに下記の１行です。
<meta name="robots" content="none">
|
ついでに 画像の直リンクをお断り する技も伝授しておきましょう。素材屋さんや写真展示サイトをお考えなら必要になるでしょうね。
勝手に余所のサイトでオリジナル画像をリンク転載されない為の対応策です。
<meta name="robots" content="noimageclick">
|
■３■ 自動的ジャンプ技
一定の時間が経ったら自動的に別ページにジャンプする <META> 技です。
ホームページが他のＵＲＬに引越した場合や一時的にクローズした場合、アクセスして頂いた訪問者に
エラーメッセージを出させずに表示可能ページへ飛んでもらう技です。
下記のサンプルでは５秒後にＯＺ道場の表紙にジャンプする例です。
<meta http-equiv="refresh" content="5；
URL=https://misteroz.net/hpmaster/HPmaking.html">
|
冒頭にも書きましたが META タグは<HEAD>と</HEAD>の間に記載することをお忘れなく。
これらの META タグの使い方は中級編卒業には必要なスキルです。マスターしておきましょう。