1.準備
まずは準備をしましょう。下の図の通りにひな形を作ってください。
この教材では、HTMLファイルの作成に XHTML(Extensible HyperText Markup Language)を用います。 XHTMLとはXMLアプリケーションのひとつで、HTMLをXMLで再構築したものです。
XHTMLを使用することによるメリット
現在ではHTML・XHTML・XMLの3つの構造言語のうちXHTMLを使用するのが一般的とされています。
旧来のHTMLではなくXHTMLが使われるようになった背景としては、次のような事柄が挙げられます。
- データ処理の高速化
- ブラウザの安定動作を促進
- データの再利用が容易
- 情報共有性の促進
- 多様なデバイスへの対応
HTMLとXHTMLの相違点
- 要素名は必ず小文字で記述します。
- XHTMLでは、終了タグの省略が認められていません。
よって、<br>や<img>などの空要素タグは <br / >という風に
タグの最後に半角スペースと「/」(スラッシュ)をつける必要があります。
この教材で新たに使う宣言など
<?xml version="1.0" encoding="Shift_JIS">
これはXML宣言です。この宣言によって、XMLのバージョンと文字コードを指定しています。
XHTMLはXMLアプリケーションの1つであるため、文書の一番はじめにこの宣言が必要です。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
XHTMLでは、HTML要素に名前空間(namespace)と言語コードをこのように指定します。
<style type="text/css"> <!-- --></style>
この教材では問題ごとに記述するスタイルが異なるので、
外部ファイルは使わずHTMLファイルのhead要素内に直接スタイルを記述します。
これはスタイルを記述するための領域を指定するタグです。
また、"<!- -" "- ->"は
テキストをコメント化するためのもので、
この領域内に書いた文字・記号等はブラウザには表示されません。
XHTMLでは、使用するタグの種類等その用途によっては 画像の内容と異なる宣言をする必要がありますが、 ここではとりあえず画像の通りに記述してください。
また、問題を解くときは最初に「名前をつけて保存」で別名のファイルを作成して、
このひな形は残しておくようにしましょう。