HTML文の基本・・メモ

このページは、必要な所をそのままコピーして、HTML文に張り付けて使えます。

◎タグについて、


   <  >で囲む。すべて半角の英数字を使う。


◎基本形


<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF">

この間に本文を書く。

</BODY>
</HTML>


◎文字の大きさの指定


<H1>文字</H1>  ↓
            小さくなる
<H5>文字</H5>  ↓

実例 
<H1>H1の文字</H1><H3>H3の文字</H3><H5>H5の文字</H5>

表示すると改行して表示される

H1の文字

H3の文字

H5の文字

位置を指定して表示する

<H1 ALIGN="RIGHT">右にH1の文字</H1>
<H3 ALIGN="CENTER">中央にH3の文字</H3>
<H5 ALIGN="LEFT">左にH5の文字</H5>

右にH1の文字

中央にH3文字

左にH5の文字



<FONT SIZE="1">文字</FONT>  ↓
                    大きくなる
<FONT SIZE="5">文字</FONT>   ↓

実例 
SIZE=7の文字
SIZE=6の文字
SIZE=5の文字
SIZE=4の文字
SIZE=3の文字
SIZE=2の文字
SIZE=1の文字

<FONT SIZE="5">SIZE=5の文字</FONT><FONT SIZE="-1">文字を1段階小さくする</FONT>
表示すると
SIZE=5の文字文字を1段階小さくする


◎文字のスタイルの指定


<B>太字</B> 太字

<I>斜体</I> 斜体

<TT>等幅</TT> 等幅

<SUP>上付</SUP> 上付

<SUB>下付</SUB> 下付

<U>下線</U> 下線

<S>取消</S> 取消

<STRONG>強調</STRONG> 強調


◎文字色の指定


(1)赤緑青の各色を16進数(00〜FFの256段階)で表す。

<FONT COLOR="#FF0000">文字</FONT> 赤い文字 R

<FONT COLOR="#00FF00">文字</FONT> 緑の文字 G

<FONT COLOR="#0000FF">文字</FONT> 青い文字 B

実例 
<FONT COLOR="#FF0000">赤い文字</FONT><FONT COLOR="#00FF00">緑の文字</FONT><FONT COLOR="#0000FF">青い文字</FONT>
表示すると・・・
赤い文字緑の文字青い文字


(2)色を名前で表す。

<FONT COLOR="Red">文字</FONT> #FF0000の赤い文字

<FONT COLOR="Lime">文字</FONT> #00FF00の緑の文字

<FONT COLOR="Blue">文字</FONT> #0000FF青い文字

実例 
White Silver Gray Black Red Lime Blue Aqua
Fuchsia Yellow Navy Green Teal Maroon Purple Olive

WhiteSilver Gray Black Red Lime Blue Aqua
Fuchsia Yellow Navy Green Teal Maroon Purple Olive


最初のページをつくる。


◎ファイルの名前を考える   index.html index.htm index.html

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#ffff00" ALINK="#00FFFF" VLINK="#FF0000">









</BODY>
</HTML>

バックに画像を使う。


<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BACKGROUND="./haikei.gif" TEXT="#FFFFFF" LINK="#ffff00" ALINK="#00FFFF" VLINK="#FF0000">






</BODY>
</HTML>


バック画像の固定。IEのみ BGPROPERTIES=FIXED


<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BACKGROUND="./haikei.gif" BGPROPERTIES=FIXED TEXT="#FFFFFF" LINK="#ffff00" ALINK="#00FFFF" VLINK="#FF0000">


</BODY>
</HTML>


マージンの設定。IEのみ LEFTMRGEN="50" TOPMARGIN="20"


<HEAD>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BACKGROUND="./haikei.gif" LEFTMRGEN="50" TOPMARGIN="20" TEXT="#FFFFFF" LINK="#ffff00" ALINK="#00FFFF" VLINK="#FF0000">


</BODY>
</HTML>




参考
◎ブラウザ ホームページを見るソフトのこと。
◎ブラウザは、最初に、INDEX.HTM をさがして読み込む。 
◎表示したくない時 <!-- --> で囲む。
◎ TEXT="#FFFFFF" 文字の色
◎ LINK="#ffff00" リンクを指定したところの文字の色
◎ ALINK="#00FFFF" 読む途中の文字の色
◎ VLINK="#00FFFF" 読んだことのあるリンクの文字の色

文章の形を整える


◎そのまま表す。     <PRE>  </PRE>

<PRE>
        書いた━━━━━━━━━━━━━┓
           とおりに         ╋━━━━
               表示されます。  ┻━━━━ 
</PRE>

