TOP | 自己紹介 | HTMLの文法

HTMLの文法

注意：この資料はすべてのタグを紹介しているわけではありません．阿部個人が参照する，あるいは講義のなかでこれくらい知っていれば表現に困らないかなと思われるタグを選択しています．詳しいHTMLの文法については，「ホームページの作り方」なんてタイトルの本やWeb上で検索したものを参照すると良いでしょう．

HTMLの規格はW3Cという団体が規定しており，HTML4.0という新しい仕様が決まりました．そこでは「構造」と「レイアウト」を明確に分離した書き方を要求しています．その具体例が「スタイルシート」使用の推奨です．本ページでも少し紹介しています．

1.HTML文書はタグを用いる

indexへ戻る

タグはHTMLドキュメント内で文字や画像などをWebページの中で表示させるための記号です．これは

   <???> 文字、画像など </???>

のように前後に始まりを示すタグと終りを示すタグを置きます（タグが 1つで良いものもあります）．

2.基本タグ

indexへ戻る

これがないとHTMLにならないタグです．

HTMLタグはWebページ全体に対して、そのファイルがHTML文書であることを表すのに用います．HTML文書はHTMLタグにはさまれる形で書かれています． HEADタグの中には通常TITLEタグが置かれ、ブラウザで表示した時にタイトルバーに文字を表示します． BODYタグはHEADタグで書かれた以外の部分、すなわち本文そのものを表します．

---------------------------------------
<HTML>
<HEAD>
<TITLE>タグの文法</TITLE>
</HEAD>
<BODY>


  本文が入ります．
</BODY>
</HTML>
---------------------------------------

BODYタグのオプション

BODYタグでは背景や文字の色指定が可能です．

色指定にはRGB(赤緑青)の三原色それぞれに16進数による表記によって，256階調を割り当てることで三原色全体で256×256×256＝1677万色を表現することができます．

また，幾つかの色は名称によっても指定できます．

色見本

-------------------------------------------------------------
<BODY TEXT="BLACK" LINK="RED" VLINK="BLUE" ALINK="YELLOW" BGCOLOR="WHITE">
-------------------------------------------------------------

なんて指定すると，文字が黒，リンクが赤，リンク後は青，クリックは黄，背景は白で示されます．

3.文字表示タグ

indexへ戻る

3.1<Hn></Hn>タグ

Hnタグは見出しを表示するためのタグです．n には1〜6の数字が入り，数字が小さくなるにつれ，大きく表示されます．

-----------------------------------

見出し１の大きさ

<h1>見出し１の大きさ</h1>

見出し2の大きさ

<h2>見出し2の大きさ</h2>

見出し3の大きさ

<h3>見出し3の大きさ</h3>

見出し4の大きさ

<h4>見出し4の大きさ</h4>

見出し5の大きさ
<h5>見出し5の大きさ</h5>

見出し6の大きさ
<h6>見出し6の大きさ</h6>
----------------------------------

3.2<FONT SIZE=n></FONT>タグ

FONTタグは表示される文字の大きさを指定します．n には1〜の数字が入り，数字が小さくなるにつれ，小さく表示されます．ややこしいですね．

------------------------------------------------
フォント SIZE=7
<FONT SIZE=7>フォント SIZE=7</FONT>

フォント SIZE=6
<FONT SIZE=6>フォント SIZE=6</FONT>

フォント SIZE=5
<FONT SIZE=5>フォント SIZE=5</FONT>

フォント SIZE=4
<FONT SIZE=4>フォント SIZE=4</FONT>

フォント SIZE=3
<FONT SIZE=3>フォント SIZE=3</FONT>

フォント SIZE=2
<FONT SIZE=2>フォント SIZE=2</FONT>

フォント SIZE=1
<FONT SIZE=1>フォント SIZE=1</FONT>
------------------------------------------------

FONTタグのオプション

FONTタグでは文字の色も指定できます．例えば，

----------------------------------------------------
<FONT SIZE=4 COLOR="Chocolate">チョコの色</FONT>
----------------------------------------------------

なんて指定すると，チョコの色で表記されます． この他にも，フォント自体を明朝体やゴシック体などにするオプションもあります．

色見本

3.3文字装飾

太字
---------------------------------
この文字は太いでしょ？
<B>この文字は太いでしょ？</B>
---------------------------------

イタリック
--------------------------------------
この文字はイタリックでしょ？
<I>この文字はイタリックでしょ？</I>
--------------------------------------

