[トップページ]
HTMLを使ってみよう１
では、実際にホームページを作成する過程を、段階を追って見てみましょう。
タイトルバーに表示する文字を決定する
画面の背景と文字の色を決定する
ホームページの題名と説明を入れてみる
画像を入れてみる
テーブルを使用して、情報を整理してみる
ほかのページへのリンクをはる
タイトルバーに表示する文字を決定する
タイトルバーは、WWWブラウザの一番上にある細いバーの部分です。<TITLE>は<HEAD>内で指定します。
<HTML>
<HEAD>
<TITLE>My Home Page</TITLE>
</HEAD>
画面の背景と文字の色を決定する
画面の背景と文字の色を設定します。設定は<BODY>で行います。
<BODY BGCOLOR="#00FFFF" TEXT="#000000">
BGCOLORアトリビュートは画面の背景色、TEXTアトリビュートは文字の色を指定します。#000000や#FFFFFFをカラーコードといい、16進数で、R（赤）、G（緑）、B（青）を00〜FF（10進数では0〜255ということになります）の間で指定します。
ということで、表現できる最大色数は255の3乗で約1,600万色となります。
※最大色数は、OSやビデオカードの性能によって異なります。すべてのブラウザで、フルカラー表示できるわけではありません。
| カラーコードの一例 |
| #000000 |
黒 |
#FF4500 |
黄 |
| #FF0000 |
赤 |
#00FFFF |
水色 |
| #0000FF |
青 |
#FF00FF |
紫 |
| #00FF00 |
緑 |
#FFFFFF |
白 |
カラーコード一覧表
ホームページの題名と説明を入れてみる
ホームページの題名となる部分は、文字は大きく、画面の中央に表示。題名の後に線を引いて、ホームページの主旨を赤色の文字で説明することにします。
<CENTER>
<H1>Welcome to My Home Page !!</H1>
<HR>
<FONT COLOR="#FF0000">
私のホームページにようこそ<BR>
このホームページでは、私の大好きな花を紹介しています。<BR>
<HR>
</FONT>
</CENTER>
<CENTER>は、</CENTER>までに書かれている文字を、画面の中央にセンタリングします。
<H1>は、文字の大きさを指定するタグです。H1〜H6まで指定でき、H1が最も大きく、H6が最も小さくなります。
<HR>は、画面上に水平線を引きます。
<BR>は、改行指定です。
<FONT>は、</FONT>までに書かれている文字の書式を指定します。<FONT>のCOLORアトリビュート文字の色を指定しない場合、<BODY>のTEXTアトリビュートで指定されている色が適用されます。
画像を入れてみる
ホームページに画像を入れることにします。HTMLで指定できる画像タイプは、GIFとJPEGの２種類です。Windows標準のBitmap形式は使用できません。
<IMG SRC="hana.gif" ALT="花の画像です" ALIGN="TOP">
チューリップ<BR>
多年草。4月〜5月。花茎は一本で、花も一個だけ上向きにつく。<BR>
画像をロードするには、<IMG>を使用します。SRCアトリビュートには、画像ファイルへの絶対パスまたは、相対パスを指定します。ATLアトリビュートは、画像に対する説明文などを入力しておくと、画像が表示されない場合、この説明文が表示されます。
| 画像タイプ |
| GIF |
アイコンなどで使用 256色 |
| JPEG |
写真イメージなど ほぼフルカラー |
さらに、画像イメージの横に、画像の説明文を入力することにします。<IMG>のALIGNアトリビュートは、イメージに対するテキスト文字の表示位置を指定します。TOP指定は、テキスト文字を画像の右側上部に表示します。
テーブルを使用して、情報を整理してみる
その他、紹介したい情報をテーブルに格納することにします。
<HR>
<TABLE BORDER=1>
<CAPTION>その他、紹介</CAPTION>
<TR>
<TD>タンポポ</TD><TD>多年草。普通はカントウタンポポのことをいう。</TD>
</TR>
<TR>
<TD>カーネーション</TD><TD>多年草。別名オランダセキチク。</TD>
</TR>
<TR>
<TD>スノードロップ</TD><TD>多年草。薄緑色の花びらが、がくの内側にある。</TD>
</TR>
</TABLE>
<TD>〜</TD>で囲まれた部分がテーブルのセル（要素）となり、横に並べられます。<TR>〜</TR>で囲まれたセルは同行の列ブロックを構成します。セルの大きさは、各行、各列の中で最も大きな文字列に合わせて自動的に調整されます。
<TD>のかわりに<TH>を使用すると、そのセルの文字は太字になり、セルの中央にセンタリングされます。<TH>は、見出しなどに使用される場合が多いと思います。
セル内の文字の表示位置は、<TR>、<TD>、<TH>のALIGNアトリビュートに、"CENTER"、"LEFT"、"RIGHT"で指定します。
<CAPTION>は、テーブルの表題を書きたい場合に使用します。
ほかのページへのリンクをはる
ほかのホームページへのリンクをはることにします。
<HR>
<FONT SIZE=4 COLOR="#0000FF">
<CENTER>リンク集</CENTER>
</FONT>
<A HREF="http://www.yahoo.co.jp">YAHOO! Japan</A>検索ページです
<A>は「アンカー」と呼ばれ、別のページに移動するための手段を提供しています。移動先のURLおよびアンカーネームを、HREFアトリビュートに指定します。
また、アンカーにメールアドレスを記述することもできます。HREFアトリビュートに "MAILTO:メールアドレス" と記述します。
<HR>
<A HREF="MAILTO:sea_blue@mx1.freemail.ne.jp">メールはこちらへ</A>
完成！！
最後に、HTML終了タグを書きこんで完成です。
</BODY>
</HTML>
では、どんなページが出来上がったのか、見てみることにしましょう。
実行結果
アトリビュート
タグの属性を「アトリビュート」と呼びます。
絶対パス・相対パス
絶対パスは、ファイルの位置を頭からすべて記述します。
http://www1.freeweb.ne.jp/~seablue/images/aaaaa.gif
相対パスは、現在のディレクトリからの相対的な位置を記述します。
同一ディレクトリ内にあるファイル
bbbbb.html または ./bbbbb.html
直下のディレクトリにあるファイル
images/aaaaa.gif
直上のディレクトリにあるファイル
../index.shtml
[トップページ]
Copyright (C) 2000 Me All rights reserved
Mail To webmaster