[WWW-KR Mark]

Homepage and Content Authoring

- HTML 문서를 작성해봅시다 -

김은아
서울 성북구 동선동3가 249-1
성신여자대학교 전산원
E-mail : eakim@cs.sungshin.ac.kr
URL : http://cs.sungshin.ac.kr/~eakim/
Abstract:
홈페이지를 만들기 위해서는 HTML이라는 언어를 사용한다. 태그라는 것을 사용해야만 하는 HTML은 다소 불편해 보이기도 하지만, 다양한 기능을 제공하고 있어 조금만 다루어보면 손쉽게 개인 홈페이지를 만들수 있다. 1장에서는 HTML에 대한 특징을 알아보고, 2장에서 문서 작성을 위한 각종 태그들을 정리한다. 현재 표준화되어 있는 HTML 태그외에도 웹 브라우저마다 독특한 태그를 지원하고 있는데, 이 중에서 많이 쓰이는 태그들도 포함하여 정리한다. 그리고 추가적으로 근래에 들어서 논의되고 있는 Style Sheet에 대한 내용도 간략히 살펴보겠다. 3장과 4장에서는 HTML문서 작성을 위한 전용 에디터 및 형식 변환 프로그램과 HTML 문서 작성시 고려해야 할 사항들을 살펴보도록 하겠다.

Keywords:
HTML, WWW, Authoring, Tag, Style Sheet, Web Editor, Converter, WWW Etiquette

1. 서론

1.1 들어가기

WWW이 알려지고 확산되면서 기업, 학교, 정부 기관은 물론이고 각 개인들도 자신의 홈페이지를 만들어서 각자가 소유한 많은 정보들을 제공하고 있다. 결국 WWW의 등장은 보다 많은 정보들을 인터넷이라는 세계에 담을 수 있는 수단을 제시한 것이었다. 그렇다면 홈페이지는 어떻게 만드는가? 홈페이지는 HTML이라는 언어를 이용하여 텍스트외 이미지, 동영상, 사운드 파일 등을 추가한 하이퍼텍스트다. 그렇다면 HTML은 무엇인지 부터 알아보자.

1.2 HTML이란?

HTML(HyperText Markup Language) 문서는 ASCII 문자로 되어 있는 일반 텍스트 형태로 여러 플랫폼에 무관하게 WWW 문서의 다양한 요소들을 정의할 수 있도록 한 것이며, 웹이라는 문서 기반 구조에서 문서들을 기술하는 데 사용되는 언어이다. 이러한 HTML은 국제 표준 ISO8879:1986 SGML(Standard Generalized Markup Language)의 응용 프로그램으로 정의되어 있다.

1.3 HTML문서의 특징

HTML의 특징은 다음과 같다.

  1. 문자의 특성을 정의하기 위해 영문으로 된 마크업 태그(Markup tag)를 사용한다. 이것은 마크업 언어의 기본 특징이다.

  2. 태그는 영문 대소문자 구별 없이 사용된다. 그러므로 <TITLE>, <Title>, <title>이 모두 같은 태그로 인식된다. 물론 예외로 사용되는 태그도 있다.

  3. 태그의 형식은 다음과 같으며, 일반적으로 시작태그와 마감태그가 한 쌍을 이루어 사용된다.

     

    마감태그는 태그이름앞에 '/'가 붙는다는 것을 제외하고는 시작태그와 같다. 그러나 모든 웹브라우저가 이러한 태그들은 모두 지원하는 것은 아니다. 임의의 브라우저가 태그를 인식하지 못했을 경우에는 태그가 없는 것으로 무시해버린다. 한 가지 주의할 점은 <와 태그이름 사이에 빈칸이 들어가서는 안 된다.

  4. 둘이상의 빈칸이나 줄바꿈을 인식하지 못한다. 그래서 줄바꿈이나 문단나누기를 실행하고자 할 때는 따로 지정되어 있는 줄바꾸기와 문단나누기 태그를 사용한다.

  5. 텍스트로 작성되어 있으므로 문서의 크기가 작고, 인터넷상에서 빠르게 전송된다. 또한 사용하는 컴퓨터의 기종에 독립적이라서 어느 컴퓨터에서 작성한 문서라도 HTML을 번역하는 웹브라우저만 있으면 사용할 수 있다. 이 항목은 HTML의 장점이기도 하다.

2. HTML의 문법

2.1 HTML문서의 기본 구조

HTML 문서는 파일 확장자가 .html 또는 .htm으로 사용되며, 하나의 문서는 <HTML> 시작태그와 </HTML> 마감태그로 시작과 끝을 표시한다. 그리고 문서 내부에서 HEAD 부분과 BODY 부분으로 나뉘는 구조로 되어 있다.

<HTML> <HEAD> <TITLE>HTML의 기본 구조</TITLE> </HEAD> <BODY> <H1> HTML은 이렇게 이루어진다?</H1> <P>본 예는 HTML의 기본 골격만을 보여주는 간단한 예를 든 것이다.<BR> HTML 문서는 항상 &lt;HTML&gt; 태그로 시작한다. <P> 그럼 지금부터 차근차근 공부해보자. </BODY> </HTML>
[표 1] HTML 문서의 기본 구조

어떤 웹브라우저들은 위의 기본적인 태그들을 제대로 사용하지 않아도 제대로 인식하여 보여주는가하면 그렇지 못한 웹브라우저들도 있다. 그러므로 기본적인 태그들은 반드시 올바로 사용하도록 하자. [표 1]의 예를 웹브라우저에서 보면 [표 2]와 같이 나타난다.

HTML의 기본 구조

HTML은 이렇게 이루어진다?

본 예는 HTML의 기본 골격만을 보여주는 간단한 예를 든 것이다.
HTML 문서는 항상 <HTML> 태그로 시작한다.

그럼 지금부터 차근차근 공부해보자.

[표 2] 표 1의 실행 결과

2.2 HEAD 부분

HEAD 부분은 문서의 실제 내용이 아니라 문서에 대한 정보가 들어가는 부분이다. 예를들면, 문서의 제목, 작성자 이름, 문서 작성 날짜 등이 포함된다. <HEAD> ... </HEAD>사이에는 다음과 같은 태그들이 사용된다.

 

2.2.1 <TITLE> ... </TITLE>

문서의 제목을 지정하는 태그이다. 지정된 제목은 문서내용에 보이지 않고 일반적으로 웹브라우저 상단의 타이틀바(bar)에 표시되어 다른 창과의 구분에도 이용된다. 그 외에도 웹브라우저에서의 history 리스트, hotlist나 북마크에서 사용되므로 간결하면서도 내용을 잘 나타낼 수 있도록 정하여야 한다.

<TITLE> ... </TITLE>태그 안에는 앵커(Anchor)나 다른 HTML의 태그들이 일체 사용되지 않으며 하나의 문서에는 하나의 제목만이 유효하다.

2.2.2 BASE

<BASE> 태그는 HTML 파일이 저장되어 있는 위치를 나타내며 HEAD 태그 안에서만 사용할 수 있다. 본 태그는 다음과 같이 사용된다.

<BASE HREF="http://bluebird.sungshin.ac.kr/">

마감태그의 생략이 가능하며, HTML 문서 안에 있는 모든 URL은 이 BASE태그에서 지정된 URL로부터 상대적인 경로를 가지게 된다.

2.2.3 LINK

문서와 다른 오브젝트간의 관계를 나타내는데 사용된다. 속성에는 REL, TYPE, HREF, TITLE 등이 있다. 마감태그 없이 사용가능하며, 대부분 저장에 대한 내용이나 관련된 용어집 다른 버전 문서를 나타낸다.

다음의 예는 LINK태그를 이용해서 외부 Style Sheet를 지정한 것으로 REL은 본 문서와의 관계를 나타낸다. 결국 지정된 문서는 현재 문서의 Style Sheet라는 것을 의미한다. TYPE은 문서의 MIME 형태를 지정한 것으로 아래의 예에서는 Style Sheet를 말한다. HREF는 지정된 문서의 URL을 지정하고 TITLE은 Style Sheet의 이름을 나타낸다.

<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.foo.com/sheet" TITLE="coolsheet">

2.2.4 META

HTML문서 안에서 이 문서에 대한 정보를 나타내는 데 사용되며 여기에서 정의된 정보는 브라우저와 서버 등에서 사용된다.

<META NAME="Title" CONTENT="홈페이지를 만들어 봅시다."> <META NAME="Keyword" CONTENT="HTML, WWW, Authoring, Tag, Style Sheet, Web Editor, Converter, WWW Etiquette"> <META NAME="Author" CONTENT="Kim, Eun-Ah">

위의 예에서 살펴보면, NAME은 메타 정보의 이름을 나타내며, CONTENT는 실제로 메타 정보를 지정하는 부분이다.

2.3 BODY 부분

실제로 문서의 내용이 포함되는 부분으로 다음과 같은 태그들이 사용된다.

2.3.1 헤더

HTML문서에는 여섯 단계의 헤더를 정의할 수 있다. 1부터 6까지의 레벨이 사용되며 헤더 문자는 다른 글자에 비해 보다 크고 굵게 쓰여진다. 1이 가장 큰 크기로 사용되며 사용법과 크기는 [표 3]과 같다.

헤더를 사용할 때는 레벨 순서대로 사용하는 것이 좋다.

 

 

사용법
 결과
<H1>H1의 크기<H1>

H1의 크기

<H2>H2의 크기<H2>

H2의 크기
<H3>H3의 크기<H3>

H3의 크기

<H4>H4의 크기<H4>

H4의 크기

<H5>H5의 크기<H5>
H5의 크기
<H6>H6의 크기<H6>
H6의 크기
[표 3] 헤더 태그의 사용법과 결과

2.3.2 문단

앞서 기술한 바와 같이 HTML 문서에서는 줄바꿈과 공란이 자동인식되지 않으므로 이를 인식할 수 있는 다음과 같은 태그들를 사용해야 한다.

(1) <P>

줄바꾸기를 실행시켜주는 태그이다. 사용법은 [표 4], [표 5] 와 같다. 결과에서 보는 바와 같이 <P>가 다시 나올 때까지 하나의 문단으로 처리한다.

<P>이것은 줄바꾸기를 실행시켜주는 태그이다.</P> <P>바로 요기처럼!. </P>
[표 4] P태그의 예

이것은 줄바꾸기를 실행시켜주는 태그이다.

바로 요기처럼!.

[표 5] 표 4의 실행 결과

<P> ... </P>에서 </P>는 생략 가능하며, ALIGN 속성이 사용될 수 있다. 속성값으로는 CENTER, RIGHT, LEFT가 사용된다.

<P ALIGN=LEFT|CENTER|RIGHT> This is a centered paragraph.
LEFT

This is a centered paragraph.

CENTER

This is a centered paragraph.

RIGHT

This is a centered paragraph.

[표 6] ALIGN 속성값에 따른 문단 정열

 

[ 예 ] 본 예는? <시작태그> <P>본 예는 HTML에서 사용되는 문단 태그들을 <BR>비교하기 위한 것입니다. </P><P>차이점을 살펴보시고 적절하게 사용하십시오.</P> <마감태그>
<PRE> 본 예는? 
본 예는 HTML에서 사용되는 문단 태그들을

