xmas snow

サッカーなど・・・

サブウインドウ

2011年04月06日 | study html文法

＊サブウインドウ
　　　（注）ソースをコピペする場合は、＜＞を半角<>に変えてコピへしてください。
　　　　　　ソース内の＜＞は全角で書かれています。

*ソース*
＜a href="subwindow.htm" onClick="window.open('サブウインドウのURI','サブウインドウの名前');return false;"＞文字＜/a＞

;return false;・・・これを加えてね。（理由は省きます）

 

 

　サブウインドウびURLが【test.html】で、サブウインドウが【test】とすると・・・

 

 ＜a href="subwindow.htm" onClick="window.open('test.html','test');return false;"＞文字＜/a＞

上のソースに、サブウインドウの大きさ・スクロールバーの有無・リサイズの有無を指定。
width=550,height=280,scrollbars=1,resizable=1を追加して。
　　　　　　　↓
下のソースで、550×280で、スクロールバーが有り、リサイズ可能なsubwindowが開きます。

 ＜a href="subwindow.htm" onClick="window.open('test.html','test','width=550,height=280,scrollbars=1,resizable=1');return false;"＞【ここをクリック】＜/a＞

 

 

scrollbars=０または1

 スクロール　　 ０は無し・１は有り　　　　
resizable=０または1 リサイズ  
toolbar=0または１ ツールバー  
menubar=0または１ メニューバー　　  

 

 

サブウインドウの出現位置が指定できます。left=10,top=50を追加。
下のソースで、画面左から10px、上から50pxの位置にsubwindowが開きます。

＜a href="subwindow.htm" onClick="window.open('test.html','test','width=550,height=280,scrollbars=1,resizable=1,left=10,top=50');return false;"＞【ここをクリック】＜/a＞

 

サブウインドウに【ウインドウを閉じる】ボタンをつける。
下のソースは、【ウインドウを閉じる】をつけ、scrollbars=0,resizable=0にしています。

＜INPUT TYPE="button" VALUE="このウインドウを閉じる" onClick="window.close()"＞

 


インラインフレーム ifame/html文法

2011年04月05日 | study html文法

*インラインフレーム ifame*
　　ページの中を、フレームで区切ります。

【iframeタグ】を使います。

フレームのサイズは【100×190】
境界線の色は【0000ff】、境界線・スクロールは【auto】

 

 

 

 （注）下のソースの＜＞は全角で書いています。
　　　　ソースをコピペする場合は＜＞を<>半角に書き換えてコピペしてください。

＜frame src="http://www.geocit・・・・・.html" name="test"
frameborder="auto"
bordercolor="0000ff"
scrolling="auto"
marginwidth="0" marginheight="0"
width="100" height="190"
align="left"＞
＜font face="MSPゴシック"＞＜span style="font-size:9pt;"＞ごめんなさい。フレーム対応のプラウザでご覧ください。
＜/span＞＜/font＞
＜/iframe＞

インラインフレームにするには、【iframeタグ】を使います♪
【iframeタグ】は

＜iframe src="・・・・・.html＞～
＜/iframe＞

【インラインフレームの指定】--インラインフレームのサイズなどを指定してゆきます。

【サイズの指定】width="100" height="190"

width=" 横のサイズ 〈例〉width="100"
height=" 縦のサイズ 〈例〉height="190"

〈例）
＜iframe src="http://www.geocit・・・・・.html"
width="100" height="190"＞
＜/iframe＞

【フレームの境界線を指定】frameborder="auto"（上を参照にしてね）
【境界線の色を指定】bordercolor="0000ff"
【フレーム内のスクロールの有無】scrolling="auto"

frameborder=" 境界線の有無 auto,yes,no,1,0（0は境界線ナシ、1はアリ） frameborder="auto"
bordercolor=" 境界線の色   bordercolor="0000ff"
scrolling=" スクロールの有無 auto,yes,no scrolling="auto"

 

