HTML 文書作成例

HTML 文書制作

正しい HTML 文書を書くには、やはり実践が多少必要です。ここでは、簡単な HTML 文書を作成してみることで、今までの知識を整理して、実際に HTML 文書を書ける力を養います。

今回は、スタジオジブリの紹介を書いてみることにしましょう。権利関係の都合上、画像は使用しませんが、日本人にはなじみ深い内容であると思います。

最後に出来上がった HTML 文書には、様々な HTML の記述に関するコメントを散りばめています。是非、参考にして下さい。

文章を用意する

一番最初ですので、文章はこちらで用意してそれをマークアップしてみることにします。

文章は、dhibli.txtに用意しましたので、適宜参照して下さい。

骨組みの必要な部分を書き換える

XHTML 1.1 で用意した骨組みの、必要な部分を書き換えます。

タイトルと、文字コード、address 要素の内容などを書き換えます。

<?xml version="1.0" encoding="EUC-JP"?>
<!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>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=EUC-JP" />
    <title>スタジオジブリの紹介</title>
</head>
<body>

    <address>copyright © 2002 MAYAH
    All Rights Reserved [email protected]</address>
</body>
</html>

大見出し

ひな型に、文書の大見出しである h1 要素をまず追加しましょう。

<body>
    <h1>スタジオジブリの紹介</h1>

    <address>copyright © 2002 MAYAH
    All Rights Reserved [email protected]</address>
</body>

本文の追加

次に、本文を追加します。段落は、p 要素としてマークアップし、見出しは、h2 等でマークアップします。

<p>今回はそのなかで「天空の城ラピュタ」と「もののけ姫」を取り上げ、ジブリの魅力を探ってみよう。</p>

<hr />

<h2>天空の城ラピュタ</h2>

<p>追いつ追われつのスリルとサイペンス、愉快な血湧き肉躍る冒険活
劇ファンタジー「天空の城ラピュタ」。ガリバー旅行記の中で伝えられる空中
の浮島ラピュタ帝国をヒントに、ジブリの巨匠「宮崎駿」は、ラピュタに秘め
られた財宝の謎をめぐって繰り広げられる波瀾万丈の一大アドベンチャーを作
り上げた。</p>

文書の関連づけと meta 要素の追加

次に meta 要素と link 要素で、文書のメタ情報と関連を表しましょう。

完成

以上で基本的な部分は完成しました。これでも十分実用に耐えますが、もう少し色々なものを付け足した、完成品を用意しました。ここには、記述に関するコメントも含まれているので、是非参考にして下さい。

2002-01-01