・HTMLの基本
・改行をする
・段落を設定する
・文字を太字にする
・文字を斜体にする
・文字にアンダーライン(下線)を引く
・文字のサイズを変える
・文字の色を変える
・文字の配置を指定する(左詰め、中央、右詰め)
・画像を表示する
・ページを移動する
HTMLの基本
HTMLはタグというものを使って書きます。単体で使うタグもあれば文字を挟んで使うタグもあります。以下はHTMLの基本となるタグです。
<HTML>
ここに内容を記述します
</HTML>
<HTML></HTML>の間のテキストがHTML形式であることを表します。これが無いとたとえファイルの拡張子が[*.htm]となっていてもHTMLとして認識されません。
これでもHTMLとして成り立ちますが、通常は更にその間に<BODY></BODY>というタグを挿入します。
<HTML>
<BODY>
ここに内容を記述します
</BODY>
</HTML>
また、ページにはタイトルをつけることができます。タイトルは以下のようにTITLEタグを用いてヘッダと呼ばれるHEADタグの内側に指定します。ヘッダは通常<BODY>の前に記述します。<TITLE></TITLE>の間の文字がタイトルになります。
<HTML>
<HEAD>
<TITLE>初めてのホームページ</TITLE>
</HEAD>
<BODY>
ここに内容を記述します
</BODY>
</HTML>
「ここに内容を記述します」の部分に好きなメッセージを書いてテキストエディタで保存してブラウザで表示してみましょう。その際、保存するファイル名は半角英数字にします。全角や半角カナ文字も使えないことはないのですが、日本語以外の環境ではもちろんのこと、機種によっては正しく認識できない場合があります。うまくいけばそのメッセージだけが表示されるはずです。
改行をする
HTMLではただテキストエディタで改行しただけでは実際に見たときに改行されていません。たとえば、
はじめまして。
私のホームページへようこそ。
をブラウザで表示しても
はじめまして。
私のホームページへようこそ。
と一直線に表示されてしまいます。それどころか間に隙間ができてしまいます。HTMLではただの改行は意味がないのです。
そこで、改行をするには<BR>(Break)というタグ使用します。
はじめまして。<BR>私のホームページへようこそ。
これを保存して表示して見てください。ちゃんと改行されているはずです。もちろん基本のタグがあることを想定しているのは言うまでもありません。これ以降もすべて同様です。
段落を設定する
段落を設定するには<P>(Paragraph)というタグを使用します。使い方は改行（<BR>）と同じです。
むかしむかし、おじいさんとおばあさんが…。<P>おばあさんが川で洗濯をしていると大きな桃が…。
とすると次のように表示されます。
むかしむかし、おじいさんとおばあさんが…。
おばあさんが川で洗濯をしていると大きな桃が…。
つまり2つ分の改行みたいな感じになります。また、<P></P>で挟むことによっても段落を設定することができます。例えば次のように書き換えることができます。
<P>むかしむかし、おじいさんとおばあさんが…。</P>おばあさんが川で洗濯をしていると大きな桃が…。
文字を太字にする
文字を太字にするには<B></B>というタグを使用します。
文字を<B>太字</B>にします。
これをブラウザで表示すると次のようになります。
文字を太字にします。
文字を斜体にする
文字を斜体にするには<I></I>というタグを使用します。
文字を<I>斜体</I>にします。
これをブラウザで表示すると次のようになります。
文字を斜体にします。
文字にアンダーライン(下線)を引く
文字にアンダーライン(下線)を引くには<U></U>というタグを使用します。
文字に<U>アンダーライン</U>を引きます。
これをブラウザで表示すると次のようになります。
文字にアンダーラインを引きます。
文字のサイズを変える
文字のサイズを変えるには<FONT></FONT>というタグを使用します。
<FONT SIZE="1">文字の大きさを指定します。</FONT><BR>
<FONT SIZE="2">文字の大きさを指定します。</FONT><BR>
<FONT SIZE="3">文字の大きさを指定します。</FONT><BR>
<FONT SIZE="4">文字の大きさを指定します。</FONT><BR>
<FONT SIZE="5">文字の大きさを指定します。</FONT><BR>
<FONT SIZE="6">文字の大きさを指定します。</FONT>
これをブラウザで表示すると次のようになります。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
また、見出し文字として<H1></H1>のようなタグを使用することもできます。
<H1>文字の大きさを指定します。</H1>
<H2>文字の大きさを指定します。</H2>
<H3>文字の大きさを指定します。</H3>
<H4>文字の大きさを指定します。</H4>
<H5>文字の大きさを指定します。</H5>
<H6>文字の大きさを指定します。</H6>
これをブラウザで表示すると次のようになります。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
文字の大きさを指定します。
|
文字の色を変える
文字の色を変えるにはサイズと同様に<FONT COLOR="文字色"></FONT>というタグを使用します。文字色は英単語で指定する方法と#FFFFFFのように１６進（0〜F）の英数字の組み合わせによって指定する方法の２通りあります。
<FONT COLOR="red">文字の色を指定します。</FONT><BR>
<FONT COLOR="#FF0000">文字の色を指定します。</FONT><BR>
<FONT COLOR="blue">文字の色を指定します。</FONT><BR>
<FONT COLOR="#0000FF">文字の色を指定します。</FONT>
これをブラウザで表示すると次のようになります。
文字の色を指定します。
文字の色を指定します。
文字の色を指定します。
文字の色を指定します。
|
文字の配置を指定する(左詰め、中央、右詰め)
文字の配置を指定するには<P
ALIGN="指定位置"></P>というタグを使用します。これは段落のタグ<P>を応用したものです。
<P
ALIGN="LEFT">左詰めに配置</P>
<P ALIGN="CENTER">中央に配置</P>
<P ALIGN="RIGHT">右詰めに配置</P>
これをブラウザで表示すると次のようになります。
画像を表示する
画像を表示するには<IMG>タグを使用します。使用例の前に使い方を簡単に紹介します。
<IMG SRC="画像ファイル名"
ALT="代替テキスト" BORDER="枠線の太さ"
align="配置" width="幅" height="高さ">
※上記の項目については、SRC以外省略しても構いません。
SRCには表示させたい画像の位置・ファイル名を入力します。これには通常、HTMLファイルとの相対パスを入力します。例えば、HTMLファイルと同じフォルダの画像を表示するなら、"mypicture.gif"にします。これが"images"というフォルダの中にある場合、"images/mypicture.gif"とします。また、1つ上の階層のフォルダに画像が存在するなら、"../mypicture.gif"とします。
ALTは「代替テキスト」と呼ばれています。これは画像が表示できなかった時に、代わりにそのテキストを表示させることによって、ページを見た人にどういう画像があるはずなのかを認識させることができます。また、画像が表示されている場合でも、それがどんな画像なのか補足・説明することもできます。この場合、画像にマウスカーソルをポイントするとそのテキストが表示されます。
BORDERは画像の外側に表示される枠線の太さです。0にすると枠線は表示されなくなります。
ALIGNでは画像の表示位置を指定します。”CENTER”とすれば中央の位置に表示されます。左側に表示させたい時は"LEFT"、右側の時は"RIGHT"とします。
WIDTHとHEIGHTはそれぞれ画像の幅と高さを指定します。ここで指定された値に従って画像は表示されるので、たとえ画像が指定したサイズと違った場合でも、そのサイズに合わせて（強引に）表示されます。正確なサイズを指定する必要があります。もちろん、拡大・縮小して表示したい場合は言うまでもありません。なお、省略すれば画像の本来のサイズでそのまま表示されます。
使用例
メール<BR>
<IMG SRC="mail.gif" ALT="メール" BORDER=0>
表示例
メール
ページを移動する
ページを移動するには<A>というタグを使用します。ページの移動は通常リンクと呼ばれるものです。そのリンクを利用者がクリックすればページの移動ができます。
<A HREF="移動先">リンクとして表示する文字・画像</A>
HREF="移動先"の部分には移動先のアドレスを指定します。指定方法は画像の表示と同じで、相対でも絶対でも構いません。また、リンクとして表示する文字・画像の部分には文字や<IMG>タグを挿入します。
使用例
<A HREF="http://prog.everlasting-progress.com/">Regress
or Progress(絶対アドレス)</A><P>
<A HREF="../index2.htm">Regress or Progress(相対アドレス)</A>
表示例
Regress or Progress(絶対アドレス)
Regress or Progress(相対アドレス)
|
