簡単タグ講座

簡単タグ講座 !
HPを作成するにあたって難しく考える必要はありません　! 誰でも、簡単に作る事が出来ます。ちょっとした、タグを覚えるだけで出来てしまうんです。用意するものと言えば、PCの中に入っているメモ帳があれば十分です。では、簡単なHPを作ってみましょう　!

簡単なHTML文章を書こう !

<HTML>
<HEAD> <TITLE>初めてのHP作成</TITLE> </HEAD>
<body> 初めて作るHP ! </body> </HTML>

では、↑で作ったHPを見てみましょう　! これが一番簡単なHPです。
どうです、ちゃんと作れていますよね。意外と簡単にHPって出来る事がわかったと思います。これに、色んなタグを打ち込んでいけばHPなんて簡単に出来てしまいます。

・画像を貼ろう　!
次に、画像を表示させるにはIMGタグをつければ画像がHPに貼れます。
↑の<body>の下に<IMG SRC="・・・>で画像を表示する事が出来ます
試しに画像を表示してみましょう　!
使う画像はこれを使ってみましょう。

これは、JPGで保存してありますから<IMG SRC="・・・.jpg>として書き込みます。
画像表示。
ちゃんと、画像が表示されてますね　!
でも、全部左に寄って見苦しいと思いますから真中に表示出来るようにしましょう　! その場合は、<CENTER>タグを入れればちゃんと真中に表示されます。

メモ帳でタグを打ち込んで保存する時には、TOPページはindex.htmlって名前をつけて保存して下さい。それ以降は、お好きな名前で大丈夫です。

見出し文字 !

つぎに、強調した文字(見出し)を付ける場合は<H6>から<H1>までの数字を入れると強調した文字が出来上がります。強調した文字(見出し)を付けるまた、文字を改行させるには<BR>タグを打ち込めば改行させる事が出来ます。長い文章ですと、改行がないと読みづらいので是非使ってみて下さい。

背景色を指定しよう　!

白色のHPだと、味気ないですよね　! そこで、背景色を指定して個性のあるHPを作るには色指定をすれば良いんですよー　!
<body>タグに<body　BGCOLOR="#・・・・・・">って具合に色指定するとHPの背景に色が付きます。
試しに、オレンジの背景にする場合は#FF9001って色指定するとオレンジ色のHPの出来上がりです。背景色をオレンジにした場合
どうです、何となくHPらしくなってきましたよね　!

色指定がわからない方のためにカラーチャートを用意しましたのでこちらを使ってお好きな色でHPを作って下さい。

リンクの設定　!

インターネットでは、リンクを辿って色々なHPを観覧するのが一番の魅力でしよう　!
そこで、リンクの貼り方の説明をします。リンクの貼り方は
<A HREF="・・・・.html">・・</A>のようにリンクを貼ります。
リンクの設定

文字色の設定　!

文字色がすべて一緒だと、リンクする場所がわかりずらいので文字色を設定する事によりリンクする場所もわかり易くクリックする場所も一発ですね。
そこで、
<body　BGCOLOR="#・・・・・・"TEXT="・・・" LINK="***"　ALINK="***" VLINK="***">のように指定することで文字色がわかり易く、HPもみ易くなります。
TEXT・・・・ページ全体の色
LINK・・・・LINKの色
ALINK・・・・クリックした時の色
VLINK・・・・一度リンクした事のある色
壁紙の設定　!

壁紙の設定　!

HPの背景色だけでは味気ないと言う方に、壁紙を指定する事により、鮮やかなHPが出来ます。
使う壁紙は↓で試してみましょう　!
タグの指定は
<BODY BGCOLOR="#FFFFCC" TEXT="#333333" LINK="#FF9900" VLINK="#999933" ALINK="#FFCC00" BACKGROUND="bg.gif">
で試してみます。

壁紙の設定　!

文字に変化を　!

HPで強調したい文字は<B>**</B>
また、斜体にする場合は、<I>**</I>
取り消し線をつける場合は、<S>**</S>
アンダーラインをつける場合は、<U>**</U>
文字に変化を　!

文字サイズを変える　!

HPの文字の大きさを変える場合は、<FONT SIZE=***>***</FONT>で大きさが変わります。
***の部分に数字を入れると文字の大きさが変わります。
文字サイズ　!

文字色を変える　!

部分的に文字の色を変える場合は、<FONT COLOR="#******">***</FONT>
のように色を指定する事でかわります。
文字色を変える　!

線を引いて見易く　!

HPに区切り線を引いて見易くする場合は、<HR>を使います。
当然、サイズ指定も出来長さ調節なども出来ますからデザインに合った線を選べます。
<HR SIZE=**>のように引きます。幅を変える場合は<HR WIDTH="60%">のように使います。
線を引いて見易く　!

テーブルタグ　!

HPで表みたいに枠を作って見易くしたいって方は、テーブルタグを使います。 <TABLE>
使い方は、<TABLE>から</TABLE>ではさみ、その中に、列を作ります。
すなわち、<TR>から</TR>を作りその中に<TD>から</TD>を入れます。
枠線を入れたい時には、BORDERを付け加えます。
試しに、作ってみましょう　!
<TABLE BORDER>
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD><TR>
<TR><TD>7</TD><TD>8</TD><TD>9</TD><TR>
</TABLE>
↑で作ったテーブルを実際に表示すると↓のようになります。

1	2	3
4	5	6
7	8	9

BORDERの数値を大きくする事により、枠線も大きくなります。 <TABLE BORDER=10>のように書きます。

1	2	3
4	5	6
7	8	9

表を、右・左にどちらかに指定したい時には、LEFT・RIGHTで指定します。
<TABLE ALIGN="LEFT>のように書きます。

セルの枠線の太さ、余白の設定も出来ます。
<TABLE CELLSPAACING="枠線の太さ"CELLPADDING="余白の数値">で指定します。

1	2	3
4	5	6
7	8	9

一番最初に作った表がこのように変わります。
また、数値・%によっても表が変化します。
<TABLE BORDER WIDTH="400" HEIGHT="120">
<TR><TD>1</TD><TD>2</TD><TD>3</TD><TR>
<TR><TD>4</TD><TD>5</TD><TD>6</TD><TR>
<TR><TD>7</TD><TD>8</TD><TD>9</TD><TR>
</TABLE>
このように記載します。数字のところに%で指定しても良いです。

1	2	3
4	5	6
7	8	9

表に色を付ける事も出来ますからずっと見栄えの良い表が出来ますよー　!
<TABLE BGCOLOR="#FFCCFF">のようにすると色を付ける事が出来ます。

1	2	3
4	5	6
7	8	9

列やセル単位でも色を付ける事も可能です。
<TR BGCOLOR="#FF0000"><TD BGCOLOR="#FF0000">のように指定する事で色が付きます。

1	2	3
4	5	6
7	8	9

如何でしたか　? こんなに簡単にHPが出来る事がわかったと思います。これから、HPを作ろうって方は是非チャレンジしてみて下さい。何分、簡単タグ講座って言うだけあり、かなり簡単に紹介しましたがさらに、詳しく知りたいって方は専門書などを見て勉強して下さいね。以下の本など初心者にもわかり易く解説してありオススメの本かと思います。