HTML Lab.

HTML Laboratory
HTML をつかった一般的なものから Java Script を使った特殊なものまでを
順に解説していきます．

－基本編－
１．一番簡単なHTMLによるページ作成

 ２．文字の飾り付け

 ３．文字の表示位置（基本編）

４．画像の貼り付け（基本編）

５．基本編のまとめ

前に戻る

１．一番簡単なHTMLによるページ作成

まず，テキストエディタ（メモ帳など）を開いてください．ここにHTML文書を作成していきます．HTMLによるページの基本は， <HTML> タグと <BODY> タグです．どんなページにもこの二つのタグは欠かせません．必ず終タグ， </HTML> と </BODY> によって囲む形で使用します．以下のサンプルを入力してみてください．

＜サンプル１．１＞ サンプル表示

<HTML>
<BODY>
ようこそ！ホームページへ！！
</BODY>
</HTML>

作成し終わったら，このファイルを test.html という名前で保存します．続いてこの test.html を Netscape Navigator や Internet Explorer などのブラウザで開きます． Netscape Navigator を例として，「ファイル」「ページを開く」「ファイルを選択」で test.html を選択すれば表示できるはずです．

どうでしょうか，表示できましたか？ブラウザの表示部分の左上の方に「ようこそ！ホームページへ！！」と表示されているはずです．

次に，このページの背景の色を変えてみましょう．先ほどの <BODY> タグに記述を追加します．背景を「白(white)」にしてみましょう．２行目の <BODY> を

<BODY BGCOLOR="white">

に書き換えてください．リストは以下のようになります．

＜サンプル１．２＞ サンプル表示

<HTML>
<BODY BGCOLOR="white">
ようこそ！ホームページへ！！
</BODY>
</HTML>

先ほど同様に保存して，ブラウザで表示してみてください．今度は背景が白で表示されるはずです．

さあ，ここまで来るとちょっと欲がでてきます．文字の色はどうしましょう？ここで標準の文字の色を「青(blue)」にしてみましょう．やはり，<BODY> タグに追加をします．

<BODY BGCOLOR="white" TEXT="blue">

に書き換えてください．

＜サンプル１．３＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="blue">
ようこそ！ホームページへ！！
</BODY>
</HTML>

白地に青で文字が表示されましたね．以上でファーストステップは終了です．

トップへ

２．文字の飾り付け

１章では，ページの作り方について説明しました．今度は，表示される文字そのものについてを説明していきます．文字の飾り付けにはいろいろなものがありますが，よく使われるのは，ボールド（太字），イタリック（斜体）です．それぞれを表現するタグが <B> と <I> です．これもそれぞれの終タグ， </B> と </I> に囲まれた部分が飾り付けの対象となります．

それでは，１章で用いたサンプルの「ようこそ！」の部分をボールドに，「ホームページへ！！」の部分をイタリックにそれぞれしてみましょう．＜サンプル１．３＞を＜サンプル２．１＞のように書き換えましょう．

＜サンプル２．１＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="blue">
<B>ようこそ！</B><I>ホームページへ！！</I>
</BODY>
</HTML>

これが出来れば，ボールドでかつイタリックという場合はどうでしょうか？もうおわかりですね！ <B><I>（対象となる文章）</I></B> とすることによって実現可能です．

今度は，部分的な文字の色を変えてみましょう．このページの標準の文字色は「青(blue)」でしたね．それでは「ようこそ！」の部分を「赤(red)」にしてみましょう．実現するためには <FONT COLOR="色"> タグを使います．やはりこれも終タグとともに用います．＜サンプル２．１＞を＜サンプル２．２＞のように書き換えてください．

＜サンプル２．２＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="blue">
<FONT COLOR="red"><B>ようこそ！</B></FONT>
<I>ホームページへ！！</I>
</BODY>
</HTML>

＜サンプル２．１＞と少し違っているのは，エディタでは「ようこそ」と「ホームページへ」の間に改行が入っていますが，ブラウザで見たときには１行に「赤」と「青」で表示されています．ブラウザではエディタでの改行やタブは無視されます．

次に，文字の大きさを変えてみましょう．これは， <FONT SIZE="大きさ"> タグを使います．色を変えた「ようこそ」の部分を大きくしてみましょう．大きさを指定しない場合，ブラウザでの標準文字サイズは "3"ですので，これを "7" にしてみましょう．

＜サンプル２．３＞ サンプル表示

<HTML>
lt;BODY BGCOLOR="white" TEXT="blue">
<FONT COLOR="red" SIZE="7"><B>ようこそ！</B></FONT>
<I>ホームページへ！！</I>
</BODY>
</HTML>

どうです？大きくなりましたね．以上でセカンドステップは終了です．

トップへ

３．文字の表示位置（基本編）

２章では，文字の飾り付けついて説明しました．今度は，文字の表示位置について説明したいと思います．ワープロなどを使っている場合でも「左寄せ」「真ん中」「右寄せ」などがありますね．これと同様な働きをするのが <LEFT> <CENTER> <DIV> タグです．これらのタグも終タグと囲む形で使用します．まずは「左寄せ」と「真ん中」を説明します．＜サンプル３．１＞を作成し，ブラウザで表示してみてください．

＜サンプル３．１＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="black">
<LEFT>ようこそ！ホームページへ！！</LEFT>
<CENTER>ようこそ！ホームページへ！！</CENTER>
</BODY>
</HTML>

どうでしょう？１行目は左に，２行目は真ん中に表示されました．次は「右寄せ」ですがこれはちょっと違った使い方になります． <DIV> タグはこれ一つでは何の意味も持ちません．右寄せ(right)の場合， <DIV ALIGN="right"> という使い方になります．ここで賢い方なら， ALIGN="" のところを， left や center にしたらどうなるのか？と思ったかもしれません．それでは，＜サンプル３．２＞を作成して表示してみてください．

