ＨＴＭＬタグの効果

HTML文章の基本形

本文

</BODY>
</HTML>

以下では，HTMLのタグの効果を，Webブラウザ上に表示されるイメージとHTMLによる記述で示します。

文字の大きさ

これが普通の大きさの文字ですが、以下のように６種類の大きさを指定することができます。

とても大きな文字

大きな文字

少し大きな文字

中くらいの文字

少し小さな文字

小さな文字

HTMLの記述


<H1>とても大きな文字</H1>

<H2>大きな文字</H2>

<H3>少し大きな文字</H3>

<H4>中くらいの文字</H4>

<H5>少し小さな文字</H5>

<H6>小さな文字</H6>

文字の色

文字の色も変更することができます。
赤色の文字です。
緑色の文字です。
青色の文字です。
白色の文字です。
黒色の文字です。
シアン色の文字です。
マゼンタ色の文字です。
黄色の文字です。
HTMLの記述
赤色の文字です。 緑色の文字です。 青色の文字です。 白色の文字です。 黒色の文字です。 シアン色の文字です。 マゼンタ色の文字です。 黄色の文字です。

これは名前で色を指定しています。
HTMLの記述
こ れ は 名 前 で 色 を 指 定 し て い ま す 。

特殊効果

フォントを変更したり、文字を点滅させることができます。

イタリックフォント(italic font)です。
ボールドフォント(bold font)です。
等幅フォント(typewriter font)です。
文字が点滅します。(Netscapeナビゲータ専用)
HTMLの記述
イタリックフォント(italic font)です。 ボールドフォント(bold font)です。 <TT>等幅フォント(typewriter font)です。</TT> <BLINK>文字が点滅します。</BLINK>

罫線

罫線の太さを数値で指定することがでいます。

サイズ２０

サイズ１５

サイズ１０

サイズ５

サイズ指定ナシ

HTMLの記述


サイズ２０
<HR size="20">

サイズ１５
<HR size="15">

サイズ１０
<HR size="10">

サイズ５
<HR size="5">

サイズ指定ナシ
<HR>

書式

HTMLでは、文章が改行される位置はブラウザの状態によって変化します。しかし、コマンドによって改行を指定することができます。この文のあとで改行してみます。
うまく改行されたでしょうか。それでは、ここで、段落を改めましょう。

また、次のように文章をセンタリングすることもできます。

この文をセンタリングしています。

次に、あらかじめフォーマットされたテキストを、改行、空白もそのまま表示することができます。

       これがその例です。
       一文毎に改行しています。
       また、文章中の        空白も   そのまま表示されます。

HTMLの記述


HTMLでは、文章が改行される位置はブラウザの状態によって変化します。 しかし、コマンドによって改行を指定することができます。

この文のあとで改行してみます。<BR>

うまく改行されたでしょうか。それでは、ここで、段落を改めましょう。

<P>

また、次のように文章をセンタリングすることもできます。

<CENTER>
この文をセンタリングしています。
</CENTER>


次に、あらかじめフォーマットされたテキストを、改行、空白もそのまま表示することができます。

<PRE>
       これがその例です。
       一文毎に改行しています。
       また、文章中の        空白も   そのまま表示されます。

</PRE>

箇条書き

数字なし箇条書きの例

項目１
項目１の説明文をここに書く。
項目２
項目２の説明文をここに書く。
項目３
項目３の説明文をここに書く。

HTMLの記述


    <UL>

       <LI>項目１

           <DD>項目１の説明文をここに書く。

       <LI>項目２

           <DD>項目２の説明文をここに書く。

       <LI>項目３

           <DD>項目３の説明文をここに書く。

    </UL>

数字付き箇条書きの例

項目１
項目１の説明文をここに書く。
項目２
項目２の説明文をここに書く。
項目３
項目３の説明文をここに書く。

HTMLの記述


    <OL>

       <LI>項目１

           <DD>項目１の説明文をここに書く。

       <LI>項目２

           <DD>項目２の説明文をここに書く。

       <LI>項目３

           <DD>項目３の説明文をここに書く。

    </OL>

インラインイメージ

通常は、イメージの下端(bottom)に文字がそろいます。
イメージの中央(middle)に文字をそろえるこができます。
イメージの上端(top)に文字をそろえることもできます。
HTMLの記述
<IMG SRC="bottom.gif" ALIGN=BOTTOM>通常は、イメージの下端(bottom)に文字がそろいます。 <IMG SRC="middle.gif" ALIGN=MIDDLE>イメージの中央(middle)に文字をそろえるこができます。 <IMG SRC="top.gif" ALIGN=TOP>イメージの上端(top)に文字をそろえることもできます。

これまでは、イメージに対して
１行の文章を表示していましたが、
このように複数の行をイメージの
左端に表示することもできます。

HTMLの記述
<IMG SRC="left.gif" ALIGN=LEFT>これまでは、イメージに対して １行の文章を表示していましたが、 このように複数の行をイメージの 左端に表示することもできます。

また、文章中にのようなイメージを表示することもできます。
最後に、イメージも文章と同じようにセンタリングすることができます。

xxx@sr.kagawa-nct.ac.jp

HTMLの記述


      また、文章中に<IMG SRC="letter.gif" ALIGN=MIDDLE>のようなイメージを表示することもできます。

      最後に、イメージも文章と同じようにセンタリングすることができます。

    <CENTER>

       <IMG SRC="mail.gif" ALIGN=TOP><ADDRESS>xxx@sr.kagawa-nct.ac.jp</ADDRESS>

    </CENTER>

リンクの指定

音声ファイルへのリンクです。
画像ファイルへのリンクです。
香川高専のホームページへのリンクです。
このページの作成者に電子メールを送信します(注：＠マークが全角になっています）。
HTMLの記述
<A HREF="sound.au">音声ファイルへのリンクです。</A> <A HREF="face.gif">画像ファイルへのリンクです。</A> <A HREF="http://www.kagawa-nct.ac.jp/"><IMG SRC="house.gif">香川高専のホームページへのリンクです。</A> <A HREF="mailto:miyatake＠di.kagawa-nct.ac.jp"><IMG SRC="mail.gif">このページの作成者に電子メールを送信します(注：＠マークが全角になっています）。</A>

表組み

表のキャプション
項目１項目２項目３

値１の１値１の２値１の３

値２の１値２の２値２の３

HTMLの記述
<TABLE BORDER=2> <CAPTION>表のキャプション</CAPTION> <TR> <TD>項目１</TD> <TD>項目２</TD> <TD>項目３</TD> </TR> <TR> <TD>値１の１</TD> <TD>値１の２</TD> <TD>値１の３</TD> </TR> <TR> <TD>値２の１</TD> <TD>値２の２</TD> <TD>値２の３</TD> </TR> </TABLE>

項目１	項目２	項目３
値１の１	値１の２	値１の３
値２の１	値２の２	値２の３