ＨＴＭＬ基礎の基礎 前編
超簡単ＨＴＭＬ基礎

まずは、最も基本になるページを作ってブラウザで表示させてみましょう！
テキスト（文章）に、ＨＴＭＬの基本となるタグを10種程度挿入するだけで簡単なページを作成することができます。初めて自分の作ったページがブラウザ表示されると、結構うれしいもんです。
■STEP1-1．まずは文章を入力して、基本タグを貼付
　まず最初に、ホームページの元になる文書を準備しておきます。その文書にＨＴＭＬの最も基本となるタグを挿入していきます。ＨＴＭＬファイルは、テキスト形式で拡張子を「.html」として保存します。
　基本的にＨＴＭＬのタグは、<HTML>・・・</HTML>、<BODY>・・・</BODY>のように、指定する範囲を挟み込んで対で使用します。例外として、改行<BR>のように単独で使用するタグもいくつかあります。
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ１</TITLE>
</HEAD>
<BODY>
「ロン」のページへようこそ！<BR>
我が家の愛犬「ロン」です。<BR>
<BR>
犬種：アメリカンコッカースパニエル<BR>
生年月：平成１０年１２月<BR>
好きな食べ物：ドッグフード<BR>
将来の夢：りっぱな犬になること
</BODY>
</HTML>
 		....ＨＴＭＬファイルの始まり
　....ヘッダ部の始まり
　　....ページのタイトル
　....ヘッダ部の終わり
　....本文の始まり
・・・本文・・・
<BR>　改行


・・・本文・・・


　....本文の終わり
....ＨＴＭＬファイルの終わり
HTMLサンプルページ1 (sample01.html)
基本になる文字だけのページです。これではワープロ文章とほとんど変わりません。でも、ちゃんとブラウザ表示できるＨＴＭＬファイルなのです。

HomePage作成支援Top HomePage

■STEP1-2．画像を表示させる
　文章が完成したら、画像を表示させてみます。ページに画像を表示させるには、<IMG SRC="画像ファイル名">を挿入します。イメージ画像ファイルは、jpgやgif形式のものが一般的です。当然のことですが、あらかじめ準備しておく必要があります。
画像表示に関しては、「画像関連ヒント＆トピックス」で色々と紹介しているので、そちらも参考にして下さい！
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ２</TITLE>
</HEAD>
<BODY>
「ロン」のページへようこそ！<BR>
我が家の愛犬「ロン」です。<BR>
<BR>
<IMG SRC="image.jpg"><BR>
<BR>
犬種：アメリカンコッカースパニエル<BR>
生年月：平成１０年１２月<BR>
好きな食べ物：ドッグフード<BR>
将来の夢：りっぱな犬になること
</BODY>
</HTML>

<IMG SRC="画像ファイル名">
で画像が表示されます．


image.jpg


画像の後に 改行<BR> を追加．
HTMLサンプルページ2 (sample02.html)
準備しておいた"image.jpg"という画像を入れてみました。単純な文字と写真だけのページですが、自分の作った文書に画像を入れて、ブラウザ表示させると感動するかも !?

HomePage作成支援Top HomePage

■STEP1-3．体裁を整える
　文章や画像ができたら、全体の体裁を整えていきます。ここでは、センタリングや文字サイズ・太さを指定するタグ、横罫線のタグを挿入しています。ここで使用したもの以外にも、色々なタグがあります。
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ３</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>「ロン」のページへようこそ！</H2>
<B>我が家の愛犬「ロン」です。</B><BR>
<HR>
<IMG SRC="image.jpg"><BR>
<BR>
<SMALL>
犬種：アメリカンコッカースパニエル<BR>
生年月：平成１０年１２月<BR>
好きな食べ物：ドッグフード<BR>
将来の夢：りっぱな犬になること
</SMALL>
</CENTER>
</BODY>
</HTML>

<CENTER>....</CENTER>
センタリングします．

<H2>....</H2>
見出しのテキスト（数字によりテキスト
のサイズが変わる）

<B>....</B>　太字指定

<HR>　横罫線をひく

<SMALL>....</SMALL>
　文字を小さくする


※文字の大きさは、
<FONT SIZE="文字サイズ">....</FONT>
　でも指定できます．
　　SIZE="1"　あいうえお
　　SIZE="2"　あいうえお
　　SIZE="3"　あいうえお
　　SIZE="4"　あいうえお
HTMLサンプルページ3 (sample03.html)
全体をセンタリングして、文字のサイズに変化をつけてみました。これだけで、結構ホームページらしくなってきます。

HomePage作成支援Top HomePage

■STEP1-4．文字色と背景色を指定する
　カラフルな文字色を試してみました。あまり派手にすると見難くなりますのでホドホドに。最終的には、背景色（または背景画像）とのバランスも考えながら、文字の色を決めると良いかも知れません。
　背景色は、<BODY> タグ内に BGCOLOR="色指定" で指定します。ここでは、背景色を白(#FFFFFF)に指定しています。背景色指定が無い場合、Internet Explorerでは白色の背景となりますが、ブラウザやそのバージョンによっては、グレーの背景になることもあるので必ず指定しておきましょう。
<HTML>
<HEAD>
<TITLE>ＨＴＭＬサンプルページ４</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<H2>「ロン」のページへようこそ！</H2>
<FONT COLOR="red"><B>我が家の愛犬「ロン」です。</B></FONT><BR>
<HR>
<IMG SRC="image.jpg"><BR>
<BR>
<SMALL>
犬種：アメリカンコッカースパニエル<BR>
<FONT COLOR="deeppink">生年月：平成１０年１２月</FONT><BR>
<FONT COLOR="darkorange">好きな食べ物：ドッグフード</FONT><BR>
<FONT COLOR="green">将来の夢：りっぱな犬になること</FONT>
</SMALL>
</CENTER>
</BODY>
</HTML>
<BODY BGCOLOR="色指定">
背景色を指定します．

<FONT COLOR="色指定">
　　　　　　　....</FONT>
文字色を指定します．

次のどちらかで色指定します
【色指定の例】
(1)色の名前
　red
　deeppink
　darkorange
　green
(2)RGB 16進数(#rrggbb)
　#FF0000 ■
　#FF1493 ■
　#FF8C00 ■
　#008000 ■

※ブラウザによっては、(1)の方法
　でうまく表示できないらしいので
　本当は(2)の方法がお奨め．
HTMLサンプルページ4 (sample04.html)
試しに色々な文字色を試してみました。カラフルなページになりそうです。

HomePage作成支援Top HomePage
Prev.
はじめに（Index）		 Next
ＨＴＭＬ基礎の基礎 後編
Copyright(C) 1999-2001 T.Kaze/Family Page Hiroshima