準備・基礎問題

  1. 準備
  2. 枠線の指定
  3. テキストの寄せ・
    領域の指定
  4. 確認問題

1.準備

まずは準備をしましょう。下の図の通りにひな形を作ってください。
ひな形

この教材では、HTMLファイルの作成に XHTML(Extensible HyperText Markup Language)を用います。 XHTMLとはXMLアプリケーションのひとつで、HTMLをXMLで再構築したものです。

XHTMLを使用することによるメリット

現在ではHTML・XHTML・XMLの3つの構造言語のうちXHTMLを使用するのが一般的とされています。
旧来のHTMLではなくXHTMLが使われるようになった背景としては、次のような事柄が挙げられます。

HTMLとXHTMLの相違点

この教材で新たに使う宣言など

<?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では、使用するタグの種類等その用途によっては 画像の内容と異なる宣言をする必要がありますが、 ここではとりあえず画像の通りに記述してください。

また、問題を解くときは最初に「名前をつけて保存」で別名のファイルを作成して、
このひな形は残しておくようにしましょう。

「2.枠線の指定」へ進む