ＨＴＭＬの基本的なタグ

ＨＴＭＬでは、
単独で使用される空タグと（<BR>、<P>など）と
対になったタグ（<タグ>文字列</タグ>と書く）があります。
タグは大文字でも小文字でもOKです。（ただし、半角です！）

もくじ

タイトル（ウィンドウのバーの部分）

<title>タイトル</title>

と書きます。

本文

<body>〜</body>

の間に書きましょう。

Go to Menu

見出しによる指定

<Hn>〜</Hn> n=１〜６

見出しの後ろでは必ず改行されます。

Netscapeでは、太字になります。

<H1>これは<H1>です。</H1>

<H2>これは<H2>です。</H2>

<H3>これは<H3>です。</H3>

<H4>これは<H4>です。</H4>

<H5>これは<H5>です。</H5>
<H6>これは<H6>です。</H6>

フォントサイズによる指定

<FONT SIZE=n> 〜</FONT > n=1〜7

数字が大きい方が大きい文字になります。
また、改行は指定しない限り入りません。
文字の太さも普通です。

<BASEFONT SIZE=n> で
基本フォントを指定できます。

<FONT SIZE=+ |-n> 〜</FONT >で
基本となるフォントからより大きいもの、より小さいものを
相対的なサイズで指定できます。

注意：これは、Netscape特有のタグです。

これは <FONT SIZE=1>です。 これは <FONT SIZE=2>です。 これは <FONT SIZE=3>です。 これは <FONT SIZE=4>です。 これは <FONT SIZE=5>です。 これは <FONT SIZE=6>です。 これは <FONT SIZE=7>です。

Go to Menu

改行

<BR>を使 います。
段落の区切りなどで、さらに間をあけたいときは
<P>を使います。

<BR>で改行すると
こんなふうになりますが、
<P>を使うと

こんなに間があいちゃいます。

Go to Menu

区切り線

<HR>を使います。
<HR>と書くと
と表示されます。

<HR NOSHADE>と書くと

とただの黒い線になります。

Go to Menu

太字

<B>〜<B>

<B> 太字<B>は、
太字となります。

斜体

<I>〜<I>

<I>斜体 <I>は、
斜体となります。

点滅

<BLINK>〜</BLINK>

<BLINK>点滅<BLINK>は、
点滅となります。

注意：これは、Netscape特有のタグです。

Go to Menu

整形済みテキスト

<PRE>〜</PRE>

このタグに囲まれた部分は、改行や空白を含めて
そのままの形で等幅フォントで表示されます。
タグの前後には、１行ずつの空きがつくられます。
とっても便利なタグ！　画像を張り付けるときにも使えます。
<PRE>
　　このタグを使うと、こんなふうに
　　　　　　　　　　　　　思い通りに表示できます。
　　　　　　　　便利です。　　　　　
</PRE>
と書くと 
　
　　このタグを使うと、こんなふうに
　　　　　　　　　　　　　思い通りに表示できます。
　　　　　　　　便利です。
と表示します。

Go to Menu

字下げ

<BLOCKQUOTE>〜</BLOCKQUOTE>

もとはブロック引用のためのものですが、
ある範囲の文章をまとめて字下げするために使います。

<BLOCKQUOTE>
引用された文章は、<BR>
インデントがつくと<BR>
読みやすくなります。
</BLOCKQUOTE>
と書くと

引用された文章は
インデントがつくと
読みやすくなります。
と表示されます。

中央揃え

<Hn ALIGN=CENTER>〜</Hn>

で見出しにオプションを加えて中央揃えにできますが、

Netscapeでは、

<CENTER>〜</CENTER>

でテキストでも画像でも中央揃えができてしまいます。

<CENTER>中央揃え</CENTER>

と書くと

中央揃え

と表示されます。

Go to Menu

番号なしリスト

<UL><LI></UL>

<UL>
      <LI>はしば
      <LI>すずき
      <LI>たかやま
</UL>
と書くと と表示されます。

