HTMLダイジェスト

HTMLのポイント

HTMLは非常にたくさんのタグが定義されているが、よく利用されるものをまとめておく。ここにないものは、参考書を調べるか、あるいは質問をすること。

HTMLとして記述すべきテキストは、このページではやや濃い青色で表示している。

参考書
- カラー版　HTML&JavaScript&スタイルシート
  ホームページ辞典
  翔泳社刊、アンク著、￥1900

HTMLテキストの骨格

ファイル名は、必ず「.html」で終わること。（.htmでもかまわない）
中身は次のようなタグ
- <HTML><HEAD>
- <TITLE>タイトル</TITLE>
- </HEAD>
- <BODY BGCOLOR="#FFFFFF">
- ページの内容
- </BODY>
- </HTML>
「#FFFFFF」は、ページの背景色
「BGCOLOR="#FFFFFF"」の代わりに「BACKGROUND="ファイル名"」（ファイル名には画像ファイルを指定）にすると、ページの背景は、指定した画像ファイルがびっしりと並んで表示される
「タイトル」は通常はブラウザのウインドウタイトルに表示される文字列
「ページの内容」には、かなりたくさんの記述が入ることになる

段落（一般的な本文）

基本的な形式は次の通り。これにより、通常の1つの段落ができあがる。
- <P>　本文の内容　</P>
- なお、単に <P> を使って、改行を入れることも利用される（その方が多い）
段落全体を中央に配置したいときには、次のような形式を使う
- <P ALIGN="center">　本文の内容　</P>
段落全体を右寄せに配置したいときには、次のような形式を使う
- <P ALIGN="right">　本文の内容　</P>

特別な文字

一部の文字は、そのままでは記述できないので、以下のように、代わりにタグを記述する
- 改行：<BR>　メモ帳の画面で改行していても、ページ上では改行されない
- >：>
- <：<
- &：&
- "："

見出し

「見出し」とは、太字あるいは大きな文字を1行に配置するもの。次のような形式で記述すればよい。nは1～6の数値
- <Hn>　見出しの文字列　 </Hn>
- n=1がいちばん大きな文字、n=6はいちばん小さい

文字に関するバリエーション

文字列の一部分を太字にしたいときには、次の形式を使う
- <B>太字にしたい文字列</B>
文字の大きさを指定する。nによって大きさを指定できる。1～7の数値を指定できるが、n=7の場合がいちばん大きい文字になる。通常はn=3の場合の大きさになる
- <FONT SIZE="n">大きさを指定する文字</FONT>
文字の色を指定する。nnnnnnによって色を指定できるが、指定方法は別掲
- <FONT COLOR="#nnnnnn">大きさを指定する文字</FONT>

区切り罫線

<HR>　を使う。太さや幅などを変更できる。

箇条書き

次のような形式を利用する
- <UL>
- <LI>箇条書き項目1
- <LI>箇条書き項目2
- 　　　：
- <LI>箇条書き項目m
- </UL>
番号付きの箇条書きは次のような形式を利用する
- <OL>
- <LI>箇条書き項目1
- <LI>箇条書き項目2
- 　　　：
- <LI>箇条書き項目m
- </OL>

インデント

実は、けっこう難しい
見出しと本文があり、本文をインデントするという方針だと次のような感じ
- <DL>
- <DT>見出し1
- <DD>インデントをかけたい本文1
- <DT>見出し2
- <DD>インデントをかけたい本文2
- 　　　：
- </DL>

画像

画像ファイルは、作成してい.html文書と同じディレクトリ（フォルダ）にあるものとする
次のように記述する。大きさや配置などの指定も可能。ファイル名は、実際のファイルの名前を記述する
- <IMG SRC="ファイル名">
図版で1つの段落を取り、図版はセンタリングするのであれば、次のような記述があればいい
- <P ALIGN="center"><IMG SRC="ファイル名"></P>

リンク

別のページにリンク。文書ファイル名には、実存するファイル名を指定する。ここにアドレスを記述すると、まったく別のページにジャンプできる
- <A HREF="文書ファイル名">なにか適当な文字列など</A>
同一ページ内にリンク
- ページ内のジャンプ先に、以下のようなタグを記述する。computerは適当な単語でいい
  - <A NAME="computer"></A>
- 上記のタグの位置にジャンプしたい場所に、以下のように記述する
  - <A HREF="#computer">なにか適当な文字列など</A>

一覧表

実は相当難しい。以下の例を参照してもらいたい。表の中の1行が<TR>～</TR>によって構成される。さらに、その中に、1項目が<TH>～</TH>あるいは<TD>～</TD>によって構成される
- <TABLE BORDER>
- <TR><TH>どうぶつ名</TH><TH>えさ</TH><TH>なきごえ</TH></TR>
- <TR><TD>いぬ</TD><TD>ドッグフード</TD><TD>わんわん！</TD></TR>
- <TR><TD>ねこ</TD><TD>キャットフード</TD><TD>にゃん</TD></TR>
- </TABLE>
表示結果

どうぶつ名えさなきごえ

いぬドッグフードわんわん！

ねこキャットフードにゃん

色の指定について

代表的な色は、テキストを記述すればよい。利用できる単語の一例は次のとおり
- black, green, blue, red, white ...
そうでない場合、3原色の混合比率を値として利用できる
- 赤、緑、青を、それぞれ16進数の2桁ずつの値で表現し、それを書き並べる
- 各値は2桁で、00～FF。結果的に6桁の文字列になる
- 赤だと、FF0000。緑だと、00FF00。数値を変化させれば、微妙な色合いも出すことができる。ただし階調には限界がある。概ね、00、11、22、…、CC、DD、EE、FFあたりの16進数を使うくらいで何とかなるはず

色見本のページ