홈페이지 제작(2) (CGI Tool 사용법)

원종상

충남대학교 컴퓨터공학과 프로토콜공학연구실

E-mail : muse@comeng.chungnam.ac.kr

URL : http://www.comeng.chungnam.ac.kr/~muse

Abstract :

홈페이지를 작성하려면 우선 HTML 작성법을 알아야한다. HTML과 약간의 디자인 실력으로 예쁜 이미지를 만들어서 홈페이지에 넣어놓으면 괜찮은 홈페이지를 만들수 있다. 그러나 문서가 정적인것보다는 좀더 동적인 문서가 사용자들한테 더 많은 시각적 효과를 줄수 있는데, 이런것을 위해서는 CGI 프로그램을 통해서 가능해준다. 하지만 일반 사용자들이 스스로 CGI 프로그램을 하는것은 쉬운일이 아니다. 고로 여기서는 현재 홈페이지에서 자주 사용되고 유용하게 사용될 CGI 도구들에 대해서 알아보고 또한 사용법에 대해서 알아보기로 하고, 반복되는 문서 작업을 줄여서 능률적으로 작업을 할수 있게 도와주는 홈페이지 제작툴에 대해서 간략하게 알아보기로 한다.

Keywords :

WWW, HTML, CGI, CGI Tool, JavaScript, Java, Perl, HTML Editor

1. 서론

HTML 문서를 작성하는 기본 방법에 대해 알고 있어도 훌륭한 홈 페이지를 만들수 있으며 예쁜 이미지만 준비 되어 있고 디자인만 괜찮다면 WWW에서 많이 보는 괜찮은 홈페이지를 만들수도 있을 것이다. 하지만 좀더 자신의 홈페이지를 동적으로 만들고 싶은때는 HTML과 괜찮은 그림만으로는 한계를 느끼게 된다. 자신의 홈페이지에 LED로 자신이 알리고자 하는 메세지를 출력하고, Counter를 설치하여 들어온 사람들의 수를 알릴수 있게 한다든지, 자기만의 방명록을 만들어 홈페이지에 방문한 사람들이 메세지를 남기게 하고, 필요시 자기에게 메일을 보낼수 있도록 간단한 메일 폼을 만들어 놓는다든지.. 이런 일들을 홈페이지에 추가시키기 위해서는 홈페이지를 만드는 사람들은 HTML뿐만 아니라 CGI(Common Gateway Interface)에 대해서도 숙지 하고 있지 않으면 안된다. 여기서는 WWW상에서 구할수 있는 여러가지 도구를 가지고 굳이 CGI 프로그램에 대해서 잘 알지 못더라도 HTML을 사용해서 많은 어려움 없이 자신의 홈페이지에 유용한 CGI 프로그램을 설치하여 사용할수 있도록 한다.

2. 홈페이지 제작에 유용한 도구들

2.1 Scrolling Text

Status Bar로 자신이 출력하고 하는 메세지를 보내고하는 경우가 있다. 이때 출력하고자 하는 내용이 적으면 괜찮은데 많을 경우에는 광고판에 나오는 것처럼 메세지를 회전시켜가면서 출력해주어야 한다. 아래 그림 1은 "대구에서 열리는 제5회 WWW Workshop에 오신것을 환영합니다."라는 메세지가 상태바에 회전하면서 출력되는 그림이다.

그림 . Scrolling Text의 화면

다음 예제 1은 그림 1에서 처럼 상태바에 메세지가 출력하는 예제를 JavaScript를 사용해서 작성한 것이다.

<HEAD>

<SCRIPT>

function marquee( msg)

{

msglen = msg.length;

newmsg = msg.substring( 2, msglen) + msg.substring( 0, 2);

window.status = newmsg;

setTimeout( "marquee('" + newmsg + "')", 500);

}

function onMarquee()

{

marquee("대구에서 열리는 제5회 WWW Workshop에 오신것을 환영합니다.");

}

</SCRIPT>

</HEAD>

<BODY onLoad="onMarquee()">

<H2> Marquee </H2>

</BODY>

예제 1. Scrolling Text

HTML 문서를 만들고자 하는 사용자는 HEAD 태그안에 JavaScript로 작성된 코드를 넣고 marquee("message") 함수안에 출력하고자 하는 메세지를 넣으면 된다. 이렇게만 하면 멋진 회전하는 문자를 만들수 있다. 또한 회전하는 속도를 제어하려면 setTimeout( msg, 500) 함수에서 두번째 파라메터의 숫자를 바꾸면 된다. 숫자가 커지면 느리게 회전하고 적으면 빠르게 회전한다.

2.2 Digital Clock

누군가가 자신의 홈페이지에 접속했을때 그 사람한테 현재의 날짜와 시간을 알려줄수 있다. 그런 기능을 하는 CGI 도구들은 많이 있으나, 대부분은 처음에 접속한 시간으로 고정될뿐 계속 시간이 변하지 않는다. 여기서는 JavaScript를 사용해서 간단하면서 효율적인 디지탈 클럭에 대해서 보겠다.

다음은 JavaScript를 사용해서 만든 디지탈 클럭으로 시간에 브라우저의 맨밑에 있는 상태바에 나타나게 된다.

<HTML> <HEAD>

<TITLE>간단한 Digital Clock</TITLE>

<SCRIPT LANGAUGE="JavaScript">

function Clock()

