HTML

HTML

一応今回のHTML講座で当分更新はありません。完全閉鎖ではありませんがそれに近い状態になります。

にせリンクHP

HPには各コーナーに飛ぶ為にいくつかのリンクが貼られてあります。例えばウチで言えばHP作成講座や、HTML紹介、掲示板、出会いのページ等です。
その各コーナーが自分の作ったぺーじじゃなくて有名どこのHPに飛ぶだけだったら。そうなんです、労せずして素晴らしく役に立つHPの出来上がりです。
HP作成講座で飛ぶと[とほほのWWWリファレンス]に飛んだり、HTML紹介で飛ぶと[初心者の交差点]に飛び、掲示板で飛ぶと全く違う他人の掲示板に飛んだりして。それは簡単に利用価値の高いHPを作ることが出来ます。yahoo等の検索ツールをのせているように見せかけてキーワード入力させて飛んだらyahooのメインページに飛ぶだけというのも無意味で最高ですね。

　例

--ソース--
＜FORM ACTION="http://www.yahoo.co.jp/cgi-bin/"＞
yahooサーチエンジン(キーワードを入力して下さい)
＜INPUT TYPE="text" SIZE=15＞
＜/FORM＞

スタイルシート

HTMLも昔からあって、現在に至るまで進歩してきて、今現在使用されている一番新しいのはHTML4.0です。そのHTML4.0になって[スタイルシート]と呼ばれるものが追加されました。これを使用すると今まで＜FONT＞等で毎回タグの指定をしてきたものが書式別に一括して指定できるようになりました。それによってHPの体裁を統括的に行えるようになり、ようするにバランスのとれたHPを簡単に作成できるようになったのです。
スタイルシートには３つの方法があります。
・＜STYLE＞で指定
・STYLEと本文を分離
・直接指定

---＜STYLE＞で指定する場合---
＜HEAD＞内で指定するタグの設定を決めます。
例えば＜H＞タグを指定する時は。
＜HEAD＞
＜STYLE TYPE="text/css"＞
＜!--
H1 { color: #6桁英数 }
H2 { color: #6桁英数 }
--＞
＜/STYLE＞
＜/HEAD＞
これで本文の中の＜H1＞と＜H2＞タグを使った時に指定した６桁英数で表示されます。

---STYLEと本文を分離する場合---
スタイルシート専用のファイルを用意します。
そのファイルには(header.css)といったファイル名で指定します。そして本文を表示するファイルは普通のものでかまいません。
---header.css部のソース---
H1 {color: #ff0000 }
H1 {color: #0000ff }
------------------------

-----本文ソース-----------
＜HEAD＞内に
＜LINK REL=stylesheet HREF="./header.css" TYPE="text/css"＞
と入れます。これで上のファイルで指定した通りに本文で＜H1＞＜H2＞を使用した場合、＜H1＞は赤で、＜H2＞は青で表示されます。
---------------------
スタイルシートつぃてはこの使い方が最も効果的です。３番目の直接指定ではいちいち個別に指定しなくてはいけないので＜FONT＞などの直接指定タイプとかわらないので使う必要性は薄いので説明は省きます。

スタイルシートではFONT,BACKGROUND,LINK,文字FACE,その他様々なものが指定できます。よって今まで＜BODY＞に追加していたTEXTやBGCOLOR、LINK部の色などは指定する必要はなうなります。

JavaScript

俺のしっているJavaScriptをまとめて紹介します。
ただし複数を同じページにつけた場合、うまく表示されるかどうかは解りません。

リアルタイム時計日付つき(ウチのメインに設置中)

------ソース-------
＜FORM METHOD="post"＞
＜INPUT TYPE="text" NAME="jc" SIZE=24＞
＜/FORM＞

＜SCRIPT LANGUAGE="JavaScript"＞
function jc()
{
var d = new Date();
var Year = d.getYear();
var Month = d.getMonth()+1;
var Day = d.getDate();
var Hours = d.getHours();
var Minutes = d.getMinutes();
var Seconds = d.getSeconds();

document.forms[0].elements[0].value= Year + "年" + Month + "月" + Date + "日" + Hours + "時" + Minutes + "分" + Seconds + "秒";
setTimeout("jc()",1000);
}
＜/SCRIPT＞
---------------------
＜FORM＞タグが時計の表示位置になります。
最後に＜BODY＞タグの最後に少し手を加えて
＜BODY onLoad="jc()"＞とすれば大丈夫です。

テキストボックスに流れるメッセージ表示

------ソース------
＜HEAD＞～＜/HEAD＞の中に
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
var msg;
msg="ここに流したいメッセージ";
msg=,sg+msg;

function schText() {
setTimeout("schText()",300};
msg=msg.substring(2,msg.length)+msg.substring(0,2);
document.sText.lines.value=msg;
}
//--＞
＜/SCROPT＞
メッセージを表示したい位置に以下のFORM設置

＜FORM NAME="sText"＞
＜INPUT TYPE="text" NAME="lines" SIZE=50＞
＜BR＞＜/FORM＞

＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
schText();
//--＞
＜/SCRIPT＞
--------------------------
これをボックス内でなく下部のステータスバーに表示させるにはソースの中の
document.sText.lines.value=msg;を
window.status=msg;に変更します。

訪問者のブラウザ情報表示

------ソース------
＜SCRIPT LANGUAGE="JavaScript"＞
document.write("アナタのブラウザ＜BR＞");
document.write("VERSION", navigator.appVersion, "＜BR＞");
document.write("NAME", navigator.appName, "＜BR＞");
document.write("AGENT", navigator.userAgent, "＜BR＞");
＜/SCRIPT＞
------以上を表示させたい位置に設置------

メニュー選択式ジャンプ

------ソース------
＜HEAD＞
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
function.gourl(){
URL=document.menu.text.options[document.menu.text.selectedIndex].value;
location=URL;
}
//--＞
＜/SCRIPT＞
＜/HEAD＞

以下をBODYタグの後ろで表示したい位置に設置
＜FORM NAME="menu"＞
＜SELECT NAME="text"＞
＜OPTION VALUE="#"＞メニュー
＜OPTION VALUE="ジャンプ先のURL"＞ジャンプ先の名前
-繰り返し-
＜/SELECT＞
＜INPUT TYPE="button" VALUE="Go" onclick="gourl()"＞
＜/FORM＞
--------------------------

1999/08/26
Presented by YORITOMO.