簡単内職アルバイトTOPへ
←back   index   next→
本文<body>を書きこむ

保存が終わり、タイトルも無事に表示されていたのでいよいよ次は本文を書く・・前に。
これからの作業は 「メモ帳で編集」→「上書き保存」→「ブラウザの更新を押して確認」
という作業を繰り返すので、ブラウザとメモ帳を同時に開いておくと便利ですよ。

ではいよいよ真っ白だったページに文字を入れてみましょうか!次に使うタグはもうお分かりでしょうが、 <body>タグを使います。まずは<body>の領域を作りましょう。
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>

  <body>

  </body>
</html>

次に、bodyの領域内で何でもいいから文章を書いてみましょう。今はトップページを作っているので、トップにふさわしい文章でも書いてみますかね。
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>

  <body>
   ようこそ!私のホームページへ!
  </body>
</html>


ここまで書けたら一旦「上書き保存」し、ブラウザの更新ボタンを押してどのようになってるか確認してみましょう。
・・な〜んか左上に小さく文章が表示されるだけで、正直ショボイですよね。もう少しトップページらしく飾ってみましょうか(^^)
ここでは文章を2段にして、文字を大きくしてみましょう。
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>

  <body>
   <h1>ようこそ!私のホームページへ!</h1><br>
   <h2>初めてホームページを作ったので応援ヨロシク!</h2>
  </body>
</html>


いきなり三つも新しいタグが出てきてちょっと複雑になっちゃいましたね。
<br> ・・改行
<h1> ・・文字のサイズをh1に
<h2> ・・文字のサイズをh2に
ちなみにh1〜h7まであり、h1(最大)〜h7(最小)となっています。brは改行するだけなのでタグを閉じなくてOK。さて、書きこんだらブラウザでチェックしてみましょう。

・・文字は大きくなりましたが、左端に寄ってしまって格好悪いので、ど真ん中に移動してみましょう。
<html>
  <head>
    <title>初めてのホームページ</title>
  </head>

  <body>
   <center><h1>ようこそ!私のホームページへ!</h1><br>
   <h2>初めてホームページを作ったので応援ヨロシク!</h2></center>
  </body>
</html>


「お!いよいよホームページらしくなってきたな」と思ってる方もいらっしゃるかもしれませんね(^^)
私の場合はこの辺ぐらいまで自分で作ったとき、かなり感動してしまいました。
それはさておき、やっぱりホームページといえばカラフルに配色したいですよね。次回はもう少しだけ見た目をカッコよくできるタグを紹介していきたいと思います。

次へ進む