髭仙人の漫ろ歩き
HTML
............................ unworldly man go for a ramble in the internet world ...
文字の装飾
 文字の大きさを変える


 文字の大きさを大きく小さく自在に出来ます。方法は<FONT>タグの属性を使ってこう記述します。数値には 1(最小)から7(最大)までを入れるか、-2(最小)から+4(最大)を入れますが、3が基本の大きさです。

<FONT size="数値">文章</FONT>

・HTMLの文字のサイズ(size1〜7)

文字サイズ
HTMLタグの記述
文字サイズ1 <font size="1">文字サイズ1</font>
文字サイズ2 <font size="2">文字サイズ2</font>
文字サイズ3 <font size="3">文字サイズ3</font>
文字サイズ4 <font size="4">文字サイズ4</font>
文字サイズ5 <font size="5">文字サイズ5</font>
文字サイズ6 <font size="6">文字サイズ6</font>
文字サイズ7 <font size="7">文字サイズ7</font>

……………………………………………………………………………………………………………………

 文字の色を変える


 <FONT>タグの属性で文字の色を変える事が出来ます。

<FONT color="色">

COLOR="色" ... 色の名前を指定

Black (#000000)
Gray (#808080)
Silver (#C0C0C0)
White (#FFFFFF)
Red (#FF0000)
Yellow (#FFFF00)
Lime (#00FF00)
Aqua (#00FFFF)
Blue (#0000FF)
Fuchsia (#FF00FF)
Maroon (#800000)
Olive (#808000)
Green (#008000)
Teal (#008080)
Navy (#000080)
Purple (#800080)

……………………………………………………………………………………………………………………

 文字のフォントを変える


 <FONT>タグの属性で文字のフォントを変えられます。

<FONT face="フォント">文字</FONT>

・フォント指定なしです   フォント指定なしです
MS Pゴシックです    <FONT face="MS Pゴシック">MS Pゴシックです</FONT>
MS P明朝です      <FONT face="MS P明朝">MS P明朝です</FONT>
MS ゴシックです   <FONT face="MS ゴシック">MS ゴシックです</FONT>
麗流隷書です       <FONT face="麗流隷書">麗流隷書です</FONT>

……………………………………………………………………………………………………………………

 見出しをつける


 見出しをつけて、文字を強調させたり、大きな段落や、各章にわけられます。数字には、1【最小】〜7【最大】の数をいれます。

<H数字>文字</H>

・HTMLの文字のサイズ(H1〜6)

文字サイズ
HTMLタグの記述
文字サイズH6
<H6>文字サイズH6</H6>
文字サイズH5
<H5>文字サイズH5</H5>

文字サイズH4

<H4>文字サイズH4</H4>

文字サイズH3

<H3>文字サイズH3</H3>

文字サイズH2

<H2>文字サイズH2</H2>

文字サイズH1

<H1>文字サイズH1</H1>

……………………………………………………………………………………………………………………

 その他の文字の装飾


◇太文字にする
 文字をふと文字にします。強調させたいときに便利です。

太い文字  <B>太い文字</B>

◇斜体にする
 文字を斜体にします。英文をすこし飾って見せたいときに便利です。

斜体の文字  <I>斜体の文字</I>

◇下線付きにする
 文字を下線付きにします。

下線付きの文字  <U>下線付きの文字</U>

◇固定幅にする
 文字を固定幅にします。

固定幅の文字  <TT>固定幅の文字</TT>

◇打ち消し線をつける
 文字に打ち消し線をつけます。

消し線の文字  <S>消し線の文字</S>

◇上付き文字にする
 上付き文字にします。

上付き文字  <SUP>上付き文字</SUP>

◇下付き文字にする
 下付き文字にします。

下付き文字  <SUB>下付き文字</SUB>

 

 
画像の挿入  
 画像の挿入


 画像を挿入する方法は、表示したい所に以下のタグを入れますが、このままでは画像の寸法などは調整できません。

<IMG src="ファイル名">

◇画像の大きさを指定
 画像の大きさを指定します。指定しない場合は元のファイルの大きさで表示されます。同じ大きさでも、大きさをしておいた方が、表示が速くなるので、是非指定してください。

<IMG src="ファイル名" width="表示幅" height="表示高さ">

……………………………………………………………………………………………………………………

 画像の代理テキストを表示


ここに画像の代理テキストを書く 画像の代理テキストを表示します。「代理テキスト」とは画像の代わりに表示してくれる文章です。カーソルを重ねると文章が表示されます。

<IMG src="画像のファイル名" alt="ここに画像の代理テキストを書く">

……………………………………………………………………………………………………………………

 余白を指定して画像を表示


 画像の余白を指定して表示させます。IMGタグの属性に書き込むことでできます。

<IMG src="画像のファイル名" hspace="100" vspace="20">

……………………………………………………………………………………………………………………

 画像の枠を指定


 画像に枠の幅を指定できます。

<IMG src="画像のファイル名" border="数値">

    
  border="0"    border="1"    border="3"     border="5"     border="10"

……………………………………………………………………………………………………………………

 画像挿入時の文字位置を指定


 画像を挿入したとき、普通に文字を書くと次のようになります。

普通に文字を書く

 この文字を、上部、中部に変更できます。また、画像を左側や右側にも指定する事が可能です。

<IMG src="画像ファイル" align="top"> 文字を上に表示
<IMG src="画像ファイル" align="middle"> 文字を中央に表示
<IMG src="画像ファイル" align="bottom"> 文字を下に表示
<IMG src="画像ファイル" align="left"> 画像を左側に表示
<IMG src="画像ファイル" align="right"> 画像を右側に表示

 

 
BGMを流す  
 embed


 <embed> は EMBEDding(埋めこみ)の略です。音声や動画をページに埋め込むために用いられます。<embed> は、src 属性で指定したファイルを読み込み、ブラウザに追加インストールされたプラグインソフトにデータを渡します。実際の音や動画の再生はプラグインソフトが行います。

 よく使われるフォーマットには次のようなものがあります。プラグインがインストールされていなかったり、プラグインのバージョンが異なっていたりすると、再生できなかったり、再生方法が異なっていたりします。プラグインがインストールされていないと、そのページを表示する度に「プラグインが無いけどインストールするか?」のようなダイアログが表示され、鬱陶しく感じられることもあります。

.wav  WAVEファイル(音)
.aif   AIFFファイル(音)
.au   AUファイル(音)
.mid  MIDIファイル(音) …… 最も扱いやすく、推奨できます
.ra   RealAudio(音)

◇BGMを入れる (Sample11.htm
 BGMの挿入に必要な記述は以下のものです。このように記述してみてください。

<embed src="MIDI">

◇パネルの大きさを指定する (Sample12.htm
 パネルの大きさを指定するには<EMBED>タグに以下の属性を加えます。単位は、ピクセルです。 %などを使うこともできます。

<embed src="MIDIファイル" HEIGHT="高さ数値" WIDTH="幅数値">

◇パネルの非表示にする (Sample13.htm
 パネルを非表示にしたいときは Hidden を使います。このようにすれば、パネルを非表示にできます。

<embed src="MIDIファイル" Hidden="true">

◇演奏回数の指定する (Sample14.htm
 演奏回数を指定したいときは loop repeat属性を使います。数値に演奏したい回数を記述してください。一度だけなら、False , 無限に再生したいなら True と記述すればできます。環境によって指定が違うので、loop repeat 両方を記述します。

<embed src="MIDIファイル" loop="数値" repeat="数値">

◇自動再生する (Sample15.htm
 自動再生するには以下のようにの指定をします。True と記述すると自動再生になります。Falseと記述すれば、一度再生したら二度目は再生されません。

 <embed src="MIDIファイル" autorepeat="True">

……………………………………………………………………………………………………………………

 リンクによる再生


 <A> タグをつかって、指定することもできます。以下のようにすると、 START をクリックすればサウンドが流れます。

Sample16.htm
<A href="ファイル名">START </A>

……………………………………………………………………………………………………………………

 BGSOUNDによる再生


 <BGSOUND>タグでも再生できます。各属性は EMBED とほぼ同じです。

Sample17.htm
<BGSOUND src="MIDIファイル" Hidden="true">

……………………………………………………………………………………………………………………

 マルチメディア・プレーヤーを表示する


 Microsoft 社の Windows Media Player を再生するコントロールを張りつけます。<object> 未サポートのブラウザのために、内部で <embed> による呼び出しも記述しています。

Sample18.htm
<OBJECT classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" style="border: inset 8px silver" id="Windows Media Player1" width="300" height="350">
<PARAM NAME="FileName" VALUE="Data/sound1.mid">
<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">
</OBJECT>

……………………………………………………………………………………………………………………

 RealMedia のコントロールを張りつける


 RealNetworks 社の RealMedia を再生するコントロールを張りつけます。<object> 未サポートのブラウザのために、内部で <embed> による呼び出しも記述しています。

Sample19.htm
<object classid="CLSID:CFCDAA03-8BE4-11CF-B84B-0020AFBBCCFA"
width="260" height="30">
<param name="SRC" value="dummy.rm">
<param name="AUTOSTART" value="false">
<param name="CONTROLS" value="ControlPanel">
<param name="CONSOLE" value="cons">
<param name="NOLOGO" value="true">
<embed type="audio/x-pn-realaudio-plugin" src="Data/sound1.mid"
autostart="false" width="260" height="30" controls="ControlPanel"
console="cons" name="player" nologo="true">
</embed>
</object>

……………………………………………………………………………………………………………………

 YAMAHA MIDPLUGを表示する


 YAMAHA 社のYAMAHA MIDPLUG を再生するコントロールを張りつけます。このタグでIE、NetsccapeどちらのブラウザでもMIDPLUGが表示されます。src=の部分にはMIDIファイルのファイル名を入れます。

Sample20.htm
<EMBED
SRC="Data/sound1.mid"
TYPE="audio/midi"
PLUGINSPAGE="http://www.yamaha.co.jp/xg/midplug/top.html"
WIDTH="150"
HEIGHT="40"
AUTOSTART="true"
REPEAT="true"
SAVE="true">

……………………………………………………………………………………………………………………

 MenuページとPlayerページに分離


 Menuページを設け、好きな音楽を選択できるようにしました。

Sample21.htm
<HTML>
<HEAD>
<TITLE>HTML</TITLE>
</HEAD>
<frameset rows="*,110">
<frame src="Sample21A.htm" name="menu">
<frame src="Sample21B.htm" name="player">
</frameset>
</HTML>

 

 
ハイパーリンクの挿入  
 他のページへのリンク


 文字や、画像などにリンクをはって、クリック一つで他のページに行くことが出来るのが、ホームページの特徴の一つです。
 方法は、サイト内であれば、相対パスが簡便です。サイト外であれば、必然的に絶対パスを記述する事になります。

<A href="URL OR ファイル名">リンクを貼りたい文字や画像</A>

Sample31.htm

……………………………………………………………………………………………………………………

 ラベル(名前)のへのリンク


 指定した場所にラベル(名前)をつけて、クリック一つでそのラベルに行くことが出来ます。ラベルの表記は「名前」の部分につけますが、英語表記でも日本語表記でも構いません。

<A name="名前">

Sample32.htm

……………………………………………………………………………………………………………………

 ページの特定位置へのリンク


 これには「ラベル『名前』」を使いますが、リンク先にタグで「ラベル『名前』」と付けます。そして、リンクを貼りたい場所に以下のタグを書きます。(リンク先の名前を index.htm ファイルの example としたときは、

<A href="index.html#example">リンクを貼りたい文字や画像</A>

Sample33.htm

……………………………………………………………………………………………………………………

 メールアドレスへのリンク


 絵や文字をクリックしたら、指定したメールアドレスにメールを送れるようになります。タグは、以下のように「メール」のところに送り先のアドレスを記入してください。

<A href="mailto:メール">ココをクリックしてメールを送りましょう。</A>

Sample34.htm

……………………………………………………………………………………………………………………

 ページ内ターゲットへのリンク


 フレームを使ったときなどは、この指定が重要です。ページを指定のウインドウやフレームに表示することができます。

フレームで指定した名前とその名前のページ との関係
_blank     新しいウインドウ
_parent    親ウインドウ
_self      同一ウインドウ
_top      全画面

<A href="開きたいページ" target="○○"> Click Here !</A>

Sample35.htm

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/