비교하기 위한 것입니다. 
차이점을 살펴보시고 
        적절하게 사용하십시오.
<LISTING> 본 예는?

본 예는 HTML에서 사용되는 문단 태그들을
비교하기 위한 것입니다.

차이점을 살펴보시고 적절하게 사용하십시오.
<XMP> 본 예는? <P>본 예는 HTML에서 사용되는 문단 태그들을 <BR>비교하기 위한 것입니다. </P><P>차이점을 살펴보시고 적절하게 사용하십시오.</P>
<BLOCKQUOTE> 본 예는?

본 예는 HTML에서 사용되는 문단 태그들을
비교하기 위한 것입니다.

차이점을 살펴보시고 적절하게 사용하십시오.
[표 7] 문단 태그의 사용 비교

(2) <PRE> ... </PRE>

'Preformatted'의 약자로 공백과 빈줄, 탭을 인식하여 문서를 있는 그대로 보여준다. 글자체는 타이프라이트체로 보이고, 특징으로는 내부의 태그들을 그대로 인식한다는 것이다. 프로그램 소스 내용을 보여줄 때 유용하게 쓸 수 있다. [표 7]에서 P, BR 태그와 더불어서 줄바꿈을 인식한 결과를 볼 수 있다.

WIDTH라는 속성을 이용하여 한 라인의 최대 문자수를 지정할 수 있다.

(3) <LISTING> .. </LISTING>

그리고 글자체를 다르게 보여준다는 특징이 있으며, 내부의 태그들은 무시하고 탭과 줄바꿈은 그대로 인식한다. 그러나 넷스케이프에서는 태그들을 인식한다. 즉, [표 7]의 결과를 넷스케이프에서 보면, P와 BR 태그를 인식하여 보여준다.

(4) <XMP> .. </XMP>

<PRE>와 비슷하나 내부의 태그들을 무시한다는 것이 다르다. 그러므로 XMP는 HTML 문서의 소스 내용을 그대로 보여주고 싶을 때 유용하게 사용할 수 있다.

(5) <BLOCKQUOTE> ... </BLOCKQUOTE>

인용구를 삽입할 때사용하는 태그로 대부분의 브라우저들은 들여쓰기로 구분해준다. BLOCKUOTE는 줄바꿈과 탭을 무시한다.

위의 <PRE>부터 <BLOCKQUOTE>까지의 태그들의 예를 살펴보면 [표 7]과 같다. <시작태그>와 <마감태그>에 각각의 태그를 넣었을 때의 결과이다.

(6) <ADDRESS> ... </ADDRESS>

일반적으로 문서의 마지막 수정일, 저자의 전자우편주소등 문서의 저자에 관한 사항을 기술하는데 사용되며 보통 문서의 처음 또는 마지막에 쓰인다.

[ 예 ] <ADDRESS> E-mail : eakim@cs.sungshin.ac.kr <BR> Last-Modified : Sunday, 29-Sep-96 23:11:17 KDT </ADDRESS>
[ 결과 ]
E-mail : eakim@cs.sungshin.ac.kr
Last-Modified : Sunday, 29-Sep-96 23:11:17 KDT

한 가지 유의할 점은 이 태그는 우편주소를 쓰고자 할 때 사용하는 태그가 아니라는 것이며, 우편주소를 쓸 때는 다음의 <BR> 태그를 사용한다.

(7) <BR> ... </BR>

이 태그는 줄간격없이 줄나누기를 해준다. 이를 이용하여 우편주소를 나타낼 수 있다.

[ 예 ] 서울특별시 성북구 동선동 3가 249-1 <BR> 성신여자대학교 전산원 <BR> 김 은 아
[ 결과 ] 서울특별시 성북구 동선동 3가 249-1
성신여자대학교 전산원
김 은 아

(8) <CENTER> ... </CENTER>

문단을 가운데 정열시켜 주는 태그이다.

[ 예 ] <CENTER>가운데 정열합니다.</CENTER>
[ 결과 ]
가운데 정열합니다.

(9) <!-- ... -->

문서의 코멘트를 위한 태그이다. 이 태그사이의 내용은 브라우저에는 보이지 않는다.

(10) Horizontal Rules

<HR> 태그를 이용하여 브라우저 윈도의 크기만큼의 가로줄을 그을 수 있다. 이것은보통 문서를 구분할 때 사용되며, SIZE와 WIDTH 속성을 이용하여 각각 선의 길이 및 두께를 지정할 수 있다. 값으로는 픽셀단위값을 사용하나 WIDTH의 경우에는 백분율을 이용하여 길이를 지정할 수 있다.

[ 예 ] <HR SIZE=4 WIDTH="50%">
[결과 ]

또 다른 속성으로는 ALIGN이 있는데 RIGHT, CENTER, LEFT값을 이용해서 선을 수평정열시킬 수 있다. 기본값은 CENTER이다. 선의 모양은 그림자가 있는 입체형으로 보이는데 NOSHADE 속성을 지정해주면 그림자가 없는 형태로 보인다.

2.3.3. 글자모양

HTML에서 글자모양을 지정하는 태그에는 여러 가지가 있는데 크게 논리적 형태와 물리적 형태로 나뉜다. 두 가지 형태는 같은 효과를 보여주지만, 논리적 형태는 정보의 형태 정의에 쓰이고, 물리적 형태는 문자의 모양에 대한 정의를 지정한다.

각 글자모양은 브라우저마다 지원하지 못하는 경우도 있으므로 항상 원하는 글자모양을 볼 수 있는 것은 아니다. 이런 경우에 물리적 형태로 지정되어 있는 경우는 브라우저가 태그를 무시해버리지만, 논리적 형태인 경우에는 그 쓰임에 따라 지정된 글자모양으로 보여주므로, 물리적 형태보다는 논리적 형태의 태그를 사용하는 것이 좋다.

각 태그들은 다음과 같다.

(1) 논리적 형태

<DFN> ... </DFN> 단어 정의를 위한 태그이며 일반적으로 이텔릭체로 나타난다.
(예, NCSA Mosaic is a World Wide Web browser.)
<EM> ... </EM> 강조를 위한 태그로 일반적으로 이텔릭체로 나타난다.
(예, Consultants cannot reset your password unless you call the help line.)
<CITE> ... </CITE> 책, 필름 등의 제목을 나타내기 위한 태그로 일반적으로 이텔릭체로 나타난다.
(예, A Beginner's Guide to HTML)
<CODE> ... </CODE> 컴퓨터 코드를 위한 태그로 타자체로 나타난다.
(예, The <stdio.h> header file)
<KBD> ... </KBD> 키보드 입력을 나타내며, 일반적으로 타자체로 나타난다.
(예, Enter passwd to change your password.)
<SAMP> ... </SAMP> 일련의 literal 문자를 위한 태그로 타자체로 나타난다.
(예, Segmentation fault: Core dumped.)
<STRONG> ... </STRONG> 강한 강조를 위한 태그로 볼드체로 나타난다.
(예, NOTE: Always check your links.)
<VAR> ... </VAR>
변수를 타나낼 때 사용하는 태그로 이텔릭체로 나타난다.
(예, rm filename deletes the file.)

(2) 물리적 형태

<B> 볼드체 볼드체
<I> ... </I> 이텔릭체 이탤릭체
<TT> ... </TT> 타자체 타자체
<BIG> ... </BIG> 큰 글자 큰 글자
<SMALL> ... </SMALL> 작은 글자 작은 글자
<BLINK> ... </BLINK> 깜빡이는 글자 깜빡이는 글자(넷스케이프에서만 가능)
<SUB> ... </SUB> 아랫첨자 log2 = 0.142

<SUP> ... </SUP> 윗첨자 23 = 8
<U> ... </U> 밑줄 글씨 밑줄 글씨

2.3.4. 글자 크기

글자 크기를 지정하는 태그에는 <Hn> 태그외에도 FONT와 BASEFONT태그를 이용할 수 있다.

<FONT SIZE=n> ... </FONT> <BASEFONT SIZE=n>

FONT를 이용하면 </FONT>가 나오기 이전까지 사이에 있는 모든 글자들의 크기와 색을 조절할 수 있다. 사용되는 속성은 SIZE와 COLOR가 있다. BASEFONT는 전체 문서에 대한 기본 폰트를 나타내고 <FONT> 는 이러한 기본 폰트에 대한 상대적인 폰트를 지정하게 된다.

[ 예 ] <BASE FONT=6>Change <FONT SIZE=8> FONT <FONT SIZE=6> size,
[ 결과 ] Change FONT size

2.3.5. 특별기호

HTML에서는 <, >, &가 특별한 의미를 가지고 있기 때문에 단순히 기호로써 이를 사용할 수 없다. 각 기호들은 각각 태그의 시작과 끝, 그리고 특수기호의 처음을 뜻한다. 그러므로 이 문자들을 사용하려면 다음과 같이 사용해야 한다.

&lt; <
&gt; >
&amp; &
&quot; "

이 가운데서 '&quot;'는 '"' 그대로 사용해도 된다. 그 외로 추가적인 특수문자의 예가 [표 8]에 있다. 예중에서 넷스케이프에서는 &copy;와 &nbsp; 만 제대로 표현된다.

[특수문자 표기법]

[표 8] 특수문자 표기법 (MS Explorer에서의 결과)

보다 자세한 정보를 원한다면 다음의 문서를 참조하기 바란다.

http://www.sandia.gov/sci_compute/iso_symbol.html
http://www.uni-passau.de/%7Eramsch/iso8859-1.html

 

2.4 리스트 만들기

2.4.1 순서 리스트

순서 리스트는 각 항목들을 순서를 두어 나열하는 것으로 다음과 같이 <OL> ... </OL> 태그 사이에 <LI>와 더불어 항목들을 나열한다.

[ 예 ] <OL> <LI> apples <LI> bananas <LI> graphfruit </OL>
[ 결과 ]
  1. apples
  2. bananas
  3. graphfruit

일반적으로 순서 리스트는 예에서 보듯이 각 항목앞에 숫자가 붙는데 이 외의 다른 문자를 이용하려면 TYPE과 START라는 속성을 이용한다.

[ 예 ] <OL TYPE=A START=3> <LI> apples <LI> bananas <LI> graphfruit </OL>
[ 결과 ]
  1. apples
  2. bananas
  3. graphfruit

TYPE의 종류는 다음과 같다.

TYPE=A 알파벳 대문자. 예) A, B, C, ...
TYPE=a 알파벳 소문자 예) a, b, c, ...
TYPE=I 큰 로마숫자 예) I, II, III, ...
TYPE=i 작은 로마숫자 예) i, ii, iii, ...
TYPE=1 아라비아 숫자 예) 1, 2, 3, ...

각 항목에 대해서 독립적인 번호를 부여하고 싶다면, <LI VALUE=3>와 같은 방식으로 사용한다.

2.4.2 무순서 리스트

무순서 리스트는 <OL>가 <UL>로 바뀌었다는 것을 제외하면 순서 리스트와 형식은 같다.

[ 예 ] <UL> <LI> apples <LI> bananas <LI> graphfruit </UL>

 

[ 결과 ]
  • apples
  • bananas
  • graphfruit

숫자대신 도형의 구분점이 나타나는데 이것 역시 다음과 같이 재정의할 수 있다. 그러나 넷스케이프에서만 가능하다.