上付，下付添字
--------------------------------------
この上ってことだけ上付き
この<SUP>上</SUP>ってとこだけ上付き

この下ってことだけ下付き
この<SUB>下</SUB>ってとこだけ下付き
--------------------------------------
この上付，下付のタグは勝手に文字の大きさが小さくなる点に注意です．文字を同じ大きさで上下に配置するにはFONTタグを用いると良いでしょう．

アンダーライン
---------------------------------------------------
この部分にだけアンダーラインが引かれている
<U>この部分にだけ</U>アンダーラインが引かれている
---------------------------------------------------

取り消し線
------------------------------------------------
CDラジカセ 定価18,000円 さらに値下げ！
CDラジカセ <S>定価18,000円</S> さらに値下げ！
------------------------------------------------

文字の点滅
------------------------------------------------
ここが点滅してるでしょ
<BLINK>ここが点滅してるでしょ</BLINK>
------------------------------------------------

4.配置タグ

indexへ戻る

<DIV></DIV>タグ

<DIV ALIGN="配置位置">を指定することで，文書，画像などを任意の場所に配置します．

------------------------------------------------
右揃えで表示してみる
<DIV ALIGN="RIGHT">右揃えで表示してみる</DIV>
------------------------------------------------

<CENTER></CENTER>タグ

中央揃えに関してはCENTERタグも利用できます．

------------------------------------------------
センタリングで表示してみる
<CENTER>センタリングで表示してみる</CENTER>
------------------------------------------------

<MULTICOL></MULTICOL>タグ

段組を作るタグです．次のオプションがあります．

------------------------------------------------------------- HTMLとはWWWで見ることのできるホームページを作成する時の文法です． この文書の特徴はタグで表示したい文書を囲むところにあります．
注意：この資料はすべてのタグを紹介しているわけではありません．講義のなかでこれくらい知っていれば表現に困らないかなと思われるタグを選択しています (特にフレームについては個人的に嫌いな手法なので紹介していません)．
<MULTICOL COLS="3" WIDTH="90%" GUTTER="8"> HTMLとはWWWで見ることのできるホームページを作成する時の文法です． この文書の特徴はタグで表示したい文書を囲むところにあります．
<BR> 注意：この資料はすべてのタグを紹介しているわけではありません．講義のなかでこれくらい知っていれば表現に困らないかなと思われるタグを選択しています (特にフレームについては個人的に嫌いな手法なので紹介していません)． </MULTICOL>

-------------------------------------------------------------

このタグはNetscapeのみに有効なタグです．Internet Explorerで同様の表示を試みるならば，TABLEタグでレイアウトを作ることになるでしょう．

5.改行タグ

indexへ戻る

PタグないしBRタグを用います．Pタグは改行と１行スペースを入れます． 一方、BRタグは改行のみです．この２つのタグは単独で用います．

------------------------------------------
これは１行目の文章です．
これは２行目．

３行目はPタグで少しスペースを置きました．

これは１行目の文章です．<BR>
これは２行目．<P>

３行目はPタグで少しスペースを置きました．
------------------------------------------

6.罫線タグ

indexへ戻る

文章の区切りなどには罫線を入れると便利です．罫線にはHRタグを用います．これも単独で用います．

<HR>

また，以下のオプションがあります．

<HR SIZE="15">

<HR WIDTH="50%">

<HR SIZE="10" WIDTH="70%">

<HR SIZE="10" WIDTH="30%" ALIGN="RIGHT">

<HR SIZE="10" WIDTH="30% NOSHADE">

7.リスト表示

indexへ戻る

7.1番号なしリスト

ULタグを用います．<UL>と </UL>の間にリスト項目が入ります．項目の先頭にはLIタグを置きます．

------------------

<UL>
<LI> 項目その１
<LI> 項目その２
<LI> 項目その３
</UL>
------------------

ULタグには以下のオプションがあります．

7.2番号つきリスト

OLタグを用います．

------------------

  1. 項目その１
  2. 項目その２
  3. 項目その３
<OL>
<LI> 項目その１
<LI> 項目その２
<LI> 項目その３
</OL>
------------------

OLタグには以下のオプションがあります．

7.3リストの入れ子

上であげたリスト表示は入れ子構造を持たせることができます．

------------------------------