実例 

        書いた━━━━━━━━━━━━━┓
           とおり          ╋━━━━
               表示されます。  ┻━━━━  


◎改行する     <BR>

改行して、つぎの行を右によせる。  <BR ALIGN="RIGHT">

改行して、つぎの行を中央に表示   <BR ALIGN="CENTER">

設定の解除  <BR CLEAR="ALL">

◎改行しない。 囲んだところが、折り返さない。

  <NOBR>   </NOBR> 



◎一行あける    <P>

一行あけて、つぎの行を左によせる。  <P ALIGN="LEFT">

一行あけて、つぎの行を右によせる。  <P ALIGN="RIGHT">

一行あけて、つぎの行を中央に表示   <P ALIGN="CENTER">


◎中央に表示する。 囲んだところが、中央に表示される。

<CENTER> </CENTER>


◎位置指定 <BR> <P> より上位の指定になる
    <DIV> </DIV>

自動的に改行して、その間は左によせる。  <DIV ALIGN="LEFT">

自動的に改行して、その間は右によせる。  <DIV ALIGN="RIGHT">

自動的に改行して、その間は中央に表示   <DIV ALIGN="CENTER">

実例 
<DIV ALIGN="LEFT">左寄せにする</DIV>
<DIV ALIGN="CENTER">中央に</DIV>
<DIV ALIGN="RIGHT">右寄せにする</DIV>
<DIV ALIGN="RIGHT">右によせて
 <P>改行してもそのまま右によせる
  <DIV ALIGN="CENTER">入れこにして中央に
  </DIV>
まだ右よせのまま
</DIV>

表示すると・・・

左寄せにする
中央に
右寄せにする
右によせて  

改行してもそのまま右によせる   

入れこにして中央に   
まだ右よせのまま


◎点滅させる (NS のみ)

    <BLINK>  </BLINK>

実例      文字が点滅します


◎スクロールさせる (IE のみ)

   基本型
    <MARQUEE>  </MARQUEE>

   122  

   位置
    <MARQUEE ALIGN=TOP>  </MARQUEE>
    <MARQUEE ALIGN=MIDDLE>  </MARQUEE>
    <MARQUEE ALIGN=BOTTOM>  </MARQUEE>

   大きさ
    <MARQUEE WIDTH=200 HIGHT=20 HSPACE=5 VSPACE=10>  </MARQUEE>
    WIDTH=200 で指定です。

   動き
    種類 BEHAVIOR=SCROLL BEHAVIOR=SLIDE(止まる) BEHAVIOR=ALTERNATE(往来)
    方向 DIRECTION=RIGHT DIRECTION=LEFT DIRECTION=UP DIRECTION=DOWN
    動かす間隔 SCROLLDERAY=10 (ミリ秒)
    速度 SCROLLAMOUNT=20 (大きいほど速い)
    繰り返し LOOP=1 (回数指定、0で何度も繰り返し)


<MARQUEE BEHAVIOR=SCROLL DIRECTION=LEFT SCROLLDERAY=10 SCROLLAMOUNT=20 LOOP=-1>  </MARQUEE>
左へスクロールします  

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT SCROLLDERAY=10 SCROLLAMOUNT=20 LOOP=1>  </MARQUEE>
LOOP=1 で、右へスクロールして止まります

<MARQUEE BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLDERAY=10 SCROLLAMOUNT=20 LOOP=-1>  </MARQUEE>
右へ行ったり左へいったりします  

<MARQUEE DIRECTION=UP SCROLLDERAY=10 SCROLLAMOUNT=2 LOOP=-1 WIDTH="300" HEIGHT="50">  </MARQUEE>
上へスクロールします
2行目です。
3行目です。
  

<MARQUEE DIRECTION=DOWN SCROLLDERAY=10 SCROLLAMOUNT=2 LOOP=-1 WIDTH="300" HEIGHT="50">  </MARQUEE>
下へスクロールします
2行目です。
3行目です。
  

   バックの色
    <MARQUEE BGCOLOR=#0000FF>  </MARQUEE>
バックの色を指定できます。

   バックの色と文字の色を組み合わせると
    <FONT COLOR="#FFFFFF"><MARQUEE BGCOLOR=#0000FF>  </MARQUEE></FONT>
バックの色と文字の色を組み合わせ

    <FONT COLOR="#FFFFFF"><MARQUEE BGCOLOR=#FF0000 DIRECTION=UP SCROLLDERAY=10 SCROLLAMOUNT=2 LOOP=-1 WIDTH="300" HEIGHT="50">  </MARQUEE></FONT>
上へスクロールします
バックに色をつけました。
文字を白にしました。
  


