HTML Tips : funini.com

HTML / SSI

慣れちゃうとTeXよりWordより書きやすかったり。
とほほさんのとこなどによくまとまっているので、ここでは自分用の例だけを。

実体参照で色んな文字を表示する

HTMLでは、ページの文字コードに関わらず、&#数字;と書くことでUnicode (ユニコード)に含まれる文字を表示できます。 (数字のところには、utf-16の10進数や16進数での表記をそのまま書きます。16進数は頭にx付けて、8進数は0を付けて書きます) ソースコードを見ても訳が分かりませんが、ブラウザで見るとちゃんと文字が見れます。 unicodeは日本語だけでなく、世界中の言葉が入っているので、shift jisのページでも部分的に中国の漢字やハングルを表示できます。
とはいえ、UTF-16の文字コードなんて、覚えていませんよね。そこで、調べ方はこんな感じ。

何とかしてその時を出す。ネットで検索してもいいし、Wordの「記号と特殊文字」でもいい
その字をコピってUnicode (UTF-16)で保存。Windowsならメモ帳にコピったらいい
バイナリエディタ(例えばStirling)とか、 unixのhexdumpってコマンドで16進数でのコードを調べる
たとえば「慧」ってだけ書いたファイルなら"feff 6167" って出る。ここで、ここで始めの"feff"は、ファイルの先頭に付くダミーコードみたいなものらしい(utf16の識別子?)。で、後の"6167"という並びが"慧"のutf-16コード。
これをHTMLに書くときは、順番を変えて先頭に16進数を示す"x"を付ける。
"&x6167;"って感じに書くと、慧と出る。

調子乗ってkeïとか케이とか書くと楽しい。あ、IEだと"<html lang="ja">"と書いてると、日本語以外は□になっちゃうみたいです。

HTML

ヘッダ。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<link rel="STYLESHEET" href="スタイルシートの場所" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>タイトル</title>
</head>

移転しましたHTML(Metaリフレッシュ)

<html>
<head><meta http-equiv="refresh" content="3;url=移転ページのurl"></head>
<body>This page has <a href="移転ページのurl">moved</a></body>.
</html>

ログインできるなら、シンボリックリンクを作っても良いです。
あるいは.htaccessに以下のように書くほうがかっこいい!?
```
Redirect permanent /~kei/unix/apache-ssl.html  http://www.sodan.ecc.u-tokyo.ac.jp/~kei/unix/apache.html
```

SSI

実は色んなサーバーで使えるのに、意外と使われてないです。
うまく使えば、HTML書きにコピペいらなくなるかも。

更新日時関係

自分のファイルの更新日時は

<!--#echo var="LAST_MODIFIED"-->

でさくっと挿入できます。でも長い。
フォーマットを指定したいときは、

<!--#config timefmt="[%m/%d]" -->

という一文を表示する前に入れましょう。この設定は、日時を[月/日]のように表示します。
他のファイルでも、

 <!--#flastmod file="hoge.html" -->

とか書くと、hoge.htmlの更新日が[7/19]のように表示されます。
なお、フォーマット指定は文章中の好きな場所で設定できます。

SSIでLAST_MODIFIEDに書式が反映されない!

<#--config timefmt="%Y/%m/%d" >で書式を設定して、そのあと<   はだめで、

<!--#config timefmt="%Y/%m/%d" --><!--#echo var="LAST_MODIFIED" -->

はOK。

リンクのメニューを自動的に表示

複数のページからなるページで、左側にリンクを表示したいとき。コピペを多用するのも手だけど、「リンク部分だけのページ」を用意して、 #includeタグで挿入すると、ページが増えたときとかにちょっと楽。
でも、これだと自分自身へのリンクも表示されちゃってちょっとかっこ悪い。そこで、ファイル名を取得して、それによって表示を切り替えるようにしておく。切り替えには定数"DOCUMENT_NAME"と#ifが使える。
下はincludeとifとDOCUMENT_NAMEの例。

