第08回 - 09年度春学期
XHTML1.0の基本ルール
XHTML1.0を用いてウェブページを構築する訳ですが、まずは基本的なルールを確認します。XHTML1.0では、以下のようなルールがあります。
- タグと呼ばれる仕組みによって文書構造を示す
- 要素が書かれたで内容を必ず開始タグと終了タグで挟む（ただし、省略形があるものも存在する）
- 具体的には<要素>内容</要素>という形になる
- 全ての要素は英数小文字で書き表す
- 細かい属性については開始タグの中に書き入れる
これらは実際に実習で取り扱いながら習得してもらいます。
HTML文書の基本構造
基本的なHTML文書の構造は、以下のように全体を<html> </html> で囲い、その内側に<head></head>部分と、<body></body>部分を持つという形になります。
<html>
<head>
そのページの基本情報
</head>
<body>
そのページの本文
</body>
</html>
しかし実際にはこれほど単純ではなく、もっと多くの要素を記す必要があります。
HTML文書に必要な情報
この講義ではXHTML1.0という規格でHTMLの基礎を習得することを目的とします。この規格では、前述の情報のほかに、以下のような情報が必須となります。
文書型宣言
文書型宣言は、どんな枠組みでHTML文書を作成するかという宣言です。XHTML1.0では以下のように記します。
<!DOCTYPE htmk PUBLIC “-//W3C/DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
名前空間の宣言
利用するタグがどのような種類のものであるかを示すために、名前空間の宣言を行います。これはhtmlタグの中に書き込みます。
<html xmlns="http://www.w3.org/1999/xhtml">
ここまではXHTMLでHTML文書を作成するために必須の情報となります。本講義ではひな形のファイルにすでにこれらの情報が記されていますので、いじる必要はありません。
<head> </head>内にページの基本情報を記述する
<head> </head>で囲われた部分は、そのページの基本情報が記される部分です。ここにはさまざまな情報を書き記すことができますが、ここでは簡易的に必須となるいくつかの要素について解説を行います。
外部スタイルシートの指定
<link rel=“stylesheet” type=“text/css” media=“screen” href=“./style.css” />
ここでは公開用フォルダに外部スタイルシートが直接配置されることを想定しています。
タイトルの指定
ユーザが<head> </head>内で、もっとも意識する要素は、ページのタイトルでしょう。
タイトルはそのページを代表する文字列にするようにします。
<title>タイトルとなる文字列</title>
<head> </head>部分で皆さんが変更しなくてはならない部分はここだけです。必ずファイルごとに適切なタイトルをつけてください。
本文を書く
<body>タグで囲われた中に本文が入ります。本文は一つまたは複数のブロックレベル要素からなります。文書においてブロックレベル要素は、その名の通り、積み重ねられたブロックをイメージすると理解しやすいでしょう。
ブロックレベル要素は文書を構成する基本的な要素を宣言するものだと思ってください。見出しや段落、箇条書き部分、表組み部分などは、どれもブロックレベル要素です。これらのブロックが積み重ねられたものが、ひとつの文書になる訳です。
例としては以下のようになります。
[＊＊＊＊ブロックベル要素１＊＊＊＊]（大見出し）
[＊＊＊＊ブロックベル要素２＊＊＊＊]（段落）
[＊＊＊＊ブロックベル要素３＊＊＊＊]（段落）
[＊＊＊＊ブロックベル要素４＊＊＊＊]（中見出し）
[＊＊＊＊ブロックベル要素５＊＊＊＊]（段落）
文書はこのように複数のブロックレベル要素からなり、その要素要素間には改行が入ります。
雛形にはいくつかのブロック要素を構成するタグが記入されています。自由に改変して表示を確認しましょう。
ブロックレベル要素を構成するタグ
見出しを構成するタグ
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
見出しの大きさによって使い分けます。<h1>大見出し</h1>は一つの文書に一回だけしか使ってはいけません。
段落を構成するタグ
<p> 段落を構成する文章 </p>
もっとも多く使われるタグでしょう。本文にあたる文章は、多くの場合複数の段落からできています。それぞれの段落の前後には<p>と</p>を入れましょう。
引用段落を構成するタグ
<blockquote> 引用部分 </blockquote>
本文の中に、書籍やウェブページからの引用をおこなう場合には、ほかの文章と違うことを明確にし、引用であることをはっきりとさせなくてはなりません。そのためにはこのタグを用います。
箇条書き部分を構成するタグ
<ol>
<ul>
箇条書きには大きく分けて二種類の箇条書き方法があります。それは「番号つき箇条書き」と「番号なし箇条書き」です。
記述は次のようになります。
<ol>
<li>お湯を沸かす</li>
<li>塩を入れる</li>
<li>パスタを投入する</li>
</ol>
実際の表示は次のようになります。
- お湯を沸かす
- 塩を入れる
- パスタを投入する
このように、項目の順番に意味があるものについては、番号つき箇条書きを選び、そうでない場合には番号なし箇条書きを選びます。
- りんご
- ばなな
- みかん
これらのタグは、箇条書き部分の開始と終了を示します。それぞれの項目は別途「<li>」タグを用います。
箇条書きの要素を構成するタグ
<li>
箇条書きの項目を作成するのに使います。
セパレータを構成するタグ
<hr />
本来ならば
<hr></hr>
と書きますが、省略形（開始タグの最後に「半角スペース+スラッシュ」）が用いられます。
連絡先部分を構成するタグ
<address>
表組み部分を構成するタグ
<table>
<dr>
<td>
どんどん文章を書こう
ここまでが大まかな文書の構成要素です。文章をどんどん書いて、必要な説明をすべて終えてください。次に、リンクを設定したり、画像を挿入したりという作業がありますが、それらは「インライン要素」といって、文章の一部に属性を付け加えるというタイプのタグです。したがって、まずは文章が全体的に完成されていない限り、設定をすることができません。
この時点でそれぞれのファイルに、すべての文章が完成していることが前提になります。
インライン要素
強調
<em>
<strong>
ハイパーリンク
ハイパーリンクはWebの構成上、重要な要素です。リンクなしにはWebページは成立しないといってもよいほどです。ハイパーリンクは、下のようなタグを使って作成します。
URIの部分には、完全なURIを用いた「絶対リンク」と、そのファイルから相対的なファイルの位置を記す「相対リンク」があります。この講義では「絶対リンク」のみを用います。
- 絶対リンク
絶対リンクでは、URIの部分に、http:// で始まる完全なURIを入力します。たとえば、Yahoo! Japanにリンクをおこないたい場合には、
<a href="http://www.yahoo.co.jp/">Yahoo! Japan</a>
と書きます。
- 相対リンク
相対リンクは、そのファイルから見て、リンク先が同一サーバ上のどの位置にあるかを記述したものです。この場合、「ファイルから見てどのような相対的な位置にあるか」ということが重要になります。
画像の挿入
画像の挿入には、以下のフォーマットを利用します。
<img src="URI" width="幅（ピクセル）" height="高さ（ピクセル）" alt="説明" />
幅や高さは、画像を右クリックし、プロパティ＞概要 で確認することができます。画像の大きさを変更する場合などは、http://www.snipshot.com/などのサービスを利用すると良いでしょう。
また、画像には回り込みを設定するためのalign要素はXHTMLでは非推奨となりました。スタイルシートで回り込みを設定してください。
Webを作成する際には、まず素材となる文章、画像などのエレメントを事前に用意しておくことが大事になってきます。しかし、画像などは引用の範囲での利用とはいえ、別URLからそのままダウンロードして掲示を行うと、場合によっては問題になることが多いため、きちんと使用許諾に即したものを使用し、許諾が得られないような場合には画像を直接掲示するのではなく、リンク先を参照するように記述する方が安全です。
