WSHとHTMLについて

1. WSHサンプルプログラム

演習で扱ったサンプルスクリプトです．

※ これらのサンプルスクリプトは，「右クリック」-「対象をファイルに保存」(IE)，または「右クリック」-「リンクを名前をつけて保存」(Netscape)で保存してください．

WSHやVB Scriptをもっと知りたい人は，こちらを参考にしてください．

2. HTMLのテンプレート

まずはじめにこのテンプレートをダウンロードしてください．

template.html

※ このテンプレートは，「右クリック」-「対象をファイルに保存」(IE)，または「右クリック」-「リンクを名前をつけて保存」(Netscape)で保存してください．

3. HTMLタグの簡単な説明

必ず必要なタグ

HTMLを書くときに，必ず書かなければならないことがあります．

<HTML>
<HEAD>
<TITLE>
タイトル
</TITLE>
</HEAD>
<BODY>
ブラウザで表示する部分
</BODY>
</HTML>

2. で用意したテンプレートには，上のようなタグがすでに入っています．まずは，ブラウザに表示される部分に適当な文章を書いて保存してみてください．

背景

背景を変えるためにBGCOLOR="☆"というBODYタグのオプションを使います．

保存してブラウザで表示すると，背景が水色になります．この "#00FFFF"は，16進数で表されているので，全部で1677万7216色もの色を表現することができます．次に代表的な色をあげておきます．

白色 #FFFFFF	紅紫 #FF00FF	黒 #000000	水色 #00FFFF
赤 #FF0000	灰色 #AAAAAA	黄緑 #00FF00	オレンジ #FF5500
青 #0000FF	青灰色 #7777AA	黄色 #FFFF00	深緑 #007711
Lightskyblue #87CEFA	Greenyellow #ADFF2F	Plum #DDA0DD	Lightyellow #FFFFE0

それ以外の色については，こちらを参考にしてください．

テキスト

改行するには，<BR>というタグを使います．

あいうえお<BR>
かきくけこ

次は，テキストの位置を決めるタグです．<DIV ALGN="☆">を使います． ☆の部分に left, center, right を記入してください．それぞれテキストを左寄せ，中寄せ，右寄にすることができます．

このタグで囲むことで画像などの位置も決めることができます．

中寄せの場合は，<CENTER>☆</CENTER>を使うこともできます．

続いて，段落を表すタグです．段落には<P>☆<P>を使います． ☆の部分に，その段落の文章や画像などを記入します．このタグにはいろいろなオプションがついています．たとえば，真ん中に表示したいときは，<P ALIGN="center">とします．

<P>一段落目です．何か適当な文章を書いてみましょう．</P>
<P ALIGN="center">次の段落は中寄せにしてみました．文章は真ん中に表示されます．</P>

フォントサイズ

まずは，見出しを書くときに使うタグです．

<H1>が一番大きく，<H6>が一番小さくなります．

次は文字の大きさを変えるタグです．

<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>

デフォルトの状態では<FONT SIZE=3>です． 1が一番小さく7が一番大きくなります．

次は書体を変更するタグです．「太文字」「斜体」「抹消文字」「下線」「上付文字」「下付文字」を紹介します．

表示すると次のようになります．

太文字
斜体
~~抹消文字~~
下線（アンダ－ラインです）
文字^上付文字
文字_下付文字

次は文字の色を指定するタグです．色は背景を参考にしてください．
文字の色を変えるには，先ほど使った<FONT>というタグを使います．

<FONT COLOR="FF0000">赤色</FONT><BR>
<FONT COLOR="0000FF">青色</FONT><BR>
<FONT SIZE=4 COLOR="#007711">こうすると色と大きさが変えられます．</FONT>

実際に表示すると次のようになります．SIZEとCOLORの順番はどちらが先に来てもかまいません．

赤色
青色
こうすると色と大きさが変えられます．

水平線

水平線を引くのに <HR>というタグを使用します．このタグは，いろいろなオプションを持っています．たとえば，線の位置を決めるのにALIGN="☆"，線の色を指定するのにCOLOR="☆"，線の幅を指定するのにWIDTH="☆"を使うことができます．

表示すると次のようになります．

テーブル

いろいろなコンテンツをきれいに配置するためによく使われているテーブルタグについて説明します．このタグは，<TABLE>，<TR>，<TD> を組み合わせて使います．

まず，テーブルをつくるために<TABLE>を書きます．続いて，テーブルに行を作成するために<TR>を書きます．そして，その行の1列目として<TD>を書きます． 1行1列目に何か文章を書いたり，画像を置きたい場合はこの中に記述します． 1行1列目の記述が終わったら</TD>で閉じます．続いて1行2列目に何かを記述したい場合は，さらに<TD>を書きます． 2行目に移る場合は，</TR>で1行目を閉じ，2行目として<TR>を書きます．これを繰り返して，最後にテーブルを</TABLE>で閉じます．

このテーブルタグにもいろいろなオプションがあります．その中でもよく使うのが，境界線の太さを指定するBORDER，テーブルの位置を指定するALIGN="☆"，テーブルの大きさを指定するHEIGHTとWIDTHです．

<TABLE BORDER="2">
  <TR>
    <TD>1行1列目</TD>
    <TD>1行2列目</TD>
  </TR>
  <TR>
    <TD>2行1列目</TD>
    <TD>2行2列目</TD>
  </TR>
</TABLE>

<TABLE BORDER="1" ALIGN="center">
  <TR>
    <TD>1行1列目</TD>
    <TD>1行2列目</TD>
  </TR>
</TABLE>

表示すると次のようになります．

1行1列目	1行2列目
2行1列目	2行2列目

1行1列目

1行2列目

ここで紹介したこと以外にもさまざまな使い方やオプションがあるので，こちらを参考にしてください．

イメージ

画像を張り付けるためには， <IMG SRC="ファイル名">というタグを書いてください．
例えば，aaa.bmpというファイルを張り付ける場合は次のように書きます．

IMGタグにもいろいろなオプションがあります．画像ファイルがない場合に代わりに文字を表示させるためのALT，画像の周りに境界線を表示するBORDER，画像の大きさを指定するHEIGHTとWIDTHがあります．

表示すると次のようになります．

Windowsに標準でついている「ペイント」で適当な絵を描いて，BMPで保存し，ブラウザに表示させてみてください．あとで説明する「リンク」の元として画像を使うことができますが，画像にリンクさせた場合は自動的に境界線が描かれるので，BORDER="0"をよく使います．

リンク

最後に，他の HTML とリンクするときに使うタグを説明します．

★には，例えばindex.htmlやprofile.htmlなどのファイルを指定します．・・・はブラウザに表示する文字です．一般的にリンク先に何があるかを記述します．

<A HREF="http://www.miyakyo-u.ac.jp/"> 宮城教育大学</A>

宮城教育大学

さらにHTMLタグを知りたい方は，こちらを参考にしてください．

4. 画像を切り替えることができるテンプレート

template2.html

このテンプレートは，JavaScriptを使って画像を切り替えることができます．まずは，テンプレートを保存せずに，そのままクリックして開いてみてください．画像の上にカーソルを持っていくとランダムに画像が切り替わります．デフォルトでは，3つの登録された画像に切り替わります．

もどる