とりあえずホームページを作る


　まず、タグについてちょっとだけ説明を。。。

タグ（tag）って言うのは、「この部分をセンタリングする！」とか、「ここの文字を大きくする！」って命令するコマンドのことですね。ほとんどのタグは、開始タグ( <****> )と、終了タグ( </****> )のペアでひとつの命令になっています。

ただし、（<BR>）改行タグのように終了タグの不要なものもあるので覚えておいてくださいね。ちなみに終了タグの不要なタグはエンプティ(empty）タグといいます．．．。

注）タグを記入する場合には、必ず、半角の「<」「>」でタグを囲む事も合わせて覚えておいてくださいね。

　 では、これから使い方について説明しますね。

　　例：「この部分をセンタリングする！」←これをセンタリングさせる場合

　　　　<CENTER>この部分をセンタリングする！</CENTER>

それで、通常のテキストファイルと違ってＨＴＭＬ文書は、通常の改行やインデントが関係ないので、次のように書いても意味は同じになります。

　　　　<CENTER>
　　　　この部分をセンタリングする！
　　　　</CENTER>

これだけわかればもう大丈夫、自信を持ってくださいね。次に、ホームページを作成してみましょう。 まず、テキストエディタで次のように書いて下さい。（カット＆ペーストでもＯＫ！）

<HTML>
<HEAD>
<TITLE>マイホームページ</TITLE>
</HEAD>
<BODY>
<!--ここから本文-->

<!--ここまで本文-->
</BODY>
</HTML>

　

今書いたものを説明すると．．．

<HTML>このファイルはＨＴＭＬ文書です
<HEAD>今からタイトルについて記入します
<TITLE>マイホームページ</TITLE>タイトルは、[マイホームページ]です
</HEAD>タイトルについての記入終わりです
<BODY>ここから本文の始まりで、一番主要な部分ですね！
<!--ここから本文-->コメントタグなので、これは無視します（表示されません！）
（↑メモ書き等に使うといいですね。）
<!--ここまで本文-->これも、ブラウザには表示されません(無視します。)
</BODY>本文は、これで終わりです
</HTML>ＨＴＭＬ文書は、これで終わりです
コメントタグはあっても無くても構いませんが、それ以外のタグはＨＴＭＬ文書には絶対必要ですから忘れないでくださいね。

　

それから何度も言いますが、ＨＴＭＬファイルを保存するときは、次のことに気を付けてくださいね。

　・拡張子（属性）は「.htm」か「.html」（どちらでもＯＫ）
　・ＨＴＭＬファイル名は小文字（もしくは大文字）に統一
　

それでは、これから書くタグの説明を参考にして「<!--ここから本文-->」 と「<!--ここまで本文-->」の間の行にいろいろと書いて、あなたのホーム ページを作成してみてくださいね。

　 



 <H数字></H数字>：見出し（数字(1〜6)で文字の大きさが変わる　1が最大）
　 注）ボールド書体（太字）になって、前後に一行分のスペースがつき自動改行されます。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
	<H1>これは見出しです</H1>
　　　　　　　　　　　　↓
	
これは見出しです


 <H数字 ALIGN="LEFT"></H数字>：レイアウトが左寄せの見出し
　 注）ALIGN="LEFT" を省略した場合も左寄せになる（上記参照）
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
	<H2 ALIGN="LEFT">これは左寄せの見出しです</H2>
　　　　　　　　　　　　　　　↓
	
これは左寄せの見出しです


 <H数字 ALIGN="CENTER"></H数字>：レイアウトが中央揃えの見出し
　 注）<CENTER><H数字>＊＊＊</H数字></CENTER>と同じ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
	<H2 ALIGN="CENTER">これは中央揃えの見出しです</H2>
　　　　　　　　　　　　　　　↓
	
これは中央揃えの見出しです


 <H数字 ALIGN="RIGHT"></H数字>：レイアウトが右寄せの見出し
　 注）<DIV ALIGN="RIGHT"><H数字>＊＊＊</H数字></DIV>と同じ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
	<H2 ALIGN="RIGHT">これは右寄せの見出しです</H2>
　　　　　　　　　　　　　　　↓
	
これは右寄せの見出しです


 <FONT SIZE="数字"></FONT>：文章中の文字サイズを変更（数字(7〜1)でサイズ指定）

	サイズは、<FONT SIZE="7">７が最大</FONT>です。
　　　　　　　　　　　　↓
	サイズは、７が最大です。



 　　
 <FONT COLOR="#16進数"></FONT>：文章中の文字色を変更

	文字の<FONT COLOR="#0000FF">色を青</FONT>にする例です。
	　　　　　　　↓
	文字の色を青にする例です。

	文字の<FONT SIZE="5" COLOR="#FF0000">サイズが５で色が赤</FONT>の例。
	　　　　　　　↓
	文字のサイズが５で色が赤の例。

	16進数の例　白：#FFFFFF　白
	　　　　　　黒：#000000　黒
	　　　　　　赤：#FF0000　赤
	　　　　　　緑：#00FF00　緑
	　　　　　　青：#0000FF　青
	　　　　　　黄：#FFFF00　黄
	　　　　　　紫：#FF00FF　紫
	　　　　　水色：#00FFFF　水色
	　　　　　灰色：#AAAAAA　灰色
	　　　　　橙色：#FF5500　橙色
	　　　　青灰色：#7777AA　青灰色
	　　　蛍光黄緑：#00FF11　蛍光黄緑

注）　色の指定番号には（"#......"）のように１６進法表示で書くこと。

 <B></B>：文字をボールド（太字）にする

	<B>文字をボールド（太字）にする。</B>
　　　　　　　　　　↓
 	文字をボールド（太字）にする。


 <I></I>：文字をイタリック（斜体）にする

	<I>ＡＢＣＤ１２３４</I>
　　　　　　　　↓
 	ＡＢＣＤ１２３４


 <SUP></SUP>：上付添字

	これは<SUP>上付添字</SUP>
　　　　　　　　↓
 	これは上付添字


 <SUB></SUB>：下付添字

	これは<SUB>下付添字</SUB>
　　　　　　　　↓
 	これは下付添字


 <FONT　SIZE="n">:特定の文字のサイズを変更

　　　必要に応じて、特定の文字のサイズを変更することができる。これには、<FONT　SIZE=　>タグを
　　　使用して次のように書く。

        
　　　　文字の<FONT SIZE="+1">＊＊サイズを大きく＊＊</FONT>しましょう。

　　　　　　　→　　文字の＊＊サイズを大きく＊＊しましょう。


　　　　文字の<FONT SIZE="-1">＊＊サイズを小さく＊＊</FONT>しましょう。

　　　　　　　→　　文字の＊＊サイズを小さく＊＊しましょう。


 <BIG></BIG>：文字サイズを大きくする
　 注）サイズの指定はできません
　　　　　<BIG>文字サイズを大きくする。</BIG>
　　　　　　　　　　↓
　　　　　文字サイズを大きくする。

 <SMALL></SMALL>：文字サイズを小さくする
　 注）サイズの指定はできません

	<SMALL>文字サイズを小さくする。</SMALL>
　　　　　　　　　　↓
	文字サイズを小さくする。


 <TT></TT>：等幅フォント

	これは<TT>「等幅フォント」です。</TT>
　　　　　　　　↓
 	これは「等幅フォント」です。


 <ADDRESS></ADDRESS>：アドレス
　アドレスや作成日、アップデート、クレジットの文責などに使う
　<I>＊＊＊</I>と同じ（斜体になる）
　　　　<ADDRESS>
　　　　motoya@xa2.so-net.or.jp<BR>
　　　　1998/01/01 by kinchan
　　　　</ADDRESS>
　　　　　　　　↓
　　　　motoya@xa2.so-net.or.jp
　　　　1998/01/01 by kinchan 

 <BLINK></BLINK>：文字を点滅させる（ ← Netscapeのみ有効）

	<BLINK>文字を点滅させる。</BLINK>
　　　　　　　　　　↓
 	文字を点滅させる。


 <CENTER></CENTER>：センタリング（中央揃え）

	<CENTER>この部分をセンタリングする！</CENTER>
                                 ↓
	
この部分をセンタリングする！


 <DIV ALIGN="LEFT"></DIV>：左寄せ

	<DIV ALIGN="LEFT">この部分を左寄せする！</DIV>
                                 ↓
	
この部分を左寄せする！


 <DIV ALIGN="RIGHT"></DIV>：右寄せ

	<DIV ALIGN="RIGHT">この部分を右寄せする！</DIV>
                                 ↓
	
この部分を右寄せする！


 <BR>：改行
　　ブラウザの画面上で改行を行いたい場合には、原稿のその位置に改行を表す<BR>タグを書く。
　　<BR>タグは単独で使用され、</BR>のような終わりタグはない。
　　また、<BR>タグを二つ続けて書くと空白行が１行表示されることになる。
　　注）２つ以上並べた場合、ブラウザによって表示のされかたが違うことがあります！
 　　　（１つの時と同じ効果になる（意味がない）ものがほとんどです。）

	２つ以上並べるのは<BR>やめたほうがいいですね。
　　　　　　　　　　↓
	２つ以上並べるのは
	やめたほうがいいですね。


 <P>：改行＋１行
　注）２つ以上並べた場合、ブラウザによって表示のされかたが違う
 　　（１つの時と同じ効果になる（意味がない）ものがほとんど）
　　　また、<BR>と<P>を一緒に使っても、<P>のみ有効


	これも２つ以上並べるのは<P>やめたほうがいいですね。
　　　　　　　　　　↓
	これも２つ以上並べるのは

	やめたほうがいいですね。


 <PRE></PRE>：整形済みテキストの表示


テキストエディタなどで作成された原稿をブラウザで表示すると、原稿上のスペース、改行、行間などは
いっさい無視して表示する。このため、<BR>タグなどを付け加える必要があった。
しかし、この<PRE>＊＊＊＊</PRE>タグで囲まれた文字は、テキストエディタで作成されたままの配置で
表示される。すなわち、スペース、改行、行間などが原稿のとおり表示される。したがって、<BR>などを
つける必要がないので便利である。（このページでも活用されています。）

なお、PRE　は、Preformatted（定型になった）の意味である。

　　　　

	<PRE>
	このタグで囲んだ文章などは、スペース、改行、タブなどが
	そのまま表示されます。　　　　　　　結構便利ですね。
	（注：ただし、等幅フォントで表示されます）
	</PRE>
　　　　　　　　　　↓

	このタグで囲んだ文章などは、スペース、改行、タブなどが
	そのまま表示されます。　　　　　　　結構便利ですね。
	（注：ただし、等幅フォントで表示されます）


 <BLOCKQUOTE></BLOCKQUOTE>：引用文
　文章に注意を引かせたい時とか、文章を他と区別したい時に使う。
<BLOCKQUOTE>
これにはさまれた文章は、１ブロックと考えられて、そのブロックの上に１行、下に１行、左側にインデント、右側にある程度のスペースがあけられる。
</BLOCKQUOTE>
　　　　　　　　　　　　　　　　　↓

これにはさまれた文章は、１ブロックと考えられて、そのブロックの上に１行、下に１行、左側にインデント、右側にある程度のスペースがあけられる。 

 <UL><LI><LI>...</UL>：単純な箇条書き

　<UL>
　箇条書きの種類
　<LI>項目にブリット（黒丸）が付く箇条書き
　<LI>項目に通し番号が付く箇条書き
　<LI>用語表示の箇条書き
　</UL>
　　　　　　　　　　↓　　


 <OL><LI><LI>...</OL>：番号付き箇条書き

　<OL>
　箇条書きの種類
　<LI>項目にブリット（黒丸）が付く箇条書き
　<LI>項目に通し番号が付く箇条書き
　<LI>用語表示の箇条書き
　</OL>
　　　　　　　　　　↓　　

    
箇条書きの種類

  1. 項目にブリット（黒丸）が付く箇条書き

  2. 項目に通し番号が付く箇条書き

  3. 用語表示の箇条書き



 <DL><DT><DD>...</DL>：用語表示の箇条書き

　<DL>
　<DT>箇条書きの種類その１
　<DD>項目にブリット（黒丸）が付く箇条書き
　<DT>箇条書きの種類その２
　<DD>項目に通し番号が付く箇条書き
　<DT>箇条書きの種類その３
　<DD>用語表示の箇条書き
　</DL>
　　　　　　　　　　↓　　



箇条書きの種類その１

項目にブリット（黒丸）が付く箇条書き

箇条書きの種類その２

項目に通し番号が付く箇条書き

箇条書きの種類その３

用語表示の箇条書き



 <HR>：罫線

	<HR>と書くと
　　　　　 ↓
　　　　　 ↑
	こういう罫線になる


 <HR SIZE="ｎ"（1〜100） WIDTH="画素数"(ページ幅対比でも可) ALIGIN="LEFT|CENTER|RIGHT">
   ：サイズ指定の罫線

＊　SIZE属性は水平線の太さを指定することができる。
　　　　　　　　　<HR SIZE="ｎ">　
　　このとき、ｎには線の太さを指定する数字が書かれる。ｎの単位は画素数（ピクセル）で、
　　1画素は0.339ミリである。
　　SIZE属性を省略すると、デフォールトとして　SIZE=2　となる。
　　デフォールトとは省略値などと訳されるが、ユーザがその値を省略するか、忘れたときに
　　システムが自動的に補ってくれる値である。
　　ｎには、１から１００までの数値が指定できるが、ｎ＝１のときは黒線となる。

＊　WIDTH属性は、水平線の横幅（長さ）を指定する。たとえば、<HR　SIZE="10" WIDTH="50%">では、
　　画面の中央に画面の横幅の半分に線を引く。

　　WIDTHを省略すると、デフォルトとしてWIDTH="100%"となります。


＊　ALIGIN属性は罫線を左寄せ（ＬＥＦＴ）にするか、中央寄せ（ＣＥＮＴＥＲ）にするか、右寄せ（ＲＩＧＨＴ）
　　にするかを指定することができます。
　　省略すると中央寄せとなります。
　　
　　罫線の指定した長さがブラウザの表示画面の幅よりも短い時に意味のあるものとなります。



　 注）画素数 → 一画素数＝0.339mm
　　　 ページ幅対比 → %

	<HR SIZE="5" WIDTH="450">（太さ５，横幅４５０）
　　　　　　　　　　　　↓
	


	<HR SIZE="50" WIDTH="50"%>（太さ５０，横幅５０％）
　　　　　　　　　　　　↓
	






 <HR NOSHADE>：黒い罫線（罫線に影をつけない）

	<HR NOSHADE SIZE="1" WIDTH="500">と書くと
　　　　　　　↓
	

　　　　　　　↑
	こういう罫線になる


 <BODY .....> : 本文テキストの色・背景の指定

 　<BGCOLOR="#16進数">:背景の色を変える
　 　 <TEXT="#16進数">:本文の文字色を変える
　 　 <LINK="#16進数">:ホットリンク文字の色を変える
　 　<VLINK="#16進数">:リンク利用後の文字色を変える
　 　<ALINK="#16進数">:リンク読み込み中の文字色（ ← Netscapeのみ）無くてもよい。

　注）必ず <BODY>と組み合わせて

　<BODY BGCOLOR="#16進数" TEXT="#16進数" LINK="#16進数" VLINK="#16進数">

　のように使うこと！（つまり一ページに一回しか使えません。）

　このとき、「BODY」と「BGCOLOR」の間には、半角のスペースを入れる。全角のスペースを入れると　BGCOLORの
  機能が働かないから注意する。（他のタグも同様です。）
　

　（例１）背景が黒で、文字を白にする場合

　　　<BODY BGCOLOR="#000000" TEXT="#FFFFFF">


　（例２）背景が白、文字が黒、リンク文字が青、リンク利用後が水色の場合

　　　<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#00FFFF">


	16進数の例　白：#FFFFFF　白
	　　　　　　黒：#000000　黒
	　　　　　　赤：#FF0000　赤
	　　　　　　緑：#00FF00　緑
	　　　　　　青：#0000FF　青
	　　　　　　黄：#FFFF00　黄
	　　　　　　紫：#FF00FF　紫
	　　　　　水色：#00FFFF　水色
	　　　　　灰色：#AAAAAA　灰色
	　　　　　橙色：#FF5500　橙色
	　　　　青灰色：#7777AA　青灰色
	　　　蛍光黄緑：#00FF11　蛍光黄緑


 <BASEFONT>:そのページの全体の文字の大きさを変更

　　　これには、<BASEFONT>タグを使用する。
　　　このタグは<BODY>タグの直後に書き、使用する文字のサイズを指定する。
　　　　　　
 　　　例　　<BODY>
　　　　　　 <BASEFONT　SIZE="4">

　　　なお、<BASEFONT>タグを省略するとデフォールト（省略値）として、SIZE=3　となる。また、
　　　<BASEFONT>タグは、エンプテｲタグであるいから終わりタグは不要である。
＜次に進む＞

ホームページ作成の部屋へ戻る ／ 趣味の部屋へ