[main.html]
<html> <body>
MAIN: doc_name is <!--#echo var="DOCUMENT_NAME" -->.<br />
<!--#include file="inc.html" -->
</body> </html>

[inc.html]
INC: doc_name is <!--#echo var="DOCUMENT_NAME" -->.

表示結果

MAIN: doc_name is main.html.
INC: doc_name is main.html.

includeは、includされるファイルのSSIを処理する前に挿入を行うので、 inc.shtmlだった部分にあるDOCUMENT_NAMEもmain.shtmlになっている。
これを使って、以下のような分岐を書くと、かっこいいメニューができる。 (サーバ負荷はかかるかもしれないけど)

<!--#if expr="$DOCUMENT_NAME = top.html" -->
 トップにいます
<!--#else -->
 <a href="top.html">トップへのリンク</a>
<!--#endif -->

参考までに、僕が即席で書いた設定ファイルを読んでメニューを生成する Perlスクリプトです。
使ってる例はこことか。

.htaccess

httpサーバーとして広く使われている、Apacheの設定ファイルです。基本的な設定はhttpd.confに書かれていて管理者しか触れないのですが、管理者が許してくれれば普通のユーザーが.htaccessでそれを上書きできます。
Windowsな人には使いにくいと思うけど、(大体ファイル名が.からはじまるあたりて意味不明?) まぁ書くのは大抵決まりきったことです。

基本的な決まり

文法は「項目名値」の繰り返し。間はタブや半角スペースで区切る。ダブルクォートはメッセージ以外要らない
改行コードは(普通)LF (unix)
#の後の行はコメント
<hoge>fuga</hoge>となっていると、fugaという設定はhogeの中だけで有効

記述例。

[.htaccess] Options ExecCGI Indexes FollowSymLinks Includes DirectoryIndex hoge.html fuga.html index.html AddHandler cgi-script .cgi AddType text/html .html .shtm .sht AddHandler server-parsed .html .shtm .sht AuthUserFile /home/kei/public_html/auth-test/.htpasswd AuthGroupFile /dev/null AuthName "Hello, please enter your password!" AuthType Basic

<Files secret.html> require valid-user </Files>

ディレクトリのトップ(http://...../hoge/)として見えるファイルの設定

DirectoryIndexを適切に設定すると、ディレクトリのトップにindex.html以外のファイルを設定できます。
またファイル一覧を表示できるようにしたり、単に"Forbidden"と表示できます。

Options +Indexes
DirectoryIndex hoge.html index.html

こうすると、hoge.htmlがあれはhoge.htmlが、無ければindex.htmlが表示されます。それも無ければファイルの一覧が表示されます。

Options -Indexes
DirectoryIndex hoge.html index.html

こうすると、hoge.htmlもindex.htmlも無い時は、単にForbiddenと表示されます。

ディレクトリ単位でBasic認証

以下はBASIC認証する時
AuthUserFile /home/kei/[somewhere]/.htpasswd
AuthGroupFile /dev/null
AuthName "authoriaztion required"
AuthType Basic
require valid-user

認証がうまくいかない場合は

httpd.conf(Allow Overrideなど)
改行コード
パスワードファイルのパス・.htaccessのパーミッション

を確認。

ファイル単位でBasic認証

そのディレクトリのsecret.htmlだけにBasic認証をかける例。まずhtpasswdなどのツールを使って、/home/kei/public_html/auth-test/.htpasswd (パスは適当に決める)にパスワードファイルを準備します。

Options +Indexes

AuthUserFile /home/kei/public_html/auth-test/.htpasswd AuthGroupFile /dev/null AuthName "hogx" AuthType Basic

<Files secret.html> require valid-user </Files>

requireのあとに具体的なユーザー名を書いてもいいようです。

移転先のページへとばす(リダイレクト)

以下のように書くと、URL転送ができます。正規表現も使えるみたいです。

Redirect permanent /~kei/hoge.html  http://www.funini.com/~kei/hoge.html

飛ばし先はURLとして正しいものをかかないといけない!?らしい。