TYPE=DISC
  • DISC
TYPE=CIRCLE
  • CIRCLE
TYPE=SQUARE
  • SQUARE

2.4.3 정의 리스트

Definition Lists의 약자인 <DL>를 이용하여 어떤 단어나 구절에 대한 정의를 위한 리스트를 표현할 수 있다. <DL>과 함께 <DT>와 <DD>가 사용되는데, <DT>는 정의할 항목 즉 제목을 위해 쓰이고 <DD>는 이에 대한 설명으로 쓰인다. 예는 다음과 같다.

[ 예 ] <DL> <DT>HTML <DD>HyperText Markup Language <DT>SGML <DD>Standard Gneralized Markup Language </DL>
[ 결과 ]
HTML
HyperText Markup Language
SGML
Standard Gneralized Markup Language

<DL>와 <DL>에서도 <P>나 <BR>를 이용하여 여러 개의 문단을 포함시킬 수 있으며, COMPACT이라는 것을 사용하여 리스트를 짧게 나타낼 수 있다.

[ 예 ] <DL COMPACT> <DT>[1] <DD>An Instantaneous Introducton to CGI Scripts and HTML Forms, by Michael Grobe, July 1996, <BR> http://kuhttp.cc.ukans.edu/info/forms/forms-intro.html <DT>[2] <DD>Ken Arnold, James Gosling, August 8, 1996 <BR> The Java Programming Language <DT>[3] <DD>Style Guide for online hypertext, <BR> http://www.w3.org/pub/WWW/Provider/Style/</A> </DL>
[ 결과 ]
[1]
An Instantaneous Introducton to CGI Scripts and HTML Forms, by Michael Grobe, July 1996,

 

http://kuhttp.cc.ukans.edu/info/forms/forms-intro.html
[2]
Ken Arnold, James Gosling, August 8, 1996
The Java Programming Language
[3]
Style Guide for online hypertext,
http://www.w3.org/pub/WWW/Provider/Style/

2.4.4 디렉토리 리스트

무순서 리스트와 비슷하나 보통 각 항목들이 24자이내라는 점에서 다르다. 즉, 길이가 긴 리스트에는 적합하지 않다. 보통 디렉토리 이름이나 파일이름이 20자를 넘지 않기 때문에 이런 제약이 있는 듯하다.