◎リストにして表示する。

 番号なしリスト


<UL>
<LI>
<LI>
<LI>
</UL>

実例  1


<UL>
<LI>西瓜
<LI>檸檬
<LI>苺
</UL>

表示すると・・・

実例  2


<UL>
<LI TYPE="disk">西瓜
<LI TYPE="circle">檸檬
<LI TYPE="square">苺
</UL>

表示すると・・・

 番号付きリスト


<OL>
<LI>
<LI>
<LI>
</OL>

実例 1


<OL>
<LI>南瓜
<LI>胡瓜
<LI>人参
</OL>

表示すると・・・

  1. 南瓜
  2. 胡瓜
  3. 人参

実例 2


<OL START="3">
<LI>南瓜
<LI VALUE="5">胡瓜
<LI>人参
</OL>

表示すると・・・

  1. 南瓜
  2. 胡瓜
  3. 人参


◎定義リスト


<DL>
<DT>
<DD>
</DL>

実例  1


<DL>
<DT>果物
<DD>檸檬
<DD>苺
</UL>

表示すると・・・

果物
檸檬

実例  2


<DL>
<DT><DD>植物
<DT><DD>果物
<DL>
<DT><DD>檸檬
<DL>
<DT><DD>苺
</DL>
</DL>
</DL>

表示すると・・・

植物
果物
檸檬


◎横線(罫線)を入れる。 <HR>

 太さの指定 <HR SIZE=5> 太さ 5ピクセル



 長さの指定 <HR WIDTH=500> 長さ 500ピクセル


  <HR WIDTH=50%> 長さ 表示幅の50%


  <HR WIDTH=50% ALIGN="LEFT"> 長さ 表示幅の50% 左よせ


  <HR WIDTH=50% ALIGN="RIGHT"> 長さ 表示幅の50% 右よせ




表の書き方(テーブル機能の使い方)


◎枠を付けない場合

<TABLE>
<TR>
<TD>ABC</TD>
<TD>abc</TD>
</TR>
<TR>
<TD>あいう</TD>
<TD>アイウ</TD>
</TR>
</TABLE>

表示すると次のようになります。

ABC abc
あいう アイウ

◎枠を付けた場合


<TABLE BORDER=2>
<TR>
<TD>ABC</TD>
<TD>abc</TD>
</TR>
<TR>
<TD>あいう</TD>
<TD>アイウ</TD>
</TR>
</TABLE>

表示すると次のようになります。

ABC abc
あいう アイウ


◎考え方
1つのデータは <TD> </TD> の間に入れる。
1行のデータは <TR> </TR> の間にいれる。
全体を <TABLE> </TABLE> でかこむ。

見出しは    <TH> </TH> の間に入れる。

タイトルは   <CAPTION"> </CAPTION> の間に入れる。
 上に表示   <CAPTION ALIGN="TOP"> </CAPTION>
 下に表示   <CAPTION ALIGN="BOTTOM"> </CAPTION>
 上+右に表示 <CAPTION ALIGN="RIGHT" VALING="TOP"> </CAPTION>
 上+中に表示 <CAPTION ALIGN="CENTER" VALING="TOP"> </CAPTION>
 上+左に表示 <CAPTION ALIGN="LEFT" VALING="TOP"> </CAPTION>
 下+右に表示 <CAPTION ALIGN="RIGHT" VALING="BOTTOM"> </CAPTION>
 下+中に表示 <CAPTION ALIGN="CENTER" VALING="BOTTOM"> </CAPTION>
 下+左に表示 <CAPTION ALIGN="LEFT" VALING="BOTTOM"> </CAPTION>



<TABLE>のパラメータ

◎枠なし。
<TABLE> </TABLE>

◎枠つける。
<TABLE BORDER> </TABLE>

◎枠幅指定。
外枠 <TABLE BORDER=3> </TABLE>
セル枠 <TABLE CELLSPACING=3> </TABLE>
枠とテキストの位置 <TABLE CELLPADDING=3> </TABLE>

◎枠の色の指定。
<TABLE BORDER=3 BORDERCOLOR="#RRGGBB"> </TABLE>

◎表のバックの色設定
<TABLE BGCOLOR="#E6E8FA">

◎表の背景画像の設定(TABLE 優先)
<TABLE BACKGROUND="./HAIKEI.GIF">

◎表の大きさ指定。
<TABLE BORDER WIDTH="70%" HEIGHT="50%"> </TABLE>
<TABLE BORDER WIDTH="500" HEIGHT="200"> </TABLE>

