ここまでで、ホームページなんて面倒くさいと思ったりしてませんか？
まだ始まったばかりです。がんばりましょう。
ホームページの内容を記述しよう
文章を書いてみましょう
さて、これから実際のページの内容を記述していきましょう。ホームページの内容は、
<body> ～ </body>
の間に記述します。まずは単純に文章のみを記述してみましょう。次のように記述してください。
<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
ようこそ私のホームページへ。私の趣味は写真です。仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。
</body>
</html>
文章は何でもかまいませんが、上のように記述するとこのように表示されます。でもこれだとただだらだらと文章が続くだけです。 せめて適当なところで改行しないと読みづらいんじゃないかな？
改行しましょう
文章を途中で改行したいときには改行したい場所に
<br>
と記述します。すると文章はそこで改行して表示されます。以下のように記述して見ましょう。
<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
ようこそ私のホームページへ。<br>
私の趣味は写真です。<br>
仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。<br>
そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に 北上したいものです。<br>
このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。
</body>
</html>
するとこのように改行されて表示されます。
段落と区分、境界
文章が長くなってくると段落に分ける必要が出てきます。またさらにページ作りに手が込んでくるとページの区分けが必要になってきます。
段落は、<p> ～ </p>
区分、境界は、<div> ～ </div>
で囲まれた部分に記述していきます。例として以下のように記述して見ましょう。<p></p>と<div></div>の違いがわかりやすいように改行は入れていません。
<html>
<head>
<title>私のホームページのタイトル</title>
</head>
<body>
<p>ようこそ私のホームページへ。</p>
<p>私の趣味は写真です。仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。</p>
<p>そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に 北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。</p>
<div>ようこそ私のホームページへ。</div>
<div>私の趣味は写真です。仕事が休みのときはいつもカメラを持って日本各地に花の写真を撮りに行っています。 日本は縦に長い国ですから一年中どこかで花が咲いています。</div>
<div>そしてこれからまもなく南の方から桜の便りが、退職したら一度でいいから桜前線と一緒に 北上したいものです。このホームページでは私の撮った写真を載せていこうと思っています。お楽しみに。</div>
</body>
</html>
するとこんな風に表示されます。 ごらんのように<p></p>で囲んだ部分は、間に1行空白行が出来ますが、<div></div>で囲まれた部分は外見上は改行と同じように見えます。
この改行と、段落、区分を組み合わせて文章を読みやすいように記述していきます。しかし、これでは文字の大きさが単調ですね。見出しぐらいは付けたいですね。それでは見出しについて次のページで解説しましょう。