【フレームの枠と内容との間隔を指定】marginwidth="0" marginheight="0"（ピクセルです）

【インラインフレームの文字の位置を指定】align="left"
top、middle、bottm、left、rightで指示してね。

   top        上の方に文字が書き込まれる
   middle     真ん中に文字が書き込まれる
   bottom   下の方に文字が書き込まれる
   left         右側に複数行の文字が書き込まれる
   right       左側に複数行の文字が書き込まれる
このpageは【align="left"】と指定してるので、右側に複数行の文字が表示されますね。

＜iframe src="http://www.geocit・・・・・.html" name="test"
　　インラインフレーム内のurl（http://www.geocit・・・・・.html）を指定して下さい。
　　それに、名前を付けてください。
　　ここではtestと付けました。name="test"

ifame対応のプラウザでない場合は、インラインフレームは表示されません。
そのために、ひと言、注意書きが必要です。
＜font face="MSPゴシック"＞＜span style="font-size:9pt;"＞ごめんなさい。フレーム対応のプラウザでご覧ください。
＜/span＞＜/font＞
注意書きの部分です。


BGM/HTML文法

2011年04月04日 | study html文法

BGMを付ける方法♪

注意すること
１．著作権を守ってね。著作権で保護されてる作品は使わない。
２．突然曲が鳴り始めると驚く場合があります。お仕事中や深夜など・・・。BGMにはには注意書きを入れておくと親切です。
３．音楽の停止ボタンは隠さない方が親切です。

ファイルはmid形式のファイルを使ってね。

　　　　　（注）＜＞は全角で書かれています。
　　　　　　　　コピペする場合は、すべての＜＞を<>半角で書き換えてください。

＊ソース＊＜body＞～＜/body＞間に書き込んで。
＜embed src="mid形式のファイル名" type="audio/midi"width="100" height="20" ＞

　　　
　autostart="false"（自動再生しない）にしました。【autostart="false"】は下の表を参照して。

　　　　　（注）＜＞は全角で書かれています。
　　　　　　　　コピペする場合は、すべての＜＞を<>半角で書き換えてください。

＜embed src="petit_chien_arr.mid" type="audio/midi" width="100" height="20" autostart="false"＞

 

属性指示属性値例
src（ソース） ソース URIまたはURL embed src="Nocturne.mid（または、URL)"
type midならば→ 【audio/midi】 type="audio/midi"
width パネル横のサイズ   width="100"
height パネルの縦のサイズ   heigh="20"
autostart 自動再生するか否か true（自動再生） autostart="true"
    false（自動再生しない） auto="false"
repeat 繰り返し再生するか否か true（繰り返す） repeat="true"
    false（繰り返さない） repeat="false"
    回数 repeat="2"
