HTML入門

■ ホームページのひな形

ほとんどのホームページは、次のような構造をしています。

HTMLソース	解説
`<!DOCtype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML lang="ja"> <HEAD> <META http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <TITLE>タイトル</TITLE> </HEAD> <BODY bgcolor="#FFFFFF" background="back.gif" text="#000000" link="#00008b" vlink="#00008b" alink="#FF0000" > 本文 </BODY> </HTML>`	`HTMLのヴァージョンを宣言 HTML文書の開始（日本語）ヘッダ部の開始文字コードの宣言タイトルヘッダ部の終了本文の開始本文本文の終了 HTML文書の終了`

■ HTMLのヴァージョン

これから始まるHTML文書がどのヴァージョンで書かれたものであるかを宣言します。

■ HTML文書

<HTML>で始まって</HTML>で終わるこの書き方をHTML（Hyper Text Markup Language）と呼びます。 HTMLの規則に従って書かれた文書をHTML文書（あるいはHTMLファイル、HTMLソース）と呼びます。

■ ヘッダ部

<HEAD>～</HEAD>の部分をヘッダ部と呼びます。ヘッダ部にはタイトルなどを記述します。

■ 文字コード

現在日本語で書かれているHTMLの多くには、文字コードとして JIS、Shift JIS、EUC などが利用されています。HTMLがどのコードで書かれているのかを示すために、このタグを書くようにしましょう。これらのどれか適切なものを書けばいいわけです。これがないと、正しく日本語が表示されない場合があります。


    <META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">

    <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

    <META http-equiv="Content-Type" content="text/html; charset=EUC-JP">

    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">

■ タイトル

<TITLE>～</TITLE>でタイトルを書きます。タイトルはブラウザのタイトルバーに表示されるだけではなく、「お気に入り」や「履歴」に表示されたり、検索エンジンの結果として表示されたりしますので、必ず記述するようにしましょう。

■ 本文

<BODY>～</BODY>の部分が本文です。多くのHTMLで、<BODY>で指定できる色の属性には、BGCOLOR、TEXT、LINK、VLINK、ALINK があります。このとき、HTML中の指定が中途半端だと、WWWブラウザでの指定とを混在させたときに見えにくい、もしくは見えないこともあります。色指定をする場合は、なるべく全部を指定するようにしましょう。

属性	意味
BGCOLOR=color	背景色を指定します。
BACKGROUND=url	画面の背景画像を指定します。
TEXT=color	通常テキストの色を指定します。
LINK=color	リンクテキストの色を指定します。
VLINK=color	訪問済みリンクテキストの色を指定します。
ALINK=color	マウスでクリック中のリンクテキストの色を指定します。

■ タグ

<HTML>や<HEAD>などをタグ、HTMLやHEADなどをタグ名と呼びます。タグ名には header → <HEAD>、break → など、英語のスペルを元にした名前が付けられています。

タグはほとんどの場合～のように開始タグと終了タグで囲みます。開始タグのタグ名にスラッシュ（/）をつけたものが終了タグです。たまに、 のような単独タグもあります。

タグ名は大文字でも小文字でも構いませんが、必ず半角文字で記述してください。また、<の後に空白があってはなりません。


    ○ <HTML>

    ○ <html>

    × ＜ＨＴＭＬ＞　　← 全角文字は駄目

    × < HTML>　　← <の後に空白を入れては駄目

開始と終了は、他の開始～終了タグの完全に外側か、完全に内側に無くてはなりません。例えば、<S>～<S>タグを記述する場合、次のようになります。


    ○ <S>～<B>～</B>～</S> ← 完全に外側

    × <B>～<S>～</B>～</S> ← 終了タグのみを挟んでいる

■ 属性

の color="#FF0000" のように属性を伴うものがあります。属性は多くの場合 属性名＝属性値 という形式で記述します。たまに 属性名 だけ指定すればよい場合もあります。(正確には、checked=checked の属性名が省略されているそうなのですが・・・)


    ○ <FONT color="#FF0000" size=5>～</FONT>

    ○ <INPUT type=checkbox checked>

属性名も大文字・小文字どちらでも構いませんが、必ず半角文字にしてください。属性名の前には必ず、ひとつ以上の半角スペースか、タブ文字か、改行をいれてください。


    ○ <FONT color="#FF0000">～</FONT>

    ○ <FONT color="#ff0000">～</FONT>

属性値も多くの場合大文字・小文字どちらでも構いませんが、ごくたまに大文字・小文字を区別する場合（target="_top"など）があります。


    ○ <FONT color="#FF0000">～</FONT>

    ○ <FONT color="#FF0000">～</FONT>

    × <A href="xx.html" target=_TOP>～</A>

属性の値に半角の英数字以外の文字を使用する場合は、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにしましょう。


    ○ <FONT size="+2">～</FONT>

    ○ <FONT size='+2'>～</FONT>

    × <FONT size=+2>～</FONT>

複数の属性を指定したい時は、ひとつ以上のスペースまたはタブまたは改行のあとにもうひとつの属性を記述します。順番は関係ありません。


    ○ <FONT size=7 color="#FF0000">～</FONT>