＜サンプル３．２＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="black">
<DIV ALIGN="right">ようこそ！ホームページへ！！</DIV>
<DIV ALIGN="left">ようこそ！ホームページへ！！</DIV>
<DIV ALIGN="center">ようこそ！ホームページへ！！</DIV>
</BODY>
</HTML>

１行目から順に右，左，真ん中に表示されています． <DIV> タグは <LEFT> <CENTER> タグの代わりにもなります．

続いて，改行を説明します．改行は <BR> タグによって行います．これには終タグが必要ありません．改行したいところに <BR> タグを入れればＯＫです．＜サンプル３．３＞を作成し，表示してみてください．

＜サンプル３．３＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="black">
ようこそ！<BR>ホームページへ！！
</BODY>
</HTML>

「ようこそ！」が１行目にそのあと改行されて「ホームページへ！！」が２行目に表示されていますね．これで表示位置の基本編は終了です．

トップへ

４．画像の貼り付け（基本編）

ここまで来ると「字」だけのページでは物足りなくなってきます．今度は「絵」や「写真」を入れてみましょう．ホームページに用いられている画像の形式は， GIF や JPEG といったものが一般的です． Netscapeでは対応はしていませんが， Explorer では，ウィンドウズの標準画像形式の BMP も表示することが出来ます．ただし，誰もが見ることの出来るページを目指すには前者を用いたほうがよいでしょう．

下の画像はグラフィックソフトで描いた絵です（使用ソフト：Paint Shop Pro Ver.4）．

いろいろなソフトがありますが，描いた絵を GIF や JPEG で保存できるものを使用してください．でないと，せっかく描いた絵もホームページに載せられなくなってしまいますよ．また，最近はデジタルカメラというものがいろいろなメーカーから出ています．たいていのものは撮った写真が JPEG 形式で保存されますので，そのままホームページに載せることも可能です．このホームページの写真は全てデジカメによるものです．

さて，本題に戻って画像の貼り付け方です．ここでは，sample4_1.gif（上の図）が＜サンプル４．１＞と同じディレクトリ（フォルダ）にあることが前提条件で話を進めていきます．違うディレクトリ（フォルダ）にある場合にはその場所を指定する必要がありますがここでは触れないこととします．

絵を表示するタグは <IMG SRC="絵の名前"> です．＜サンプル４．１＞を作成し表示してみてください．自分の描いた絵を使用する場合は，sample4_1.gifを自分の作成した絵の名前に，サンプルを用いるときは，sample4_1.gif の絵をダウンロードして，＜サンプル４．１＞と同じディレクトリ（フォルダ）に入れてください．

＜サンプル４．１＞ サンプル表示

<HTML>
<BODY>
<IMG SRC="sample4_1.gif">
</BODY>
</HTML>

ブラウザの左端に表示されたと思います．それでは真ん中にするには？そう， <CENTER> タグでしたよね．それでは＜サンプル４．２＞を作成して表示してみてください．

＜サンプル４．２＞ サンプル表示

<HTML>
<BODY>
<CENTER><IMG SRC="sample4_1.gif"></CENTER>
</BODY>
</HTML>

続いて，「絵」と「文字」の混在のページを作りましょう．＜サンプル４．３＞を作成し表示させてください．

＜サンプル４．３＞ サンプル表示

<HTML>
<BODY>
<CENTER><IMG SRC="sample4_1.gif">これはサンプルの絵です．</CENTER>
</BODY>
</HTML>

絵の右下に「これはサンプルの絵です．」という文字が表示されましたね．では，この文字右上にするにはどうしたらよいのでしょうか？あるいは真ん中とか．．．このために <IMG> タグに追加をします．

<IMG SRC="絵の名前" ALIGN="top">

<IMG SRC="絵の名前" ALIGN="middle">

それでは＜サンプル４．４＞を作成し，表示してみてください．上下の絵がくっついてしまうのをさけるために <BR> タグを使用しています．

＜サンプル４．４＞ サンプル表示

<HTML>
<BODY>
<CENTER><IMG SRC="sample4_1.gif" ALIGN="top">これはサンプルの絵です．</CENTER>
<BR>
<CENTER><IMG SRC="sample4_1.gif" ALIGN="middle">これはサンプルの絵です．</CENTER>
</BODY>
</HTML>

さあ，これで画像の貼り付け方基本編は終了です．

トップへ

５．基本編のまとめ

ここまでくれば，一通り「人に見せる」という目的のホームページを作ることが出来るはずです．さあ，基本編のまとめとして，<サンプル５．１>を作成し，表示させて見てください．解説は不要と思われますので， HTML をみて，どのようなページが表示されるのか，想像してみるのも良いでしょう．

＜サンプル５．１＞ サンプル表示

<HTML>
<BODY BGCOLOR="white" TEXT="black">
<CENTER><FONT SIZE="7" COLOR="blue">
ようこそ！私のホームページへ！
</FONT></CENTER>
<BR><BR>
<CENTER>
<IMG SRC="sample4_1.gif" ALIGN="middle">
この絵は，私がホームページ作成用に描いた
<B>サンプルイメージ</B>です．
</CENTER>
<BR>
<CENTER;>
どうでしょうか，ちゃんと表示されていますか？<BR>
あなたも自分の好きなページを作ってみてくださいね．<BR>
<BR>
<DIV ALIGN="right"><I>Written by Tany.</I></DIV>
</BODY>
</HTML>

トップへ