XHTMLの基礎の基礎


XHTMLを書いてみよう！

前ページでソースを見て「難しい」と思った人、実はそんなに難しくないのですよ＾＾


さて、前ページで用意しておいた「エディタ」を使って試しに簡単なページを作ってみましょう。
以下の背景が灰色の部分をエディタにコピー＆ペーストして、これまた用意しておいた作業用フォルダにtest.htmlという名前で保存して下さい。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>サイトのタイトルを書く部分です。</title>
</head>
<body>
<p>
ここに書いた文字がブラウザで表示されるんですねぇ。
好きなところで改行させるには<br/>
って書けばOK。
</p>
</body>
</html>

これだけです。こんなに短くてOKなんですよ！


次は、保存したファイルをブラウザ(InternetExplorerやFireFox等)で開いてみましょう。 ファイルをダブルクリックすれば開けるはずです。
開くと以下のように表示されると思います。
サンプル画面


次からは、どこに何を書けばいいのかを順番に説明していきます。


html

もうタイトルで分かっているかと思いますが、htmlがここでのキーワードです。
HTMLファイルは<html>で始まり、</html>で終わります。 深く考えずに「必ず書かなきゃいけないもの」って思っておいて下さい。


さて、<html>で始まりとか書いてるのに実際は違うじゃないかと思った方も多いはず。 実際に上の例でも<html>の前に何行か別のことが書いてありますよね。
<xmlで始まる1行目と<!DOCTYPEで始まる2行目なんですが、今はこれも「必ず書かなきゃいけないもの」って思っていてください。
これにはそれぞれ意味があるんですが、今説明してもさっぱりだと思うので、新しいページを作るたびにとりあえず全部コピー＆ペーストして、これから下で説明する部分を書き換えて使って下さい。
この辺りはWebサイト製作に慣れてきた頃に自分で調べてみましょう＾＾


headとtitle

headとtitleがここでのキーワードです。

まずはheadから説明を。
headというのは「そのページの決まりごと」を色々書くところ思っておいて下さい。 書き方は、<head>と</head>に下で説明するtitle等を書きます。 (他にも色々書くことが出来ますが、それはおいおい。)


次にtitleから説明を。
titleというのは「そのページのタイトル」を書くところだと思っておいて下さい。 書き方は、<title>と</title>で囲まれた部分にタイトルとなる文字を書くだけです。 ここに書いたタイトルは、ブラウザの一番上(下に表示されている画像の赤枠で囲われた部分)に表示されます。
titleに書いた文字が表示される場所


body

bodyがここでのキーワードです。
bodyというのは、「実際に表示されるページの本文」を書くところです。 ここに書いたものがブラウザ上に表示されるというわけです。
書き方は、<body>と</body>で囲まれた部分に、ブラウザに表示したいものを書くだけです。


つまり、さっき上に書いたサンプルをコピー＆ペーストして、タイトルと本文を自分の作りたいものに書き換えるだけで完成なのです。 どうです、簡単でしょう？
あと、文を途中で改行したいなぁという時は、
<br/>
と書くと、<br/>の直後に改行が入ります。


(補足)
ソースに書いてるのに説明されてない<p>と</p>ってなんだ？と思うかもしれません。 pとは段落(paragraph)のことです。 つまり<p>と</p>で囲まれたところで1つの段落ということです。

XHTMLでは<body>と</body>の間に表示させたい文字を直接書かないという約束になっています。 それでここでは<p>と</p>で囲んでいます。 かならずpでないといけないというわけではないので勘違いしないようにお願いします。 p以外についてはもっと後の方で説明します。


ちょっと用語説明

この後の説明を簡単にする為に、1つ用語を説明しておきます。
さっき説明したbodyもtitleもpもみんな < と > に挟まれていますよね？

<と>に挟まれたこのかたまりのことを「タグ」といいます。

<title>はtitleタグ、<body>はbodyタグというわけです。
色んなHTMLについて説明しているサイトにいくと必ず出てくる用語なので、覚えておきましょう。 また、今後の説明で〜タグといったら、<と>で〜が挟まれたものだ！と思ってくださいね。


後で見たとき分かりやすいように

HTMLってのは、自分が作ったものであっても時間がたってからソースを見ると「これなんだっけ？」ということになることがあります。 そこで重要なのが「コメント」です。

プログラムを勉強したことがある方にはなじみがあるかと思いますが、そうでない方の為に説明を。
「コメント」とは、実際にWebページ上には表示されないがソース上に書いておくことが出来るメモのようなものです。 例えば、「ここから下はメニューですよ」とか書いておくことが出来るのです。

HTMLでの書き方は以下。


<!--何かコメント-->


「<!--」で始まり次に「-->」がくるまでは全てコメントとして扱われます。(つまりブラウザには表示されない。) 間に改行がはさまれていても、タグがあってもＯＫです。

ただ、「ブラウザ右クリック→ソースを表示」とやるとソースが全部見えて、もちろんコメント部分も見えるので、パスワードとか秘密の情報は書かないようにしましょう！ あくまで補助的なメモとして使ってくださいね。


もうちょっと楽しいページを作ろう

とりあえずWebページは作れるようになりました。
ただ、恐らくここでちょっと疑問が浮かんでくるかと思います。 それは。。。

  • 画像とか表みたいなものはどうやって書いたら表示されるの？
  • 背景の色や文字の大きさや色も変えたい。
  • クリックすると他のページが表示される「リンク」ってどうやって作るの？

やっぱり同じ色の文字がず〜〜っとならんだ文章だけでは面白くないですよね。
まずは、画像が入ったページの作り方を次のページで説明していきます。