loop 繰り返し再生するか否か (repeatと同じ） loop="true"
panel パネルの色の指定 0・・白っぽく表示 panel="0"
    1・・黒っぽく表示 panel="1"

＊repeat属性とloop属性は、同じ指示ですが、違う環境の人の為に２通りの書き方をしてください。


背景画background/HTML文法

2011年04月03日 | study html文法

背景画　background　
background-position
背景画を固定し、画像の位置を示します。

【スタイルシート】～内に貼ってください。
　　　　　（注）現在＜＞は全角で入力されています。
　　　　　　　　コピペする場合、すべての＜＞を<>半角に書き換えてください。

＜style type="text/css"＞
＜!--
body {
background-attachment: fixed;
background-image: url(http://www.geocit・・・・・・・jpg);
background-repeat: no-repeat;
background-position: right top;
}
--＞
＜/style＞

background-position:
位置を指定する方法にはいくつかあります。　　(注）指定するキーワード間は半角を開ける。 

横の位置をleft,center,rightで指定    
縦の位置をtop,center,bottomで指定 〈例〉右上に指定 background-position: right top 
%で指定 〈例〉左から30%上から50%に指定 und-position: 30% 50%

横の位置をleft,center,rightで指定
横の位置をleft,center,rig

background-attachment:
画面をスクロールする時に、画像を固定するか、スクロールと伴に移動させるかを指示します。

fixed 背景画像を固定 background-attachmen: fixed
scroll スクロールと伴に移動 background-attachmen

 

background-image:
背景に画像を指定します。

url    
none 画像ファイルなし background-image: url(http://・・・・

 

background-repeat:
画像のリピートを指示します。

repeat 背景画像を繰り返し表示 background-repeat: repeat
repeat-x 背景画像を横方向のみ繰り返し表示 background-repeat: repeat-x
repeat-y 背景画像を縦方向のみ繰り返し表示 background-repeat: repeat-y
no-repeat リピートしない background-repeat: no-repeat

 


属性/HTML文法

2011年04月02日 | study html文法

要素内に属性が書かれる。書き方は【属性=属性値】
【例】font要素内の属性　　　　　　　　　　　　　　　　　　　　　　　　　＊要素とは～・・< >～この間を要素という。

属性意味属性値例関連タグ
color 文字色の指定 16進法（または色名） color=#0000ff [font]
size 文字の大きさの指定 単位はptなど用いる size=12 [font]
face 文字の種類の指定 MS Pゴシックなど face=MS [font]

 

有無・・属性値0は無し
　　　　属性値1は有り

属性意味属性値例関連タグ
frameborder ボーダーの有無 0 1で指示 frameborder=0 [frame]
bordercolor ボーダーの色 16進法（色名） bordercolor=#0000ff [frame]
width 横幅 単位はptなど width=10  
height 高さ 単位はptなど height=10  
background-imege 背景のイメージの指定 url、none background-imege:url [body][table][td]
background-position 背景の位置指定 top、center、bottom :left top [body][table][td]
background-attachment イメージの固定 fixed、scroll :fixed [body][table][td]
background-repeat イメージ繰り返し no-repeat repeat :no-repeat [body][table][td]

 

background-imege   背景イメージの指定

属性指示例関連タグ
url イメージのurl ackground-image: url(http://・・・・・) [body][table][td][tr]
none 背景イメージ無し    

 

background-position   背景イメージの位置指定

属性値指示例関連タグ
left,center,right 横の位置を指定 background-position: [body][table][td][tr]
top,center,bottom 縦の位置を指定 （横位置がleftで、縦位置がbottom→左下）  

 

background-attachment   背景イメージの固定するか否か

属性値指示例関連タグ
fixed 固定 background-attachment:fixed [body][table][td][tr]
scroll イメージをスクロール background-attachment:scroll  

 

background-repeat   背景イメージを繰り返すか否か

属性値指示例関連タグ
no-repeat リピートしない background-repeat:no-repeat [body][table][td][tr]
repeat イメージを繰り返す background-repeat:repeat  
repeat-x 横方向だけ繰り返す background-repeat:repeat-x  
repeat-y 縦方向だけ繰り返す background-repeat:repeat-y  

 


タグ/HTML文法

2011年04月01日 | study html文法

 

　タグとは？

＜head＞などをタグと呼ぶ。 

例　　　 ＜a＞・＜/a＞                                                                 
  ＜b＞・＜/b＞

　　＊タグには、開始タグと修了タグがある
　　　　・・・開始タグ
　　　　・・・修了タグ
　　＊修了タグのないものもある・・・

　要素とは、

開始タグから修了タグの間を要素という。

 

例　　　 ＜a＞～＜/a＞←この間を要素と言う                                          

 　　＊～←html要素の中には　
　　　　head要素～
　　　　body要素～が入っている。

 

ブロック要素　　　 プラウザ表示に改行が入るもの                                 
インライン要素 改行が入らないもの

 

　属性

タグの中で、色やサイズを、属性で指定する。

 

例　　　 color=white　（属性名color=属性値white）                                
  size=10pt　　（属性名size=属性値10pt）