16.3.2. 基本的な文書の書き方
HTML を使って最低限の文書を書く方法を説明します。まだ見栄えはいじれませんが、このページで説明したことを使えば最低限のウェブサイトが作れます。
タイトル #
文書のタイトルとは、ブラウザのタイトルバーに表示される文字列のことです。今皆さんが見ているこのページのタイトルは「17.4.2 基本的な文書の書き方」です。タイトルを指定するには head 要素内に title タグを使って記述します。たとえば
と書いておくと、ブラウザのタイトルバーには次のように表示されます。
検索エンジンが結果を表示するときもタイトルをまず表示します。タイトルはウェブページを見る人が真っ先に目にするものですから、適切に定めなければいけません。たとえばタイトルを書かないとその文書は「名無し」になってしまい、検索で引っかかりづらくなるなどのデメリットをこうむってしまいます。
段落 (Paragraph) #
段落というのは、いわゆる地の文に相当します。
ソース
みなさん宜しくお願いします。
出力みなさん宜しくお願いします。
p 要素の中には見出しや引用など、文章のまとまった構造を表す要素(ブロックレベル要素)は一切書いてはいけません。回りくどい表現ですが、HTML における段落とは「見出し、引用、奥付、etc. などのいずれにも該当しない、ある程度まとまった意味を持った文章の集まり」ということになります。基本的に「地の文は p タグで囲む」という覚えておけば OK です。
見出し (Heading) #
文書の見出しをつけるには h1, h2, …, h6 という要素を使います。後ろの数字は見出しのレベルを表していて、h1 が一番上位の見出し、h6 が一番下位の見出しを意味します。たとえば皆さんが HTML ファイルの中に
東大太郎の自己紹介
と書くと、h1 タグで囲った文字が大きく表示されるはずです。このページでも見出しは使われています。たとえば一番上に大きく出ている「16.4.3 基本的な文書の書き方」は h1 要素、すぐ上にある帯で書かれた「見出し (Heading)」は h2 要素です。
なお、大抵のブラウザでは h1 要素を大きく表示し、h1, h2, …, h6と進むにつれて文字が小さく表示されるようになっています。見た目については 16.4. CSS の書き方 で説明するスタイルシートを使えば自由に変更できます。ですので見出しの強さを文字の大きさではなく色などで表現することも可能です。
ハイパーリンク #
ハイパーリンクは a 要素によって表します。例えばはいぱーワークブックにリンクするときは、次のように書きます。
ソース
これではいぱーワークブックへのリンクが貼れました。簡単ですね。ここで、a タグで囲った文字列のことを始点アンカー、リンクの行き先のことを終点アンカーといいます。今の例では始点アンカーは「はいぱーワークブック」と いう文字列ですが、後述する img 要素を使うと始点アンカーとして画像を指定することもできます。また終点アンカーも HTML 文書に限りません。画像や動画や音声などにリンクを貼ることも可能です。
リンク先の URL を指定する際、リンク先の URL が示す場所とリンクを貼る文書が同一サーバ上にある場合は、URL の代わりにリンク先の場所の絶対パス / 相対パスを書くことができます。たとえば、リンクを貼る文書と同じディレクトリにある test.html というウェブページにリンクを貼るには
と書くだけですみます。
同一ページ内のリンク #
同一のウェブページ内でリンクを張ることもできます。それにはまず、終点アンカーを次のように指定します。なお tag と書いたのは、ソース中にそのまま
こうすると、始点アンカーをクリックしたときに anchor のある場所まで移動することができます。具体的な例を見てみましょう。実はこのページの一番上にある「タイトル」という見出しに
タイトル
という風にアンカーを設定しておきました。次のリンクをクリックするとページの上の見出しにジャンプします。やってみてください。
ソース
タイトル出力
もちろん h1 以外のタグでも id 属性を指定すればアンカーになります。この機能は長いページの目次を作成したりするときに有効です。ちなみに
ソース
タイトルの書き方出力
のようにすると、リンク先のページ内にあるアンカーを指定することができます。
画像の埋め込み #
HTML 文書では文書本体と画像のファイルを独立に用意します。そして HTML 文書中で画像を表示するときは、画像を表示させたい位置で img 要素を用いて画像を HTML 文書の中に埋め込みます。例えば、はいぱーワークブックのロゴの URL は http://hwb.ecc.u-tokyo.ac.jp/current/image/hwb3.png です。これを埋め込むには次のように書きます。
ソース
出力
このように src 属性で画像の URL を指定します。img 要素は内容を持たない要素ですので終了タグは書きません。alt 属性で指定するものは、画像を表示できないブラウザが画像の代わりに表示する文字列です。例えばテキストのみのブラウザや音声読み上げブラウザがこ の属性を利用します。また画像を表示できるブラウザでは、画像の上にマウスを持っていくと alt 属性で指定されたテキストが表示されます。