<UL>
<LI>項目その１
<LI>項目その２
　　<UL>
　　<LI>その下の階層１
　　<LI>その下の階層２
　　</UL>
<LI>項目その３
　　<UL>
　　<LI>その下の階層１
　　<LI>その下の階層２
　　　　<UL>
　　　　<LI>そのまた下の階層１
　　　　<LI>そのまた下の階層２
　　　　</UL>
　　</UL>
<LI>項目その４
</UL>
------------------------------

ここで示したのはULタグによる例ですが、OLタグによっても同様の記述が可能です．

7.4説明つきリスト

DLタグを用います．これは用語の説明などに便利です．<DL>と</DL>の間には項目を表すDTタグとその説明を表すDDタグを組み合わせて用います．

-----------------------

１つ目の項目
１つ目の説明部分
２つ目の項目
２つ目の説明部分
<DL>
<DT>１つ目の項目
<DD>１つ目の説明部分
<DT>２つ目の項目
<DD>２つ目の説明部分
</DL>
-----------------------

8.リンクを張るタグ

indexへ戻る

8.1よそのホームページにリンクを張る場合

リンクを張るには<A>タグを使います．具体的には，
------------------------------------------------------------
メディアネットワークセンター
<A HREF="http://www.waseda.ac.jp/mnc/index-j.html">メディアネットワークセンター</A>
------------------------------------------------------------
というように，<A HREF="リンク先のURL">コメント</A> で表記します．

8.2 リンク先が自分のホームページの他のファイルにある場合

上記のようにURLを表記しても良いのですが，相対パスで書くと良いでしょう．

link.gif 例えば，左図ではＡというディレクトリが上位に位置するディレクトリになりますが，ここにあるファイルからＢディレクトリのfile-b.htmlにリンクを張るのであれば，

-----------------------------------------------
<A HREF="B/file-b.html">ファイルｂはこちら</A>
-----------------------------------------------

のように，"ディレクトリ名/ファイル名"と書きます．

また，下位にあるＣディレクトリのファイルからＡディレクトリのfile-a.htmlにリンクを張るのであれば，

-----------------------------------------------
<A HREF="../file-a.html">ファイルａはこちら</A>
-----------------------------------------------

のように，"../ファイル名"と書きます．ピリオド２つはすぐ上のディレクトリを表します．

8.3 ページの中での特定の位置へのジャンプ

このページのように１ページが長い場合，先頭に目次を置いて，読みたいところにジャンプするようになっていると便利でしょう．これも，リンクのためのタグを用いることで可能となります．

具体的には，ジャンプ先の名称をhogeとすると，文書中に，

---------------
<A NAME="hoge">
---------------

と書いておき，他の場所から，hogeへジャンプさせたい個所に，

--------------------------
<A HREF="#hoge">hogeへ</A>
--------------------------

と書けばOKです．このページの目次部分と各項目部にある「indexへ戻る」はこれを用いています．

これと通常のリンクを組み合わせると，他のページの任意の場所にリンクをつけることができます(下の例)．

----------------------------------------------------
<A HREF="how2html.html#hoge">他のページにあるhogeへ</A>
----------------------------------------------------

9.画像を張るタグ

indexへ戻る

画像を置きたいところで、<IMG SRC="画像ファイル名">とします．HTML文書で利用可能な画像はgifあるいはjpeg(jpg)形式のものが一般的です．

fig1.gif

--------------------
<IMG SRC="fig1.gif">
--------------------

画像をリンクスイッチとして利用する

先のリンクの張りかたと組み合わせれば、画像をリンクのためのスイッチとして利用できます．

----------------------------------------------------
yubi.gif早稲田大学ホームページへ

<A HREF="http://www.waseda.ac.jp/index-j.html">
<IMG SRC="yubi.gif"></A>早稲田大学ホームページへ
----------------------------------------------------

IMGタグのオプション

IMGタグには多くのオプションがあります．

特にALT，WIDTH，そしてHEIGHTは付けておいた方が良いでしょう．この方が画像を表示しないときに便利であったり表示自体が早くなったりします．例えば，上の指のケースでは本当は以下のように書いています．

----------------------------------------------------
<a href="http://www.waseda.ac.jp/index-j.html"><IMG SRC="yubi.gif" ALT="yubi.gif" WIDTH="59" HEIGHT="29" BORDER="1" VSPACE="0" HSPACE="0"></a>早稲田大学ホームページへ
----------------------------------------------------

ここで，適当にWIDTHとHEIGHTを指定すると，数字の通りに表示してしまうので，画像が歪んでしまいます．画像を原寸大で表示する際には画像の正確なサイズを知る必要があります．そこで，僕はGif Size for HTMLというフリーソフトを使っています．Vector Designや窓の杜といったところからダウンロードして使ってみてはいかがでしょうか．

