HTMLのポイント
HTMLは非常にたくさんのタグが定義されているが、よく利用されるものをまとめておく。ここにないものは、参考書を調べるか、あるいは質問をすること。
HTMLとして記述すべきテキストは、このページではやや濃い青色で表示している。
- 参考書
- 日本実業出版社「ブラウザ別HTMLタグ使いこなし辞典」小林憲夫/安西栄二編著（\2,000）
HTMLテキストの骨格
- ファイル名は、必ず「.html」で終わること。
- 中身は次のようなタグ
- <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はいちばん小さい
文字に関するバリエーション
- 文字列の一部分を太字にしたいときには、次の形式を使う
- 文字の大きさを指定する。nによって大きさを指定できる。1〜7の数値を指定できるが、n=7の場合がいちばん大きい文字になる。通常はn=3の場合の大きさになる
- <FONT SIZE="n">大きさを指定する文字</FONT>
- 文字の色を指定する。nnnnnnによって色を指定できるが、指定方法は別掲
- <FONT COLOR="#nnnnnn">大きさを指定する文字</FONT>
区切り罫線
箇条書き
- 次のような形式を利用する
- <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文書と同じディレクトリ（フォルダ）にあるものとする
- 次のように記述する。大きさや配置などの指定も可能。ファイル名は、実際のファイルの名前を記述する
- 図版で1つの段落を取り、図版はセンタリングするのであれば、次のような記述があればいい
- <P ALIGN="center"><IMG SRC="ファイル名"></P>
リンク
- 別のページにリンク。文書ファイル名には、実存するファイル名を指定する。ここにアドレスを記述すると、まったく別のページにジャンプできる
- <A HREF="文書ファイル名">なにか適当な文字列など</A>
- 同一ページ内にリンク
- ページ内のジャンプ先に、以下のようなタグを記述する。computerは適当な単語でいい
- 上記のタグの位置にジャンプしたい場所に、以下のように記述する
- <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進数を使うくらいで何とかなるはず
色見本のページ