◎表の位置指定。
<TABLE ALIGN="LEFT"> </TABLE>   テキストは右に
<TABLE ALIGN="CENTER"> </TABLE>  テキストは左に
<TABLE ALIGN="RIGHT"> </TABLE>   テキストは左に
<TABLE ALIGN="JUSTIFY"> </TABLE>
<TABLE ALIGN="BLEEDLEFT"> </TABLE>  表の再配置
<TABLE ALIGN="BLEEDRIGHT"> </TABLE>  表の再配置


<TD> <TH> のパラメータ


◎文字の位置の設定
<TD ALIGN=LEFT> <TD ALIGN="CENTER"> <TD ALIGN="RIGHT">
<TD VALIGN=TOP> <TD VALIGN="MIDDLE">
<TD VALIGN=BOTTOM> <TD VALIGN="BASELINE">

◎セルの幅、高さの設定
<TD HEIGHT="16"> <TD WIDTH="130">

◎表・セルのバックの色設定
<TABLE BGCOLOR="#E6E8FA"> <TD BGCOLOR="#E6E8FA">

◎表・セルの背景画像の設定(TABLE 優先)
<TABLE BACKGROUND="./HAIKEI.GIF"> <TD BACKGROUND="./HAIKEI.GIF">

◎改行しない設定
<TD NOWRAP> <TH NOWRAP>

◎セル幅 縦の設定 縦にぬく
<TD ROWSPAN="2"> <TH ROWSPAN="2">

◎セル幅 横の設定 横にぬく
<TD COLSPAN="2"> <TH COLSPAN="2">


実例 縦の設定 縦にぬく


<TABLE BORDER=3>
<TR>
<TD VALIGN="MIDDLE" ROWSPAN="2">いろは</TD>
<TD>ABC</TD>
<TD>abc</TD>
</TR>
<TR>
<TD>あいう</TD>
<TD>アイウ</TD>
</TR>
</TABLE>

いろは ABC abc
あいう アイウ

実例 横の設定 横にぬく


<TABLE BORDER=3>
<TR>
<TD ALIGN="CENTER" COLSPAN="2">いろは</TD>
</TR>
<TR>
<TD>ABC</TD>
<TD>abc</TD>
</TR>
<TR>
<TD>あいう</TD>
<TD>アイウ</TD>
</TR>
</TABLE>

いろは
ABC abc
あいう アイウ


実例 いろいろな設定を試す 1


<TABLE WIDTH="500" HEIGHT="60" ALIGN="CENTER" BORDER="0" CELLSPACING="0" BACKGROUND="./HAIKEI.GIF">
<TR>
<TD COLSPAN="2" HEIGHT="30" ALIGN="CENTER"><FONT COLOR="#FFFFFF">いろは</FONT></TD>
</TR>
<TR>
<TD WIDTH="250" ALIGN="CENTER"><FONT COLOR="Red">ABC</FONT></TD>
<TD WIDTH="250" ALIGN="CENTER"><FONT COLOR="White">abc</FONT></TD>
</TR>
<TR>
<TD ALIGN="CENTER"><FONT COLOR="#00FFFF">あいう</FONT></TD>
<TD ALIGN="CENTER"><FONT COLOR="#00FF00">あいう</FONT></TD>
</TR>
<TR>
<TD ALIGN="CENTER"><IMG SRC="./TAKE-9.GIF" ALIGN="LEFT">TAKE-9.GIF</TD>
<TD ALIGN="CENTER"><IMG SRC="./TAKE-5.GIF" ALIGN="CENTER">TAKE-5.GIF</TD>
</TR>
</TABLE>

いろは
ABC abc
あいう アイウ
TAKE-9.GIF TAKE-5.GIF


実例 いろいろな設定を試す 2

<TABLE WIDTH="500" ALIGN="CENTER" BORDER=3 BGCOLOR="#E6E8FA" BORDERCOLOR="#FF0000">
  <CAPTION ALIGN="LEFT" VALING="TOP">いろいろな設定を試す 2</CAPTION>

<TH COLSPAN="2" ALIGN="CENTER">TH設定</TH>
<TR>
<TD ALIGN="CENTER" >ABC</TD>
<TD ALIGN="RIGHT">abc</TD>
</TR>
<TR> <TD VALIGN=TOP HEIGHT=20 BGCOLOR="#0000FF"><FONT COLOR="#FFFFFF">あいう</FONT></TD> <TD VALIGN=BOTTOM HEIGHT=20 BGCOLOR="#FFFFFF">アイウ</TD>
</TR>
</TABLE>

いろいろな設定を試す 2
TH設定
ABC abc
あいう アイウ


実例 いろいろな設定を試す 3

