― HTML入門 ―
■ 文書構造に関するタグ
<HTML> ... </HTML>
| ... の部分が HTML 文書であることを表す
|
<HEAD> ... </HEAD>
| ... の部分がヘッダ(本文以外のタイトルとか作成者)であることを表す.
|
<TITLE> ... </TITLE>
| ... の部分がこの文書のタイトルであることを表す.普通はここに書かれた
ものはブラウザのウィンドウのタイトル部分に表示される.
|
<BODY> ... </BODY>
| ... の部分が HTML 文書の本文であることを表す
|
<BODY BGCOLOR="color"> ... </BODY>
| 背景色を color 色にする
|
<BODY BACKGROUND="file"> ... </BODY>
| 背景を fileで指定される画像にする
|
<H1> ... </H1>
| ... の部分が第1レベルの見出しであることを表す
|
<H2> ... </H2>
| ... の部分が第2レベルの見出しであることを表す
|
... | ...
|
<H6> ... </H6>
| ... の部分が第6レベルの見出しであることを表す
|
■ 文字(フォント)の形,色,サイズに関するタグ
<B> ... </B>
| ... の部分を太字 (bold) にする
|
<I> ... </I>
| ... の部分を斜体 (itatlic) にする
|
<TT> ... </TT>
| ... の部分をタイプライタ体 (typewriter) にする
|
<EM> ... </EM>
| ... の部分を強調 (emphasize) する
|
<U> ... </U>
| ... の部分に下線 (underline) をつける
|
<S> ... </S>
| ... の部分に取消線 (strikeout line) をつける
|
<SUB> ... </SUB>
| ... の部分を下付 (subscriptlike this) にする
|
<SUP> ... </SUP>
| ... の部分を上付 (superscriptlike this) にする
|
<font ***> ... </font>
| ... の部分を *** で指定した属性にする.
|
□ FONT タグの使用例
<FONT size=6> ... </FONT> サイズを6にする(サイズは1〜7)
<FONT color="red"> ... </FONT> 色を赤にする(色の名前は以下を参照)
<FONT size=2 color="blue"> ... </FONT>
サイズを2にして色を青にする
□ 色の名前
■ | black
| ■ | red
| ■ | green
|
■ | gray
| ■ | mediumvioletred
| ■ | greenyellow
|
■ | darkgray
| ■ | lightcoral
| ■ | lightgreen
|
■ | slategray
| ■ | orchid
| ■ | forestgreen
|
■ | blue
| ■ | indianred
| ■ | chartreuse
|
■ | cornflowerblue
| ■ | deenpink
| ■ | darkgreen
|
■ | cyan
| ■ | darkred
| ■ | seagreen
|
■ | darkblue
| ■ | crimson
| ■ | springgreen
|
■ | darkcyan
| ■ | coral
| ■ | olive
|
■ | darkslateblue
| ■ | chocolate
| ■ | teal
|
■ | deepskyblue
| ■ | dardorange
| ■ | palegreen
|
■ | dodgerblue
| ■ | firebrick
| ■ | mediumseagreen
|
■ | lightblue
| ■ | hotpink
| ■ | lawngreen
|
■ | mediumblue
| ■ | violet
| ■ | lime
|
■ | mediumslateblue
| ■ | mediumvioletred
| ■ | limegreen
|
■ | midnightblue
| ■ | lightcoral
| ■ | turquoise
|
■ | navy
| ■ | darkgoldenrod
| ■ | olivedrab
|
■ | paleturquoise
| ■ | gold
| ■ | aquamarine
|
■ | powderblue
| ■ | goldenrod
| ■ | yellowgreen
|
■ | skyblue
| ■ | salmon
| ■ | khaki
|
■ | aqua
| ■ | orange
| ■ | darkkhaki
|
■ | slateblue
| ■ | pink
| ■ | yellow
|
■ | lightslategray
| ■ | orangered
| ■ | navajowhite
|
■ | steelblue
| ■ | tomato
| ■ | palegoldenrod
|
■ | magenta
| ■ | maroon
| ■ | rosybrown
|
■ | cadetblue
| ■ | mediumorchid
| ■ | fuchsia
|
□ RGB レベルで色を指定する
画面上の各点の色は,赤(R),緑(G),青(B)の3原色の組合わせで
表示されています.R, G, B はそれぞれ,0から255の明るさで光らせることが
できて,例えば,赤(R) を 255, 緑(G) を 0, 青(B) を 0 で光らせると
その点は赤に見え,赤(R) を 255, 緑(G) を 255, 青(B) を 0 で光らせると
黄色になります.以下に R, G, B のいくつかの組合わせを示します.
赤の明るさ(R) |
緑の明るさ(G) |
青の明るさ(B) |
|
10進数 | 16進数 |
10進数 | 16進数 |
10進数 | 16進数 |
見える色 |
0 | 00 |
0 | 00 |
0 | 00 |
■ |
255 | FF |
0 | 00 |
0 | 00 |
■ |
0 | 00 |
255 | FF |
0 | 00 |
■ |
0 | 00 |
0 | 00 |
255 | FF |
■ |
255 | FF |
255 | FF |
0 | 00 |
■ |
255 | FF |
0 | 00 |
255 | FF |
■ |
0 | 00 |
255 | FF |
255 | FF |
■ |
255 | FF |
255 | FF |
255 | FF |
□ |
144 | 90 |
144 | 90 |
144 | 90 |
■ |
100 | 64 |
120 | 78 |
200 | C8 |
■ |
HTML でも,この RGB の組合わせで色を指定することができます.
例えば,ある部分の文字の色をくすんだ水色の中間色にしたければ
<FONT COLOR="#6478C8"> ある文字列 </FONT>
のようにします.このように,RGB で色を指定する場合は,R, G, B の
明るさを16進数で与えることに注意してください.
COLOR="#6478C8"
の部分が色の指定になっていて,一般には
COLOR="#RRGGBB"
のように指定します.ここで,RRGGBBはR, G, B の明るさを
16進数表記したものです.
□ < や > などの特殊文字の表示
< や > はタグ記号として使われるために,HTML ファイルに
直接これらの記号を書いてもブラウザには表示されません.そこで,
これらを表示するには,特別な記号を使います.
HTML ファイル内 | ブラウザでの見え方 |
---|
< | <
|
> | >
|
& | &
|
" | "
|
■ WWW と HTMLの配置に関するタグ
<BR>
| 改行する
|
<P>
| 段落を変える
|
<CENTER> ... </CENTER>
| ... の部分を中央寄せにする
|
<PRE> ... </PRE>
| ... の部分を HTML ファイルに書いたのと同じ体裁で表示する
|
□ ある段落の行全部を中央寄せ,左寄せ,右寄にする
<P ALIGN=CENTER> ... </P>
| ...の部分の段落のすべての行を中央寄せにする
|
<P ALIGN=RIGHT> ... </P>
| ...の部分の段落のすべての行を右寄せにする
|
<P ALIGN=LEFT> ... </P>
| ...の部分の段落のすべての行を左寄せにする
(何も指定しない時と同じ)
|
■ 箇条書(リスト)関連のタグ
<UL><LI> ... </UL>
| マークつきリスト
|
<OL><LI> ... </OL>
| 番号つきリスト
|
<DL><DT>...<DD> ... </DL>
| 定義型リスト
|
□ マークつきリストの使用例
HTMLでの記述 | 見え方 |
<UL>
<LI> 冷蔵庫
<LI> テレビ
<LI> 洗濯機
</UL>
|
|
□ 番号つきリストの使用例
HTMLでの記述 | 見え方 |
<OL>
<LI> 序論
<LI> 提案
<LI> 結論
</OL>
|
- 序論
- 提案
- 結論
|
HTMLでの記述 | 見え方 |
<OL>
<LI> 序論
<UL>
<LI> 過去の結果
<LI> 意義
</UL>
<LI> 提案
<UL>
<LI> 提案1
<LI> その2
</UL>
<LI> 結論
</OL>
|
- 序論
- 提案
- 結論
|
□ 定義型リストの使用例
HTMLでの記述 | 見え方 |
<DL>
<DT> パソコン
<DD> パーソナルコンピュータ
<DT> WWW
<DD> World Wide Web の頭文字
<DT> ブラウザ
<DD> HTMLに従って文書を表示するソフトウェア
</DL>
|
- パソコン
- パーソナルコンピュータ
- WWW
- World Wide Web の頭文字
- ブラウザ
- HTMLに従って文書を表示するソフトウェア
|
■ 表形式で表示する
表を表示するには TABLE タグを
使います.
<TABLE> ... </TABLE>
| ... の部分が表であることを表す
|
<TABLE BORDER> ... </TABLE>
| ... の部分が枠線つき
の表であることを表す
|
<TH> ... </TH>
| ... の部分が見出しであることを表す
|
<TR> ... </TR>
| ... の部分が表の1行であることを表す
|
<TD> ... </TD>
| ... の部分が表の1項目であることを表す
|
□ TABLEタグの使用例
HTMLでの記述 | 見え方 |
<TABLE BORDER>
<TR><TH> 科目 </TH><TH> 得点 </TH></TR>
<TR><TD> 経済原論 </TD><TD> 80 </TD></TR>
<TR><TD> 確率統計 </TD><TD> 55 </TD></TR>
<TR><TD> 英語 </TD><TD> 98 </TD></TR>
</TABLE>
|
科目 | 得点 |
経済原論 | 80 |
確率統計 | 55 |
英語 | 98 |
|
□ 種々の指定
HTML | 意味
|
---|
表の位置と大きさ |
<TABLE ALIGN=LEFT>
| 表をウィンドウの左端に表示
|
<TABLE ALIGN=RIGHT>
| 表をウィンドウの右端に表示
|
<TABLE WIDTH=w% HEIGHT=h%>
| 表の横,縦の長さをウィンドウのw%, h% に固定する
|
欄内の項目の位置 |
<TR ALIGN=RIGHT>
| その行全部の項目を欄内に右寄で表示
|
<TR ALIGN=CENTER>
| その行全部の項目を欄内に中央寄で表示
|
<TD ALIGN=RIGHT>
| その項目を欄内に右寄で表示
|
<TD ALIGN=CENTER>
| その項目を欄内に中央寄で表示
|
背景色 |
<TABLE BGCOLOR="color">
| 表全体の背景色を color色にする
|
<TD BGCOLOR="color">
| その欄の背景色を color色にする
|
<TH BGCOLOR="color">
| その見出しの背景色を color色にする
|
複数列(横方向)にまたがる欄 |
<TD COLSPAN=n>
| 横にn個分の欄にわたる欄にする
|
複数行(縦方向)にまたがる欄 |
<TD ROWSPAN=n>
| 縦にn個分の行にわたる欄にする
|
その他 |
<TD NOWRAP>
| その欄内での改行を禁止
|
□ 使用例
HTMLでの記述 | 見え方 |
<TABLE BORDER>
<TR><TD> あ </TD>
<TD ALIGN=CENTER BGCOLOR="YELLOW"> い </TD>
<TD ALIGN=RIGHT> う </TD></TR>
<TR><TD COLSPAN=2 ALIGN=CENTER> え </TD>
<TD> お </TD></TR>
<TR><TD> かき </TD>
<TD> くけ </TD>
<TD> こさ </TD>
</TR>
</TABLE>
|
|
■ リンクに関するタグ
ある項目を,文書中の別の場所や別の場所にある文書などと
リンクしておくことにより,ブラウザの画面上でその項目を
クリックするだけでそれらのリンク先の文書が表示されます.
<A HREF="URL"> ... </A>
| ... の部分のリンク先を URL で指定された他の文書に設定する
|
<A HREF="#name"> ... </A>
| ... の部分のリンク先を同じ文書内の name で指定された
場所に設定する
|
<A NAME="name"> ... </A>
| ... の部分に name という名前をつけて,他の場所から
リンクできるようにする
|
HTMLでの記述 | 見え方 |
<UL>
<LI> <a href="http://www.yahoo.co.jp/">
ヤフー </a>
<LI> <a href="http://www.google.com/">
Google </a>
<LI> <a href="http://www.ntt.co.jp/">
NTT </a> </UL>
</UL>
|
|
■ その他のタグ(画像など)
<IMG SRC="file">
| file で指定される画像を表示する
|
<IMG SRC="file" ALIGN=pos>
| file で指定される画像を pos で指定される位置に
表示する.pos には left, right,
top, middle, bottom 等を指定できる.
|
<HR>
| 横線を引く
|
<HR NOSHADE>
| 陰影のない横線を引く
|
<BLINK> ... </BLINK>
| ... の部分を点滅させる
|
HTMLでの記述 | 見え方 |
けーぶるかーです...
<img src="cablecar.jpg"
align="top">
|
けーぶるかーです...
|
(注意) IMG SRC= で表示できる
画像ファイルは,JPEG あるいは GIF という形式で保存された
ものでなければなりません.