背景に画像を用いる

背景に画像を用いているHPがありますが，これは<IMG> タグではなく，<BODY>タグのオプションを用います．

<BODY BACKGROUND="画像ファイル名">

10.表を作成するためのタグ

indexへ戻る

表を作成するにはTABLEタグを用います．TABLEタグの中では行単位で構造を記述します．行を表すにはTRタグを用います．その行に入るセル(構成要素)にはTDタグを用います．TRとTDは単独で利用できますが，TABLEタグは</TABLE>というように，後ろも必要です．

-------------------------------------------
いちにさん
よんごろく
しちはちきゅう

<TABLE BORDER="1">
<TR> <TD>いち <TD>に <TD>さん
<TR> <TD>よん <TD>ご <TD>ろく
<TR> <TD>しち <TD>はち <TD>きゅう
</TABLE>
-------------------------------------------

TABLEタグのオプション

TRタグのオプション

TDタグのオプション

-------------------------------------------

表組みの例

  1. <TABLE BORDER="0">とした場合．

    いち に さん
    よん ご ろく
    しち はち きゅう

  2. <TABLE BORDER="10">とした場合

    いち に さん
    よん ご ろく
    しち はち きゅう

  3. <TABLE BORDER="1" CELLPADDING="10">とした場合

    いち に さん
    よん ご ろく
    しち はち きゅう

  4. 色を付けた場合

    いち に さん
    よん ご ろく
    しち はち きゅう

    それぞれ，<TD BGCOLOR="WHITE">，<TD BGCOLOR="AQUA">，<TD BGCOLOR="YELLOW">としました．

    色見本

  5. 複数のセルにまたがる例１

    いち に さん
    ご ろく
    はち きゅう

    <TABLE BORDER="1">
    <TR> <TD ROWSPAN="3" >いち <TD>に <TD>さん
    <TR> <TD>ご <TD>ろく
    <TR> <TD>はち <TD>きゅう
    </TABLE>

  6. 複数のセルにまたがる例２

    いち
    よん ご ろく
    しち はち きゅう

    <TABLE BORDER="1">
    <TR> <TD COLSPAN="3" ALIGN="CENTER" >いち
    <TR> <TD>よん <TD>ご <TD>ろく
    <TR> <TD>しち <TD>はち <TD>きゅう
    </TABLE>

11.クライアントサイドイメージマップ

indexへ戻る

Webページ上で地図のあるところをクリックすると，その国，ないし地域のページへとジャンプするというものがあります．地図サービスなどがその代表例です．これらはCGIなどを利用しているものと思われますが，残念ながら我々のサーバーではCGIは認められていません．トップページに置けば，グラフィカルな表示ができて格好いいのですが…

そこで，今回はクライアントサイドイメージマップという方法でこれを実現してみようと思います．画像ファイルにMAPタグを組み合わせることでこれが可能になります．

イメージマップでは<MAP>と</MAP>の間に<AREA>によって画像上の任意の場所にリンク先を指定することが出来ます．またこれとは別に画像ファイルを用意しておきます．

MAPタグのオプション

画像ファイルを表示するIMGタグの所にもUSEMAPオプションで同じ名前を付ける必要があります．

AREAタグのオプション

イメージマップの例

これはKDDのWWW-memoにあった例です．パクって申し訳ない…

----------------------------------------------------

<MAP NAME=toolbar>
<AREA SHAPE=circle COORDS="33,25,20" HREF="http://www1.tcue.ac.jp/home1/abek/">
<AREA COORDS="79,10,135,43" HREF="http://faculty.web.waseda.ac.jp/abek/">
<AREA COORDS="230,8,286,43" HREF="multimedia1.html">
</MAP>
<IMG SRC="toolbar.gif" USEMAP="#toolbar">

----------------------------------------------------

画像上の円や四角形のところだけにリンクが効いていることが分かると思います．

座標はどうやって知るのか？

位置（座標）の指定は画像全体の左上が(0,0)です．Photo Editerでメニューの「表示」→「ルーラー」をクリックすると，画像の周りに定規のようなものが付き，マウスの位置が数値で表示されます．

12.スタイルシートによる表現

indexへ戻る