<TABLE WIDTH="500" ALIGN="CENTER" BORDER=3 BGCOLOR="#E6E8FA" BORDERCOLOR="#FF0000">
  <CAPTION ALIGN="LEFT" VALING="TOP">いろいろな設定を試す 3</CAPTION>

<TH ROWSPAN="3" ALIGN="CENTER">TH-1設定</TH>
<TH COLSPAN="2" ALIGN="CENTER">TH-2設定</TH>
<TR>
<TD ALIGN="CENTER">ABC</TD>
<TD ALIGN="RIGHT">abc</TD>
</TR>
<TR> <TD VALIGN=TOP HEIGHT=20 BGCOLOR="#0000FF"><FONT COLOR="#FFFFFF">あいう</FONT></TD> <TD VALIGN=BOTTOM HEIGHT=20 BGCOLOR="#FFFFFF">アイウ</TD>
</TR>
</TABLE>

いろいろな設定を試す 3
TH-1設定 TH-2設定
ABC abc
あいう アイウ


画像を貼り付ける


◎画像ファイルの種類 GIF JPEG BMP などがある。
         

◎記入の仕方

   <IMG SRC="./abc.gif">

 大きさを指定して読み込む。

   <IMG SRC="./abc.gif" WIDTH="50" HEIGHT="50">


画像の2段階表示



  <IMG SEC="./abc.gif" LOWSRC="./def.gif">

  LOWSRC が先に読み込まれ、SEC に切り替わる。

画像に文字の回り込み



<IMG SRC="./abc.gif" ALIGN="LEFT">
<IMG SRC="./abc.gif" ALIGN="CENTER">
<IMG SRC="./abc.gif" ALIGN="RIGHT">
<IMG SRC="./abc.gif" ALIGN="JUSTIFY">
<IMG SRC="./abc.gif" ALIGN="BLEEDLEFT">
<IMG SRC="./abc.gif" ALIGN="BLEEDRIGHT">



画像に文字の回り込みと余白


<IMG SRC="./abc.gif" ALIGN="LEFT" VSPACE="10" HSPACE="40">


画像に文字の回り込みの終了


<BR CLEAR="ALL">
<BR CLEAR="LEFT">
<BR CLEAR="RIGHT">


リンクの設定

  (アンカーをうつ) マウスでクリックすると移動する。(切り替わる)
 
◎小さい画像から大きい画像にリンク・・・画像だけ表示する。
 
<A HREF="./large.gif"><IMG="./small.gif"></A>     画像から画像にリンク

 
◎別のホームページへのリンク
 
<A HREF="http://www.ntt.co.jp">NTT</A>              文字にリンク
 
<A HREF="http://www.ntt.co.jp"><IMG="./ntt.gif"></A>        画像にリンク
 
<A HREF="http://www.ntt.co.jp"><IMG SRC="./ntt.gif" border=0><A> リンク枠を取る
 
 
◎自分の同じディレクトリーにある別のページへのリンク
 
<A href="./abc.htm">abc</A>               文字にリンク
 
<A href="./abc.htm"><IMG SRC="./abc.gif"></A>      画像にリンク
 
<A href="./abc.htm"><IMG SRC="./abc.gif" border=0></A> リンク枠を取る
 
 
◎自分の別のディレクトリーにある別のページへのリンク
 
<A href="./shita/abc.htm">abc</A>            直下のディレクトリー(文字にリンク)
 
<A href="../tonari/abc.htm"><IMG SRC="../tonari/abc.gif"></A>     隣のディレクトリー(画像にリンク)
 
<A href="../../ue/abc.htm"><IMG SRC="../../ue/abc.gif" border=0></A> 2つ上のディレクトリー(リンク枠なし)
 



◎バックミュージックを流す。
 
<embed src="./backmusic.mid" width=150 height=60 panel=0 autostart=true repeat=false>


◎メディアプレイヤーを呼び出して「PLAY」する。(IEのみ)
 
 (1)メディアプレイヤーを外部で起動
 <A HREF="./media.mpg">
 
 (2)メディアプレイヤーをページに表示
 <IMG START=1 LOOP=0 DYNSRC="./media.mpg">
 
 (3)メディアプレイヤーをページに表示、フル活用する。

 

<OBUJECT CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<PARAM NAME="FileName" VALUE="./media.mpg">
<PARAM NAME="ShowControls" VALUE="True">
<PARAM NAME="ShowTracker" VALUE="True">
<PARAM NAME="ShowDisplay" VALUE="True">
<PARAM NAME="ShowGotoBar" VALUE="True">
<PARAM NAME="ShowStatusBar" VALUE="True">
</OBUJECT>

 
  

 

  TO HOMEPAGE ホームページにもどる