― 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>     サイズを６にする（サイズは１〜７）
     <FONT color="red"> ... </FONT>  色を赤にする（色の名前は以下を参照）
     <FONT size=2 color="blue"> ... </FONT>
                                    サイズを２にして色を青にする
□ 色の名前
■ 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 ファイル内 ブラウザでの見え方
&lt; <
&gt; >
&amp; &
&quot; "
■ 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>
  1. 序論
  2. 提案
  3. 結論

HTMLでの記述 見え方 
<OL>
  <LI> 序論
    <UL>
      <LI> 過去の結果
      <LI> 意義
    </UL>
  <LI> 提案
    <UL>
      <LI> 提案１
      <LI> その２
    </UL>
  <LI> 結論
</OL>
  1. 序論
    • 過去の結果
    • 意義
  2. 提案
    • 提案１
    • その２
  3. 結論

□ 定義型リストの使用例

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 という形式で保存された ものでなければなりません．