番号つきリスト

<OL><LI></OL>

<OL>
      <LI>まさお
      <LI>いちろう
      <LI>はるこ
</OL>
と書くと
  1. まさお
  2. いちろう
  3. はるこ
と表示されます。

定義型リスト

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

<DL>
      <DT>マッキントッシュ
      <DD>アップル社のコンピューター<BR>MacＯＳで動く
      <DT>アプティバ
      <DD>IBM社のコンピューター<BR>OS/２やらWindowsやらで動く
</OL>
と書くと
マッキントッシュ
アップル社のコンピューター
MacＯＳで動く
アプティバ
IBM社のコンピューター
OS/２やらWindowsやらで動く
と表示されます。

Go to Menu

インライン　イメージ

<IMG SRC="filename" ALIGN=TOP | MIDDLE | BOTTOM>

画像ファイルは、GIFフォーマットを用いますが、
Netscapeでは、JPEGフォーマットにも対応しています。
（GIFフォーマット：256色まで　JPEGフォーマット：フルカラー）
他のサイトにある画像もURLを指定すると使えます。

オプションのALIGNで同じ行にある文字をイメージの上部・中央・下部の
どこにあわせるかを指定します。

<IMG SRC="sample.gif" ALIGN=TOP> サンプルです。

<IMG SRC="sample.gif" ALIGN=MIDDLE> サンプルです。

<IMG SRC="sample.gif" ALIGN=BOTTOM> サンプルです。

はそれぞれ、

　サンプルです。

　サンプルです。

　サンプルです。

となります。

これは<IMG SRC="sample.gif" > サンプルです。

のようにオプションをつけないと

これはサンプルです。

となります。

注意！　
　　大きな画像や色数の多い画像は
　　正しく表示されなかったり、表示に時間がかかったりします。
　　なるべくデータ量を少なくするように心がけましょう。

Go to Menu



リンク


<A HREF="URL" > 〜</A> 

（他のページ・画像などへのリンク）

<A HREF="index.html" > マルチメディア講習会のページ</A> 

と書くと

マルチメディア講習会のページ

と表示され、青字をクリックするとリンクします。

他のページだけでなく、画像（GIF, JPEGなど）や音声、動画にもリンクできます。


同じページの中でのリンクは、

<A HREF="#chapter1" > リンク</A> と

<A NAME="chapter1" > リンク先</A> を使います。

<A HREF="#top" > ページのはじめ</A>

と書くと

ページのはじめ

と表示され、クリックするとページのはじめにとびます。

ページのはじめは、

<a name="top">ＨＴＭＬの基本的なタグ</a>

と書かれています。

Go to Menu



表組み（テーブル）


<TABLE>〜</TABLE>


<TABLE BORDER>〜</TABLE>

<TABLE>は、表組み表示の基本タグです。

<TABLE BORDER>を指定すると表のすべての罫線を表示します。

Netscapeでは、枠の太さ、セル間のスペース、表の幅等も指定できます。


 表組みを構成するタグ


   列（Table Row）
                <TR>〜</TR>
                     <TR>タグで挟まれた部分が表の横１列となります。

 
   項目名（Table Header）                    
　　　　　 <TH>〜</TH>
　　　　　     <TH>タグは、表内の見出しを表し、太字で表示されます。


　データ（Tabel Data）
　　　　　 <TD>〜</TD>　
　　　　　      <TR>タグで挟まれた部分は、ひとつのセルのデータを表します。







<TABLE BORDER>　
<TR>
　　　<TH>A</TH>
　　　<TH>B</TH>　
　　　<TH>C</TH>　
</TR>
<TR>
        <TD>い</TD>　
        <TD>ろ</TD>
        <TD>は</TD>
</TR>
</TABLE>


と書くと


 　
 　
     

 

     項目A
     項目B
     項目C
 

     いろ
     は 
 

 

 