1997年12月，HTML4.0という新しい仕様が決まりました．そこでは「構造」と「レイアウト」を明確に分離した書き方を要求しています．その具体例が「スタイルシート（cascading style sheets:css）」使用の推奨です．これはデザインを記述する部分を別に用意しよう，という考え方から来ています．残念ながら，Netscape Navigator，Internet Explorerともに完全に対応している訳ではありませんが，このページでも少しづつ対応してみようと思います．

css文法の基礎

属性：値；

これで1セット．属性と値の間にはコロン「：」，最後にはセミコロン「；」を記述する（ただし全て半角）

指定方法１

タグのオプションを記述する部分にstyle属性を記述する．
-------------------------------------------------
<B STYLE="font-size: 30pt;">太字を30ポイントで表示</B>
-------------------------------------------------
などすると太字を30ポイントで表示する．ところで，スタイルを記述する際には何かタグがないとだめなのか？何もせずいきなりスタイルを記述するためのタグはないのかと思うだろう．

DIVタグとSPANタグがそれにあたる．DIVタグはブロック（ある程度の文章のかたまり），SPANタグは文章の一部分のみに用いる，とされている（※DIVタグは配置用（センタリングやら右寄せ）としてすでに紹介した）．

指定方法２

STYLEタグを用います．
--------------------------------------------------
<STYLE TYPE="text/css"> 〜 </STYLE>
--------------------------------------------------
「TYPE="text/css"」は必ず記述すること．で，タグの中の記述は，

該当するタグ名｛属性：値； 属性：値：…｝

というようになる．複数の要素を中かっこの記号で閉じるという形をとる． このSTYLEタグ，ファイルの先頭，HEADタグの間に記述するとよい．例えば，
-----------------------------------------
<STYLE TYPE="text/css">
H1 {color: RED}
H2 {color: GREEN}
</STYLE>
------------------------------------------
とすると，

ほげ？

ほげ？

なんてふう，Hタグでも色の指定が可能になる．

指定方法３

cssを記述したファイルを各HTMLファイルから参照させる方法です．これは初心者には向かないような気がするので，しばらくは省略します．初めてWebページを作る人は指定方法１が最も簡単かと思う．

文字の大きさを指定する

font-size: フォントサイズ;

フォントサイズにはポイント（pt，1ptは1/72インチ）を用います．
--------------------------------------------------------------
<SPAN STYLE="font-size: 18pt;">この文は18ポイントで書かれてます</SPAN>
--------------------------------------------------------------
とすると，この文は18ポイントで書かれてます，となります．

フォントを指定する

font-family: フォント名;

フォント名はワープロソフトなどで表示されているフォント名を用います．
--------------------------------------------------------------
<SPAN STYLE="font-family: Arial;">This is Arial</SPAN>
<SPAN STYLE="font-family: Courier;">This is Courier</SPAN>
--------------------------------------------------------------
とすると，This is Arial，This is Courierとなります．

文字の色を指定する

color: 色名;

--------------------------------------------------------------
<SPAN STYLE="color: green;">この文はグリーンで書かれてます</SPAN>
--------------------------------------------------------------
とすると，この文はグリーンで書かれてます，となります．

背景色を指定する

background-color:色名;

これは文章の背景であって，ページ全体のものではありません．マーカーで引いたような効果を得ることができます．
--------------------------------------------------------------
<SPAN STYLE="background-color: orange;">この文は背景をオレンジでやってみました</SPAN>
--------------------------------------------------------------
とすると，この文は背景をオレンジでやってみました，となります．

背景画像を指定する

background-image: url(画像ファイル名);

これは記述した部分に背景画像を貼り付ける．全体に背景を指定するには，background-imageに続けて，

background-repeat: オプション;

を記述する．ここでのオプションは以下の4つ．
repeat デフォルト．全体に敷き詰める．
repeat-x 横に繰り返す．
repeat-y 縦に繰り返す．
no-repeat 画像を1つだけ表示

--------------------------------------------------------------
<SPAN STYLE="background-image: url(img/back1.jpg); background-repeat: repeat-y;">この文は背景に画像で使ってみようと思います．きれいにみえているのでしょうか？</SPAN>
--------------------------------------------------------------

この文は背景に画像で使ってみよう
と思います．きれいにみえている
のでしょうか？
一応，縦に並べる設定にしている
のですけど．

配置

text-align: オプション;

オプションには，
left
right
center
justify

があります．justifyは均等割付です．
--------------------------------------------------------------
<SPAN STYLE="text-align: right;">この文は右寄せです</SPAN>
--------------------------------------------------------------
とすると，この文は右寄せです，となります．

