<IMG SRC="mark.gif">
とすると、mark.gif という画像が張り付けられます。
扱える画像は .gif と .jpg です。
|
右に簡単なHTMLの例を示します。 < > </ > （タグと呼ばれる）で修飾することで 多彩な表現が可能になります。 |
<HTML> <TITLE>HTML入門(1)</TITLE> <BODY> <H1>HTML入門(1)</H1> <HR> さあ、HTMLをべんきょうしましょう。 この画面は、どんなふうに見えるでしょうか。 試してみて下さい。 </BODY> </HTML> 見てみましょう！ |
|
前の例では、行が変わっていませんでした。 HTMLでは通常のリターンは無視されます。 改行するには<BR>タグを使います。 |
<HTML> <TITLE>HTML入門(2)</TITLE> <BODY> <H1>HTML入門(2)</H1> <HR> さあ、HTMLをべんきょうしましょう。<BR> この画面は、どんなふうに見えるでしょうか。<BR> 試してみて下さい。<BR> </BODY> </HTML> 見てみましょう！ |
|
見出し文字の大きさを変えてみましょう。 見出し文字の大きさを変えるには<H○></H○>タグを使います。 右の実際の例を見て下さい。 <H○>タグは、「大見出し」「中見出し」「小見出し」といった文書の構造の指定に用います。 単に文字の大きさを変えたい場合は、後で説明する<FONT>タグを使います。 |
<H1>文字の大きさ</H1><H2>文字の大きさ</H2><H3>文字の大きさ</H3><H4>文字の大きさ</H4><H5>文字の大きさ</H5><H6>文字の大きさ</H6> |
|
文字に装飾を加えてみましょう。 <B>ボールド（強調）</B> <I>イタリック（斜体）</I> <BLINK>ブリンク（点滅）</BLINK> 上付き文字 ｙ＝ｘ<SUP>２</SUP> 下付き文字 Ｈ<SUB>２</SUB>Ｏ |
ボールド（強調） イタリック（斜体） 上付き文字 ｙ＝ｘ２ 下付き文字 Ｈ２Ｏ |
|
文字の大きさを変えるには<FONT SIZE=○></FONT>を使います。 <FONT SIZE=1>文字の大きさ１</FONT><BR> <FONT SIZE=2>文字の大きさ２</FONT><BR> <FONT SIZE=3>文字の大きさ３</FONT><BR> <FONT SIZE=4>文字の大きさ４</FONT><BR> <FONT SIZE=5>文字の大きさ５</FONT><BR> <FONT SIZE=6>文字の大きさ６</FONT><BR> <FONT SIZE=7>文字の大きさ７</FONT><BR> 標準の文字サイズは３です。 |
文字の大きさを変えるには<FONT SIZE=○></FONT>を使います。 文字の大きさ１ 文字の大きさ２ 文字の大きさ３ 文字の大きさ４ 文字の大きさ５ 文字の大きさ６ 文字の大きさ７ |
|
文字の色を変えるには<FONT COLOR=○></FONT>を使います。 <FONT COLOR=Black>文字の色#000000</FONT><BR> <FONT COLOR=Blue>文字の色#0000FF</FONT><BR> <FONT COLOR=Green>文字の色#00FF00</FONT><BR> <FONT COLOR=Cyan>文字の色#00FFFF</FONT><BR> <FONT COLOR=Red>文字の色#FF0000</FONT><BR> <FONT COLOR=Fuchsia>文字の色#FF00FF</FONT><BR> <FONT COLOR=Yellow>文字の色#FFFF00</FONT><BR> <FONT COLOR=White>文字の色#FFFFFF</FONT><BR> |
文字の色を変えるには<FONT COLOR=○></FONT>を使います。 文字の色#000000 文字の色#0000FF 文字の色#00FF00 文字の色#00FFFF 文字の色#FF0000 文字の色#FF00FF 文字の色#FFFF00 文字の色#FFFFFF 色の指定の方法の説明 |
|
背景が白だけでは少し味気ないです。 色をつけましょう。 背景に色をつけるには<BODY>タグを <BODY BGCOLOR="Cyan">のように変更します。 #の後の16進数は２桁ずつ切り離してＲＧＢの色合いを表します。 色の指定の方法の説明 |
<HTML> <TITLE>HTML入門(3)</TITLE> <BODY BGCOLOR="Cyan"> <H1>HTML入門(3)</H1> <HR> さあ、HTMLをべんきょうしましょう。<BR> この画面は、どんなふうに見えるでしょうか。<BR> 試してみて下さい。<BR> </BODY> </HTML> 見てみましょう！ |
|
背景に画像を貼るには<BODY>タグを <BODY BACKGROUND="mark.gif"> のように変更します。 |
<HTML> <TITLE>HTML入門(4)</TITLE> <BODY BACKGROUND="back.gif"> <H1>HTML入門(4)</H1> <HR> さあ、HTMLをべんきょうしましょう。<BR> この画面は、どんなふうに見えるでしょうか。<BR> 試してみて下さい。<BR> </BODY> </HTML> 見てみましょう！ |
|
画像を張り付けてみましょう。 <IMG SRC="mark.gif"> とすると、mark.gif という画像が張り付けられます。 扱える画像は .gif と .jpg です。 |
|
|
画像のサイズを変えることもできます。 <IMG SRC="mark.gif" WIDTH="50" HEIGHT="100"> ドット数だけでなく WIDTH="50%" というように比率も使えます。 画像の大きさを指定しておくと、画像の読み込みが終わらなくても 先に文字だけが表示されるようになります。 |
|
|
画像を張り付けてみましょう。 <IMG SRC="mark.gif" ALIGN="TOP" WIDTH="80" HEIGHT="130">上に合わせることも<BR> <IMG SRC="mark.gif" ALIGN="MIDDLE" WIDTH="80" HEIGHT="130">真ん中に合わせることも<BR> <IMG SRC="mark.gif" ALIGN="BOTTOM" WIDTH="80" HEIGHT="130">下に合わせることも<BR> |
文字と画像を並べて表示できます。上に合わせることも真ん中に合わせることも下に合わせることも できます。 |
|
長い文章と画像を並べて表示してみましょう。 <IMG SRC="mark.gif" ALIGN="LEFT" WIDTH="80" HEIGHT="130"> 前の例では画像の横に表示できる文章は１行だけでした。 長い文章をならべて表示したいときには、 ALIGN="RIGHT" や ALIGN="LEFT" を使うと、このように 表示できます。<BR> これをテキストの回り込みといいます。<BR CLEAR=ALL> <IMG SRC="mark.gif" ALIGN="RIGHT" WIDTH="80" HEIGHT="130"> テキストの回り込みを解除して、画像の下から文字を表示できるようにするには <BR CLEAR=ALL> を使います。<BR CLEAR=ALL> この行は画像の下に表示されます。 |
文字と画像を並べて表示できます。
前の例では画像の横に表示できる文章は１行だけでした。
長い文章をならべて表示したいときには、
ALIGN="RIGHT" や ALIGN="LEFT" を使うと、このように
表示できます。 これをテキストの回り込みといいます。
テキストの回り込みを解除して、画像の下から文字を表示できるようにするには
<BR CLEAR=ALL> を使います。この行は画像の下に表示されます。 |
|
他のページやページ内の他の場所に飛んでいけるようにしましょう。 <A HREF="html1.htm">最初の例</A>へ飛びます。<BR> <A HREF="html2.htm">２番目の例</A>へ飛びます。<BR> <A HREF="#TOP">このページの最初</A>へ飛びます。<BR> 同一ページ内の別の場所に飛ぶ場合は、飛び先にあらかじめ 名前をつけておきます。 <A NAME="TOP"> |
最初の例へ飛びます。 ２番目の例へ飛びます。 このページの最初へ飛びます。 |
|
箇条書きで表示させます。 箇条書きの例 <UL> <LI>第１章 はじめてのHTML <UL> <LI>第１節 HTMLとは <LI>第２節 HTMLの基本 </UL> <LI>第２章 ちょっと応用 <UL> <LI>第１節 画像を貼ろう <LI>第２節 色をつけよう </UL> <LI>第３章 上級者への道 </UL> |
箇条書きの例
|
|
番号のついた箇条書きもあります。 箇条書きの例 <OL> <LI>はじめてのHTML <OL TYPE="i"> <LI>HTMLとは <LI>HTMLの基本 </OL> <LI>ちょっと応用 <OL TYPE="a"> <LI>画像を貼ろう <LI>色をつけよう </OL> <LI>上級者への道 </OL> |
箇条書きの例
|
|
表の形式で文書を構成できます。 <TABLE>と</TABLE>で挟まれた部分が表になります。 表の中の１行分を<TR>と</TR>で挟みます。 １行の中の１マスの内容を<TD>と</TD>で挟みます。 <TABLE> <TR> <TD>１行１列</TD> <TD>１行２列</TD> <TD>１行３列</TD> </TR> <TR> <TD>２行１列</TD> <TD>２行２列</TD> <TD>２行３列</TD> </TR> </TABLE> |
左のHTMLはこのように表示されます。
|