[ 예 ] <DIR> <LI> A-Z <LI> a-z </DIR>
[ 결과 ]
  • A-Z
  • a-z

    • 2.4.5 메뉴 리스트

    무순서 리스트와 같지만 줄간격이 보다 좁게 표현한다.

    [ 예 ] <MENU> <LI> 첫번째 메뉴는... <LI> 두번째 메뉴는... </MENU>
    [ 결과 ]
  • 첫번째 메뉴는...
  • 두번째 메뉴는...

    • 2.4.6 중첩된 리스트만들기

    [ 예 ] <UL> <LI> 웹코리아 지역모임 <UL> <LI> 서울모임 <LI> 대전모임 <LI> 부산모임 <LI> 대구모임 </UL> <LI> 워크샵 <OL> <LI> 제 1회 : 대전 충남대학교 <P>... </P> <LI VALUE=4> 제 4회 : 서울 광운대학교 <LI> 제 5회 : 대구 </OL> </UL>

     

    리스트 태그들은 앞의 예와 같이 중첩하여 사용가능하다. 결과는 다음과 같다.

    [ 결과 ]
    • 웹코리아 지역모임
      • 서울모임
      • 대전모임
      • 부산모임
      • 대구모임
    • 워크샵
      1. 제 1회 : 대전 충남대학교

        ...

      2. 제 4회 : 서울 광운대학교
      3. 제 5회 : 대구

    2.5 하이퍼 링크 만들기

    2.5.1 앵커 정의

    HTML문서의 가장 큰 장점은 다른 문단, 단어, 그림들을 다른 문서나 그림으로 연결할 수 있다는 것이다. 바로 이 장점을 만들어주는 것이 앵커이다. 이 연결을 위하여 NAME이나 HREF와 같은 속성이 지정된다.

    [ 예 ] <A HREF="http://bluebird.sungshin.ac.kr/~eakim/bluebird.html"> Bluebird</A>
    [ 결과 ] Bluebird

    HREF="..." 부분에는 링크될 파일이름과 경로, 특정부분이 표시되는 곳으로 위의 예에서는 http://bluebird.sungshin.ac.kr/~eakim/에 있는 bluebird.html이라는 파일을 지정하고 있다. Bluebird라는 단어가 적힌 자리는 하이퍼링크될 단어, 문단, 그림 등을 지정하는 곳으로 결국 위의 예에서는 Bluebird라는 단어를 클릭하면 이에 지정된 bluebird.html 문서를 보여주게 된다.

    또한 동일 문서 또는 다른 문서의 특정부분으로도 링크할 수 있다. 이때는 해당 하이퍼링크를 선택했을 경우 전체 문서의 제일 윗부분이 브라우저에 보이는 것이 아니라 해당 특정 부분이 웹브라우저의 첫 화면에 보인다. 여기에는 NAME이라는 태그가 이용된다.

    아래의 예에서는 Home.htm 파일에서 '하이퍼링크'란 단어를 선택했을 때, html.htm 문서 속에서 'NAME=hyperlink'이라고 지정되어 있는 HyperLink 부분이 화면의 첫 부분으로 보인다는 것이다. 만약 '#hyperlink' 표시가 없다면, html.htm 문서의 제일 상단이 화면의 첫 부분으로 표시될 것이다.

    Home.htm : <A HREF="http://bluebird.sungshin.ac.kr/html.htm#hyperlink"> 하이퍼링크</A> html.htm : <A NAME="hyperlink">HyperLink</A>

    동일 문서내에서의 특정위치를 지정하려면 다음과 같이 파일의 위치와 이름을 생략할 수 있다.

    <A HREF="#hyperlink">하이퍼링크</A>

    그 외로 지정할 수 있는 앵커로는 서치 서버로 서치 구문을 보내는 경우가 있다. 다음은 단어기반 서치엔진으로 보내는 경우인데, 여러 개의 키워드들을 +기호로 연결시킨다.

    <A HREF="URL?search_word1+sear_word2"> ... </A>

    2.5.2 절대경로와 상대경로지정

    파일의 위치를 지정할 때는 절대경로와 상태경로로 지정할 수 있다.

    절대경로 :

    <A HREF="http://bluebird.sungshin.ac.kr/~eakim/Mydoc/html.html">

    상대경로:

    <A HREF="Mydoc/html.html">HTML Guide Document</A> <A HREF="../Homepage.html">My Homepage</A>

    상대경로 지정은 BASE 태그에서 지정되어 있는 파일의 위치를 기준으로 하여 상대적인 위치를 지정하는 것이다. BASE 태그가 지정되어 있지 않은 경우에는 현재 사용되는 문서의 위치를 기준으로 하여 상대적인 위치가 지정된다. 위의 예에서 현재 사용되고 있는 파일이 http://bluebird.sungshin.ac.kr/~eakim/Home.html이라고 한다면, html.html문서는 Home.html과 같은 레벨에 있는 Mydoc이라는 디렉토리내에 있다는 것이므로 굳이 절대경로를 써주지 않아도 된다.

    | / \ Home.html Mydoc \ html.html

    상대경로는 보다 적은 글자로 위치표시가 가능하고 문서 그룹을 다른 곳으로 옮길 때도 유용하게 사용될 수 있는 장점이 있으나 직접 관련되지 않은 문서를 링크할 때는 절대경로를 지정해주는 것이 좋다.

    2.5.3 URLs 지정

    파일의 위치를 지정해주는 자리에는 URL을 지정해줄 수 있다. URL은 Uniform Resource Locators의 약자로 WWW에서 임의 서버상의 문서의 위치를 지정할 수 있도록 사용하는 표기법이다. 구문은 다음과 같다.

    scheme://host.domain[:port]/path/filename
    지역 시스템에서의 파일 file:///C|/usr/eakim/PublicHTML/Doc/html.htm
    anonymous ftp 서버상의 파일 ftp://FTP.kaist.ac.kr/
    WWW 서버상의 파일 http://bluebird.sungshin.ac.kr/
    Gopher 서버상의 파일 gopher://gopher.krnic.nm.kr
    Usenet 뉴스그룹 news:han.comp.www
    뉴스서버를 지정 nntp://news.nowcom.co.kr
    Telnet 기반의 서비스로 연결 telnet://bluebird.sungshin.a.ckr/
    Mail 보내기 mailto:eakim@cs.sungshin.ac.kr
    [표 9] URL에 지정가능한 프로토콜

    모자익에서는 다른 ftp 사이트 연결이 가능한데 이 때는 ftp://eakim@bluebird.sungshin.ac.kr과 같은 형태로 지정하고 모자익은 화면에서 패스워드를 물어본다. 패스워드를 미리 입력시켜줄 때는 사용자 ID다음에 패스워드를 써준다.

    ftp://eakim:비밀번호@bluebird.sungshin.ac.kr

     

    2.6 이미지 넣기

    대부분의 웹브라우저에서는 X Bitmap, GIF, JPEG형식의 이미지들을 텍스트와 같이 in-line 이미지로 보여준다. 넷스케이프와 모자익은 GIF와 JPEG만을 지원하며 Internet Explorer에서는 PNG파일과 BMP파일도 지원한다.

    문서에 이미지를 추가하는 방법은 IMG라는 태그로 시작하고 SRC에 파일의 위치를 포함한 이름을 지정하는 것이다.

    <IMG SRC=Image_URL> <IMG SRC="http://bluebird.sungshin.ac.kr/images/flower.jpg">

    각 이미지들은 웹브라우저에서 처리되어 보여지는 시간을 요구하게 된다. 그러므로 이미지를 삽입할 때는 크기와 소요시간을 잘 고려해야 한다.

    2.6.1 이미지 크기 지정하기

    HEIGHT와 WIDTH라는 속성을 이용하여 삽입되는 이미지의 크기를 지정할 수 있다. 이미지 크기는 픽셀단위로 지정되며 각각 높이와 폭을 지정한다. 여기서 지정값이 실제 이미지의 크기와 같을 경우 화면에 출력되는 속도가 빨라진다.

    <IMG SRC="SelfPortrait.gif" HEIGHT=100 WIDTH=65> 이러한 이미지 크기 지정을 이용하여 통계표를 작성할 수 있게 된다. 즉, 통계 데이타가 있을 때 이것을 막대 그래프의 형식으로 표현하여 통계 결과를 알아보기 쉽게 만들 수가 있는 것이다. 이렇게 활용하기 위해서는 테이블 형식도 함께 사용할 필요가 있다. 그래야만 비교 대상에 대한 세로 정렬이 잘 이루어져서 보기에 좋은 막대 비교 그래프를 만들 수 있다.

    [ 예 ]

    <CENTER><B>결과 통계</B> <TABLE WIDTH=400 HEIGHT=100> <TR> <TD><FONT COLOR=#0000ff SIZE=2>백합</TD> <TD><IMG SRC="a1.jpg" WIDTH=80 HEIGHT=12 BORDER=1> <FONT SIZE=2>80명</TD> </TR> <TR> <TD><FONT COLOR=#0000ff SIZE=2>장미</TD> <TD><IMG SRC="a2.jpg" WIDTH=75 HEIGHT=12 BORDERr=1> <FONT SIZE=2>75명</TD> </TR> <TR> <TD><FONT COLOR=#0000ff SIZE=2>채송화</TD> <TD><IMG SRC="a3.jpg" WIDTH=70 HEIGHT=12 BORDER=1> <FONT SIZE=2>70명</TD> </TR> <TR> <TD><FONT COLOR=#0000ff SIZE=2>튤립</TD> <TD><IMG SRC="a4.jpg" WIDTH=65 HEIGHT=12 BORDER=1> <FONT SIZE=2>65명</TD> </TR> </TABLE></CENTER> 위와 같은 예제에 대해 a1.jpg, a2.jpg, a3.jpg, a4.jpg의 색깔을 각기 다른 것으로 두면 각기 다른 색깔의 막대 그래프를 그릴 수 있게 된다. 위 예제를 실제 화면으로 보면 [그림 1]과 같다.

    GRAPH

    [그림 1] 이미지를 이용한 그래프 작성 예

    2.6.2 이미지 정열하기

    이미지의 정열을 지정은 ALIGN이라는 속성을 이용하며 값으로는 다음과 같은 것이 사용된다. 기본 값은 이렇게 이미지의 아랫부분이 택스트와 일렬이 되도록 정열되는 것이다.

    <IMG SRC="wkrmember.gif" ALIGN=x> ALIGN : left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom

    위의 예에서 ALIGN 속성의 값을 지정한 결과는 다음과 같다.

    첫 번째 예는 ALIGN=TOP으로 지정된 경우

    두번째 예는 ALIGN=MIDDLE로 지정된 경우

    세번째 예는 ALIGN=BOTTOM으로 지정된 경우

    다섯번째는 ALIGN=RIGHT라고 지정한 경우이다. 그림이 어느 쪽에 있는지 눈여겨 보자. 그리고 그림과 텍스트 사이의 위치, 다음 문단과의 위치도 눈여겨 보자.

    마지막예는 ALIGN=LEFT인 경우이다. 결국 그림이 같은 문단내의 텍스트의 어느 쪽으로 위치시킬 것인가는 지정하는 것이다.

    위의 예 결과를 보면, left와 right는 웹 페이지에 대한 정렬이며, 나머지는 현재 이미지와 같은 라인에 있는 다른 문자를 비롯하여 표현되는 것에 대한 정열이다. 물론 <P>태그를 이용한 정열도 가능하다.

    <P ALIGN=CENTER> <IMG SRC="htmlicon.gif"> </P>

    2.6.3 이미지 제목 넣기

    lynx와 같은 텍스트기반 웹브라우저를 사용하거나 이미지 로딩시간이 많이 걸려 텍스트만을 로딩해서 보는 경우에는 이미지를 볼 수 없으므로 어떤 내용의 이미지인지 알 수 없다. 특히 이미지맵을 사용하는 경우에는 더 심각한 상황이 된다. 이를 위해서 정보를 제공해줄 수 있는데, 바로 ALT라는 속성을 이용하는 것이다.

    <IMG SRC="Uparow.gif" ALG="[Up]"

    위의 예와 같이 지정을 해 놓으면 이미지가 로딩되지 않을 경우에 이미지의 위치에 [Up]이라는 것이 보이게 된다. 넷스케이프의 경우에는 그림이 로딩되기 전에도 [Up]이 보인다. 그러므로 이미지의 내용을 간단하게 표현할 수 있도록 항상 지정하여 주는 것이 좋다.

    2.6.4 그 외의 이용 태그

    이미지가 이미지맵에 의해 다른 링크와 연결되어 있을 경우에는 다음과 ISMAP을 사용한다.

    <A HREF="http://bluebird.sungshin.ac.kr/imagemap/sample"> <IMG SRC="sample.gif ISMAP ALT="[imagemap sample]"></A>

    이미지를 둘러싸고 있는 경계의 폭과 이미지와 텍스트의 수평 간격을 지정할 수 있다.

    <IMG BORDER=n> <IMG VSPACE=n HSPACE=n>

    2.6.5 백그라운드 이미지 넣기

    이미지를 로딩하여 이것을 화면의 백그라운드로 사용할 수 있다. 이 효과를 위해서는 <BODY> 태그에 BACKGROUD라는 속성을 지정해준다.

    <BODY BACKGROUND="backgroud.gif">

    이렇게 지정해주면 background.gif 파일이 브라우저의 바탕이미지로 보인다. 이미지 파일이 작은 경우에는 브라우저의 면적을 가득채울 때까지 반복 출력된다.

    2.6.6 외부 이미지, 사운드, 애니메이션 지정하기

    HTML 문서 안에 커다란 이미지나 사운드, 애니메이션을 넣게 되면 그 자료를 로딩하는 시간이 커지게 된다. 이럴 때 사용하는 방법이 바로 외부 이미지, 사운드, 애니메이션으로 지정하는 방법이다. 이것을 일단 축소된 이미지등을 이용하여 사용자가 그 축소된 이미지 아이콘을 선택하게 되면 확대된 이미지를 다시 로딩하여 보여주는 방법이다.

    <A HREF="LargerImage.gif"> <IMG SRC="SmallImage.gif" ALT="[이미지 확대]"></A>

    사운드도 위와 마찬가지의 방법으로 지정할 수 있다. 그런데 이 때 파일의 확장명이 바뀜을 주의해야 한다. 각 파일별로 확장명은 다음과 같다.

    파일 형태 확장명 파일 형태 확장명 파일 형태 확장명
    일반 텍스트.txt HTML 문서 .htm GIF 이미지 .gif
    TIFF 이미지.tiff X Bitmap 이미지.xbm JPEG 이미지.jpg, .jpeg
    PostScript 파일.ps AIFF 사운드 파일.aiff AU 사운드 파일.au
    WAV 사운드 파일.wav QuickTime 영화.mov MPEG 영화.mpeg, .mpg

    [표 10] 파일 종류에 따른 확장명

     

    2.7 테이블 만들기

    HTML문서에서도 테이블을 만들 수 있다. 이에 사용되는 태그에는 <TABLE>, <CAPTION>, <TR>, <TD>, <TH>가 있다. TABLE과 CAPTION을 제외한 다른 태그들은 마감태그를 생략할 수 있다. 테이블에서는 각각의 칸을 셀이라고 한다.

    2.7.1 <TABLE> ... </TABLE>

    TABLE 태그에도 여러 가지 속성들이 있다. 속성값은 픽셀단위의 숫자로 지정된다.

    <TABLE BORDER=n CELLSPACING=n CELLPADDING=n WIDTH=n HEIGHT=n>

    아래의 예 1과 예 2를 비교해보면, BORDER의 값이 커질수록 외부테두리가 두꺼워져서 입체감을 느끼도록 해주며, CELLSPACING은 값이 커질수록 각 셀간의 선 두께가 두꺼워지는 결과를 볼 수 있다. CELLPADDING은 속성값이 커질수록 셀내의 데이터와 셀벽간의 간격이 늘어남을 볼 수 있다.

    [ 예 1 ]

    <TABLE BORDER=1 CELLSPACING=1 CELLPADDING=3> <TR><TD>1교시</TD><TD>09:00 - 10:00 </TD></TR> <TR><TD>2교시</TD><TD>10:00 - 11:00 </TD></TR> </TABLE>

    [ 결과 1 ]

    1교시09:00 - 10:00
    2교시10:00 - 11:00

    [ 예 2 ]

    <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=7> <TR><TD>1교시</TD><TD>09:00 - 10:00 </TD></TR> <TR><TD>2교시</TD><TD>10:00 - 11:00 </TD></TR> </TABLE>

    [ 결과 2 ]

    1교시09:00 - 10:00
    2교시10:00 - 11:00

    WIDTH와 HEIGHT의 경우에는 픽셀단위의 값뿐 아니라 전체 페이지에 대한 백분율로도 값을 지정할 수 있다. WIDTH 값이 커질수록 테이블의 가로길이가 늘어나며, HEIGHT 값이 커지면 데이블의 세로 길이가 길어진다. 백분율로 값이 지정되어 있는 경우에는 브라우저에서 보이는 화면의 상대적인 크기로 테이블을 보여준다.

    [ 예 3 ]

    <TABLE BORDER=5 CELLSPACING=5 CELLPADDING=7 WIDTH=70% HEIGHT=110> <TR><TD>1교시</TD><TD>09:00 - 10:00 </TD></TR> <TR><TD>2교시</TD><TD>10:00 - 11:00 </TD></TR> </TABLE>

    [ 결과 3 ]

    1교시09:00 - 10:00
    2교시10:00 - 11:00

    2.7.2 <CAPTION> ... </CAPTION>

    테이블의 제목을 써주는 태그로 ALIGN=TOP 또는 ALIGN=BOTTOM로 값을 지정하여 캡션의 위치를 표위나 아내로 정한다.

    [ 예 ] <TABLE BORDER=1 CELLPADDING=3> <CAPTION ALIGN=TOP> [ 캡션위치값 ]</CAPTION> <TR><TD>ALIGN=TOP</TD><TD>표의 윗 부분에 위치</TD></TR> <TR><TD>ALIGN=BOTTOM</TD><TD>표의 아래 부분에 위치</TD></TR> </TABLE>
    [ 결과 ]
    [ 캡션위치 값]
    ALIGN=TOP표의 윗 부분에 위치
    ALIGN=BOTTOM표의 아래 부분에 위치

    2.7.3 <TR> ... </TR>

    테이블의 열을 지정하는 태그로 다음과 같은 속성을 사용할 수 있다. 테이블에서는 <TR>와 </TR> 사이의 모든 내용들을 하나의 열로 처리한다.

    WIDTH = n 셀의 너비 지정
    HEIGHT = n 셀의 높이 지정
    ALIGN = LEFT, CENTER, RIGHT 하나의 셀 내부 문자 정열을 지정
    VALIGN = TOP, MIDDLE, BOTTOM 셀의 세로 정열 사항
    COLSPAN = n 하나의 셀로 합할 행의 수
    ROWSPAM = n 하나의 셀로 합할 열의 수
    NOWRAP 셀내부의 문장이 두줄로 나누어지지 않게 한다.
    [표 11] 테이블 태그에서 사용되는 속성

    2.7.4 <TH> ... </TH>

    테이블에 있어서 각 행의 제목 부분을 쓰는 태그이다. 기본값은 볼드체로 가운데 정열이며 사용할 수 있는 속성은 <TR>와 같다.

    2.7.5 <TD> ... </TD>

    테이블의 셀 데이터를 써 넣는 태그로 일반 글자체로 나타나며, ALIGN의 기본 값은 left인 것을 제외하고는 <TR>와 속성의 사용이 같다.

    이상의 태그들을 이용하여 테이블을 만들면 다음과 같다.

    <TABLE BORDER=1 CELLPADDING=3 WIDTH=400> <CAPTION ALIGN=BOTTOM>교 육 내 용 안 (1)</CAPTION> <TR> <TH COLSPAN=2 ROWSPAN=2>과 정 명 </TH> <TH ROWSPAN=2>교 육 내 용</TH> <TH COLSPAN=2>교육기간</TH> </TR> <TR> <TH>일수</TH> <TH>시간</TH> </TR> <TR> <TH ROWSPAN=2>인터넷</TH> <TH VALIGN=TOP>정보검색과정</TH> <TD>인터넷 Overview, 정보검색 환경론, 검색엔진분석, 검색사례연구/실습</TD> <TD>주2회 3시간씩 2개월과정</TD> <TD ALIGN=CENTER>48</TD> </TR> <TR> <TH VALIGN=TOP>일반과정</TH> <TD>인터넷출발, 인터넷 환경응용, 정보검색</TD> <TD>주2회 2시간씩 2개월과정</TD> <TD ALIGN=CENTER>32</TD> </TR> <TR> <TH COLSPAN=2>상용 DB 정보검색과정</TH> <TD>상용 DB개요, DB구조론, 사용법, 검색사례 연구</TD> <TD>1일 4시간 3일과정</TD> <TD ALIGN=CENTER>12</TD> </TR> </TABLE>
    교 육 내 용 안 (1)
    과 정 명 교 육 내 용 교육기간
    일수 시간
    인터넷 정보검색과정 인터넷 Overview, 정보검색 환경론, 검색엔진분석, 검색사례연구/실습 주2회 3시간씩 2개월과정 48
    일반과정 인터넷출발, 인터넷 환경응용, 정보검색 주2회 2시간씩 2개월과정 32
    상용 DB 정보검색과정 상용 DB개요, DB구조론, 사용법, 검색사례 연구 1일 4시간 3일과정 12

    테이블 태그는 테이블 작성 외에도 유용하게 사용할 수 있다. 예를 들어서 다단 문서의 제작이나 항목들의 정열에 유용하게 쓸 수 있다. 이는 HTML이 라인넘기기나 빈공란을 제대로 인식하지 못하기 때문에 정열효과를 낼 수 있는 하나의 방법이다. 물론 이때는 BORDER의 값을 0으로 놓거나 BORDER를 생략하여 선이 나타나지 않도록 해야 한다.

    [ 다단 문서 작성 예 ]

    CU-SeeMe에 대하여
    CU-SeeMe(이하 CUSM)는 원래 미국코넬 대학에서 개발한 것이지만, 화이트 파인이라는 회사에서 소스를 라이센스해     		Enhanced CU-SeeMe라는 제품을 상용화해 내놓았다. Enhanced CUSM은 컬러 이미지를 지원하는 등 몇가지 기능이 강화됐다. 이 제품의 베타 버전은 현재 http://www.cu- seeme.com 에서 다운로드 할 수 있으며, 정식제품은 온라인으로도 구입 가능 하다.

    2.8 HTML문서의 색깔 지정하기

    일반적으로 웹브라우저에서 문서를 보여줄 때 디폴트 백그라운드 색깔은 회색 바탕에 검은색 글자이다. 그러나 이것 역시 원하는 색깔로 지정할 수 있다. 그 외에도 글자의 색깔, 링크 색깔, active link, visited link의 색깔 등도 지정 가능하다. 각각은 문서의 뒷배경의 색은 BGCOLOR, 문자는 TEXT로 지정하며, 링크에 대해서는 LINK, ALINK, VLINK로 표시한다. LINK는 링크되어 있는 단어나 문구의 초기 색이며, ALINK는 마우스로 클릭하는 순간의 색이고, VLINK는 한 번이상 방문했던 링크의 색이다. 각각의 지정값은 RGB색으로 지정하는데 #rrggbb의 16진수나 문자로 된 색깔의 이름으로 지정한다. 16진수로 지정할 때는 색의 범위는 Ox000000부터 OxFFFFFF까지이다.

    지정 방법은 <BODY> 태그에 속성을 지정해주는 것이다. 아래의 예는 검은 색 바탕에 흰글씨로 보이며, link의 색은 회색, active link의 색은 붉은 색으로 지정한다. visited link의 색은 기본값으로 지정된 색으로 보인다.

    <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC" ALINK="#FF0000">

    색 지정에 대한 예는 [표 12]와 같고, 보다 자세한 정보를 원하는 분은 다음의 URL을 참조하면 된다.

    http://werbach.com/web/wwwhelp.html#color

    [표 12] 색 코드표
    ColorCode ColorCode ColorCode
    Black#000000 Blue#0000FF Green#00FF00
    Cyan#00FFFF Navy#23238E Sea Green#238E6B
    Dark Green#2F4F2F Brown#A52A2A Sky Blue#3299CC
    Induan Red#4F2F2F Violet#4F2F4F Pink#BC8F8F
    Light Blue#BFD8D8 Gray#C0C0C0 Orange#CC3232
    Violet Red#CC3299 Gold#CC7F32 Red#FF0000
    Magenta#FF00FF Yellow#FFFF00 White#FFFFFF

    2.9 입력창 만들기

    지금까지는 미리 작성된 HTML 문서를 브라우저를 통해 어떻게 보여줄지를 결정해주는 태그들을 보았다. 그렇다면 이렇게 단순히 보여주는 것만 가능한 것인가? 아니다. HTML 문서에서도 입력을 받아들여 그에 따른 결과를 보여주도록 지정 가능하다.

    이 방법으로는 크게 두 가지를 들 수 있는데, 하나는 ISINDEX 태그를 이용하는 것이고 또 다른 하나는 FORM을 이용한 것이다. FORM에 관한 내용은 다음 장에서 살펴보겠다.

    BODY부분에 쓰이는 ISINDEX는 간단한 입력창을 만들어준다. 단순히 <ISINDEX>라는 태그만 써 주더라도 'This is a searchable index. Enter search keywords:' 라는 문장과 함께 다음에서 보는 바와 같이 입력을 위한 창이 나타나게 된다.

     

    <ISINDEX>

    [그림 2] ISINDEX의 결과

    여기에 입력된 내용을 이용해서 주제어 서치가 가능하며, 서버는 이를 위해서 반드시 서치엔진을 가지고 있어야 한다.

    2.10 폼(Form)

    폼이란 웹 서버에서 응용 프로그램과 서버와의 인터페이스를 가능하게 해주는 CGI 활용법에서 사용하는 것이다. CGI 프로그램의 동작 과정에 대해 설명하자면, 브라우저에서 사용자의 입력을 받아서 서버에게 전달하고, 서버는 사용자 입력을 지정된 응용 프로그램으로 넘겨주어 처리를 하게 하고 이 결과를 서버에게 넘겨주고 서버는 다시 브라우저로 전달하여 브라우저에서 결과를 보이게 한다. 이 과정에 있어 사용자의 입력을 받을 수 있게끔 홈페이지 구성을 하는 수단을 폼이 제공한다.

    2.10.1 <FORM> ... </FORM>

    폼의 시작과 끝을 나타낸다. 속성에는 여러 가지가 있는데 METHOD는 웹 브라우져에서 웹 서버로 데이터를 전달하는 방법을 가리킨다. 일반적으로 POST 방법이 많이 사용된다. ACTION은 서버로부터 데이터를 받아서 처리할 CGI 프로그램의 이름이 들어간다.

    <FORM ACTION="http://bluebird.sungshin.ac.kr/cgi-bin/register" METHOD=POST> ... </FORM>

    FORM에서 입력을 받는 방법에는 INPUT, SELECT, TEXTAREA가 있다.

    2.10.2 <INPUT>

    폼 내에서 실제로 입력을 받아들이는 태그로 사용되며 마감태그는 없다. 각 입력 필드들은 NAME이나 TYPE과 같은 하나의 변수에 대한 값을 입력받는다.

    [ 예 ]

    <FORM METHOD=GET ACTION="http://bluebird.sungshin.ac.kr/cgi-bin/test-cgi"> <INPUT NAME=a VALUE=Bbird SIZE=30 MAXLENGTH=50 TYPE=TEXT> <INPUT NAME=b TYPE=CHECKBOX> <INPUT NAME=c TYPE=RADIO CHECKED> <INPUT NAME=d TYPE=PASSWORD><BR> <INPUT TYPE=SUBMIT VALUE=SUBMIT> <INPUT TYPE=RESET VALUE=RESET> </FORM>

    [ 결과 ]


    [그림 3] INPUT을 사용한 예

     

    (1) TYPE

    변수의 데이터 형을 지정한다.

    입력 종류별로 TYPE을 정리하면 다음 [표 13]과 같다.

    텍스트 입력 TEXTAREA, INPUT, HIDDEN, PASSWORD
    버튼 입력 SUBMIT & RESET, CHECK, RADIO
    메뉴 입력 SELECT, SELECT SINGLE, SELECT MULTIPLE
    [표 13] 입력형태별 TYPE 분류

    (2) NAME

    CGI프로그램이 받을 때 사용되는 전달되는 데이터의 이름으로 FORM안에서 유일한 이름으로 사용된다. 이 이름은 겉으로는 보이지 않으며 여기에 입력값이 지정된다.

    <INPUT TYPE="CHECKBOX" NAME= "BOXI">

    (3) VALUE

    초기값을 설정하는데에 사용되며 TYPE형에 영향을 받는다.

    <VALUE="textstring">에서 TYPE이 TEXT나 PASSWORD일 경우에는 textstring이 기본값이 되고, TYPE이 CHECKBOX나 RADIO일 경우에는 체크박스가 체크되었을 때만이 값이 된다. TYPE이 RESET이나 SUBMIT일 경우에는 선택된 버튼의 값으로 재정의 된다.

    (4) CHECKED

    이 속성은 TYPE=CHECKBOX나 TYPE=RADIO일 때 유효하며, 처음 시작할 때부터 CHECK된 상태로 보인다.

    (5) SIZE

    텍스트 필드의 크기를 글자수로 나타낸다. 이 변수는 보이게 될 크기만을 지정할 뿐으로 TYPE=TEXT나 TYPE=PASSWORD일 때 유효하다.

    (6) MAXLENGTH

    텍스트 필드의 최대 크기를 나타낸다. 이것은 SIZE에 의해 나타난 값보다 클 수 있다. 이 속성역시 TYPE값이 TEXT나 PASSWORD일 때 유효하다.

    [ 예 ]

    <form method=post action="http://128.134.68.2/cgi-bin/ws4-reg" name=reg1> <center> <h3>워크샵 온라인 등록 시스템<hr width=230 size=2></h3> <p> 아래는 워크샵 등록에 필요한 사항입니다. 빠짐없이 기록해 주십시오. 만일 2명 이상의 복수인원이 등록하고자 할 때에는 한명씩 등록해 주시기 바랍니다. 빨간 색으로 표기된 것은 반드시 입력해야 합니다. <p> <table border=0 width=600> <tr> <th width=20><font color=red>1 <td width=200><font color=red>이 름</font> <td colspan=2><input name="name1" size=30>(한글로 공백없이 입력) <tr> <th>2<td>소 속<td><input type=text name="company" size=57> <td> <tr> <th><font color=red>3</font><td><font color=red>주민등록번호</font> <td><input type=text name="idnum1" size=6 maxlength=6> -<input type="text" name="idnum2" size=7 maxlength=7><td> <tr> <th>4<td>대 상<td><input type="radio" name="student" value="일반" checked>일반 <input type="radio" name="student" value="학생">학생 <tr> <td colspan=3>　▶학생은 석사과정까지 인정되며, 학생은 3만원, 일반은 10만원 입니다 <tr> <th>5<td>e-mail address<td colspan=2><input type=text name="email" size=57> <tr> <th>6<td>Home Page URL<td colspan=2>http:// <input type=text name="url" size=50> <tr> <th><font color=red>7</font><td><font color=red>연락 가능한 전화번호</font> <td><input type=text name="call" size=30>(지역번호를 적어주세요 예:032-675-0447) </table>

    [ 결과 ]

    [FORM 예제 : 워크샵 등록 형식]

    [그림 4] FORM 사용 예 : INPUT을 이용한 등록폼

     

    2.10.3 <SELECT>. ... </SELECT>

    폼 내에서 여러 개로 보이는 선택 리스트 가운데서 사용자가 하나 이상의 선택을 하도록 나열한 선택창을

    만드는 데 사용된다.

    (1) NAME

    SELECT 필드명으로 CGI에 전달될 때 CGI가 갖는 변수명을 나타낸다.

    (2) SIZE

    보이게 될 선택 항목의 갯수를 나타낸다.

    (3) MULTIPLE

    현재의 선택에서 여러개 동시 선택이 가능하도록 한다.

    (4) <OPTION>

    선택 항목을 만드는데 사용된다. 속성으로는 SELECTED가 있는데 이것은 초기에 현재 항목이 선택된 상태로 보이게 하는 것이다. 다음의 예 2를 보면 초기부터 기본값으로 바나나가 선택된 상태로 화면에 나타난다.

    [ 예 1 ]

    <FORM METHOD=GET ACTION="http://bluebird.sungshin.ac.kr/cgi-bin/test-cgi"> <SELECT NAME=GROUP> <OPTION VALUE=WEB> the Web <OPTION VALUE=NEWS> Uwenet <OPTION VALUE=GOPHER>Gopher <OPTION VALUE=FTP> ftp <OPTION VALUE=TELNET> telnet <OPTION VALUE=BBS>BBS </SELECT> <INPUT TYPE=SUBMIT VALUE=SUBMIT> </FORM>

    [ 결과 1 ]

    초기화면에는 [그림 5]의 (a) 그림과 같이 보이지만, 마우스로 화살표 버튼을 클릭하면 (b) 그림과 같이 여러 메뉴들이 나타난다.

    [FORM 예제2] [FORM 예제3]
    (a) 초기 화면(b)마우스로 클릭한 상태 화면
    [그림 5] SELECT를 사용한 예
    [ 예 2 ] <FORM> <SELECT MULTIPLE> <OPTION VALUE=APPLE>사과 <OPTION VALUE=BANANA SELECTED> 바나나 <OPTION VALUE=CHERRY> 체리 </SELECT> </FORM>
    [ 결과 2 ]

    [그림 6] OPTION에서 SELECTED사용 예

    또 다른 예로 유명한 서치 엔진인 Altavista의 홈페이지를 살펴보면 다음과 같다.

    [ 예 3 ]

    <FORM method=GET action="/cgi-bin/query"><INPUT TYPE=hidden NAME=pg VALUE=q> <B> Search <SELECT NAME=what> <OPTION VALUE=web SELECTED> the Web <OPTION VALUE=news > Usenet </SELECT> and Display the Results <SELECT NAME=fmt> <OPTION VALUE="." SELECTED> in Standard Form <OPTION VALUE=c > in Compact Form <OPTION VALUE=d > in Detailed Form </SELECT> </B><BR> <INPUT NAME=q size=55 maxlength=200 VALUE=""> <INPUT TYPE=submit VALUE=" Submit"><br> <FONT size=-1> Tip: To find an old friend or information about someone, try: <B>Santa Claus</B> or <B>"Santa Claus"</B> <BR> Using a capital letter ensures that only that capitalization will be found. </FONT> </FORM>

    [ 결과 3 ]

    [Altavista 입력 화면]

    [그림 7] FORM 사용 예 : SELECT와 INPUT을 이용한 Altavista의 서치를 위한 입력창

    2.10.4. <TEXTAREA> ... <TEXTAREA>

    폼 내에서 텍스트 데이터를 입력할 수 있도록 한다. 태그 사이의 텍스트는 기본값으로 보여진다. 만일 텍스트가 없으면 빈 공란으로 나타난다.

    (1) NAME

    TEXTAREA 변수명을 지정한다.

    (2) ROWS, COLS

    각 속성들은 TEXTAREA에 의해 보여질 텍스트의 줄 수와 문자수를 지정한다.

    [ 예 ]

    <FORM method=GET action="/cgi-bin/query"> <P> <CENTER> <B> Selection Criteria: </B> Please use Advanced Syntax (<font size=-1><B>AND, OR, NOT, NEAR</B></font>). <BR><textarea name=q cols=68 rows=3></textarea><p> <B> Results Ranking Criteria: </B> Documents containing these words will be listed first.<BR> <textarea name=r cols=68 rows=1></textarea> </CENTER> </FORM>

    [ 결과 ]

    [FORM :TEXTAREA이용 예]

    [그림 8] FORM 사용 예 : TEXTAREA를 이용한 입력 창

    2.11 프레임

    2.11.1 프레임 문서?

    프레임은 일종의 다중 윈도 개념으로 브라우져의 페이지를 여러 개의 페이지 공간으로 나누는 역할을 한다. 프레임의 특징은 다음과 같다.

    1. 프레임마다 독립적으로 새로운 URL을 표시한다.
    2. NAME이 지정되어서 다른 프레임에 어느 선택된 URL의 결과가 나타나게 한다.
    3. 크기 조정을 동적으로 할 수 있으며, 이것 또한 HTML 태그를 이용해서 방지할 수 있다.

    프레임 문서는 일반 HTML문서와 비슷하나 BODY라는 태그대신 FRAMESET이라는 태그를 사용한다.

    2.11.2 프레임 문서 작성하기

    (1) <FRAMESET> ... </FRAMESET>

    프레임의 시작과 끝을 나타낸다. 이 태그는 BODY대신 사용되며, 만일 BODY를 쓰게 되면 프레임 태그가 작동하지 않는다. 이 태그 내부에는 또 다른 FRAMESET, NOFRAMES, FRAME과 같은 태그를 사용할 수 있다.

    ROWS와 COLS 속성을 이용하여 프레임의 열과 행의 크기를 지정한다. 값의 지정은 나누기를 원하는 구역 수만큼 지정해주어야 하며 각 값들은 ','을 이용하여 구분한다. 값의 단위는 픽셀수나 전체 브라우저 크기에 대한 퍼센트로 나타낸다.

    <FRAMESET ROWS="20,60,20"> <FRAMESET ROWS="20%,60%,20%"> <FRAMESET ROWS="100,*,100"> <FRAMESET ROWS="2*,*">

    '*'는 이미 지정된 크기가 앞이나 뒤에 있고, 나머지 지정하지 않는 공간을 모두 사용할 때 사용한다. 곧 ROWS="100,*,100"라고 지정되어 있으면, 세 개의 프레임에서 첫 번째와 세 번째것의 크기는 100픽셀이고 두 번째는 전체 브라우저 크기에서 200픽셀을 제외한 크기가 된다. 만일 ROWS="2*,*"라고 되어 있으면, 2/3크기와 창과 1/3크기의 창 두 개로 구분되어 있다는 의미이다.

    (2) <FRAME> ... </FRAME>

    이 태그는 실제로 프레임 안에 들어가는 정보를 표현할 때 사용된다.

    <FRAME SRC="URL" NAME="프레임이름" MARGINWIDTH=n SCROLLING="yes|no|auto" NORESIZE >

    속성으로는 IMG에서의 SRC와 비슷하게 프레임안에 들어갈 정보를 지정하는 SRC라는 것이 있고, 프레임에 이름을 붙이는 NAME이라는 것이 있다. 이것은 다른 프레임에서의 결과가 지정한 이름의 프레임에 나타날 수 있도록 한다. 여기서는 몇 개의 예정된 프레임이 이름이 있다.

    MARGINEWIDTH는 프레임의 좌우 여백을 픽셀크기로 지정한다. 일반적으로 브라우져는 이 변수가 지정되지 않으면 자동으로 이를 조정한다.

    MARGINEHEIGHT는 MARGINEWIDTH와 같은 역할을 하나 상하의 여백을 조절하는 역할을 한다.

    SCROLLING은 프레임에 스크롤바를 만들 것인지 아닌지를 설정하는데에 사용된다. yes는 항상 나타나게 하고 no는 나타나지 않게 한다. auto는 자동으로 브라우져가 결정하도록 한다. 기본값은 auto이다.

    NORESIZE는 사용자가 브라우져에서 프레임의 크기를 조절할 수 없도록 하는 속성이다.

    (3) <NOFRAME> ... </NOFRAME>

    프레임이 지원되지 않는 브라우져를 위한 속성으로 이 안의 내용들은 하나의 페이지로 나타난다.

    (4) <TARGET> ... </TARGET>

    다른 프레임의 HTML 문서를 지정한다.

    [그림 9]를 예로보면, 두 개의 프레임으로 나누어져 있다. 화면의 각 프레임은 seoul.html과 051896.htm의 내용을 보여준다. 왼쪽의 seoul.html에서 선택된 링크의 내용은 오른쪽 프레임에 나타난다.

    [FRAME 사용예]

    [그림 9] FRAME 예

    다음의 HTML 내용은 [그림 9]의 결과를 보여준다.

    <html> <frameset cols=30%,*> <frame src="seoul.html"> <frame src="/wkr-seoul/seoul/lecture/051896.html" name="seoul"> </frameset> </frameset> <html>

    위의 seoul.html문서의 내용중 프레임관련 내용을 보면 다음과 같다.

    <BODY BACKGROUND="/wkr-seoul/image/back/wbirth.jpg" onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',300);"> <TITLE>WKR-SEOUL WWW</TITLE> -<A HREF="/wkr-seoul/seoul/overview.html" target="seoul">Overview</a><BR> -<a href="/wkr-seoul/bbs.html" target="seoul">BBS</a><BR> -<A HREF="/wkr-seoul/seoul/member.html" target="seoul">A Mailing List</a><BR> -<A HREF="/wkr-seoul/seoul/weblist.html" target="seoul"> Seoul-Kyung-gi Web Sites</a><BR> -<A HREF="/wkr-seoul/business/sol96.html" target="seoul"> Korea Int'l Business Solutions Exhibition & Seminar</a><BR> -<A HREF="/wkr-seoul/seoul/meeting/content.html" target="seoul"> Seminar Schedules </a><BR> -<A HREF="http://ws4.www-kr.org/" target="seoul">KRWeb'96 in Seoul</a><BR> -<A HREF="/wkr-seoul/seoul/help/help.html" target="seoul"> Help for Enjoying Netscape 2.0 Version</a><BR> </BODY>

    2.12 동적인 문서 제작하기

    브라우저를 통해 택스트나 이미지를 단순히 보여주는 것만이 아니라 변화를 줄 수 있는 동적 문서도 만들 수 있다.

    HEAD안의 META 태그를 이용하면 브라우저가 일정 기간동안 반복해서 지정된 데이터를 새로 읽어들일 수 있다.

    <META HTTP-EQUIV="Refresh" CONTENT="5" URL="http://bluebird.sungshin.ac.kr/bbird.html">

    CONTENT 속성은 데이터를 읽어올 시간 간격을 지정하는 것으로 위의 예에서는 5초마다 bbird.html이라는 파일을 다시 읽어들인다는 것이다.

    그 외의 방법으로는 자바 스크립트, Java, Visual Basic Script나 Object 태그를 사용하는 것이다. 자바 스크립트는 <SCRIPT> ... </SCRIPT>사이에서 정의된다. 자바스크립트는 스크립트 언어로 웹 페이지를 조절하며, 이를 지원하지 않는 브라우저를 위해 반드시 <!-- ... -->로 로멘트 처리되는 부분 안에 있어야 한다. Java는 하나의 프로그래밍 언어로 <APPLET>라는 태그에 의해 실행된다. 자세한 내용은 관련 강의안을 참조하기 바란다.

    2.13 Style Sheet

    근래에 논의되고 있는 것으로 Style Sheet가 있다. 이것은 HTML에서 지정된 각 태그들의 속성을 원하는 대로 바꾸어서 문서의 보이는 형식을 지정하도록 하는 것이다. 지금 현재는 Internet Explorer 3.0이상과 Arena에서 지원되며 넷스케이프 4.0에서 지원할 예정이다.

    가장 간단한 예로 P 태그를 다음과 같이 지정하여 P 태그에 의해 정의된 문자의 색을 갈색으로 바꿀 수 있다.

    P {color : #800000}

    Style정의가 문서에 적용될 수 있는 방법에는 다음과 같다.

    1. HEAD안에 <LINK> 태그를 이용해서 Style Sheet를 지정한다.

      <LINK REL="stylesheet" TYPE="text/css" HREF="http://www.foo.com/sheet" TITLE="coolsheet">

    2. HEAD안에 <STYLE> 태그를 이용해서 문서의 스타일을 지정한다.

      [ 예 ]
      <HTML> <HEAD> <TITLE> The HTML Style Sheet 예제 </TITLE> <STYLE> P.main {font-family : Arial; font-size : 12pt} P.info {font-family : Arial; font-style : italic} P {color : #800000} </STYLE> </HEAD> <BODY> <P CLASS="main">새로 지정한 P 태그중 main을 이용한 문단이다. </P> <P CLASS="info">이것은 P 태그중에서도 info라고 지정되어 있는 성질을 이용한 것 </P> </BODY> </HTML>
      [ 결과 ]
      [Style Sheet의 예1]

      [그림 10] Style Sheet의 예 1

    3. BODY안에 STYLE 태그를 이용해서 직접 정의한다. 다음 예에서는 글자가 붉은 색으로 보인다.
      [ 예 ] <H1 STYLE="color : #FF0000">Heading1</H1>
      [ 결과 ]
      [Style Sheet의 예2]

      [그림 11] Style Sheet의 예 2

    다음은 HEAD 안에서 STYLE 태그를 이용하여 문서의 스타일을 정의한 또 다른 예이다. 바탕색 지정, 글자체, 글자색, 그림자 효과 등을 [그림 12]에서 볼 수 있다.

    [ 예 ]

    <HTML> <HEAD> <TITLE>The HTML Reference Library</TITLE> <STYLE> BODY { background : #006000} P.main { font-family : Arial; font-size : 12pt; color : white} P.info { font-family : Arial; font-style : italic; color : #80C000} P SPAN { font-style : italic; font-size : 14pt} A { color : #C0C8FF; font-weight : bold} .text { color: red; margin-left: 10px; font-size: 28px; font-family: Arial Black } .highlight { margin-top: -38px; margin-left: 8px; color: darkred; font-size: 28px; font-family: Arial Black } </STYLE> </HEAD> <BODY> <P CLASS="main"><DIV CLASS="text" STYLE="{color : white; font-style : italic}"> The HTML Reference Library</DIV> <DIV CLASS="highlight" STYLE="{color : gray; font-style : italic}"> The HTML Reference Library</DIV> <P CLASS="main">is a Windows HLP file, detailing all currently useable HTML syntax. I t is available in the following formats : <UL> <LI><DIV CLASS="text">Windows 3.x</DIV> <DIV CLASS="highlight">Windows 3.x</DIV> <LI><DIV CLASS="text" STYLE="{color : blue"}>Windows 95/NT</DIV> <DIV CLASS="highlight" STYLE="{color : darkblue"}>Windows 95/NT</DIV> </UL> <P CLASS="info">For more information about the <SPAN>HTMLib</SPAN>, contact <A HREF="mailto:cmlehunt@swan.ac.uk">cmlehunt@swan.ac.uk</A> </BODY> </HTML>

    [ 결과 ]

    [Style Sheet의 예3]

    [그림 12] Style Sheet의 예 3

    HTML이 내용에 관한 정보를 제공해 준다면, Style Sheet는 표현을 위한 요소들을 어떻게 정의할 것인가에 관한 정보를 제공해주는 역할을 한다. 지금까지 어떻게 각 요소들을 표현할 것인가에 관한 여러 안들이 제시되고 있으나 아직 표준화된 것은 없다. Style Sheet를 이용한다면 앞으로는 보다 다양하고 보기 좋은 HTML 문서를 작성할 수 있을 것이다. 보다 자세한 정보를 얻고자 하는 분은 다음을 참조하기 바란다.

    http://www.w3.org/pub/WWW/Style/

    http://www.w3.org/pub/WWW/TR/WD-css1

    http://www.microsoft.com/truetype/css/gallary/enterance.htm

    2.14 실수하기 쉬운 점

    HTML 문서를 작성하다보면 태그이용에 많은 실수를 하게 된다. HTML 전용 에디터를 사용하는 경우에는 드물게 발생하겠지만, 직접 태그를 넣어가며 사용하는 경우에는 빈번히 발생하는 일이다. 그러므로 결과 화면이 원하는 대로 보이지 않는 때는 다음과 같은 경우가 아닌지 한 번더 살펴보자.

    1. 오타
    2. 앵커를 지정할 때 <A HREF="....">에서 오른쪽의 "을 빼버린 경우 : 이 뒤의 문서 내용들이 화면에 보이지 않는다.
    3. 마감태그를 잊어버린 경우 : 뒤의 내용들도 태그의 영향을 받는다.
    4. 태그에서 오른쪽의 '>'을 빼버린 경우
    5. 태그를 써줄 때 <와 태그이름 사이에 빈칸이 들어간 경우 : 제대로 태그를 인식하지 못한다.

    이 중 가장 중요한 실수는 바로 오타이다. 그러므로 문서 결과가 제대로 보이지 않는 경우에는 침착하게 다시 차근차근 살펴보도록 하자.

    3. HTML문서 작성하는 방법은?

    HTML문서를 작성하려면 기존의 일반 에디터나 웹전용에디터를 이용하는 방법과 기존의 작성된 문서를 HTML 문서로 변환시켜주는 툴을 이용하는 방법이 있다.

    3.1 일반 에디터 이용하기

    vi, edit, emacs와 같은 일반 에디터를 이용하여 저자가 직접 태그를 넣어가며 작성하는 방법이다. 이 방법은 HTML문서 작성을 익히기에는 좋은 방법이지만 태그를 넣는 작업이 번거롭다는 불편이 있다.

    vi Macro
    http://www.cosy.sbg.ac.at/www-doku/html/dot.exrc.bin
    Emacs HTML mode
    http://www.ncsa.uiuc.edu/Web/html/elisp/html-mode.el

    3.2 HTML 에디터 이용하기

    HTML 전용 에디터를 사용하는 방법으로 사용자는 태그를 어떻게 쓸 것인지 의식할 필요없이 자동적으로 태그를 생성시켜 준다. 초보자나 다량의 작업시에 유용하게 사용할 수 있다. 특히 WYSIWYG을 지원하는 에디터들이 많아서 보다 편리하게 사용할 수 있다.

    근래에 많이 사용되는 에디터로는 모든 윈도 플랫폼 (Windows 3.1/3.11/NT/95)에서 사용할 수 있는 WYSIWYG HTML 에디터인 FrontPage와 다양한 툴바와 편리한 사용자 인터페이스로 가장 많이 거론되고 있는 HotDog Web Editor 등이 있다. 또한 WordPerfect 6.1 사용자들이 WordPerfect내에서 손쉽게 HTML 문서를 작성할 수 있고, WordPerfect 문서를 HTML 문서로 자동 변환시켜주기도 하는 Internet Publisher for WordPerfect이 있다.

    그 외에도 각 플랫폼에 따라서 다양한 HTML 에디터가 많이 있으므로 사용자들은 본인의 풀렛폼에 맞는 것을 구해서 사용하면 될 것이다. 다음의 URL을 참고하면 HTML 에디터에 대한 보다 자세한 정보를 얻을 수 있어서 여러분의 구미에 맞는 에디터를 선택할 수 있을 것이다. 선택기준이라면 일단은 사용자의 플랫폼에 맞는 것이어야 하겠고, 무엇보다도 본인이 사용하기에 편리해야 한다. 그러나 에디터 중에는 제대로 한글 지원을 못하는 것이 있으므로 이것도 고려 대상이 되어야 할 것이다. Netscape Navigator에서는 Gold 2.0부터 자체적으로 HTML 에디터 기능이 추가되어 있으므로 이를 이용해도 될 것이다.

    http://www.utoronto.ca/webdocs/HTMLdocs/tools_home.html
    http://www.w3.org/pub/WWW/Tools/
    http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/

    3.3 각종 문서 형식을 HTML로 형식변환하기

    이 방법은 각종 문서 형식을 HTML로 변환시켜주는 형식 변환 프로그램을 사용하는 것이다. 이에 대한 정보는 다음에서 얻을 수 있다.

    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/converters.html

    변환기를 이용하여 변환시킬 수 것은 PostScript, MS Word, RTF, Word Perfect, FrameMaker, MIF, troff/nroff, BibTeX, LaTeX, Texinfo, DECwrite, VAX Document, Interleaf, QuarkXPress, PageMaker, ClarisWorks, AmiPro, Scribe, Persuasion, PowerPoint, EndNote 등 거의 대부분의 문서 형식과 C, C++, Ada, Fortran, Lisp과 같은 프로그램 소스, 그리고 그 외에도 Manual Pages, FAQ, Mail, RFCs 등이 있다.

    형식 변환기는 HTML 문서로의 변환뿐 아니라 HTML 문서를 다른 형식의 문서로 바꾸어주기도 한다. 예를 들어서 HTML 문서를 PostScript, MS Word, RTF, WordPerfect, LaTeX, Plain text 등으로의 변환이 가능하다. 이 정보 또한 앞에 적어 놓은 URL을 참고하면 된다.

    이러한 기능들은 굳이 멀리서 찾지 않아도 주위에서 많이 쓰고 있는 HWP에서도 사용할 수 있다. HWP 3.0b 버전부터는 HTML 문서 제작 기능을 추가하고 있어서 HTML 문서로의 변환 저장과 HTML 문서를 일반 HWP 문서로 읽어들이기가 가능하다. 그러나 아직까지 변환기를 이용했을 때는 사용자가 원하는 태그를 적절하게 사용해주지 못한다는 단점이 있으므로 작업 후에 다시 수정 작업을 할 필요가 있다.

    4. HTML문서 작성시 고려사항

    HTML 문서 작성을 위한 태그들도 알아 보았고 에디터를 이용하는 방법도 알아보았다. 이렇게 홈페이지를 만듬으로써 이제 여러분은 이 넓은 인터넷이라는 세계에 또 하나의 정보 제공자가 된 것이다. 그러나 이로써 모든 것이 끝나는 것은 아니다. 어디든지 예절이 있듯이 홈페이지 제작에 있어서도 예절까지는 아니더라도 고려해야할 사항들이 있다. 이것은 본인을 위해서이기도 하지만, 정보 제공자가 된 이상 이 정보를 사용할 다른 이를 위한 것이기도 하다. 특히 서버 관리자나 웹 마스터일 경우라면 더욱 눈여겨 볼 사항이다.

    4.1 어떻게 구성할 것인가?

    4.1.1 전체 구성은 계층 구조로!

    전체 페이지들의 링크는 계층 구조 모형으로 하는 것이 좋다. 이것은 보는 이로 하여금 마치 책을 보는 듯하게 만들어서 보다 체계적이고 친근하게 느껴지도록 하며, 여러 디렉토리 내의 파일들을 링크시키는데 좋다.

    4.1.2 파일의 크기는?

    파일의 크기도 고려대상이다. 문서의 크기가 컸을 경우에는 전송시간이 많이 걸려서 사용자들은 쉽게 링크를 따라 다른 문서나 본 문서를 불러들일 수 없고, 큰 문서를 스크롤하기도 어렵다. 그러므로 문서가 커질수록 읽기 어려워진다는 것이다. 그러나 전체 흐름이 끊기지 않고 하나의 문서로 스크롤바를 이용해서 내용을 볼 수 있다는 장점이 있다. 그에 반해서 큰 문서의 내용을 나누어 작성했을 경우에는 전송시간이 짧다는 장점과 전체 문서의 흐름이 끊긴다는 단점이 있다. 물론 근래에 들어와서는 문서내에 "next"와 "previous" 버튼을 만들어 놓아 마치 하나의 문서를 읽어내려가는 것처럼 나타내기도 한다.

    이런 사항들을 고려해볼 때, 문서의 크기는 대략 다음과 같이 정하는 것이 좋다.

    4.1.3 링크만 시킬까? 아니면 그냥 내용을 복사해?

    웹 사이트들을 돌아다녀보면 자신의 관심분야나 다른 이들에게 알리고 싶은 사이트들을 홈페이지에 링크시켜 놓거나 아예 파일을 복사놓은 경우가 있다. 그렇다면 과연 어떤 것을 링크시키고 어떤 것을 파일채 가져다 놓을 것인가?

    뉴스 기사와 같이 내용이 변하기 쉬운 내용이나 버전 2.0이니 3.0이니 하는 식으로 내용이 수정되지만 전 단계 버전이 저장되지 않는 문서일 경우에는 원하는 특정 버전을 저장해 놓는 것이 좋다. 그에 반해서 인터넷 FAQ, RFC, 웹상의 특정 주제에 관한 사이트들의 URL등은 링크시켜 놓는 것이 더 바람직하다.

    4.2 각각의 문서는 이렇게?

    4.2.1 저자 표시를!

    어떤 문서이든지 마지막 부분에는 본인의 홈페이지로 연결되는 개인의 사인을 남기고, 홈페이지에는 메일 주소와 전화번호를 기입하자. 이를 통해서 문서에 대한 의견을 나눌 수 있는 연락처를 제시할 수 있고, 문서에 대한 저작권 표시 기능도 된다.

    4.2.2 정보에 대한 상태는?

    과연 이 내용이 언제 처음으로 작성되어서 마지막으로 수정되었는지, 그리고 완성본인지 작업중인지와 같은 정보를 알려주는 것이 좋다. 또한 내용상의 오자는 없는지 다시 한 번 살펴보는 자세도 중요하다.

    4.2.3 링크

    HTML 문서의 장점은 링크를 만들 수 있다는 것이다. 링크를 만드는 일반적인 경우는 다음과 같다.

    4.2.4 제목

    문서의 제목 부분은 HTML 문서의 HEAD부분에서 지정되며, 앵커나 문단 마크 등의 태그는 사용할 수 없다. 제목은 히스토리 리스트 내에서의 노드 구분, 윈도의 구분, 북마크에서의 노드 구분에 사용된다. 제목의 길이는 제한이 없지만, 응용 프로그램 중에는 제목 전체를 보여주지 못하는 경우가 있으므로 영문자로 64자를 넘지 않는 것이 좋다.

    제목은 문서의 내용을 한눈에 알아볼 수 있도록 짧고도 명확하게 지정하는 것이 좋다. 예를 들어서 '서문'이라고 간단하게 쓰는 것보다는 'HTML Guide : 서문'이라고 쓰는 것이 내용을 보다 명확하게 알아볼 수 있어서 좋다.

    4.2.5 어떤 환경이라도 상관없이!

    HTML 문서는 어떤 플랫폼에서라도 일관된 형식으로 볼 수 있다. 역설하면, 하나의 웹 페이지는 서로 다른 플랫폼과 서로 다른 웹 브라우저를 이용해서 볼 수 있다는 것이다. 그러므로 특정 환경에서만 유효한 태그를 고집하는 것은 좋지 않다.

    4.2.6 프린트하기 좋게 배려를!

    아직까지는 브라우저에서 보이는 문서 내용을 프린트해서 보는 것이 다들 익숙하다. 그렇게 때문에 맘에 드는 내용을 발견하면 프린트 메뉴를 선택해서 프린터로 내용을 보낸다. 그런데 목차 페이지에서 각 내용들이 분리되어 링크되어 있는 경우라면 프린트하기도 쉽지는 않을 것이다. 이런 경우라면 따로 전체를 하나의 파일로 만들어 제공하는 것도 배려의 한 가지이다.

    또 한가지 고려해야 할 것은 문서의 처음이나 끝에 문서의 URL을 적어주는 것이 좋다. 프린트를 했을 경우에 URL이 같이 프린트되지 않는 경우라면 따로 기록해 놓지 않으면 나중에 그 문서를 어디에서 찾았었는지 헤매는 경우가 있다. 그러므로 URL을 적어주는 것이 좋다. 그와 더불어서 'WWW 워크샵에 대해서 알고 싶으면 여기를 클릭하세요.'와 같이 따로 링크를 위한 글을 써 주는 것보다는 'WWW 워크샵 '과 같이 주요 어구에 직접 링크를 지정해 주는 것이 것이 좋다.

    4.3 충분한 테스트를!

    문서 작성이 끝난 다음에는 충분한 테스트를 거치는 것이 좋다. 여러 가지 브라우저를 이용해서 문서를 살펴보자. 과연 브라우저에 관계없이 원하는 형태로 보여지는지. 태그들은 제대로 사용되었는지 살펴볼 수 있는 기회가 된다. HTML 전용 에디터를 사용했다면 별 문제가 없겠지만, 직접 태그를 넣는 작업을 했다면 마감태그를 잊어버렸거나 잘못된 태그를 사용했을 가능성이 있으므로 이를 확인하자.

    4.4 항상 관심을 가지고 보완을 하자!

    계속 내용이 수정되어야 할 문서라면 이 작업은 필수다. 아무리 멋있고 좋은 내용으로 만들어 놓은 페이지라 하더라도 지속적인 수정 작업이 없다면 곧 쓸모없는 정보가 되어 버린다. 그러므로 지속적으로 관심을 가지고 수정작업을 해주는 것이 좋다.

    5. 결론

    지금까지 HTML 문서 작성에 대해 살펴보았다. 많은 태그들이 있지만, 중요한 것은 얼마나 활용하는가이다. HTML문서를 잘 작성하고자 한다면 우선은 다른 사람들이 작성해 놓은 문서들을 많이 보는 것이 중요하다. 여기저기 홈페이지들을 돌아다니다가 맘에드는 문서를 발견하거나 처음보는 쓰임이 있을 때에는 소스 파일을 보는 것이 좋다. 이 방법이 HTML문서를 배우고 여러 가지 응용법들을 익히는데 가장 좋은 방법이다. 또한 소스 파일을 여러분의 컴퓨터에 저장하여 재편집이 가능하므로 이를 활용하는 것도 좋은 방법이다. 그러나 가장 중요한 것은 계속 연습하고 또 사용하는 것이다.

    HTML은 계속 연구되고 있고 새로운 버전의 표준화 작업이 진행되고 있다. 그 동안도 표준화 작업들이 진행되어 왔지만, 각 브라우저마다 주장하고 있는 내용들이 다르기 때문에 사용자가 얻는 불편함도 있고 장점도 있었다. 지금 현재 논의되고 있는 내용 가운에 문서의 스타일을 지정할 수 있는 Style Sheet도 있다. 아직까지는 HTML 문서가 출판을 위한 작업에는 적당하지 않지만, 현재 논의되고 있는 Style Sheet를 이용한다면 얼마든지 독특하고 새로운 문서 스타일을 만들 수 있을 것이다.

    웹의 등장에 대한 의의중 하나가 사용자들의 능동적인 참여유발이라는 것이다. 즉 정보를 받아보는 이로부터 정보제공자라는 위치의 변화이다. 그만큼 제공하는 정보에 대한 책임도 필요하고 보다 자율적인 자세도 필요하겠다. 지식은 나눔으로써 커진다고 했던가? 여러분 자신의 특색있는 홈페이지를 만들어 서로 알고 있는 것들을 나눌 수 있는 기회가 되길 바란다.

    참고문헌(References)

    [NCSA 96]
    NCSA, A Beginner's Guide to HTML, April, 1996
    URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
    [HTML 96]
    HTML Language, 1996
    URL: http://www.nexon.co.kr/~bhkim/html.html
    [HTML_ref 96]
    HTML Reference Manual, January 2, 1996
    URL: http://www.sandia.gov/sci_compute/html_ref.html
    [MARKUP]
    HyperText Markup Language (HTML), August 20, 1996, W3C,
    URL: http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
    [HTML]
    HTML: HyperText Markup Language, October 7, 1996, Library of Congress
    URL: http://lcweb.loc.gov/global/internet/html.html
    [HTML_QCK]
    HTML Quick Reference, October 11, 1995
    URL: http://www.ccc.ukans.edu/info/HTML_quick.html
    [HTML_Res]
    HTML Resources, (GOOD) August 1, 1996
    URL: http://www.hwg.org/resources/html
    [Bare_HTML]
    Bare Bones Guide to HTML, by Kevin Werbach, July 21, 1996,
    URL: http://webach.com/barebones
    [WWW_Help]
    the WWW help page, by Kevin Werbach (GOOD) September 4, 1996,
    URL: http://webach.com/
    [HTML_Form]
    An Instantaneous Introducton to CGI Scripts and HTML Forms, by Michael Grobe, July 1996,
    http://kuhttp.cc.ukans.edu/info/forms/forms-intro.html
    [HTML_Tools]
    World Wide Web and HTML Tools, August 8, 1996
    http://www.w3.org/pub/WWW/Tools/Overview.html
    [STYLE]
    Style Guide for online hypertext,
    http://www.w3.org/pub/WWW/Provider/Style/
    Last-Modified : Sunday, 29-Sep-96 23:11:17 KDT