1.準備
1-1 推奨FTPクライアント（作成したhtmlファイルをサーバーへアップロード）
FFFTP(http://ftp.hm/ffftp/)のページでダウンロード(最新版は(050805)，ffftp-1.92a.exeから)
1-2 推奨テキストエディター，TaraPad(http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html)
のページの最新版（050805）は，tpad089.exe (610KB)
1-3 推奨LHAとzipソフトLhaplus（ラプラ(http://www.forest.impress.co.jp/lib/arc/archive/archiver/lhaplus.html)
の最新版（050805）は，Lhaplus1.52(1.52MB)
1-4 ホームページ作成ソフト（フリーの作成ソフト） Homepage Manager のページでフルパックを選択
1-5 ペイントツール（フリーのツール） Pixia HomePage のzip版
1-6 無料ホームページスペース一覧表 http://isson.fc2web.com/kouza101.html
1-7 推奨タブ式ブラウザ Sleipnirホームページ(http://sleipnir.pos.to/)
の最新版(050805)はSleipnir 2.00(インストーラー版)
2.参考ページ
2-1 誰でも解る無料ホームページ作成講座 の超初心者、初心者コースは必読。
拡張子を表示させるは必須設定。
2-2 簡単！HP作成講座 自習方式でのページ、直線的な説明。
2-3 ホームページ作成NAVI わからなくなったら他のページの説明文を読む。
2-4 とほほのWWW入門 古くから開設されている老舗の解説ページです。＜＝休止中
2-5 みんなのタグ辞書/HTMLタグ辞書 中級レベル以上になれば、このページがお奨め。
2-6 超初心者のホームページ作成学校 Homepage Manager の利用を前提とした入門ページ。
2-7 イヌでもわかるJavaScript講座 非常に良くまとめられたページです。
2-8 JavaScript小技集 イヌでも。。。と同様に良くまとめられたページです。
head部分とbody部分の２つの構造から出来ていて，
最初と最後に<html>,</html>のタグを入れる。
| <html> | ||
| <head> <title>ここにページのタイトルを入れる（ブラウザのタイトルバーに表示されます）</title> </head> |
||
| <body> HTML文書は、以下のような基本構造になっています。<br> ここに本文を書いていきます。 </body> |
||
| </html> |
4.道具のダウンロード
１．準備のページにある
ｆｆｆｔｐ，
TaraPad，
Lhasa32をダウンロードする。
本公開講座では，各ホストにダウンロードと設定済みです。
目次にもどる
次にブラウザでファイルメニューでファイルを開く・・
＞参照ボタンを押して・・
＞index.htmlファイルをクリックしますと、
下のように表示されます。
↑右ボタン画像を表示で拡大されます。
・ffftpのダウンロード時の説明画面の例
↑右ボタン画像を表示で拡大されます。
| 5.作業準備 ここから実際の作業をしましょう！ 5-1 作業ディレクトリ（フォルダ）の作成 5-2 拡張子を表示させる 5-3 コピーペーストでとにかく表示してみる ファイル名：reidai01.html 目次に戻る |
| 5-1 作業ディレクトリの作成手順 マイドキュメント・・＞ マウス右クリック・・＞ 新規作成でフォルダを選び・・＞ 「新しいフォルダ」の部分をマウスで押さえて・・＞ 名前の変更で「04work」のような名前を付ける。 5-2 拡張子を表示させる場合の設定手順 マイコンピュータ・・＞ コントロールパネル・・＞ フォルダオプション・・＞ 表示タブを選択・・＞ 登録されているファイルの拡張子は「表示しない」の チェックをはずす。 5-3 とにかく表示する場合の手順 TeraPadでファイル名（index.html）を作り， 左ののテキストボックスの内容をコピーし， index.htmlにペーストして ， 04worディレクトリにセーブ ブラウザの開くでindex.htmlを選択する |
6-1 タイトルと本文の内容を修正
ファイル名：reidai02.html
6-2 改行，文字の色，大きさを変えてみよう
ついでに，文字の書体タグも加えてみました。
下のテキストボックスの内容をコピーペーストして確認してみましょう！
ファイル名：reidai03.html
書体タグ( <B>, <I>, <S>, <U>, <SUP>, <SUB> )など
<B>〜〜</B>太字指定
<I>〜〜</I>斜体指定
<S>〜〜</S>取消線指定
<U>〜〜</U>下線を引く
<SUP>〜〜</SUP>上付添字
<SUB>〜〜</SUB>下付添字
のように
〜〜 の部分の文字が、それぞれ指定できる。
目次に戻る
タイトルの部分をマウスで選択し，
そのまま「自分の名前＋のホームページ」で上書きし，
本文の内容同様に修正します。
マウスで元の本文内容を選択して，例えば，
「私のホームページ」と上書きしましょう
TeraPadを上書き保存して，
ブラウザの更新ボタンを押す
変わりましたか？
6-2 改行，文字の色，大きさを変えてみよう
・改行するには，＝＞ <br> タグを使う
・文字の色を変えるには＝＞
変更した文字に対して，
<font color=red>赤色の文字</font>
のように <font>フォント開始タグと</font>フォント終了タグではさみこみます
・文字の大きさを変えるには＝＞
変更したい文字に対して，
<font size=5>大きな文字サイズ</font>
のように，文字色変更と同じく，フォントタグではさみこみます
文字の色は，カラーチャートの番号か英語の名前で指定
文字のサイズは，1〜7まであり，7が一番大きな文字です。
タグの使い方わかりましたか？
| 7.文字だけのWEBページ 見出しタグ、水平ラインタグも加えて 文字だけのWEBページを作ろう！ 7-1 見出しタグとは 書き方、
<H1> から <H6>の６種類の文字の大きさがあり， <H1> が一番大きい。 注意点は、すべて太字となること、 強制改行（前後の行が１行空く）となること。 さらに，検索エンジンなどでは，タイトル名と見出しタグの内容が参照されるキーワードとなる。 文字および文章は，この見出しタグを使うことが望ましい。 7-2 水平ラインタグとは 書き方、
<HR SIZE=n>のことを水平ラインタグといい，SIZE オプションで線太さを指定できる。 デフォルト(size 指定無し)ではsize=2 (約0.68mm ) になっている。 さらに、オプション設定を追加(空白文字を1ついれて)をすると線の長さや位置の指定（中央，左寄せ，右寄せ）などもできます。 noshade オプションは、罫線の色が黒色になります。 また、color オプションはブラウザによって指定できない場合がありますの使わない方が良いでしょう。 通常は、 size オプション以外は指定しないようです。 また、水平ラインタグの終了タグはいりません。 ファイル名：reidai05.html 7-3 文字だけのWEBページ ファイル名：reidai06.html |
| ７-1 見出しタグの表示例 H1からH6までの見出しタグの表示例です。 ファイル名：reidai04.html  7-2 水平ラインタグの表示例 ファイル名：reidai05.html  7-3 文字だけのWEBページの表示例 ファイル名：reidai06.html  |
9.表（テーブル）の表示
は color chart の下に書いています。
目次に戻る
| Black,#000000 | DarkSlateGray,#2f4f4f | ||
|---|---|---|---|
| DimGray,#696969 | Gray,#808080 | ||
| DarkGray,#a9a9a9 | Silver,#c0c0c0 | ||
| LightGrey,#d3d3d3 | Gainsboro,#dcdcdc | ||
| LightSlateGray,#778899 | SlateGray,#708090 |
| LightSteelBlue,#b0c4de | SteelBlue,#4682b4 | ||
|---|---|---|---|
| RoyalBlue,#4169e1 | MidnightBlue,#191970 | ||
| Navy,#0000cd | DarkBlue,#00008b | ||
| MediumBlue,#0000cd | Blue,#0000ff | ||
| DodgerBlue,#1e90ff | CornflowerBlue,#6495ed | ||
| DeepSkyBlue,#00bfff | LightSkyBlue,#87cefa | ||
| SkyBlue,#87ceeb | LightBlue,#add8e6 | ||
| PowderBlue,#b0e0e6 | PalaTurquoise,#afeeee |
| LightCyan,#e0ffff | Cyan,#00ffff | ||
|---|---|---|---|
| Aqua,#00ffff | Turquoise,#40e0d0 | ||
| MediumTurquoise,#48d1cc | DarkTurquoise,#00cdd1 | ||
| LightSeaGreen,#20b2aa | CadetBlue,#5f9ea0 | ||
| DarkCyan,#008b8b | Teal,#008080 | ||
| SeaGreen,#2e8b57 | DarkOliveGreen,#556b2f | ||
| DarkGreen,#006400 | Green,#008000 | ||
| ForestGreen,#228b22 | MediumSeaGreen,#3cb371 | ||
| DarkSeaGreen,#8fbc8f | MediumAquamarine,#66cdaa | ||
| Aquamarine,#7fffd4 | PaleGreen,#98fb98 | ||
| LightGreen,#90ee90 | SpringGreen,#00ff7f | ||
| MediumSpringGreen,#00fa9a | LawnGreen,#7cfc00 | ||
| Chartreuse,#7fff00 | GreenYellow,#adff2f | ||
| Lime,#00ff00 | LimeGreen,#32cd32 | ||
| YellowGreen,#9acd32 | OliveDrab,#6b8e23 | ||
| Olive,#808000 | Darkkhaki,#bdb76b | ||
| PaleGoldenrod,#eee8aa | CornSilk,#fff8dc |
| Beige,#f5f5dc | LightYellow,#ffffe0 | ||
|---|---|---|---|
| Lightgoldenrodyellow,#fafad2 | LemonChiffon,#fffacd | ||
| Wheat,#f5deb3 | Burlywood,#deb887 | ||
| Tan,#d2b48c | Khaki,#f0e68c |
| Yellow,#ffff00 | Gold,#ffd700 | ||
|---|---|---|---|
| Orange,#ffa500 | SandyBrown,#f4a460 | ||
| DarkOrange,#ff8c00 | Goldenrod,#daa520 | ||
| Peru,#cd853f | DarkGoldenrod,#b8860b |
| Chocolate,#d2691e | Sienna,#a0522d | ||
|---|---|---|---|
| SaddleBrown,#8b4513 | Maroon,#800000 | ||
| DarkRed,#8b0000 | Brown,#a52a2a | ||
| Firebrick,#b22222 | IndianRed,#cd5c5c | ||
| RosyBrown,#bc8f8f | DarkSalmon,#e9967a | ||
| LightCoral,#f08080 | Salmon,#fa8072 | ||
| LightSalmon,#ffa07a | Coral,#ff7f50 | ||
| Tomato,#ff6347 | OrangeRed,#ff4500 | ||
| Red,#ff0000 | Crimson,#dc143c | ||
| MediumVioletRed,#c71585 | DeepPink,#ff1493 | ||
| HotPink,#ff69b4 | PaleVioletRed,#db7093 | ||
| Pink,#ffc0cb | LightPink,#ffb6c1 |
| Thistle,#d8bfd8 | Magenta,#ff00ff | ||
|---|---|---|---|
| Fuchsia,#ff00ff | Violet,#ee82ee | ||
| Plum,#dda0dd | Orchid,#da70d6 | ||
| MediumOrchid,#ba55d3 | DarkOrchid,#9932cc | ||
| DarkViolet,#9400d3 | DarkMagenta,#8b008b | ||
| Purple,#800080 | Indigo,#4b0082 | ||
| DarkSlateBlue,#483d8b | BlueViolet,#8a2be2 | ||
| MediumPurple,#9370db | SlateBlue,#6a5acd | ||
| MediumSlateBlue,#7b68ee | Black,#000000 |
目次に戻る
8-1 画像の表示
画像を表示するには、 GIF ファイルや JPEG ファイルの画像圧縮ファイルを扱うことが多い。
書き方は、
| <IMG SRC="draw015.gif" ALT="draw015.gif"> |
のように、画像のあるディレクトリ(パス指定という)とファイル名を先に書き、続けて ALT オプションで画像の説明文(通常はファイル名を使う)を入れる。
また、この <IMG SRC="****.***" ALT="******"> の終了タグはありません。
ファイル名：reidai07.html，
画像ファイル圧縮フォルダー名：IBMimage.zip
目次に戻る
8-2 リンクの指定方法
○リンクの基本(<A HREF="url">)
リンクには大きく分けて、他のページへのリンク、同じページ内のリンクの２種類ある。
他のページへのリンクでは、<A HREF="url">の中に 実際の url を入れるだけです。
例えば、神戸高専のホームページへリンクするには
| <A HREF="http://www.kobe-kosen.ac.jp">神戸高専のホームページ</a> |
のように書く。
さらに、同じディレクトリ内で他のページへリンクする場合
例えば、この web page から「画像の表示、横に文字を入れる」の page へリンクするには
| <A HREF="./image.html">画像の表示、横に文字を入れる</a> |
のように書く。
また、この web page から、サブディレクトリ html/ の中
にあるlink.html へリンクするには、
圧縮フォルダー名：html.zip
| <A HREF="./html/link.html">リンクの方法</a> |
のように書く。
ここで ./ や ../ は、それぞれ同じディレクトリであること、１つ上位のディレクトリであることを示す。
○同じページ内のリンク、アンカー(<A HREF="#moji">)
同じディレクトリ内のリンクの書き方とよく勘違いしますので、注意して下さい。
基本的には、url の代わりに、#moji で置き換えるだけです。しかし、リンク先の設定(アンカーと呼ぶ)がなければ、意味がありません。
例えば、この web page の先頭(リンクの基本)に、次のようなアンカーを設定しているとする。(実際にも、入れている。)
| <A NAME="link_basic"></a> |
上の例では、<A NAME="link_basic"> と </a> の間に書いていませんが、 アンカー指定では、別段問題はありません。逆に私は、この書き方を推奨しています。
次に、リンク元の設定を
| <A HREF="#link_basic">リンクの基本</a> |
のように書く。
実際に、表示すると、
リンクの基本
のように、リンク指定の下線の入った青色文字で表示されています。
ここで注意したいのは、同じ名前のアンカー指定は、１つしか作ってはいけないことです。当り前ですが、複数あればどちらに飛んだらいいか判断できないからです。
逆に、リンク元の指定の
<A HREF="#link_basic">リンクの基本</a>
などは、同じページ内なら、いくら作っても構いません。
○他のページのアンカー指定(<A HREF="url#moji">)
これは、リンクの基本と同じページ内のリンク、アンカーの応用です。
例えば、「BODY タグの書き方」の page の color_chart の前に設定したアンカーへリンクする場合
| <A HREF="./html/body.html#color_chart">color chart</a> |
のように書く。
これも，実際に表示すると、
color chart
のように、リンク指定の下線の入った青色文字で表示されています。
○メールの送信リンク
(<A HREF="mailto:hoge@kobe-kosen.ac.jp">)
url の代わりに、mailto:メールアドレス で置き換えるだけです。
例えば、私(森田)にメールをしてもらうように書くには、
| <A HREF="mailto:morita@kobe-kosen.ac.jp">森田へのメール</a> |
のように書く。
実際に、表示すると、
森田へのメール
のように、リンク指定の下線の入った青色文字で表示されています。
目次へ戻る
ファイル名：reidai07.html
8-2 リンクの指定方法
ファイル名：reidai08.html
上記htmlファイルをブラウザで表示すると，
○テーブルタグの基本形
<TABLE BORDER="4" CELLSPACING="3">, <TR>, <TD>
HTML において表を作るには、面倒ですが、テーブルタグ(<TABLE>)と行、列の指定タグ(<TR>,<TD>)を使います。
書き方は、
| <TABLE BORDER="4" CELLSPACING="3"> <TR><TD>機械工学科１年</TD> <TD>電気工学科１年</TD> <TD>電子工学科１年</TD> <TD>応用科学科１年</TD> <TD>都市工学科１年</TD> </TR> <TR><TD>機械工学科２年</TD> <TD>電気工学科２年</TD> <TD>電子工学科２年</TD> <TD>応用科学科２年</TD> <TD>都市工学科２年</TD> </TR> </TABLE> |
説明：
<TR>〜〜</TR> で囲まれた範囲が、横一行分を表し、
<TD>〜〜</TD> で囲まれた範囲に 1 つのセルの中身を書き込みます。
また、テーブルタグ(<TABLE>) の中の BORDER オプションはテーブルの外枠の太さを示し、BORDER オプションを書かない場合は、外枠無しのテーブルになります。
デフォルト(BORDER だけの記述)では、BORDER="2" になっています。
CELLSPACING オプションは各セル枠線の太さを示し、デフォルト(記述無し)では、cellspacing=2となります。
さらに、細かいオプションとして、枠線の色指定 (BORDERCOLOR オプション)やテーブル全体に色を付ける色指定( BGCOLOR オプション)などがあります。
BGCOLOR オプション は<TD BGCOLOR="#rrggbb">〜〜</TD> で囲まれた範囲である各セルの色指定を最優先し、続いて<TR BGCOLOR="#rrggbb">〜〜</TR>で囲まれた範囲の横一行分の色指定、最後にテーブルタグ<TABLE>〜〜<TABLE>の残りが色指定される。
BORDERCOLOR オプション現在のところ外枠の色指定しか対応していないようです。
○キャプションや見出しをつける
書き方は，
| <TABLE BORDER ALIGN="center"> <CAPTION> 神戸高専専攻科の定員 </CAPTION> <TR ALIGN="center"><TH><BR></TH> <TH>第一学年</TH> <TH>第二学年</TH> </TR> <TR ALIGN="center"><TH>電気電子専攻</TH> <TD>８名</TD> <TD>８名</TD> </TR> <TR ALIGN="center"><TH>応用化学専攻</TH> <TD>４名</TD> <TD>４名</TD> </TR> </TABLE> |
説明：
テーブルタグ(<TABLE BORDER>) に続けて、キャプションタグ(<CAPTION ALIGN="top">)を使うと、テーブル(表)上部のセンターに説明文を載せれます。
ALIGN オプションは ( ALIGN="top" ) と(ALIGN="bottom") があります。
デフォルト(ALIGN オプション無し)では、( ALIGN="top" ) になっている。
デーブルのキャプションは、科学技術関係の表示ルールでは、上に書くことになっており、ALIGN オプションを使わないでよいでしょう。
終了タグは </CAPTION> です。
テーブルの中に見出し(太字)をつけることによって、中身がわかりやすくなります。
セルタグの <TD> の代わりに、 <TH> を使います。
この例でも示したように、ALIGN オプションによって１行における文字の配置(<TR ALIGN="right"> など )も指定できます。
セルごとに文字の配置を指定するなら、<TH ALIGN="center"> や <TD ALIGN="center"> を使えば良いでしょう。
デフォルト( ALIGN オプション無し)では、<TH ALIGN="center"> と <TD ALIGN="center">になっています。
また、BGCOLOR オプションと同じく、ALIGN オプションの優先順位はセルの記述指定、すなわち <TH ALIGN="center"> や <TD ALIGN="center">が最優先し、続いて<TR ALIGN="center"> となります。
<TABLE ALIGN="center"> では、デーブル全体の配置を指定したことになり、テーブルの中の文字配置まで指定できません。
空白セルを作るには、<TH><BR></TH> あるいは <TD><BR></TD>のように、<BR> を挟み込むと良いでしょう。
○セルを連結する
書き方は，
| <TABLE BORDER ALIGN="center"> <CAPTION> 時間割</CAPTION> <TR ALIGN="center"><TH><BR></TH> <TH>１</TH> <TH>２</TH> <TH>３</TH> <TH>４</TH> <TH>５</TH> <TH>６</TH> <TH>７</TH> <TH>８</TH> </TR> <TR ALIGN="center"><TH>月</TH> <TD COLSPAN=2>数学 II </TD> <TD COLSPAN=2>地理</TD> <TD>ＨＲ</TD> <TD COLSPAN=2>物理</TD> <TD><BR></TD> </TR> <TR ALIGN="center"><TH>火</TH> <TD COLSPAN=2>設計製図</TD> <TD COLSPAN=2>英語 I </TD> <TD COLSPAN=3>機械実習</TD> <TD>化学</TD> </TR> <TR ALIGN="center"><TH>水</TH> <TD>国語</TD> <TD COLSPAN=2>英語 I </TD> <TD>英語II</TD> <TD COLSPAN=2>数学 I </TD> <TD COLSPAN=2><BR></TD> </TR> <TR ALIGN="center"><TH>木</TH> <TD COLSPAN=2>数学 I </TD> <TD COLSPAN=2>歴史</TD> <TD ROWSPAN=2 COLSPAN=4>卒業研究</TD> </TR> <TR ALIGN="center"><TH>金</TH> <TD COLSPAN=2>保健体育</TD> <TD COLSPAN=2>化学</TD> </TR> </TABLE> |
説明：
すなわち、縦方向のセル連結では、ROWSPAN=n のオプションを使い、n の数字は連結するセルの数である。横方向のセル連結では、COLSPAN=n のオプションを使い、n の数字はこれも連結するセルの数である。<TD ROWSPAN=n> や <TD COLSPAN=n> を書くと、その後の記述は、連結した数のセル分だけ減ることになる。
目次へ戻る
ファイル名：reidai09.html
上記htmlファイルをブラウザで表示すると，
フレームの基本：
<FRAMESET オプション>〜</FRAMESET>
オプション：
COLS="n" 縦に分割（nはピクセル数またはウインドウ幅に対する％）
ROWS="n" 横に分割（nはピクセル数またはウインドウ幅に対する％）
フレームページには、BODYタグは不要
基本構成：
１．フレームの内容を指定するファイル
（通常、index.html、ここではframe_example.html）
| <html> <head> <title>フレームページ(縦分割) </title> </head> <frameset cols="30%,70%"> <frame src="mokuji.html" name="2"> <frame src="naiyou.html" name="1"> </frameset> </html> |
２．ページの左側に表示されるファイル（mokuji.html）
| <html> <head><title>目次</title></head> <body> ・ニュース！<br> ・自己紹介！<br> ・日記！<br> </body> </html> |
３．ページの右側に表示されるファイル（naiyou.html）
| <html> <head><title>内容</title></head> <body><pre> 本日（平成16年8月19日）、 神戸高専の情報教育センターでＨＴＭＬによる WEBページ作成法の講義と演習を受けました。 </pre></body> </html> |
フレームを入れ子にする：
フレームのファイル（frame_example2.html）
| <html> <head> <title>フレームページ入れ子 </title> </head> <frameset cols="50%,*"> <frameset rows="33%,33%,*"> <frame src="aa.html"> <frame src="bb.html"> <frame src="cc.html"> </frameset> <frame src="DD.html"> </html> |
ファイル名：
frame_example.html
mokuji:html
naiyou.html
表示例：
入れ子の表示例：
追加解説：
親フレーム（FRAMESET）に以下の属性をつけることで、
フレームの区切り線を非表示にすることができます。
属性をつけていない場合は、区切り線が表示されます。
frameborder="0"
区切り線を非表示にするための指定です。
framespacing="0"
I.E.上で、非表示になっている区切り線のスペースをつめ、
フレーム内の各ページを密着させる指定です。
border="0"
N.N.上で、非表示になっている区切り線のスペースをつめ、
フレーム内の各ページを密着させる指定です。
あなたの作ったホームページに対してブラウザで見る場合の注意点として、ブラウザの違いによる配置ずれの問題があります。
これを比較的簡単に対応したのがテーブルオプションの枠線無し仕様による配置です。
プロの方が作っているのは、このテクニックとかインラインフレームなどの組み合わせでやっている場合が多いです。
では、この配置テクニックを紹介しましょう！
１．テーブルのサイズ指定
<table width="n1" height="n2">〜</table>
n1：テーブルの幅（ピクセルか、ウインドウ幅に対する％）
n2：テーブルの高さ（ピクセル）
２．セルのサイズ指定
<th width="n1" height="n2">〜</th>
<td width="n1" height="n2">〜</td>
n1：セルの横幅（ピクセル）、n2：セルの高さ（ピクセル）
３．枠線とセルスペースの幅指定
<table boarder="n" cedllspacing="n">〜</table>
n：枠線とセルスペースの幅
n=0の時はともにゼロ設定
ファイル名：reidai10.html
目次へ戻る
ファイル名：reidai10.html
boader="2" cellspacing="2"の設定での表示例
boader="0" cellspacing="0"の設定例
| フリースペース |
準備として，
ファイル：
tokei.js
koyomi.js
a-tokei.zip(ディレクトリの圧縮ファイル）
をダウンロードして，a-tokei.zipはダウンロードと同時に解凍する)
12-1 現在の時刻の表示
HEAD部（タイトルタグの下ぐらいの位置に）
| <SCRIPT language="JavaScript" SRC="koyomi.js"> </SCRIPT> <SCRIPT language="JavaScript" SRC="tokei.js"> </SCRIPT> |
BODYタグのオプション指定で，
|
<BODY onload="toki()" bgcolor=***> |
bodyの適当なところで
| <SCRIPT LANGUAGE="JavaScript"> kaku(); </SCRIPT> |
12-2 カレンダーの表示
bodyの適当なところで
| <SCRIPT LANGUAGE="JavaScript"> koyomi(); </SCRIPT> |
目次へ戻る
| <script language="JavaScript"><!-- myModify = document.lastModified; document.write( "Last update : " , myModify ); // --></script> |
12-4 メッセージを１文字ずつ表示して最後に点滅させる
例：
| <SCRIPT language="JavaScript"><!-- myMsg = "☆_☆_☆_神戸高専公開講座へようこそ！☆_☆_☆"; myCnt = 0; myDspFlg = 0; function myFunc1(){ if ( myDspFlg == 0 ){ document.myForm1.myFormMes.value = myMsg.substring(0,myCnt); if ( myCnt == myMsg.length ){ myCnt = 0; myDspFlg = 1; }else{ myCnt += 1; } }else if ( myDspFlg == 1 ){ document.myForm1.myFormMes.value = ""; myDspFlg = 2; }else{ document.myForm1.myFormMes.value = myMsg; myCnt ++; if ( myCnt == 5 ){ myDspFlg = 0; myCnt = 0; }else{ myDspFlg = 1; } } } // --></SCRIPT> <form name="myForm1"> <INPUT type="text" size="51" name="myFormMes"> </form> <script language="JavaScript"><!-- setInterval("myFunc1()",300); // --></script> |