１から学ぶHP講座

　　　　　　　　　
私もまだまだ初心者ですが一人でも多くの人にHP作りの楽しさを知ってほしくて
そしてこれからHPを作ってみたいけど、HTMLってなんだかわからないって人にも
ちょっとでも参考になったらうれしいです。　　　　 　



知りたい項目を↓から選んでクリックしてちょ☆
HPのおおまかな構造
背景色や文字色を指定する
文字の色と大きさを指定する
文字や画像の位置を指定する
改行する
リンク先を作る
リンク先を別窓で表示させる
HPに写真を貼りたい
HPに音楽を流したい（工事中）
（工事中）









HPのおおまかな構造



基本は　<HTML> <HEAD> <TITLE> <BODY>です。
これらをＨＴＭＬタグと言います。
ＨＴＭＬタグは全て同類のタグを／（スラッシュ）で閉じます。
（例）<HTML></HTML>と言ったようにです。

HP必ず<HTML>で始まり</HTML>で終わります。
<HTML>〜</HTML>の中に必要な事柄を全て入力して１つのHPが完成します。

次に<HEAD>タグです。
<HEAD>〜</HEAD>で囲んだ範囲に、HTMLの情報をついて、記述します。
例えばJAVAスクリプトやスタイルシート等です。これらについては後ほど説明します。

次は<TITLE>です　これはブラウザの一番上に表示される
HPのタイトルになります。
お気に入りに登録した時や履歴にも表示されます
<TITLE>〜</TITLE>で囲み、<HEAD>〜</HEAD>,の中に記述します。

最後に<BODY>タグです。
これは<BODY>〜</BODY>で囲みこのBODYの中が通常みなさんが
いつも目にしているHPとなります。
この中に文字や画像等を入れて自由にＨＰを作ってください。

全て入力が終わったら必ず最後は </HTML>で閉じます
これでHPの完成です。

ＴＯＰに戻る

 

背景色や文字色を指定する



まずはHPの背景となる色を指定してみましょう。
背景を黒くする場合で説明します。
黒は#000000です。
タグは<BODY BGCOLOR>です。
ですから<BODY BGCOLOR="#000000">と記述します。

ここで一般的に使われるいくつかの色を参考までに記述しておきます。
RED
(#FF0000)		 YELLOW
(#FFFF00)		 BLUE
(#0000FF)		 GRAY
(#BEBEBE)		 PINK
(#FFC0CB)
BLACK
(#000000)		 GREEN
(#00FF00)		 ORANGE
(#FFA000)		 PURPEL
(#A020F0)		 WHITH
(#FFFFFF)



次にTEXTの色です、HPで言うTEXTとは今皆さんが読んでいる
この文字のことです。

先ほど背景の色を指定した<BODY>の中に含めて記述します。
TEXTを白にしたい場合は
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">となります。

次はリンクについて説明します。
通常のリンクの色は LINK　
すでに訪問しものをV LINK
現在クリック中のものをA LINK と記述します。
LINKを青　A LINKを緑　V LINKを赤にするには
<BODY BGCOLOR="#000000" "TEXT="#FFFFFF LINK="#0000FF
A LINK="00FF00 V LINK="#FF0000">と記述します。

これで背景色と文字色が指定できました。

これで背景色が青　

文字が白　

リンクが赤のそれぞれの色が決まりました。

ALINKとは今現在見ているページ、

VLINKとはすでに見た事のあるページの事です。
ＴＯＰに戻る

文字の色と大きさを指定する


<FONT SIZE=☆>〜</FONT>

文字のサイズを指定するには上記のタグを使います
「☆」で示された個所に数字を入れて大きさを指定します。
数字は１〜７までが適当です。
数字が大きいほど文字も大きくなります。

（文字の色を指定する）

<FONT COLOR=☆>〜</FONT>

文字の色を指定する場合は上記のタグを使います

☆で示されたところに色の名前を入れます
直接　REDやYELLOWと文字で書いても良いですし
講座１で説明したように色の番号で指定してもどちらでも
かまいません

大きさも色も上記タグの（〜）の部分に好きな文字を
記入します
ＴＯＰに戻る

文字の位置を指定させる


文字や画像の位置をHPの右、中央、左のどの位置に
表示させたいか、指定するタグの説明です。

<P ALIGN="☆">〜</P>

上記タグで指定します。

<P ALIGN="LEFT">左に位置します</P>
<P ALIGN="CENTER">中央に位置します</P>
<P ALIGN="RIGHT">右に</P>


行をそろえて位置を指定する

<DIV ALIGN="☆">〜</DIV>

上記タグで指定します
このタグにはさまれた範囲をひとまとまりにして
行をそろえて指定できます

左揃え
中央揃え
右揃え
ＴＯＰに戻る

改行する

<BR>

HTML文章は書いてる時に改行しても実際にブラウザで見てみると
改行はさせずに一列につながって表示されてしまいます。
ですから「ここで改行して一段下に表示させたい」と言う時に
<BR>タグを使います。



このページはこれからHPに挑戦してみようかな？と思っている<BR>
HTML初心者の人のために、これまた初心者の彩が<BR>
無謀にもHP講座なるものを作成、公開にふみきりました<BR>


と言ったカンジに使います。
ＴＯＰに戻る

リンクを作りたい


<A HREF="☆">〜</A>
☆＝リンク先のURL

自分のHP内でメニュー画面からBBS等のコンテンツに
移動したり、友達のHPにクリックひとつで移動したり等の
リンクを作成します。

例えば
ページ内の各コンテンツにリンクさせたいときは

<A HREF="study.html">HP講座</A>

同じページ内ですから（http://www〜）から記入する必要は
ありません。



人のHPにリンクしたいときは

<A HREF="http://www/glay.co.jp>HAPPY SWING</A>

このように正確なURLを記入します。
ＴＯＰに戻る

リンク先を別の窓に表示させたい


<A HREF="☆"TARGET="★">〜</A>

通常リンクは、１つの画面に表示させますが、そうではなくて
もう１つ画面を出し、そこにリンク先を表示させたい時に
このタグを使います。

この場合は BLANK を指定します
BLANKとは名前の無い窓を新しく開いてそこに内容を
表示させます。

<A HREF="http://www.glay.co.jp"TARGET="_BLANK">HAPPY SWING</A>


このように記述するともう１つの窓が開いて、そこにリンク先の
HPが表示されます。

ＴＯＰに戻る

ＨＰに画像を貼りたい

タグは<IMG SRC="☆">です
ＴＯＰに戻る