たのしいXML: HTMLからXHTMLへ(サンプル)

HTMLからXHTMLへ(サンプル)

2001年12月9日(日)更新

■XHTMLの基本構成

さらら: ねぇ、たけち。今回はHTMLをXHTMLに書き換えるのを具体的に教えてくれるんでしょ。

たけち: あっ、そうだったね。じゃあ、まずXHTMLの書き方の基本形をみてみようね。

XHTMLの構成

さらら: あんまり見慣れない文字が並んでいるわ・・・ (^ ^;

たけち: そうだね。でも、心配しなくってもいいよ。５行目まではだいたいいつも同じようなことを書くんだから。次にそれぞれについて簡単に説明しておくね。

１行目: XML宣言

このドキュメントがXMLに準拠していることを示します。XHTMLはXMLに準拠していますから当然ですね。versionは、"1.0"です。encodingは、このドキュメントが、どの文字コードで表現されているかを示します。

XMLでは、UTF-8, UTF-16が使用されますが、Microsoft環境ですと"Shift_JIS"でも可能です。

２行目～４行目: DOCTYPE宣言(実際には１行で書いてください)

きちんとXHTMLとしての書き方に従う必要がありますが、この書き方のルールがどこに存在するかをこのDOCTYPE宣言が示しています。

５行目: XHTML名前空間

ここでは、従来のhtmlの要素名や属性名がそのまま使える事を示しています。

さらら: ねぇ、「名前空間」ってなぁに??

たけち: あっ、名前空間(namespace)についてはXHTMLを書いてみましょう(Namespaceってなあに?)で説明するね。

さらら: うんと・・・じゃあ、XHTML Transitionalって何?

たけち: あっ、これは、HTML 4.0の時からすでにあるんだけどね。それ以前のHTMLでは使用可能だった以下のような要素や属性がHTML 4.0で「Deprecated(推奨しない、あまりおすすめしない)」とされたんだ。

[ HTML 4.0 Strictで削除された要素や属性 ]

要素(タグ)
CENTER、FONTなど
属性
BODY要素のbackground, bgcolor, text, vlink, alink属性
HR要素のwidth, size属性
その他

さらら: ふ～ん。でも、どうして使っちゃいけないの?

たけち: それはね。「見栄えに関するタグや属性を無くして、論理的な構造をHTMLで表現し、見栄えについてはスタイルシートで指定するようにしましょう。」ということなんだね。
で、この考えに基づいたHTML 4.0がHTML 4.0 StrictでこのStrictからは上でリストしたの要素や属性が削除されているんだ。"Strict"は「厳密な」という意味だよ。

さらら: そうなんだ。で、これまでのHTMLの要素や属性が使える"Transitional"があるってことなのね。

たけち: そうそう。

■サンプルのHTMLドキュメント

たけち: ちょっと前置きが長くなっちゃったから、そろそろサンプルのHTMLを見てみようね。

さらら: は～い。

たけち: 次のサンプルはかなり前に作った万葉集の歌の紹介の一つだよ。

たのしい万葉集(3834): 梨棗黍に粟つぎ延ふ葛の

たのしい万葉集(3834)

たのしい万葉集(3834)のHTMLドキュメントリスト
<HTML> <HEAD> <TITLE>たのしい万葉集(3834): 梨棗黍に粟つぎ延ふ葛の</TITLE> <LINK REL=STYLESHEET TYPE=TEXT/CSS HREF="poemstyle.css"> </HEAD> <BODY> <H3 ALIGN=CENTER>第十六巻 : 梨棗黍に粟つぎ延ふ葛の</H3> <TABLE ALIGN=CENTER WIDTH=500> <TR><TD> <P ALIGN=RIGHT>平成９年１１月３０日(日)更新 </TR> </TABLE> <HR ALIGN=CENTER WIDTH=480 SIZE=5> <TABLE ALIGN=CENTER WIDTH=500> <TR><TD> <H4><IMG SRC="../graphic/ball/red.gif">原文: 成棗寸三二粟嗣延田葛乃後毛将相跡葵花咲 <P ALIGN=RIGHT><IMG SRC="../graphic/ball/red.gif">作者: 不明 <H4><IMG SRC="../graphic/ball/green.gif">よみ: 梨(なし)、棗(なつめ)、黍(きみ)に粟(あは)つぎ、延(は)ふ葛(くず)の、後(のち)も逢はむと、葵(あふひ)花咲く </TR> </TABLE> <TABLE ALIGN=CENTER WIDTH=500> <TR><TD> <P><IMG SRC="../graphic/ball/navyblue.gif">意味: 梨(なし)、棗(なつめ)と続くように、あなたに会いたい。葛のつるが別れてまたつながるように、またあなたに会いたい。あなたに逢う日は花咲くようにうれしい。 <P><IMG SRC="../graphic/ball/yellow.gif">かけ言葉が使われています。 <UL> <LI><A HREF="http://www6.airnet.ne.jp/manyo/main/flower/kimi.html">黍(きみ)</A>に<A HREF="http://www6.airnet.ne.jp/manyo/main/flower/awa.html">粟(あは)</A>つぎ --> 君に逢はつぎ <LI>葵(あふひ) --> 逢う日 </UL> <TD><IMG SRC="image/kimi.jpg" ALT="撮影(1997.11) by きょう"> </TR> </TABLE> <HR ALIGN=CENTER WIDTH=480 SIZE=5> <P ALIGN=CENTER><A HREF="http://www6.airnet.ne.jp/manyo/main/index.html">たのしい万葉集</A>に戻る </BODY> </HTML>

たのしい万葉集(3834)のHTMLドキュメントリスト

<HTML>

<HEAD>
<TITLE>たのしい万葉集(3834): 梨棗黍に粟つぎ延ふ葛の</TITLE>
<LINK REL=STYLESHEET TYPE=TEXT/CSS HREF="poemstyle.css">
</HEAD>

<BODY>

<H3 ALIGN=CENTER>第十六巻 : 梨棗黍に粟つぎ延ふ葛の</H3>

<TABLE ALIGN=CENTER WIDTH=500>
<TR><TD>
<P ALIGN=RIGHT>平成９年１１月３０日(日)更新
</TR>
</TABLE>

<HR ALIGN=CENTER WIDTH=480 SIZE=5>

<TABLE ALIGN=CENTER WIDTH=500>
<TR><TD>
<H4><IMG SRC="../graphic/ball/red.gif">原文: 成棗寸三二粟嗣延田葛乃後毛将相跡葵花咲
<P ALIGN=RIGHT><IMG SRC="../graphic/ball/red.gif">作者: 不明
<H4><IMG SRC="../graphic/ball/green.gif">よみ: 梨(なし)、棗(なつめ)、黍(きみ)に粟(あは)つぎ、延(は)ふ葛(くず)の、後(のち)も逢はむと、葵(あふひ)花咲く
</TR>
</TABLE>

<TABLE ALIGN=CENTER WIDTH=500>
<TR><TD>
<P><IMG SRC="../graphic/ball/navyblue.gif">意味: 梨(なし)、棗(なつめ)と続くように、あなたに会いたい。葛のつるが別れてまたつながるように、またあなたに会いたい。あなたに逢う日は花咲くようにうれしい。
<P><IMG SRC="../graphic/ball/yellow.gif">かけ言葉が使われています。

<UL>
<LI><A HREF="http://www6.airnet.ne.jp/manyo/main/flower/kimi.html">黍(きみ)</A>に<A HREF="http://www6.airnet.ne.jp/manyo/main/flower/awa.html">粟(あは)</A>つぎ --> 君に逢はつぎ
<LI>葵(あふひ) --> 逢う日
</UL>

<TD><IMG SRC="image/kimi.jpg" ALT="撮影(1997.11) by きょう">
</TR>
</TABLE>

<HR ALIGN=CENTER WIDTH=480 SIZE=5>

<P ALIGN=CENTER><A HREF="http://www6.airnet.ne.jp/manyo/main/index.html">たのしい万葉集</A>に戻る

</BODY>
</HTML>

さらら: あらら、平成９年の更新だなんて、ずい分前に作ったページなのね。

たけち: そうだね。これをXHTMLにするには、さっき説明した構成にするのと、前回説明したことをやればいいんだよ。

さらら: えぇっと。。。小文字にしたり、終了タグを入れたりでしょ。

たけち: そうそう、その調子。じゃ、そのままXHTMLにしてごらん。。

さらら: うん・・・ちょっと考えさせてね。imgは空要素だから・・・・

さららが考え込んだので、次のページ、XHTMLドキュメントを確認で結果を見てみましょうね。...(^ ^)v