次のものを「メモ帳」などにコピー&ペーストしてください:
<!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>私のホームページ</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>私のホームページ</h1> <p>工事中</p> </body> </html>
(上の雛形には今は必要でない部分も入っています。次のCSSのところで説明します)。
保存するとき,文字コード(エンコーディング)は UTF-8 にして,index.html
というファイル名で保存してください。
もし文字コードを UTF-8 にできなければ,シフトJISまたは EUC-JP で保存して,上の UTF-8
の部分をそれぞれ Shift_JIS または EUC-JP にしてください。
これは環境によって方法が変わりますので,授業でやりましょう。
FFFTP や WinSCP などでサーバ側の index.html
をダブルクリックして見えるものは,本物ではありません。そもそもファイルをダブルクリックするのは危険ですのでやめましょう。
ブラウザのアドレス欄に http://サーバ名/~ユーザ名/ のような形式で打ち込んで見えるのが,本物のページです。
例えば oku1.edu.mie-u.ac.jp というサーバで e123456 というユーザのホームページのアドレスは次のようになります。
http://oku1.edu.mie-u.ac.jp/~e123456/
この波印 ~ は「チルダ」または「ティルデ」(tilde)とも読みます。標準的な日本語キーボードではShiftを押しながら「へ」のキーを打つと出ます。
アドレスを打ち込むとき,先頭の http://
は省略してかまいません。アドレスを打ち込んだら Enter キーを打ちます。
XHTML(Extensible HyperText Markup Language)は,従来から使われてきた HTML(HyperText Markup Language)を,構造化された情報を表すための新しい言語 XML(Extensible Markup Language)としても解釈できるように厳密化したものです。
ここで学んでいる XHTML 1.0 は World Wide Web Consortium(W3C)が2000年1月に定めたものです。実際に作られたのはそれより少し前なので,XHTML のヘッダには 1999 という数が現れます。
<!DOCTYPE ...> の前に
<?xml version="1.0" encoding="UTF-8"?>
のような行を付けると書いてある本もあります。しかし,これを付けると,Internet Explorer 6 で古い表示モードに逆戻りしてしまうというバグがあるので,当面は付けないほうが安全です。これを付けなくても ,文字コードが UTF-8 の場合に限れば,XHTML に合致します。
以上は XHTML 1.0 の書き方です。XHTML 1.1 にするには最初の行を次のようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
次の行は HTML5 になってから解説しようと思っていたのですが,とりあえずこれがあればiPhoneやiPod touchやAndroidでも横スクロールがなくなって見やすくなります。
<meta name="viewport" content="width=device-width" />
ただし横に長い pre がある場合は行の最後が欠けてしまいますので要注意です。
Last modified: 2011-08-10 13:31:57