簡単なページづくり


トップへ  HPの作り方MENUへ


とりあえず作っちゃいましょう

もう皆さんHTMLを使った文章を書けるようになりました。
文字入力の仕方さえわかればもうホームページを作ることはできます。私のホームページもほとんど文字の大きさや色を変えただけでできています。
確かに文字だけでは少し寂しいですがこれがすべての基礎になるので、ここで完全に自分のものにしてしまいましょう!


その1 改行について

普通のワープロソフトなどの場合エンターキーを押せば改行できますが、HTML文章ではエンターキーを押しても改行されません。
テキストエディタでは改行されて表示されますが、それをブラウザで見ると改行されていないのです。

ブラウザで見て改行されているように表示するには<BR>というタグを使います。
改行したい場所に<BR>のタグを書けば、ブラウザではその場所で改行されて表示されます。

この<BR>というタグには、終了タグは必要ありません。ただ<BR>のタグを置いた場所で改行されるだけです。
「改行したくなったら<BR>を置く」と覚えておけばわかりやすいですね。

その2 段落と見出し

ただえんえんと文字が並んでいるだけでは、どうしても読みづらくなってしまいますね。
なので文章を段落ごとに区切って、見出しをつけていきましょう。

見出しは<H1><H2>といった<H数字>のタグでつくります。
<H1>HOME PAGE CREATE</H1>
のようなかんじで見出しにしたい文を指定します。

<H数字>の数字は1〜6までです。
小さい数字の方を入れた方がブラウザでは大きな文字で表示されます。
しかし<H1><H2>といったタグは文字の大きさを変えるためのものではなく、あくまで見出しとして指定したい場合に使うためのタグです。
大きさを変えるには「タグ入門編」で使った<FONT SIZE="5">などのSIZE属性を使って指定するようにしましょう。

次は段落です。段落は<P>タグでつくります。
<P>タグで段落を作成すると改行され、それと同時に一行分の空白があきます。
改行のために使うこともできますが、その場合<BR>タグを2つ使った方がいいでしょう。
<BR>は改行、<P>は段落をつくるためのタグだと覚えておきましょう。

段落の最後に終了タグ(</P>)をつけるのを忘れないようにしましょう。
また、段落の中で改行タグ(<BR>)を使うこともできます。

その3 自己紹介ページをつくろう!

それでは今まで学んだものを使って自己紹介のページをつくってみましょう。
例として私の自己紹介をしたページを下に書きます。
なるべくすべて自分でつくってみてほしいですが、時間がない人はタグを変えないで名前や文章などを自分なりに変えて作ってみてください。


<HTML>
<HEAD>
<TITLE>PROFILE</TITLE>
</HEAD>
<BODY BGCOLOR="#80FFFF">
<H1><FONT COLOR="#0000FF">PROFILEのページ</FONT></H1>
<P>このページの管理人のクサダチです。<BR>
ここは初めて自分でつくったホームページです。<BR>
これからどんどん面白いページにしていくので、皆さんよろしく!</P>
<H2><FONT COLOR="#FF0000">自己紹介</FONT></H2>
名前・クサダチ<BR>
職業・大学生<BR>
趣味・読書、ゲーム<BR>
<H2>好きな本について</H2>
<P>ボクは趣味に読書と書いたとおり、本を読むのが好きです。<BR>
今まで読んだ中で一番面白かった本は<BR>
・・・う〜ん、そういうと悩むけど、やっぱり貴志祐介さんの<FONT COLOR="#0000FF">青の炎</FONT>かな。<BR>
この本については、ボクが言えるのは一言しかない。<BR>
<FONT SIZE="5" COLOR="#800040">「面白い。だから読め!」</FONT><BR>
えらそうでごめんなさい。<BR>
でも絶対に一度は読む価値がある本だと思います。
</BODY>
</HTML>
↑このボタンを押すと新しいウィンドウが開き、例が表示されます。

どうですか?自分のページは作れましたか?
まだ文字だけだし、一つしかページがないしで寂しいけれど、それでもこれはあなたが作った立派なページです。
ここから絵をつけたり他のページにリンクしたりして、どんどんページをパワーアップさせていきましょう!




トップへ  HPの作り方MENUへ