と表示されます。
 
 

 
 <TABLE>〜</TABLE>で書くと
 　
 　
     

 

     項目A
     項目B
     項目C
 

     いろ
     は 
 

 
  
 となります。

 

 

 


<TD ROWSPAN=n>〜</TD>


<TH ROWSPAN=n>〜</TH>
 
を用いると、複数の列にまたがるセルをつくることができます。


<TD COLSPAN=n>〜</TD>


<TH COLSPAN=n>〜</TH>
 
を用いると、複数の横のセルにまたがるセルをつるくことができます。


<TR | TD | TH ALIGN=LEFT | CENTER | RIGHT
  VALIGN=TOP | MIDDLE | BOTTOM>〜</TR | TD | TH>
 
でセル内の行揃えができます。<TR>を用いると行全体の設定となります。

また、Netscapeでは、表の題名をしていしたり、

セルの幅を指定したりできます。


<TABLE BORDER CELLPADDING=8 WIDTH=70%>
<CAPTION>とあるプロバイダー屋さんのお値段 <CAPTION>
<TR>
  <TD ROWSPAN=2></TD>
  <TH COLSPAN=2> 料金</TH>
</TR>
<TR>
  <TH>個人</TH>
  <TH>法人</TH>
</TR>
<TR>
  <TH>初期費用</TH>
  <TD ALIGN=RIGHT>7,000 円</TD>
  <TD ALIGN=RIGHT>20,000円</TD>
</TR>
<TR>
  <TH>月額基本料金</TH>
  <TD COLSPAN=2 ALIGN=CENTER>3,000円（50時間まで）</TD>
</TR>
<TR>
  <th>超過利用料金</th>
  <TD COLSPAN=2 ALIGN=CENTERr>1分/1円</TD>
</TR>
</TABLE>


と書くと



とあるプロバイダー屋さんのお値段



 料金  




個人
法人




初期費用
7,000 円
20,000円




月額基本料金
3,000円（50時間まで）




超過利用料金
1分/1円




 

 という表になります。

表のセルには、テキストだけでなく、画像やリンク等も入れることができます。

Go to Menu



バックグラウンドカラー


<BODY BGCOLOR="#RRGGBB">

注意：これは、Netscape特有のタグです。

バックグラウンド（背景）の色を指定します。

#RRGGBBは、16進法表記で





#000000
黒



#FFFFFF
白




#FF0000
赤




#00FF00
青




#0000FF
緑




となっています。

色の指定は、InfiNetのBackground Colorsなどを参考にしましょう。


<BODY TEXT="#RRGGBB">

では、同じように、標準の文字の色も指定できます。


<BODY LINK="#RRGGBB">

では、リンクを張ってある文字の色を指定します。

すでに行ったことのあるリンクの色は、

<BODY VLINK="#RRGGBB">

で指定します。

バックグラウンドカラーを指定したページは、

こんな感じです。


背景へのイメージの張り込み


<BODY BACKGROUND="URL.GIF">

Netscapeで使用できるインラインイメージの画像フォーマット

(GIFまたはJPEG）を背景として張り込むことができます。

sample.gifを背景に張り込んだページは、こんな感じです。

Go to Menu



透過GIFとインタレースGIF

透過GIF：背景が透明色　切り抜きを張り付けたように見える

インタレースGIF：はじめ粗く、後で細かく、じわじわと表示する



クリッカブルマップ

イメージの一部をクリックすると、他のページにリンクする仕組み

クリックする場所によってリンク先がことなる

クリッカブルマップの１例その１（NTT）

クリッカブルマップの１例その２（新潟大学歯学部）


ＷＷＷからmailをもらう


<A HREF="mailto:name@address">name宛メール</a>

と書いておくと、「name宛メール」がリンクと同様な色になり、

クリックするとname宛メールを書くためのウィンドウがでる

mailtoの例


入力フォーム

WWWを見た人に書き込んでもらうための項目をつくり、

書き込まれた情報を受け取るための仕組み

入力フォームの１例

Go to Menu


講習会ホームページへもどる