{

window.setTimeout( "Clock()", 1000);

d = new Date();

window.status = d;

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white OnLoad="Clock()" >

<H3> 상태바에 현재 시간이 나옵니다. </H3>

</BODY>

</HTML>

예제 2. Digital Clock

다음은 예제 2의 결과를 화면으로 보여준다. 브라우저의 상태바에 영문으로 된 시계가 나타난다.

그림 . Digital Clock의 화면

만약 StatusBar에 나오지 않고 하나의 입력폼을 만들어 그곳에 시간을 출력하고 싶다면 다음과 같이 하면 됩니다. 다음은 시간 출력이 한글로 나오는 좀더 향상시킨 Clock 스크립트다.

<HTML> <HEAD>

<TITLE> 한글로 출력되는 시계</TITLE>

<SCRIPT LANGAUGE="JavaScript">

function makeWeeks()

{

this[1] = "일"; this[2] = "월"; this[3] = "화"; this[4] = "수";

this[5] = "목"; this[6] = "금"; this[7] = "토";

return this;

}

function Clock()

{

window.setTimeout( "Clock()", 1000);

var today = new Date();

var year = today.getYear() + 1900;

var month = today.getMonth() + 1;

var day = today.getDate();

var hour = today.getHours();

var min = today.getMinutes();

var sec = today.getSeconds();

var weeks = makeWeeks();

var week = weeks[ today.getDay()+1];

document.clockForm.clock.value = year + "년 " + month + "월 "

+ day + "일 " + week + "요일 "

+ hour + "시 " + min + "분 " + sec + "초 ";

}

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white OnLoad="Clock()" >

<CENTER>

다음의 입력 폼에 시간이 출력됩니다.

<FORM NAME=clockForm>

<INPUT SIZE=33 NAME=clock>

</FORM>

</CENTER>

</BODY> </HTML>

예제 3. 향상된 Digital Clock

여기서 주의해야 할 점은 시간을 출력하고 하는 입력폼의 이름이다. 입력폼에는 "NAME=clockForm"을 첨가해주고, 또한 입력 필드에도 "NAME=clock"을 첨가해주어야 한다. 위 예제를 실제 화면으로 보면 그림 3과 같다.

그림 . 입력폼에 나타나는 시계 그림

2.3 Counter

Counter는 이 페이지에 얼마만큼의 접근을 했는지를 알려주는 유용한 CGI 도구이다. Unix에서 가장 유명하고 많은 기능을 자랑하고 있는 Counter가 Muhammad A. Muquit의 WWW Homepage Access Counter and Clock이다.

2.3.1 설치하기

2.3.1.1 파일 얻기

URL : http://www.fccc.edu/users/muquit/Count.html

2.3.1.2 디렉토리 구조

파일을 얻어서 풀어보면 다음과 같은 디렉토리 구조를 볼수 있다.

그림 . Counter의 디렉토리 구조

□Base 디렉토리 : Counter에 관련된 모든 서브디렉토리와 파일들이 있는 디렉토리

□Log 디렉토리 : Counter의 에러 메세지와 다른 곳에 위치한 호스트가 접근했을때의 기록이 이 파일에 남는다.

□conf : Counter에서 사용할 configuration 파일이 있다.

□data : 이 디렉토리에는 WWW 페이지의 접근수가 저장되어 있는 파일이 있다.

□digits : 여러가지 종류 숫자 모양들이 GIF 형식으로 만들어져 각 디렉토리에 있다. 디렉토리 이름은 나중에 필요한 숫자 모양을 사용시 참조된다.

□rgb.txt : 이 파일은 색을 사용할때 색이름에 해당하는 RGB값을 얻어 올때 사용된다.

2.3.1.3 컴파일과 설치 과정 (unix)

컴파일시 Counter의 파일들을 편집할 필요가 전혀 없다. 환경 설정 스크립트들이 자동적으로 모든 과정을 수행해 나간다. 다음은 Unix의 쉘상에서 컴파일 하는 과정과 각 스크립트에 대한 간략한 설명을 있다.

□설치 과정

$ ./Count-config

install 프로그램을 위한 다양한 template 파일인 "config.h" 헤더 파일을 생성하는 스크립트이다. Counter 프로그램에 필요한 환경들, 예를 들면 conf, data, log 디렉토리의 위치등을 물어본다. 각 디렉토리의 위치에 대해서는 [그림 4]를 보면 도움이 될것 이다.

$ ./configure

이 스크립트는 당신의 시스템에 맞게 Makefile을 생성하게 해준다.

$ make clean (만약 처음으로 설치한다면 필요가 없다.)

$ make

전 두 단계가 성공적으로 끝났으면 컴파일을 시작한다.

$ ./Gen-conf

이 스크립트는 당신의 WWW 서버의 이름이나, IP 주소등을 물어본다. 대답을 다 하고 나면 Counter를 위한 configuration 파일이 생성된다.

$ ./Count-install

마지막 단계로써, 이 스크립트는 Counter를 동작하는데 필요한 Count 프로그램인 Count.cgi, 디지털 이미지, 환경 설정 파일과 rgb 컬러 이름 데이타베이스을 올바른 곳에 설치하는 스크립트이다. 만약 root 영역에 시스템을 설치한다면 root 권한을 가지고 있어야 한다.

2.3.2 Counter 프로그램 사용하기

다음과 같이 IMG 태그를 사용해서 당신의 Web 페이지로 부터 참조할수 있다.

IMG 태그의 SRC 파라메터에서 "/cgi-bin/"은 Counter가 설치되어 있는 디렉토리이고 "Count.cgi"는 Counter CGI 프로그램의 이름이다. "?" 뒤로 나오는 문자열이 Counter의 속성을 나타내는 파라메터들이다. 이 파라메터를 변화시키면서 자신의 홈페이지 적당한 Counter의 모양을 만들수 있다. 이 파라메터의 "muse.dat"는 이 홈페이지에 접근한 수를 포함하고 있는 파일로 항상 지정해 줘야 한다.

Counter의 속성을 나타내는 문자열은 여러개의 파라메터들로 구성되어 있는데, 서로 " "|"으로 구분된다. 하나의 파라메터는 파라메터의 속성과 파라메터의 값이 "="으로 연결되어 있다. 다음은 빈번하게 사용되는 Counter의 파라메터와 그것에 대한 예제를 설명한다.

□ 프레임의 두께와 색깔

Counter는 디펄트로 프레임을 가지고 있다. 이 프레임의 두께를 바꾸려면 다음과 같이 한다. ft뒤에 나오는 값이 프레임의 두께다.

<img src="/cgi-bin/Count.cgi?ft=10;df=x.dat">

프레임의 색깔을 바꾸려면 RGB의 컬러값을 넣거나 컬러 이름을 넣는다. 색깔을 지정하는데는 다음과 같이 세가지 방법이 있다.

<img src="/cgi-bin/Count.cgi?frgb=00ff00&df=x.dat">

or <img src="/cgi-bin/Count.cgi?frgb=0;255;0&df=x.dat">

or <img src="/cgi-bin/Count.cgi?frgb=green&df=x.dat">

□ Comma 출력

comma를 T(true)로 해줌으로써 3자리 단위로 Comma를 출력하게 해준다. 디펄트로 comma가 F로 되어 있어 출력되지 않는다.

<img src="/cgi-bin/Count.cgi?df=x.dat|comma=T">

□ 회전

Counter를 회전하여 출력할수 있다. 사용할수 있는 각도로는 90, 180, 270이나 360이다.

<img src="/cgi-bin/Count.cgi?ft=0|rotate=Y|df=x.dat">

<img src="/cgi-bin/Count.cgi?ft=0|degrees=180|df=x.dat">

<img src="/cgi-bin/Count.cgi?ft=0|degrees=90|df=x.dat">

□ 숫자 모양

다음과 같은 숫자 모양을 제공한다. 다른 숫자 모양을 사용하는 방법은 2.3.3 에서 설명하겠다. 숫자 모양을 사용하려면 dd=??로 이름을 지정해준다. 각 이름은 Counter 설치 디렉토리의 digits 디렉토리 이름이다.

<img src="/cgi-bin/Count.cgi?dd=A|df=x.dat">

<img src="/cgi-bin/Count.cgi?dd=B|df=x.dat">

<img src="/cgi-bin/Count.cgi?dd=C|df=x.dat">

<img src="/cgi-bin/Count.cgi?dd=D|ft=3|df=x.dat">

<img src="/cgi-bin/Count.cgi?ft=2&frgb=000000&dd=E|df=x.dat">

□ 투명하게(Transparency)

숫자 모양 A의 검은색(000000)을 투명하게 만든다.

<img src="/cgi-bin/Count.cgi?dd=A|tr=T|trgb=0;0;0&df=x.dat">

숫자 모양 A의 녹색(00ff00)을 투명하게 만든다.

<img src="/cgi-bin/Count.cgi?dd=A|tr=T|trgb=0;255;0&df=x.dat">

□ Counter 숨기기

원한다면 sh=0 으로 해서 Counter의 모양을 보이지 않게 할수 있다. 물론 화면상에만 보이지 않을뿐이지 Counter는 계속 증가한다.

<img src="/cgi-bin/Count.cgi?sh=0|df=x.dat">

□ 숫자의 개수

오직 5자리의 숫자만을 출력하고 싶다면 다음과 같이 한다.

<img src="/cgi-bin/Count.cgi?md=5|df=x.dat">

또는 왼쪽의 0을 제외하고 정확한 숫자만을 출력하고 싶을 경우에는

<img src="/cgi-bin/Count.cgi?pad=0|df=x.dat">

□ 문자를 출력

Counter로써의 역활이 아닌 단순히 문자를 출력할수도 있다. 가능한 문자는 0123456789 같은 숫자하고 ,:-ap 이다. 여기서 a는 AM을 나타내고 p는 PM을 나타낸다.

<img src="/cgi-bin/Count.cgi?lit=0123456789">

<img src="/cgi-bin/Count.cgi?dd=B&lit=0123456789">

<img src="/cgi-bin/Count.cgi?dd=C|lit=0123456789">

<img src="/cgi-bin/Count.cgi?dd=D&lit=0123456789">

<img src="/cgi-bin/Count.cgi?ft=0&tr=1&trgb=ffffff|dd=E|lit=0123456789">

<img src="/cgi-bin/Count.cgi?lit=a1,456-:p">

□ 시계로서의 Counter

12 시간 형태로 시간을 표시한다.

<img src="/cgi-bin/Count.cgi?display=clock">

24 시간 형태로 시간을 표시한다.

<img src="/cgi-bin/Count.cgi?display=clock|tformat=24">

□ 날짜를 표시한다.

<img src="/cgi-bin/Count.cgi?display=date">

2.3.3 다른 모양의 숫자 이미지 사용하기

2.3.3.1 자신의 숫자 이미지 사용하기

각 숫자에 해당하는 이미지를 만든다. 그리고 이미지의 숫자에 맞게 이름을 부여한다. 주의할점은 항상 이미지의 이름을 zero.gif, one.gif, .., nine.gif로 줘야한다.

□ 숫자 이미지 설치하기

당신의 Counter CGI가 설치된 디렉토리 밑에 "digits"라는 디렉토리가 있다. "digits"에 새로운 디렉토리를 하나 생성한다. 여기서는 "cb"라고 하자. 이 디렉토리는 나중에 숫자 모양을 지정할때 이름으로 사용한다.

새로 생성한 "cb" 디렉토리 밑에 숫자 이미지들을 복사한다.

□ 자신이 만든 숫자 이미지 사용하기

Counter 파라메터중 dd를 사용하여 자신이 만든 숫자 이미지가 저장되어 있는 디렉토리 이름을 지정하면 된다.

<img src="/cgi-bin/Count.cgi?dd=cb|ft=0|df=x.dat">

2.3.3.2 Counter에 쓰일 숫자 이미지 얻기

이 Counter CGI에 맞는 Counter의 이미지들을 모아 놓은 홈페이지가 있다. R. Stelling 이라는 사람이 자신의 홈페이지에다가 여러가지의 예제와 이미지들을 모아놓았으니 굳이 Counter 이미지를 그리지 않더라도 다양한 종류의 모양을 구할수 있다. URL은 http://www.ibase.org.BR/~stelling/CounterExamples.html이다.

2.4 Mail form

경우에 따라서는 자신의 홈페이지에 어떤 정보를 올려 놓았거나 아니면 새로운 서비스를 만들었을때 그것에 대한 질문을 메일을 통해서 받는다. 간단한 방법으로는 일반적인 메일 도구를 사용해서 메일을 보낼수 있다. 홈페이지 상에서 WWW을 통해서 메일을 보내고자 할때, 자신의 홈페이지에 맞게 그래픽등을 사용해서 메일 폼들어 놓고 CGI를 사용해서 전자 우편을 보낼수 있는 것을 만든다면 간단한 메일 도구를 사용하는 것보다는 더 많은 일을 할수 있다. 그런 일들을 하는 CGI 메일 도구 중에 하나가 Heng Yuan이 만든 CookMail이다. 사용자는 특별히 CGI 소스를 고치지 않더라도 간단히 HTML 문서만을 가지고 다양한 형태의 메일을 보낼수 있다. 메일을 보낸데 필요한 입력 필드를 만들수 있고, 각 입력 필드를 제어할수 있고, 보낼 메일의 형태를 제어할수 있다.

2.4.1 설치하기

2.4.1.1 파일 얻기

URL : ftp://ag.arizona.edu/pub/unix/heng/cookmail/cookmail-1.61.tar.Z

2.4.1.2 파일 풀기

uncompress cookmail-1.61.tar.Z

tar xvf cookmail-1.61.tar

2.4.1.3 컴파일하기

cookmail이 설치되어 있는 디렉토리에서 "make"를 실행한다. 기본적으로 컴파일은 cc를 가지고 한다. 만약 컴파일러로 gcc를 가지고 있다면 Makefile의 첫번째 CC값이 cc로 설정되어 있는데, 이것을 gcc로 고친다.

CC=gcc # 컴파일러로 gcc를 사용한다.

2.4.2 HTML 문서에서 사용하기

2.4.2.1 기본적인 CookMail 사용법

CookMail를 HTML문서안에 사용하고 싶으면 다음과 같이 FORM 태그를 포함시키면 된다 : CookMail/ 은 CookMail이 설치되어 있는 디렉토리이다.

<!--#exec cgi="cookmail/cookmail.cgi" -->

또한 TO 입력 필드 이름에는 보낼 사람의 Email 주소를 지정하며 항상 지정되어 있어야 한다. 주의 : CookMail에서 입력 필드 이름은 대소문자를 구별한다. 그래서 메일의 제목을 나타내는 입력 필드인 SUBJECT는 Subject나 subject와는 다른다. 항상 대문자를 사용해야 한다.

2.7.2.2 기본적인 예제

다음은 기본적인 email HTML 폼과 추가적인 입력 필드를 가지고 있는 예제이다.

그림 5. 입력 화면

<FORM METHOD=POST ACTION=cookmail/cookmail.cgi>

<!--#exec cgi="cookmail/cookmail.cgi" -->

<INPUT TYPE=HIDDEN NAME=TO VALUE=muse@comeng.chungnam.ac.kr>

<!-- input default is TYPE=TEXT -->

이 름 :<BR>

<INPUT NAME=NAME SIZE=30><BR>

Email:<BR>

<INPUT NAME=EMAIL SIZE=30><BR>

제 목 :<BR>

<INPUT NAME=SUBJECT SIZE=40><BR>

메세지 :<BR>

<TEXTAREA NAME=MESSAGE ROWS=5 COLS=50></TEXTAREA><BR>

<!-- Extra Fields for testing -->

Extra Field 1:<BR>

<INPUT NAME="Extra Field 1" SIZE=30 VALUE="This is Extra Field 1"><BR>

Extra Field 2:<BR>

<INPUT NAME="Extra Field 2" SIZE=30 VALUE="This is Extra Field 2"><BR>

<INPUT TYPE=SUBMIT VALUE="편지 보내기">

<INPUT TYPE=RESET VALUE="내용 지우기">

</FORM>

예제 4. 간단한 메일 콤 예제

From: muse@comeng.chungnam.ac.kr (원종상)

Subject: 홈페이지를 만들자(2)

To: muse

홈페이지 제작에 유용한 CGI 도구들을 소개합니다.

Extra Field 1

=============

CGI Tools

Extra Field 2

=============

Have a nice weekend!

그림 6. 예제 4에 대한 메일결과

2.4.2.3 메일의 출력 형태 제어

CookMail은 HTML 문서를 만드는 사람이 CGI의 소스를 고치지 않더라도 email의 출력형태를 정할수 있다. 다음과 같이 "FORM" 태그를 포함하고 있다면, email의 내용을 FORM에 지정된 파일에 포함되어 있는 형태로 메일을 보내준다:

<INPUT TYPE=HIDDEN NAME=FORM VALUE=/complete-path/email.form>

비슷한 방법으로, 브라우저로 나오는 결과도 "SHOW" 태그를 가지고 지정할수 있다:

<INPUT TYPE=HIDDEN NAME=SHOW VALUE=/complete-path/email.show>

2.4.2.4 출력 형태를 제어할수 있는 예제

다음은 "FORM"과 "SHOW" 태그를 사용하여 출력 형태를 제어할수 있는 예제이다.

그림 7. 입력 화면

<HTML>

<TITLE>CookMail Example 2</TITLE>

<H1>CookMail 예제</H1>

<FORM METHOD=POST ACTION=cookmail/cookmail.cgi>

<!--#exec cgi="cookmail/cookmail.cgi" -->

<INPUT TYPE=HIDDEN NAME=TO VALUE=muse@comeng.chungnam.ac.kr>

<!-- complete path needed for the value -->

<INPUT TYPE=HIDDEN NAME=SHOW

VALUE=/user/muse/public_html/CookMail/example4.show>

<INPUT TYPE=HIDDEN NAME=FORM

VALUE=/user/muse/public_html/CookMail/example4.form>

<!-- input default is TYPE=TEXT -->

이 름 :<BR>

<INPUT NAME=NAME SIZE=30><BR>

Email:<BR>

<INPUT NAME=EMAIL SIZE=30><BR>

제 목 :<BR>

<INPUT NAME=SUBJECT SIZE=40><BR>

메세지 :<BR>

<TEXTAREA NAME=MESSAGE ROWS=5 COLS=50></TEXTAREA><BR>

<!-- Extra Fields for testing -->

Extra Field 1:<BR>

<INPUT NAME="Extra Field 1" SIZE=30 VALUE="This is Extra Field 1"><BR>

Extra Field 2:<BR>

<INPUT NAME="Extra Field 2" SIZE=30 VALUE="This is Extra Field 2"><BR>

<INPUT TYPE=SUBMIT VALUE="편지 보내기">

<INPUT TYPE=RESET VALUE="내용 지우기">

</FORM>

</HTML>

예제 5. 출력형태를 제어하는 예제

From: ${EMAIL} (${NAME})

Subject: ${SUBJECT}

To: ${TO}

Here is the Message:

${MESSAGE}

Here are the extra fields:

${Extra Field 1}

${Extra Field 2}

${Extra Field 3}

${Extra Field 4}

예제 6. FORM파일의 내용

From nobody Fri May  2 18:40 KST 1997

Received: (from nobody@localhost) by rose.protocol.chungnam.ac.kr

Date: Fri, 2 May 1997 18:40:34 +0900

Message-Id: <199705020940.SAA08358@rose.protocol.chungnam.ac.kr>

From: muse@comeng.chungnam.ac.kr (원종상)

Subject: Welcome to 5th WWW Workshop

To: muse

Content-Type: text

Content-Length: 114

Status: RO

Here is the Message:

홈페이지를 만들자.

Here are the extra fields:

This is Extra Field 1

This is Extra Field 2

예제 5에 대한 메일의 결과

${NAME}'s email address is ${EMAIL}

Message:

${MESSAGE}

Field 1 is ${Extra Field 1}

Field 2 is ${Extra Field 2}

브라우저로 출력되는 모습

원종상's email address is muse@comeng.chungnam.ac.kr

Message:

홈페이지를 만들자.

Field 1 is This is Extra Field 1

Field 2 is This is Extra Field 2

예제 7. SHOW파일의 내용

2.4.3 이미 정의되어 있는 입력 필드의 이름

다음은 이미 정의되어 있는 입력 필드에 대한 설명이다. 이런 입력 필드 이름을 통해서 폼에서 CGI 프로그램으로 해당데는 파라메터들이 전송된다. 필요에 따라서는 입력 필드의 이름을 사용자가 정의해서 사용할수 있다. 이 정의한 이름을 가지고 나중에 메일의 출력 형태를 만들때 사용한다. 모든 입력 필드의 이름은 150자를 넘어서는 안된다.

표 1. CookMail의 입력필드의 이름

이름	Ver	의 미
절대적으로 요구되는
TO	1.0	받는 사람의 Email 주소. -항상 있어야 한다
Default 입력 필드
NAME	1.0	보내는 사람의 이름
EMAIL	1.0	보내는 사람의 Email 주소
SUBJECT	1.0	Email의 제목
MESSAGE	1.0	내 용
Configuration
EMPTYHANDLE	1.5	필드의 내용이 없을시, 다음과 같은 option에 따라서 행동한다. □ IGNORE 메일을 보낼때 이 필드는 무시한다. □ NOIGNORE 메일을 보낼때 이 필드는 무시하지 않는다. □ ERROR 필드의 내용이 비어있다면, 즉시 Error를 보고한다. Default 값은 IGNORE이다.
Advanced Features
출력 형식 지정
REDIRECT	1.0	결과로 다른 HTML 문서를 출력
FORM	1.0	보내려고 하는 Email 내용의 형식이 있는 파일 지정
SHOW	1.0	결과로 브라우저로 나오는 내용의 형식이 있는 파일 지정
EMPTY	1.5	필드의 내용이 비어 있을때 출력할 에러 문서의 형식을 지정

2.4.4 TroubleShooting

CookMail의 CGI 스크립트 실행시 /tmp 디렉토리 밑에 작업 파일을 남겨 놓는다. 이 임시 파일(/tmp/owebm*.html)들을 주기적으로 지워줘야 한다.

만약 cookmail 실행시 /tmp/owebmXXXXXX.html was not found 이런식의 에러 메시지가 나왔다면, 사용하는 시스템의 웹서버의 root 문서 디렉토리 (보통 /usr/local/www/htdocs)에서 다음을 실행한다.

ln -s /tmp tmp

* 일반 사용자는 접근 권한이 없으므로 시스템 관리자한테 부탁한다.

Method not implementation이라고 나오면, cookmail CGI 프로그램의 이름을 cookmail.cgi로 바꾸고, FORM 태그의 ACTION필드에서도 cookmail.cgi로 바꿔준다.

2.5 LED

2.5.1 설치하기

2.5.1.1 파일얻기

URL : www.cs.hope.edu/~dbrown/java/LEDSign/WWW/LED.html

2.5.1.2 압축 풀기

uncompress cookmail-1.61.tar.Z

tar xvf cookmail-1.61.tar

파일을 얻어서 풀어보면 이미 Java Applet이 컴파일되어 있다.

2.5.2 LED Sign을 사용하기 위한 HTML 태그

다음은 HTML 문서 안에 JavaApplet으로 작성된 LED Sign을 사용하기 위한 태그의 예이다.

<applet codebase="LEDSign/LED" code="LED.class" width=540 height=70>

<param name="script" value="../scripts/Demo.led">

<param name="font" value="../fonts/default.font">

<param name="border" value="3">

<param name="bordercolor" value="100,130,130">

<param name="spacewidth" value="3">

<param name="wth" value="100">

<param name="ht" value="9">

<param name="ledsize" value="3">

<BLOCKQUOTE>

<hr>

If you were using a Java-enabled browser,

you would see a scrolling text sign instead of this paragraph.

<hr>

</BLOCKQUOTE>

</applet>

"codebase"는 LED Sign을 위한 ".class" 파일이 있는 디렉토리를 지정한다. "code" 파라메터는 LED Sign JavaApplet의 이름이다. "script" 파라메터는 LED Sign이 실행될때 사용되는 스크립트 파일을 지정한다. 이 스립트가 Sign에 출력될 메세지와 형태를 담고 있다. 이 스크립트를 가지고 자기만의 LED Sign을 만들수 있다. 이것을 작성하는 방법에 대해서는 다음에 자세히 보겠다. "font" 파라메터는 Sign에 사용될 font를 지정한다. 각 파라메터는 다음과 같은 의미를 포함하고 있다.

표 2. LEDSign의 파라메터

파라메터	값	의 미
Required parameters
script	[URL|file]	사용될 사인의 스크립트를 지정한다.
font	[URL|file]	사용될 사인의 폰트를 지정한다.
Optional parameters
border	non-negative int	테두리의 두께
bordercolor	[0-255],[0-255],[0-255]	테두리의 색깔
spacewidth	[0이 아닌 정수]	공백 문자가 얼만큼 크기를 가진는가.
wth	[양수]	LED에 있는 사인의 넓이
ht	[양수]	LED에 있는 사인의 높이
ledsize	[1-4]	LED의 크기, 크기는 1, 2, 3 이나 4중에 하나이다.

2.5.3 LED Script

2.5.3.1 Syntax

LED Sign V2.7의 문법은 굉장히 간단하다. 각 명령어는 한줄에 있어야 한다. 즉, 하나의 명령어가 여러 줄로 나뉘어져 있으면 안된다. 주석은 각 줄의 시작이 "!!"으로 되어 있다. 다음은 간단한 예제이다.

!! Just a simple script

Do

!! Move "Hello" up onto the sign

ScrollUp delay=30 center=true text=Hello

Sleep delay=1000

!! Scroll "This is a test" left onto the sign

ScrollLeft delay=30 startspace=20 endspace=80 text=This is a test

Sleep delay=300

!! Repeat infinitely

Repeat times=-1

처음에는 "Hello"라는 문자를 ScrollUp하고 잠시후에 "This is a test"라는 문자를 ScrollLeft 한다. 이런 과정을 무한데로 반복한다.

2.5.3.2 The Functions/Transitions

여기서 설명되는 함수를 통해서 메세지들이 Sign 안에 출력된다.

□ Appear : Sign에 텍스트가 나타나게 한다.

Appear [clear=true] [spacing] [URL=<URL string>] [text=<String>]

□ Sleep : delay

Sleep [URL=<URL string>] [delay=<non-neg int>] (defaults to 1000)

□ ScrollUp : Sign에 있는 문자를 아래에서 위로 스크롤한다.

ScrollUp [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ ScrollDown : Sign에 있는 문자를 위에서 아래로 스크롤한다.

ScrollDown [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ ScrollLeft : Sign에 있는 문자를 오른쪽에서 왼쪽으로 스크롤한다.

ScrollLeft [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ ScrollRight : Sign에 있는 문자를 왼쪽에서 오른쪽으로 스크롤한다.

ScrollRight [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ ScrollCenter : Sign에 있는 문자를 중앙에서 부터 점점커지면서 나온다.

ScrollCenter [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ OverUp : Sign에 있는 문자를 덮어 쓰면서 ScrollUp

OverUp [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ OverDown : Sign에 있는 문자를 덮어 쓰면서 ScrollDown

OverDown [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ OverLeft : Sign에 있는 문자를 덮어 쓰면서 ScrollLeft

OverLeft [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ OverRight :Sign에 있는 문자를 덮어 쓰면서 ScrollRight

OverRight [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ OverCenter : Sign에 있는 문자를 덮어 쓰면서 ScrollCenter

OverCenter [clear=true] [URL=<URL string>] [delay=<non-neg int>] [spacing] [text=<String>]

□ Pixel : Sign에 있는 문자가 overlap 되면 지정된 문자로 바뀐다.

Pixel [clear=true] [URL=<URL string>] [delay=<non-neg int>] [pixels=<pos int>] [spacing] [text=<String>]

□ Blink : Sign에 있는 문자를 깜빡거리게 한다.

Blink [delay=<non-neg int>] [URL=<URL string>] [times=<pos int>]

□ Do : "Repeat" 블럭의 시작

Do (no parameters)

□ Repeat - "Repeat" 블럭의 끝

Repeat times=<-1 | non-neg int> (the "times" parameter is required)

□ Reload : 스크립트를 다시 읽어 들여서 처음부터 다시 시작한다.

Reload (no parameters)

다음은 Reload를 사용한 예이다.

Do

[Display some messages/information]

!! display those messages 5 times

Repeat times=5

!! Now reload the script to get any possible changes

Reload

해당 부분을 수행하고 다시 Reload 하였으므로 처음부터 다시 시작한다.

2.5.3.3 Options

다음은 LEDSign에서 사용되는 스크립트에 쓰일 함수들에 대한 option 들이다.

표 3. LEDSign의 Option

Option	값	의 미
clear	true	내용에 상관없이 화면을 지우면서 함수를 수행한다.
delay	음수가 아닌 정수	글자들이 움직일때 delay 시간
startspace	음수가 아닌 정수	Sign에서 나타나는 글자들의 시작 여백
endspace	음수가 아닌 정수	Sign에서 나타나는 글자들의 끝 여백
center	true	글자들이 가운데에 나타난다.
times	-1이나 음수가 아닌 정수	반복 회수 (-1 은 계속 반복함을 의미)
pixels	양수	점의 크기
URL	URL 문자열	Sign을 클릭시 이동할 URL
text	문자열	출력하고 하는 문자열 주의 : text option은 항상 맨 마지막에 있어야 한다.

2.5.3.4 사용 예제

다음 예제는 위에서 설명한 스크립트를 가지고 작성한 예제이다. !! The Demo script Do !! 여러색깔로 된 "LED Sign" 문자가 ScrollDown 된다. ScrollDown delay=30 center=true text=\rLED \oS\yi\gg\bn \rV2.7! !! 2000 ms 동안 멈춰있는다. Sleep delay=2000 !! "Welcome to the LED Sign" 메세지가 2번동안 ScrollLeft 된다. Do ScrollLeft delay=30 startspace=20 endspace=20 text=Welcome to the LED Sign WWW site! Repeat times=2 !! 시간과 함께 메세지들이 ScrollLeft 된다. ScrollLeft delay=30 text=The current time is \{tt} on \{mn}-\{dn}-\{yy}. ScrollCenter delay=30 text=Today is \{dd} \{mm} \{dn}, \{YY}. !! 이 메세지가 나올시 Sign을 클릭하면 http://www.sun.com으로 이동 ScrollLeft endspace=20 URL=http://www.sun.com endspace=40 text=Click on this sign now to go to... !! clear=true 이므로 화면을 점으로 지운다. Pixel delay=10 pixels=15 clear=true Sleep delay=1000 !! repeat infinitely Repeat times=-1 주의 : "text" 파라메터는 항상 마지막에 있어야 한다.

2.5.3.5 Text Color

LED Sign에서는 8가지의 색을 지정할수 있다.

□Red	□Orange	□Yellow	□Green
□Cyan	□Blue	□Purple	□White

문자의 색을 지정하는 방법은 backslash('\') 다음에 'r', 'o', 'y', 'g', 'c', 'b', 'p', 나 'w'을 넣으면 된다. 한번 색을 지정하면 다음에 다른 색으로 지정되기 전까지 계속 같은 색이 지정된다. 디펄트로 Red 가 지정되어 있다.

text=This \ois \ya \gtest

위와 같이 지정하면 "This is a text"중에서 "Test"는 디펄트로 red로, "is"는 orange로, "a"는 yellow로, "test"는 green으로 색을 지정된다.

2.5.3.6 Variable tags!!!

LED Sign은 현재의 시간과 날짜를 지정할수 있도록 되어 있다. 그 태그들은 문자의 색을 지정하는 방식과 똑같이 지정할수 있다. 다음은 시간과 날짜를 지정하는 태그들이다.

표 4. LEDSIgn의 Variable tag

태그	의 미
tt	시간
dd	축약된 형태의 요일(예를 들어, Fri)
DD	요일 (예를 들어, Friday)
dn	일 1-31
mm	축약된 형태의 달(예를 들어, Aug)
MM	달 (예를 들어, August)
mn	달의 수 1-12
yy	연도 표시가 2자리만 (예를 들어, 95)
YY	년 (예를 들어, 1995)

시간과 날짜를 backslash('\')다음에 '{'과 '}'사이에 태그를 넣어서 지정한다. 다음은 예제이다.

ScrollLeft text=The current time is \{tt}.  Today is \{dd} \{mm} \{dn}, \{YY}.

위의 스크립트는 "The current time is 4:40 pm. Today is Fri May 16, 1997." 라고 Sign에 출력된다.

2.5.4.7 URL connections!

LED Sign에 메세지를 출력하면서 LED를 마우스로 클릭했을시 지정된 URL로 이동할수 있다. 이렇게 하기 위해서는 스크립트에 있는 함수의 파라메터로 URL을 지정해야 한다. 다음과 같이 한다.

ScrollLeft URL=http://ws5.www-kr.org text=Welcome to 5th WWW workshop!!

이렇게 하면 Sign에 "Welcome to 5th WWW workshop!!"이 출력될때 마우스로 클릭하면 "http://ws5.www-kr.org"로 이동한다. 또한 URL 태그는 Sleep 함수와 함께 사용할수 있다. Sleep 함수와 함께 사용하면 잠시 메세지의 출력이 멈췄을때 누를수 있어서 유연성을 줄수 있다.

ScrollLeft URL=http://ws5.www-kr.org text=Welcome to 5th WWW workshop!!

Sleep URL=http://ws5.www-kr.org delay=400

2.6 Simple WWW BBS

기존에는 telnet을 통해서 텍스트를 기반으로 한 BBS에 들어가서 다른 사람이 올려놓은 글을 읽고, 거기에 대답하고, 서로 메일을 주고 받으며, 대화를 하고 했다. 그러나 WWW의 대중화로 인해 이런 BBS의 기능을 WWW을 기반으로 하여 사용하기를 원한다. 기존 BBS의 많은 기능을 다 제공하지는 못하지만 BBS의 원래 목적인 글을 올릴수 있는 기능을 가진 백대현씨가 만든 WWWBBS를 소개하겠다.

2.6.1 설치하기

2.6.1.1 파일 얻기

URL : http://sobackkornet.nm.kr/~photoboy/CGI/wwwbbs20/Howto.html

2.6.1.2 파일 풀기

uncompress cookmail-1.61.tar.Z

tar xvf cookmail-1.61.tar

2.6.1.3 디렉토리 구성

파일을 받아서 풀어 보면 다음과 같은 디렉토리로 구성되어 있다.

□ DATA :이 디렉토리에는 작성한 글이 저장되어 있는 디렉토리.

□ bbs_log.txt : BBS 사용에 대한 기록

□ index.cgi : 필요한 모든 일을 수행하는 BBS perl 스크립트

□ setpermissions.sh : 수행시 필요한 화이들에 대한 접근 권한을 바꿔주는 스크립트

□ .config.cgi : BBS 에 관련된 환경 변수

2.6.1.3 설치하기

"setpermissions.sh"을 실행해서 파일들에 대한 접근 권한을 바꿔주면 설치는 끝난다. 환경 설정 환경 설정에 관한 부분은 ".config.cgi"라는 파일에 있다. 이 파일을 수정해서 BBS의 이름과 운영자의 passwd 등을 원하는 것으로 수정할수 있다. perl의 위치 설정 이 CGI 프로그램은 perl 스크립트를 사용해서 작성되었다. 그러므로 시스템이 perl이 설치되어 있어야 한다. "index.cgi"의 첫번째줄에 perl 프로그램의 위치가 있는데, 만약 다른 곳에 설치되어 있다면 이것을 고쳐야 한다. perl 프로그램의 위치를 정확히 모른다면 'which per.' 이라고 쉘 상에서 명령을 내리면 알수 있다.

2.6.2 BBS 사용

2.6.2.1 환경 설정

자신의 홈페이지에 맞게 WWW BBS를 만들기 위해서는 ".config.cgi" 파일을 수정하면 된다. 많은 부분을 고칠것은 없고, BBS의 이름, 관리자의 passwd나 BBS의 전체적인 생상등을 고쳐주면 된다. 다음은 ".config.cgi"에 있는 환경 변수들이다.

표 5. .config.cgi의 환경 변수

환경 변수	"값"	의미
$ADMIN_password	"XXXXX"	관리자의 비밀 번호
$page_title	"WWW BBS"	사용할 게시판의 이름
$TOP_MENU_URL	"../top_menu.html"	현재의 BBS에서 상위 페이지의 링크
$TOP_MENU_TEXT	"TOP MENU로 돌아 가기	현재의 BBS에서 상위 페이지의 링크
$TEXT_color	"C0C0C0"	글자색
$BACK_color	"004045"	배경색
$LINK_color	"9090FF"	링크색
$VLINK_color	"FF5050"	방문한 링크색
$TR_bgcolor	"002270"	글제목들이 나타나는 테이블의 배경색
$cgi_url	"./index.cgi"	현재의 CGI 이름
$file_data	"./.data"	글에 대한 정보가 들어 있는 파일
$logfile	"./bbs_log.txt"	log 파일의 이름
$DATA_path	"./DATA/"	올린 글들이 저장되어 있는 디렉토리

2.6.2.2 자신의 홈페이지에서 사용하기

자신의 홈페이지에 WWW BBS를 링크 시켜놓는다. WWW BBS 먼저 HTML의 FORM 태그들을 사용해서 필요한 화면을 만든다. 다음은 "wwwboard.html"을 편집해서 만든것이다. 사용자는 이 파일을 편집에서 자기만의 BBS 화면을 만들수 있다. 다음은 설치한 WWW BBS의 그림이다.

그림 9. WWW BBS의 그림

3. 홈페이지 제작툴

3.1 HTML 편집기

문서를 작성하는 방법으로 가장 일반적으로 쓰이는 방법은 일반 문서 편집기를 가지고 직접 태그를 넣어가면서 작업을 한다. 간단한 문서 작성에는 괜찮지만, 복잡한 문서를 만든다든지 많은 양의 문서를 가지고 작업을 하다보면, 반복되어 태그를 넣어야 한다는것이 얼마나 많은 인내를 요구하게 되는지를 알게 될것이다. 전문 HTML 편집기는 태그를 삽입해주는 간단한 일만을 하는것이 아니고, 전체 웹페이지를 관리해주며 오류를 검출해주며 더 이상 존재하지 않는 링크를 발견하주는등 많은 기능을 가지고 있어서 웹페이지를 만드는 사람들에게 많은 도움을 줄수 있다. 여기서는 대표적으로 많이 쓰이는 HTML 편집기에 대해서 간략하게 각 특징들에 대해서 소개하겠다.

3.1.1 Netscape Gold WYSISWYG Editor

많은 기능은 가지고 있지 않지만 간단히 문서를 작성하는데는 별 문제없이 할수있다. 특징으로 WYSIWYG(What You See Is What You Get)을 지원하므로 작성과 동시에 문서의 모양을 볼수 있으며 HTML 문법을 잘 알지 못하더라도 이 작성기를 가지고 쉽게 문서를 만들수 있다. 또한 HTML 페이지를 작성할뿐만 아니라 VRML 뷰어, 비디오, 오디오 플레이백 기능을 통합하여 동적 문서 및 인터액티브 컨텐트를 작성할수 있게 해준다.

3.1.2 HotDog Professional

강력한 HTML 편집기로 많은 기능을 가지고 있다. 철자 검사기를 가지고 있어 영어 철자 검색을 할수있고, 많은 단축기를 가지고 있어 반복되는 작업을 줄임으로써 좀더 능률적으로 빠르게 할수 있다. HTML 문법 검사를 할수 있어 잘못된 태그등을 찾아 준다. Window95용인 3.0 버전부터는 홈페이지 제작을 쉽게 해주는 Page Building wizard를 가지고 있고 style sheet나 HTML 3.2 태그등을 지원해주며, 향상된 FTP file uploading, 당신의 홈페이지나 그림들이 좀더 빨리 사용자에게 보여줄수 있도록 문서의 구조를 만들어 주는 Bandwidth Buster 기능, 한번의 작업으로 특정한 웹페이지 전체를 download 할수 있는 기능, drag and drop등 외에도 많은 기능을 가지고 있는 전문가용 편집기다.

3.1.3 FrontPage

MicroSoft 에서 만든 HTML 편집기로, Netscape Gold WYSISWYG Editor처럼 WYSIWYG을 제공하여 HTML에 대한 지식을 알지 못해도 문서 작성이 가능하다. 또한 복잡한 페이지를 빨리 손쉽게 작성하도록 도와주는 많은 Frame Wizard들이 포함되어 있다. 이런 Frame Wizard를 사용해서 테이블, 폼, cliend side image map등의 기능을 제공하고, 좀더 쉽게 그림을 삽입할수 있고, Java나 MicroSoft사의 기술인 ActiveX 같은 기능을 제공한다. FrontPage에 포함되어 있는 web explorer를 사용하면 웹페이지의 전체적인 구조를 그림으로 표현함으로써 웹페이지를 만드는 사람이 좀더 쉽게 복잡한 웹 페이지를 만들고 관리할수 있도록 도와준다.

3.2 HTML 문서 변환기

기존에 다른 형식으로 작성된 문서를 HTML 문서로 변환시켜 자신의 홈페이지에 포함시킬수 있다. 이 변환기를 사용하면 Postscript, MS Word, RTF, Word Perfect, FrameMaker, MIF, LaTex, AmiPro 등의 거의 대부분의 문서 형식과 C, C++,, Ada, Fortran, Lisp 같은 프로그램 소스, 그리고 Unix의 Manual page, FAQ, Mail, RFC 등을 HTML로 변환시킬수 있으며, HTML에서 다른 문서의 형식으로 변환시킬수 있다. 또한 한글과 컴퓨터에서 만든 한글 96에서도 이런 기능을 사용할수 있다. 한글 96을 설치하면 Netscape에 문서를 변환할수 있는 아이콘이 생긴다. 이 아이콘을 이용하면 쉽게 서로 변환시킬수 있다. 하지만 이런 변환기는 사용자가 원하는데로 문서를 적절하게 바꿔주지 못하므로 변환 작업후 다시 수정 작업을 할 필요가 있다. 변환기에 대한 정보는 다음에서 얻을 수 있다.

http://www.w3.org/pub/WWW/Tools/Filters.html

http://www.utoronto.ca/webdocs/HTMLdocs/tools_home.html

http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converts.html

4. 결론

지금까지 홈페이지에서 널리 쓰이는 CGI 도구들에서 알아봤고 또한 이것들을 어떻게 자신의 홈페이지에서 사용할수 있는지에 대해서 알아보았다. 일반 사용자들은 CGI 프로그램을 잘 알지 못하더라도 WWW 상을 검색해보면 자신의 홈페이지에 사용할수 있는 유용한 CGI 도구들을 찾을수 있을 것이다. 그런 많은 CGI 도구들을 사용하는 방법은 본론에서 설명한 방법과 같거다 유사하게 되어 있으니 많은 어려움 없이 사용할수 있을것이다. 물론 그냥 가져다가 사용하는 것도 좋지만, 더 나아가 CGI에 대해서 공부를 해서 CGI 도구들을 분석해 자신의 환경에 맞게 고친다든지 확장을 해서 발전적인 방향으로 나가야겠다.

References

[HTML] http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html ,HyperText Markup Language(HTML), April, 1997, W3C

[CGI] http://hoohoo.ncsa.uiuc.edu/cgi, The Common Gateway Interface

[JavaScript] http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/, JavaScript Guide

[WWW Counter] http://www.fccc.edu/users/muquit/Count.html, WWW Homepage Access Counter,

[WWW Counter Example and Counter Image] http://www.fccc.edu/users/muquit/Count.html, WWW Homepage Access Counter,

[LEDSign] http://www.cs.hope.edu/~dbrown/java/LEDSign/WWW/LED.html, LEDSign Sign Info

[WWW BBS] http://soback.kornet.nm.kr/~photoboy/CGI/wwwbbs20/Howto.html, Welcome to Paik's CGI Archive

[CookMail] http://ag.arizona.edu/~heng/cookmail/cookmail.html, CookMail Homepage, May, 1997

[HTML Tools] http://www.w3.org/pub/WWW/Tools/Overview.html