インデント

text-indent: サイズ;

サイズにはpt，emなどを指定します．
--------------------------------------------------------------
<SPAN STYLE="text-indent: 24pt;">この文は24ptインデントしました</SPAN>
--------------------------------------------------------------
とすると，この文は24ptインデントしました，となります．

行送り

line-height: サイズ;

実際の行間はここで指定したサイズとフォントサイズの差で定義される．
--------------------------------------------------------------
<DIV STYLE="font-size: 12 pt; line-height: 18pt;">この文はフォントが12ポイント，
行送りが18ptなので，
行間は18−12＝6ptとなります．</DIV>
--------------------------------------------------------------

この文はフォントが12ポイント，
行送りが18ptなので，
行間は18−12＝6ptとなります．
，となります．

余白

margin-top: サイズ;
margin-bottom: サイズ;
margin-left: サイズ;
margin-right: サイズ;

サイズにはptなどを用いることができる．例は省略します．

13.フレーム

indexへ戻る

このページのように，画面を分割して表示する仕組みを提供するのが「フレーム」です．僕は好きではないのですけど，便利といえば便利です．

フレームを使用するにはフレームの構造を記述するFRAMESETタグと個々に分割したフレームを管理するFRAMEタグを使います．

<FRAMESET>〜</FRAMESET>タグ

以下のオプションを用いてフレームの構造を定義します．

<FRAME>

FRAMESETタグの間に置いて使います．終わりのタグは必要ありません．

以下のオプションを用いてフレームの構造を定義します．


--------------------------------------------------------------
<FRAMESET COLS="30%,*">
<FRAME SRC="sample-1.html">
<FRAME SRC="sample-2.html">
</FRAMESET>
-------------------------------------------------------------- とすると，以下のようなフレーム構成になります．

　

sample-1.html
30%の幅

　

sample-2.html
70%の幅

また，以下のように，<FRAMESET>〜</FRAMESET>の中に<FRAMESET>〜</FRAMESET>を含めることができます．
--------------------------------------------------------------
<FRAMESET COLS="30%,*">
<FRAME SRC="sample-1.html">
　<FRAMESET ROWS="20%,*">
　<FRAME SRC="sample-2.html">
　<FRAME SRC="sample-3.html">
　</FRAMESET>
</FRAMESET>
--------------------------------------------------------------

sample-1.html
30%の幅

sample-2.html
70%の幅，20%の高さ

sample-3.html
70%の幅，80%の高さ

　

　

　

フレームと<A>（リンク）タグ

上記の例のようなフレーム内のリンクをクリックすると，そのままの設定では，フレームの中だけでページが変化することになる．
また，本ページのように左側に目次を残し，右のページでクリックした内容を表示するには，<FRAME>内でnameを付け，<A>（リンク）タグに"TARGET=name"のオプションを付けなければならない．

--------------------------------------------------------------
<FRAMESET COLS="30%,*">
<FRAME SRC="sample-1.html">
<FRAME SRC="sample-2.html" name=hoge>
</FRAMESET>
-------------------------------------------------------------- 例では右側のページに「hoge」という名前を付けた．

　

sample-1.html
30%の幅

　

sample-2.html
70%の幅
name=hoge

sample-1.html内の<A>タグに次のように記述する．

<A HREF=sample-3.html　target="hoge">hogeへのリンク</A>

これをクリックすると，右ページがsample-3.htmlに書き換わる．

その他，特別なtargetには次のものがある．

14.サウンド，動画の貼り付け

indexへ戻る

HPで利用可能なサウンドファイルについて

HPで利用可能な動画ファイルについて

上記に記したのは代表的なものです．阿部は詳しくないので，このあたりで勘弁してください．

作った（入手した）ファイルをWebページに張り付けるには，EMBEDタグを用います．

【注意】
どうやらEMBEDタグはHTML4.0では採用されていないようだ（少なくとも手元の本には記述が無かった）．今後はOBJECTタグで記述を行なう旨が書かれていたが，自動再生などのオプションの動作がInternet ExplorerとNetscape Navigatorでは共通でなく，1999年10月10日現在，阿部が自宅のPCで実験したところ，EMBEDタグはほぼ正常に動作している．

<EMBED SRC=ファイル名 ></EMBED>

EMBEDタグには以下のオプションがあります．

Copyright(C) 1997-2005 by ABE Keiji
All rights reserved.