홈페이지 제작(1) - HTML문서 작성

김은아
대전 광역시 유성구 궁동 220
충남대학교 컴퓨터공학과 프로토콜공학 연구실
E-mail : eakim@comeng.chungnam.ac.kr
URL : http://www.comeng.chungnam.ac.kr/~eakim

Abstract:: WWW이 대중화되면서 인터넷 상의 대부분의 문서는 HTML 문서로 작성되고 있으며, 사용자들은 제공된 정보를 이용하는 수동적인 자세에서 정보를 제공하는 능동적인 자세로 변하고 있다. 이러한 추세로 인해 웹을 조금이라도 사용해본 사용자들에게는 홈페이지의 작성이 기본적인 능력으로 여겨지고 있다. 본 문서는 이러한 사용자들을 위해 웹 서비스의 동작 원리와 HTML 2.0 버전을 바탕으로 한 HTML에 대해서 1장과 2장에서 정리하고자 한다. 3장에서는 보다 재미있는 웹 페이지를 만들기 위해 사용되는 이미지맵, 폼, 프레임에 대해서 설명을 하고 마지막으로 4장에서는 웹 페이지를 작성하는데 있어서의 고려사항들을 살펴보고자 한다.
Keywords:: HTML, WWW, HTTP, WWW Server, WWW Client, Browser, Server-Side Imagemap, Client-Side Imagemap, Form, Frame, Table, WWW Etiquette

Table of Contents:

1. 웹 서비스는 어떻게 이루어지나?

1.1 웹 서버의 동작 원리

1.2 홈 페이지를 어디에 만들어야 하나?

2. HTML(HyperText Markup Language)

웹 서비스를 위해서 사용자들이 주로 사용하는 툴이 바로 Netscape Navigator, Internet Explorer와 같은 브라우저이다. 웹 브라우저는 인터넷에 연결되어 있는 호스트들 중 사용자가 지정한 호스트로 접속하고, 그 곳에 있는 문서를 사용자의 호스트로 가져와서 보여주는 역할을 한다. 이 때 호스트간의 연결작업과 데이타 전송 등에 사용되는 프로토콜이 HTTP(HyperText Transfer Protocol)이다. 브라우저는 HTTP 클라이언트(Client)라 하며, 브라우저로부터 요청을 받아 요청된 문서를 반환시켜주는 역할을 하는 것을 HTTP 서버(Server)라 한다. 일반적인 서버의 역할은 다음과 같다.

Berkeley socket을 이용하여 웹 브라우저로부터의 요청을 기다린다. 이 때 사용하는 포트번호는 일반적으로 80번이며, 웹 브라우저역시 80번 포트을 통하여 서버에게 서비스 요청을 한다.
서버는 요청을 받은 후 요청된 문서를 찾는다.
문서를 찾았으면, HTTP response headers와 함께 문서의 내용을 클라이언트에게 보내준다. 문서를 찾지 못한 경우에는 대신 에러 메시지를 보낸다.

웹 서비스 이용을 위해서 반드시 웹 서버를 설치해야 하는 것은 아니다. 웹 서버는 자신이 만든 웹 페이지를 인터넷 상에 공개하고자 할 때 필요하며, 모든 사용자가 각자 다 설치할 필요는 없이 하나의 호스트에 하나의 서버만 있으면 된다. UNIX 용으로 많이 사용되는 서버로는 NCSA 서버, Apache, CERN 서버, Netscape 서버가 있으며, Winodws 95와 WIndows NT 용으로는 Website가 있다.

1.2 어디에 홈페이지를 만드는가?

웹 브라우저를 통해서 다른 호스트내에 있는 모든 문서를 접근할 수 있는 것은 아니다. 웹 서버를 설치할 때 외부에서 접근 가능한 디렉토리를 지정해주게 되는데, 이 디렉토리에 있는 파일들만이 내용 확인과 자료 다운이 가능하다. 일반적으로는 디렉토리 명을 public_html, PublicHTML과 같이 지정하는데, 각 사용자들은 홈디렉토리에 서브 디렉토리로 지정된 이름의 디렉토리를 만든 후 그 안에 공개하고자 하는 문서들을 작성해 놓으면 된다. 이 디렉토리 명은 서버 설치자가 임의로 지정하게 되어 있으므로 호스트 운영자에게 문의하는 것이 좋다. 또한 이 기본 디렉토리 내에서 디렉토리명만 지정했을 때 기본적으로 보여주는 파일명도 미리 지정되어 있다. 주로 Homepage.html, index.html 등의 파일명이 많이 사용된다. 이 파일명 역시 운영자에게 문의하면 알 수 있다.

2. HTML(HyperText Markup Language)

2.1 HTML이란?

HTML(HyperText Markup Language) 문서는 ASCII 파일이라고도 하는 일반 텍스트 파일로 Unix상에서의 Emacs나 vi 에디터, 윈도우즈 95에서의 문서편집기와 같은 텍스트 에디터를 이용하여 작성할 수 있다. 그 외로 HTML 에디터나 워드프로세스 소프트웨어를 이용하는 것도 가능하다.

HTML 문서의 특징은 다음과 같다.

마크업 태그(Markup Tag)사용
HTML 문서에서는 head, table과 같은 문서의 구성요소 및 문자의 특성을 정의하기 위해 영문으로 된 마크업 태그(Markup tag)를 사용한다. 이것은 마크업 언어의 기본 특징이다. 태그의 형식은 다음과 같으며, 일반적으로 시작태그와 마감태그의 쌍을 이룬다. 마감태그는 시작태그의 태그이름앞에 '/'를 붙여주면 된다.
- <태그이름> 내용 </태그이름>
  예 ) <TITLE>...</TITLE>
- <태그이름 속성이름 = 값> 내용 </태그이름>
  예 ) <FONT SIZE=3> ... <FONT>
- <태그이름>
  예 ) <BR>
웹 브라우저마다 지원하는 태그의 종류에 조금씩의 차이가 있다. 그러므로 임의의 브라우저가 태그를 인식하지 못하는 경우가 있는데, 이럴 때는 태그를 무시해버린다. 태그 사용시에 주의해야 할 사항이 두 가지 있다.
1. '<'와 '태그이름' 사이에 빈칸이 들어가서는 안 된다. 빈칸이 들어가면 이를 태그로 인식하지 못한다.
2. 태그의 중첩사용시 시작태그와 마감태그의 대응을 잘 맞추어야 한다. 다음의 예와 같이 태그를 중첩하여 사용할 경우에는 시작태그와 마감태그의 순서를 잘 지켜준다.
  
  바른 사용법 틀린 사용법
HTML 태그는 영문 대소문자의 구별이 없다.
<TITLE>, <title>, <Title>는 모두 같은 태그로 인식한다. 물론 예외로 사용되는 태그도 있다.
빈칸과 줄바꿈을 인식하지 못한다.
문서내의 둘이상의 빈칸이나 줄바꿈을 인식하지 못한다. 그러므로 줄바꿈이나 문단나누기를 실행하고자 할 때는 줄바꾸기 태그와 문단나누기 태그를 사용한다.
HTML 문서는 인터넷에서 사용하기 좋다.
텍스트로 작성되어 있으므로 문서의 크기가 작고, 인터넷상에서 빠르게 전송된다. 또한 사용하는 컴퓨터의 기종에 상관없이 어느 컴퓨터에서 작성한 문서라도 HTML을 번역하는 웹브라우저만 있으면 사용할 수 있다. 이 항목은 HTML의 장점이기도 하다.
HTML 문서는 확장명이 '.html' 또는 '.htm'인 텍스트 문서이다.

2.2 HTML문서의 기본 구조

HTML 문서는 [표 1]에서 보는 것처럼 <html>, <head>, <title>, <body> 태그로 이루어진 기본적인 구조를 갖는다.

표 1: HTML 문서의 기본 구조

[표 1]의 문서를 웹브라우저로 보면 [그림 1]과 같이 보인다.

그림 1: [표 1]을 웹 브라우저로 본 결과

2.2.1 `<HTML> ... </HTML>`

<HTML> ... </HTML> 태그는 현재의 문서가 HTML 문서임을 나타내는 동시에 HTML 문서의 시작을 나타낸다. 모든 HTML 문서의 내용은 이 사이에 들어간다.

2.2.2 `<HEAD> ... </HEAD>`

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

<TITLE> ... </TITLE>: 문서의 제목을 지정하는 태그이다. 지정된 제목은 웹 브라우저의 문서내용 영역에 보이지 않고 일반적으로 웹브라우저 상단의 타이틀바(title bar)에 표시되어 다른 창과의 구분에도 이용된다. 그 외에도 웹브라우저에서의 history 리스트, hotlist나 북마크에서 사용되어 문서를 구별해주는 역할을 하므로 간결하면서도 내용을 잘 나타낼 수 있도록 써주는 것이 좋다.
<BASE HREF="URL">: HTML 파일이 저장되어 있는 위치를 나타내며 HEAD 태그 안에서만 사용할 수 있다. HTML 문서 안에 있는 모든 URL은 이 BASE태그에서 지정된 URL로부터 상대적인 경로를 가지게 된다. 본 태그는 다음과 같이 사용된다.
<LINK REL="..." TYPE="..." HREF="URL" TITLE="...">: 문서와 다른 오브젝트간의 관계를 나타내는데 사용된다. 속성에는 REL, TYPE, HREF, TITLE 등이 있다. 마감태그 없이 사용가능하며, 대부분 저장에 대한 내용이나 관련된 용어집 다른 버전 문서를 나타낸다. 다음의 예는 LINK태그를 이용해서 외부 Style Sheet를 지정한 것으로 REL은 본 문서와의 관계를 나타낸다. 결국 지정된 문서는 현재 문서의 Style Sheet라는 것을 의미한다. TYPE은 문서의 MIME 형태를 지정한 것으로 아래의 예에서는 Style Sheet를 말한다. HREF는 지정된 문서의 URL을 지정하고 TITLE은 Style Sheet의 이름을 나타낸다.
<META NAME="..." CONTENT="...">: HTML문서 안에서 이 문서에 대한 정보를 나타내는 데 사용되며 여기에서 정의된 정보는 브라우저와 서버 등에서 사용된다. 아래의 예에서 살펴보면, NAME은 메타 정보의 이름을 나타내며, CONTENT는 실제로 메타 정보를 지정하는 부분이다.

2.2.3 `<BODY> ... </BODY>`

HTML 문서의 전체 구성중 두번째 부분으로 실제로 문서의 내용이 포함된다. 이 부분에 포함된 내용들은 웹 브라우저의 문서내용 영역에 보인다. 앞으로 설명되는 태그들은 모두 <BODY> ... </BODY>내에서 사용될 수 있다.

2.3 문단 관련 태그

앞서 기술한 바와 같이 HTML 문서에서는 줄바꿈과 하나 이상의 공란이 연속될 경우 이것을 인식하지 못하므로 다음과 같은 태그들를 이용한다.

2.3.1 `<P> ... </P>`

줄바꾸기를 실행시켜주는 태그이다. <P>가 있는 위치가 새로운 문단의 시작 위치이며, </P>가 나올 때까지를 하나의 문단으로 처리한다. [표 2]와 같이 <P> 태그를 사용하였을 경우 결과는 [표 3]과 같다.

표 2: `<P>`태그의 예

표 3: [표 2]의 실행 결과
이것은 줄바꾸기를 실행시켜주는 태그이다. 바로 여기처럼!.

<P> ... </P>에서 </P>는 생략 가능하며, ALIGN 속성을 사용하여 정열방식을 지정할 수 있다. 속성값으로는 CENTER, RIGHT, LEFT가 사용되며 사용법은 다음과 같다.

표 4: ALIGN 속성값에 따른 문단 정열
<P ALIGN=LEFT\|CENTER\|RIGHT> 문단 </P>
LEFT	왼쪽 정열한 문단 예입니다.
CENTER	가운데 정열한 문단 예입니다.
RIGHT	오른쪽 정열한 문단 예입니다.

2.3.2 `<PRE> ... </PRE>`

"Preformatted"의 약자로 타이프라이트체로 보여준다. 본 태그의 특징은 공백과 빈줄, 탭을 인식하여 문서를 있는 그대로 보여주며, 내부의 태그들을 그대로 인식한다는 것이다. 즉, 내부에 다른 태그가 있다면, 그 태그의 영향을 받게 된다. WIDTH라는 속성을 이용하여 한 라인의 최대 문자수를 지정할 수도 있다. 본 태그는 프로그램 소스 내용을 보여줄 때 유용하게 사용할 수 있다.

<pre> #include <stiod.h> main() { printf ("hello, world\n"); } </pre>

위의 예는 다음과 같은 결과를 보여준다.

#include 

main()
{ 
printf ("hello, world\n");
}

2.3.3 `<LISTING> .. </LISTING>`

<PRE>태그와 마찬가지로 탭과 줄바꿈은 그대로 인식한다. 그러나 내부의 태그들을 무시하고 글자를 작게 보여준다는 차이점이 있다. 그러나 넷스케이프에서는 내부 태그들을 인식한다.

2.3.4 `<XMP> .. </XMP>`;

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

2.3.5 `<BLOCKQUOTE> ... </BLOCKQUOTE>`

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

2.3.6 `<CENTER> ... </CENTER>`

본 태그는 전체 문장을 가운데 정열해주며, 문단내의 공백과 줄바꿈은 무시한다.

2.3.7 `<DIV> ... </DIV>`

P태그와 비슷하나 나누어진 부분의 줄 가격이 보다 좁다. 사용되는 속성으로는 배열 방식을 지정하는 ALIGN이 있으며 값으로는 LEFT, RIGHT, CENTER를 사용한다.

앞서서 설명한 <PRE>, <LISTING>, <XMP>, <BLOCKQUOTE>, <CENTER>, <DIV> 태그들을 비교한 표가 [표 5]에 있다.

표 5: 문단 태그들의 사용 비교
사용 예	결 과
	물 한 모금 마시고 하늘을 보자 내 눈에 먼지들이 씻어지리니 무명옷 갈아입고 들길을 걷자
	물 한 모금 마시고 하늘을 보자 내 눈에 먼지들이 씻어지리니 무명옷 갈아입고 들길을 걷자

	물 한 모금 마시고 하늘을 보자 내 눈에 먼지들이 씻어지리니 무명옷 갈아입고 들길을 걷자
	물 한 모금 마시고 하늘을 보자 내 눈에 먼지들이 씻어지리니 무명옷 갈아입고 들길을 걷자
	물 한 모금 마시고 하늘을 보자 내 눈에 먼지들이 씻어지리니 무명옷 갈아입고 들길을 걷자

2.3.8 `<ADDRESS> ... </ADDRESS>`

본 태그는 일반적으로 문서의 저자, 저자의 연락처, 문서의 마지막 수정일 등을 기술하는데 사용되며, 문서의 마지막에 쓰인다.

<ADDRESS> E-mail : eakim@comeng.chungnam.ac.kr<BR> Last-Modified : Saturday, 3-May-97 23:11:17 KDT </ADDRESS>

위의 예는 다음과 같은 결과를 보여준다.

E-mail : eakim@comeng.chungnam.ac.kr
Last-Modified : Saturday, 3-May-97 23:11:17 KDT

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

2.3.9 `<BR>`

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

대전직할지 유성구 궁동 220 <BR> 충남대학교 컴퓨터공학과 <BR> 김 은 아

대전직할지 유성구 궁동 220
충남대학교 컴퓨터공학과
김 은 아

2.3.10 ``

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

2.3.11 Horizontal Rules

<HR> 태그를 이용하여 브라우저 윈도의 폭길이 만큼 가로선을 그을 수 있다. 이것은 보통 문서를 구분할 때 사용되며, 일반적으로 본문과 <address> 정보의 구분에 가장 많이 사용된다. SIZE와 WIDTH 속성을 이용하여 각각 선의 길이 및 두께를 지정할 수 있다. 값으로는 픽셀단위값을 사용하나 WIDTH의 경우에는 백분율을 이용하여 길이를 지정할 수 있다. 또 다른 속성으로는 ALIGN이 있는데 RIGHT, CENTER, LEFT값을 이용해서 선을 수평정열시킬 수 있다. 기본값은 CENTER이다. 선의 모양은 그림자가 있는 입체형으로 보이는데 NOSHADE 속성을 지정해주면 그림자가 없이 검은 선으로 보인다.

[ 예 ]
[ 결과 ]
[ 예 ]
[ 결과 ]

그 외로 문단관련해서 Netscape에서 지원하는 태그가 있다.

표 6: Netscape에서 지원하는 문단관련 태그
태 그	기 능	지원 버전
`<MULTICOL COLS=n> ...<MULTICOL>`	n의 값에 따라서 다단 문단 작성을 가능하게 한다.	Netscpae 3.0b
`<NOBR> ... </NOBR>`	라인의 줄바꿈을 막는다. 만일 이 범위안에서 줄 바꿈을 강제로 지정하고 싶다면, `<WBR>`를 사용한다.	Netscpae 1.0

2.4 문자관련 태그

2.4.1 Headings

HTML문서에는 여섯 단계의 헤딩을 정의할 수 있다. 1부터 6까지의 레벨이 사용되며 헤딩 문자는 다른 글자에 비해 크고 굵게 쓰여진다. 1이 가장 큰 크기로 사용되며 사용법과 크기는 [표 7]과 같다. 헤딩을 사용할 때는 레벨 순서대로 사용하는 것이 좋다. 예를 들어서 <H1>이 사용된 다음에는 <H2>를 사용하라는 것이다.

표 7: Heading 태그의 사용 예
사용법	결과
`<H1>`H1 태그 사용`<H1>`	H1 태그 사용
`<H2>`H2 태그 사용`<H2>`	H2 태그 사용
`<H3>`H3 태그 사용`<H3>`	H3 태그 사용
`<H4>`H4 태그 사용`<H4>`	H4 태그 사용
`<H5>`H5 태그 사용`<H5>`	H5 태그 사용
`<H6>`H6 태그 사용`<H6>`	H6 태그 사용

2.4.2 글자모양

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> ... </B> 볼드체 볼드체 글자

<I> ... </I> 이텔릭체 이텔릭체 글자

<TT> ... </TT> 타자체 타자체 글자

<BIG> ... </BIG> 큰 글자 큰 글자

<SMALL> ... </SMALL> 작은 글자 작은 글자

<BLINK> ... </BLINK> 깜빡이는 글자 깜빡이는 글자 (넷스케이프에서만 가능)

<SUB> ... </SUB> 아랫첨자 log₂ = 0.142

<SUP> ... </SUP> 윗첨자 2³ = 8

<U> ... </U> 밑줄 글씨 밑줄 글자

2.4.3 특수문자

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

`<`	<	`>`	>
`&`	&	`"`	"

이 중에서 '"'는 '"' 그대로 사용해도 된다. 그 외 추가적인 특수문자의 예가 [표 8]에 있다. 다른 HTML 태그와 달리 특수문자를 위한 태그는 모두 소문자임을 주의하자.

표 기	결 과	표 기	결 과
`ö`	ö	`ñ`	ñ
`È`	È	`®`	®
`©`	©	` `	Non-breaking space

표 8: 특수문자 표기법

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

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

2.4.4. 글자 크기

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

FONT를 이용하면 </FONT>가 나오기 이전까지 사이에 있는 모든 글자들의 크기와 색을 조절할 수 있다. 사용되는 속성은 SIZE와 COLOR가 있다. 크기 지정에 사용되는 값은 1부터 7까지이며, 특정 크기를 지정하거나 +, -로 기본 크기에 대한 상대 크기를 지정할 수 있다. 글자 크기의 기본 값은 3이다. BASEFONT는 전체 문서에 대한 기본 폰트를 나타내고, <FONT>는 특정 크기를 지정할 때 사용한다.

다음의 예에서 기본 글자 크기는 6폰트이나 FONT태그를 이용하여 글자크기를 바꾸었고 'FONT'와 'size'라는 단어는 색지정에 따라 각각 붉은 색과 녹색으로 보인다. 색지정 방법은 두 가지가 있다. 색 지정에 관한 사항은 2.7.4장을 참조하기 바란다.

예)
결과)	Change FONT size using HTML tags.

2.5 리스트

HTML 문서에서는 무순서리스트, 순서리스트, 정의리스트를 제공하고 있다. 물론 중첩 리스트의 사용도 가능하다.

2.5.1 순서 리스트

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

아래의 예에서 왼쪽과 같이 순서리스트 태그를 이용히여 각 항목들을 나열하면 오른쪽과 같은 결과가 나온다.

<OL> <LI> apples <LI> bananas <LI> graphfruit </OL>

apples
bananas
graphfruit

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

<OL TYPE=A START=3> <LI> apples <LI> bananas <LI> graphfruit </OL>

apples
bananas
graphfruit

TYPE의 종류는 [표 9]과 같다.

표 9: 순서리스트의 TYPE값
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>과 같이 원하는 번호를 지정해주면 된다. 그러면 그 다음 항목은 지정된 값부터 증가한다.

<OL TYPE=I> <LI> apples <br> ..... <LI VALUE=3> bananas <LI> graphfruit </OL>

apples
.....
bananas
graphfruit

순서리스트에서는 중첩리스트의 사용도 가능하며, 하나의 항목도 여러 <P> 구문을 포함할 수 있다.

2.5.2 무순서 리스트

무순서 리스트는 각 항목 나열에 순서를 지정하지 않은 리스트로, <OL>가 <UL>로 바뀌었다는 것을 제외하면 순서 리스트와 형식은 같다.

<UL> <LI> apples <LI> bananas <LI> graphfruit </UL>

apples
bananas
graphfruit

항목 구분 도형또한 재정의할 수 있다. 재정의하는 방법은 다음과 같이 OL또는 LI에 TYPE을 지정하는 것이다.

TYPE=DISC
TYPE=CIRCLE
TYPE=SQUARE

2.5.3 정의 리스트

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

<DL> <DT>HTML <DD>HyperText Markup Language - HTML is an SGML DTD. In practical terms, HTML is a collection of platform- independent styles that dfine the various components of a World Wide Web document. <DT>SGML <DD>Standard Gneralized Markup Language </DL>

HTML: HyperText Markup Language - HTML is an SGML DTD. In practical terms, HTML is a collection of platform-independent styles that dfine the various components of a World Wide Web document.
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 </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

2.5.4 디렉토리 리스트

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

A-Z

a-z

2.5.5 메뉴 리스트

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

첫번째 메뉴는...

두번째 메뉴는...

2.5.6 중첩된 리스트만들기

앞서서 설명한 리스트들은 중첩하여 사용할 수 있다. 이 때는 반드시 주의해서 시작태그와 대응하여 마감태그를 빠뜨리지 않고 써 주어야 한다.

<UL> <LI> 웹코리아 지역모임 <UL> <LI> 서울모임 <LI> 대전모임 <LI> 부산모임 <LI> 대구모임 </UL> <LI> 워크샵 <OL> <LI> 제 1회 : 대전 충남대학교<br> ...... <LI VALUE=5> 제 5회 : 대구 경북대학교 </OL> </UL>

웹코리아 지역모임
- 서울모임
- 대전모임
- 부산모임
- 대구모임
워크샵
1. 제 1회 : 대전 충남대학교
  ......
2. 제 5회 : 대구 경북대학교

2.6 링크만들기

2.6.1 앵커 정의

HTML문서의 가장 큰 장점은 다른 문단, 단어, 그림들을 다른 문서나 그림으로 연결할 수 있다는 것이다. 브라우저에서보면 문서중에서 색, 밑줄등을 이용하여 다른 단어, 구와 구분해 놓은 것이 있는데, 이것을 하이퍼링크 또는 링크라고 한다. HTML에서 이런 링크를 만들어주는 태그로 <A>가 사용되는데 이를 앵커라 한다. 앵커는 다음과 같이 구성된다.

<A HREF="URL"> 내용 </A> <A HREF="bluebird.html">Bluebird</A>

HREF="URL"에는 링크될 내용이나 그림, 그 외의 파일들이 지정되는 부분으로 링크될 파일이름과 경로등을 써준다. 위의 예에서는 Bluebird라는 단어를 클릭하면 이에 지정된 bluebird.html 문서를 보여주게 된다.

링크를 만들 때 동일 문서 또는 다른 문서의 제일 윗 부분이 아니라 특정부분으로 링크할 수도 있는데, 이 때 사용되는 것이 'named anchor'이다. 이때는 해당 링크를 선택했을 경우 전체 문서의 제일 윗부분이 브라우저에 보이는 것이 아니라 문서의 지정된 부분이 브라우저의 첫 화면에 보인다. 이렇게 문서의 특정부분으로 링크를 하고자 할 때는 '#'기호를 이용하여 키워드를 지정해주고 링크될 문서내에서도 이 키워드를 이용하여 구분해준다.

file1 : <A HREF="file2#key_word"> text1 </A> file2 : <A NAME="key_word">text2</A>

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

Home.html: <A HREF="html.html#hyperlink">하이퍼링크</A> html.html: <A NAME="hyperlink">HyperLink</A>

동일 문서내에서의 특정위치를 지정할 때는 문서의 위치와 문서명을 생략할 수 있다. 이런 named anchor는 긴 문서에서 목차를 만들 때 유용하다. 원하는 부분을 찾아서 문서 전체를 살펴볼 필요없이, 목차를 클릭하면 바로 원하는 문서의 위치로 이동하게 해 놓을 수 있기 때문이다.

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

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

다른 호스트 또는 다른 디렉토리에 있는 문서를 지정할 때, 문서의 위치를 절대경로 또는 상대경로로 지정할 수 있다. 경로를 지정하는 방법은 UNIX에서 경로를 지정하는 구문과 같다.

상대경로 지정은 현재 문서의 위치 또는 BASE 태그에서 지정되어 있는 파일의 위치를 기준으로 하여 링크될 문서를 지정하는 방법이다. 상대경로는 절대경로에 비해서 보다 적은 글자의 사용과 서버로의 효과적인 연결, 문서 그룹을 다른 곳으로 옮길 때 유용하다는 장점이 있으나 직접 관련되지 않은 문서를 링크할 때는 절대경로를 지정해주는 것이 좋다.

다음은 절대경로와 상대경로 지정의 예이다.

/ | / \ Home.html Mydoc \ html.html

절대경로 지정의 예 :

상대경로 지정의 예 (html.html에서 Home.html을 지정할 때) :

<A HREF="../Home.html">My Homepage</A>

2.6.3 URLs 지정

WWW에서는 URL(Uniform Resource Locators)을 이용해서 다른 서버에 있는 문서의 위치를 지정할 수 있다. 구문은 다음과 같다.

scheme://host.domain[:port]/path/filename

scheme은 [표 10]과 같이 접근시 사용할 프로토콜을 지정하며, host.doman에는 접속할 서버의 주소를 기입한다. port는 일반적으로 생략가능하다.

표 10: URL에 지정가능한 프로토콜
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.www-kr.org/
Mail 보내기	mailto:eakim@www-kr.org

이 중에서 mailto:는 유용하게 사용할 수 있는 것으로 문서상에서 저자의 연락처나 문서 내용의 문의처를 소개하는 부분에 많이 사용된다. mailto:가 지정된 링크를 선택하게 되면, 메일을 작성해서 보낼 수 있는 윈도가 하나 생성된다.

2.7 이미지 삽입하기

대부분의 웹브라우저에서는 X Bitmap(XBM), GIF, JPEG형식의 이미지들을 텍스트와 같이 in-line 이미지로 보여준다. 문서에 이미지를 삽입하는 방법은 다음과 같다. <IMG라는 태그로 시작하고 SRC에 파일의 위치를 포함한 이름을 지정하는 것이다.

웹 브라우저에서 문서내의 이미지들을 보여주기 위해서는 처리시간이 필요하다. 그러므로 이미지를 삽입할 때는 크기와 소요시간을 잘 고려해야 한다.

2.7.1 이미지 크기 지정하기

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

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

[ 예 ]

<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]과 같다.

그림 2: 이미지를 이용한 그래프 작성 예

BORDER와 VSPACE, HSPACE 속성을 이용하여 이미지를 둘러싸고 있는 경계의 폭과 이미지와 텍스트의 수평, 상하의 간격도 지정할 수 있다.

2.7.2 이미지 정열하기

ALIGN이라는 속성을 이용하여 이미지의 위치를 정열할 수 있다.

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

ALIGN=TOP

ALIGN=CENTER

ALIGN=BOTTOM

다음으로 ALIGN=RIGHT와 ALIGN=LEFT인 경우는 각각 현재문단에서의 이지미의 위치와 같다. 이미지 위치, 이미지와 텍스트 사이의 위치, 그리고 다음 문단과의 위치도 눈여겨 보자. 예의 결과를 보면, LEFT와 RIGHT는 웹 페이지에 대한 정렬이며, 나머지는 현재 이미지와 같은 라인에 있는 다른 문자들과의 정열이다. 이 중에서 기본 값은 ALIGN=BOTTOM이다.

문단 정열에 사용되었던 <P>태그를 이용한 이미지 정열도 가능하다.

2.7.3 이미지 제목 넣기

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

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

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

2.7.4 백그라운드 이미지와 색 지정하기

백그라운드로 이미지를 띄우거나 색을 지정할 수 있다. 이 때 사용되는 태그는 HTML 문서의 문서 내용이 포함되는 <BODY>로 BACKGROUD와 BGCOLOR 등의 속성을 사용한다.

이미지를 로딩하여 화면의 백그라운드로 사용할 때는 다음과 같이 BACKGROUD에 사용할 이미지를 지정해준다.

이렇게 지정해주면 background.gif 파일이 브라우저의 바탕이미지로 보인다. 이미지 파일이 작은 경우에는 브라우저의 면적을 가득채울 때까지 반복 출력된다. 이런 특징을 이용하여 두 가지의 색으로 이루어진 선을 바탕 이미지로 이용하면, 화면 전체를 마치 두 개의 화면으로 구분하여 놓은 것처럼 꾸밀 수 있다. 백그라운드 이미지는 되도록이면 작은 것을 이용하는 것이 좋다.

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

아래의 예는 배경색을 검은색으로 지정하고, 글자색은 흰색, link의 색은 회색, active link의 색은 붉은 색으로 지정한 것이다. visited link의 색은 기본값으로 지정된 색으로 보인다. 일반적으로 기본값으로는 회색바탕의 검은 글씨, 파란색의 링크색, 빨간색의 alink, 보라색의 vlink이다.

색 지정에 대한 예는 [표 11]와 같다.

표 11: 색 코드표
색	표시값	색	표시값	색	표시값
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.7.5 그 외의 이미지 사용

이미지가 이미지맵에 의해 링크되어 있는 경우에는 ISMAP이라는 속성을 이용한다. 이 속성을 이용하면 이미지위에서는 마우스의 커서도 이 이미지가 링크되어 있음을 나타낸다. 이미지맵에 관련된 내용은 3.1장을 참고하기 바란다.

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

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

사운드나 에니메이션도 위와 마찬가지의 방법으로 지정할 수 있다. 이 때는 파일의 확장명을 유의해서 사용하여야 한다. 각 파일별로 확장명은 다음과 같다.

표 12: 파일 종류에 따른 확장명
파일 형태	확장명	파일 형태	확장명	파일 형태	확장명
일반 텍스트	.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

2.8 표 만들기

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

표 13: 표에서 사용되는 태그
태 그	사 용 범 위
`<TABLE>` ... `<TABLE>`	표 작성을 나타내는 태그이다.
`<CAPTION>` ... `<CAPTION>`	표 제목을 나타내는 태그이다. 기본위치는 표의 윗 부분이나 `ALIGN=BOTTOM` 속성을 이용하여 표의 아랫부분으로 위치시킬 수 있다. `CAOPTION`내에서는 모든 HTML 태그를 사용할 수 있으며, 이 안에서만 영향을 준다.
`<TR>` ... `<TR>`	표의 줄을 나타내는 태그이다. `ALIGN`과 `VALIGN`속성을 이용하여 셀내용의 좌우, 상하에서의 셀내의 위치를 지정할 수 있다. 각 속성값으로는 `ALIGN=LEFT\|CENTER\|RIGT>`, `VALIGN=TOP, MIDDLE, BOTTOM`을 사용할 수 있다.
`<TH>` ... `<TH>`	표의 셀중에서 제목을 적는 부분이다. 기본적으로 볼드체에 가운데 정열로 배열된다. 여기에 사용되는 속성은 뒤에서 설명하겠다.
`<TD>` ... `<TD>`	표의 자료 셀을 나타낸다. 기본적으로 왼쪽정열을 하며, 상하위치 정열은 가운데 정열이다. 여기에 사용되는 속성은 뒤에서 설명하겠다.

2.8.1 `<TABLE> ... </TABLE>`

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

표 14: `TABLE`에서 사용되는 속성
속 성	의 미
`BORDER` = n	테이블의 외부테두리 두께 지정
`CELLSPACING` = n	셀간의 간격 지정
`CELLPADDING` = n	셀 데이터와 벽의 간격 지정
`WIDTH` = n	테이블의 너비 지정
`HEIGHT` = n	테이블의 높이 지정
`BGCOLOR` = #rrggbb	테이블의 바탕색을 지정

BORDER는 값이 커질수록 표의 외부테두리가 두꺼워져서 입체감을 주며, CELLSPACING은 값이 커질수록 각 셀간의 선 두께가 두꺼워진다. CELLPADDING은 속성값이 커질수록 셀내의 데이터와 셀벽간의 간격이 커진다.

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

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

2.8.2 `<TR> ... </TR>`, `<TH> ... </TH>`, `<TD> ... </TD>`

표 15: `<TR>, <TH>, <TD>`에서 사용되는 속성
속 성	의 미
`WIDTH` = n	셀의 너비 지정
`HEIGHT` = n	셀의 높이 지정
`ALIGN` = LEFT, CENTER, RIGHT	하나의 셀 내부 문자 정열을 지정
`VALIGN` = TOP, MIDDLE, BOTTOM	셀의 세로 정열 사항
`COLSPAN` = n	하나의 셀로 합할 행의 수
`ROWSPAM` = n	하나의 셀로 합할 열의 수
`NOWRAP`	셀내부의 문장이 두줄로 나누어지지 않게 한다.
`BGCOLOR` = "#rrggbb"	셀의 배경 색 지정

TH와 TD의 속성값은 다른 셀의 속성과는 무관하게 지정할 수 있으며, TR에서 지정된 속성값은 해당 줄 전체에 영향을 준다.

<TABLE BORDER=1 CELLPADDING=3 WIDTH=400> <CAPTION ALIGN=BOTTOM>교 육 내 용 안 (1)</CAPTION> <TR BGCOLOR="#dddddd"> <TH COLSPAN=2 ROWSPAN=2>과 정 명 </TH> <TH ROWSPAN=2>교 육 내 용</TH> <TH COLSPAN=2>교육기간</TH> </TR> <TR BGCOLOR="#dddddd"> <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> </TABLE>

교 육 내 용 안 (1)
과 정 명		교 육 내 용	교육기간
과 정 명		교 육 내 용	일수	시간
인터넷	정보검색과정	인터넷 Overview, 정보검색 환경론, 검색엔진분석, 검색사례연구/실습	주2회 3시간씩 2개월과정	48
인터넷	일반과정	인터넷출발, 인터넷 환경응용, 정보검색	주2회 2시간씩 2개월과정	32

표작성 태그는 실제 표의 작성외에도 유용하게 사용할 수 있다. 첫번째 예로는 다단 문서의 제작이나 항목들의 정열을 들 수 있다. 이는 HTML이 줄바꿈이나 빈공란을 제대로 인식하지 못하기 때문에 정열효과를 낼 수 있는 하나의 방법이다. 물론 이때는 BORDER의 값을 0으로 지정하여 표의 선이 나타나지 않도록 해야 한다.

[ 다단 문서 작성 예 ]

CU-SeeMe에 대하여
CU-SeeMe(이하 CUSM)는 원래 미국코넬 대학에서 개발한 것이지만, 화이트 파인이라는 회사에서 소스를 라이센스해

Enhanced CU-SeeMe라는 제품을 상용화해 내놓았다. Enhanced CUSM은 컬러 이미지를 지원하는 등 몇가지 기능이 강화됐다. 이

제품의 베타 버전은 현재 http://www.cu- seeme.com 에서 다운로드 할 수 있으며, 정식제품은 온라인으로도 구입 가능 하다.

두 번째 예로는 TABLE 태그를 사용하여 내부에 하나의 이미지를 삽입함으로써 마치 사진 액자의 효과를 주는 방법이다. TABLE 은 TD태그 안에 충첩사용가능하므로 이를 이용하면 더욱 멋있는 액자 효과를 낼 수 있다.

세 번째 사용법으로는 이미지맵 효과이다. 링크되어 있는 여러개의 이미지들을 BORDER=0, CELLPADDING=0, CELLSAPCING=0의 속성값을 이용하여 바둑판식으로 나열하면 마치 이미맵을 사용하는 것과 같은 효과를 낼 수 있다.

3.Advanced HTML

3.1 이미지맵

이미지맵이라는 것은 하나의 이미지에 영역을 나누어 영역마다 링크를 만들어 두고서 선택된 영역에 링크된 문서를 보여주는 것을 말한다. 이미지맵의 처리방식에는 서버쪽에서 처리해주는 방식(Server-Side Imagemap)과 클라이언트쪽에서 처리해 주는 방식(Client-Side Imagemap)으로 나누어진다.

3.1.1 Server-Side Imagemap

이미지맵 처리를 위한 데이터(영역표시, 링크내용 등)가 서버쪽에 있어야 하며, 각 이미지마다 이 이미지맵 관련 데이터들을 기술한 파일을 지정해주어야 한다. 또한 <IMG SRC="URL" ISMAP>과 같이 ISMAP 속성이 사용된다. 이미지맵을 지정하는 방법은 다음과 같다.

이미지맵 파일을 만든다. 이미지맵 파일에는 선택할 이미지의 영역의 모양, 영역, 링크 URL 등이 기술된다. mapedit와 같은 이미지맵 툴등을 이용하는 것이 좋다.
이미지맵으로 사용할 이미지를 HTML 문서에 지정해준다. 이 때, ISMAP을 IMG 태그에 추가한다.
앵커를 이용하여 사용될 이미지맵 파일을 지정한다. 여기에서 주의해야 할 것은 일반 사용자들이 Server-Side 이미지맵을 정의하고자 할 때는 운영자에게 이를 알려서 이미지맵을 사용할 수 있도록 권한을 받아야 한다. 웹서버가 이미지맵관련 파일을 인식하려면, 이 파일들의 목록을 기입해 놓은 파일에 추가해주어야 하기 때문이다.

3.1.2 Client-Side Imagemap

Client-Side Imagemap은 netscape 2.0이상과 Microsoft Internet Explorer에서 지원된다. 이미지맵 데이타들은 이미지맵을 사용하는 HTML 문서내에 MAP이라는 태그를 이용하여 기술된다.

NAME: IMG에서 사용될 맵의 이름을 지정한다.
SHAPE: 영역의 모양을 지정하며, 사용가능한 형으로는 rect, poly, circle, default가 있다. 각각은 사각형, 다각형, 원, 그리고 지정된 영역 이외의 모든 영역을 나타낸다. 간혹 이미지맵을 살펴보면 영역이 지정되지 않은 부분을 마우스로 누를 경우 링크가 없다는 에러메시지가 나오곤 한다. 이런 경우를 위하여 링크를 설정하지 않은 부분들을 모두 default라고 지칭하여 처리해준다. 일반적으로 default는 NOHREF를 지정해 놓는다.
COORDS: NAME에서 지정된 영역 모양에 따라 영역의 좌표를 지정해준다. 좌표의 형식은 "left, top, right, bottom"의 순서로 기술된다.
NOHREF: 지정된 영역을 클릭하더라도 아무런 작동을 하지 않음을 나타낸다.

이렇게 지정된 이미지맵 정보를 이용하려면 다음과 같이 이미지에 USEMAP이라는 것을 지정해준다. USEMAP에 사용되는 'example'이라는 곳에는 <MAP NAME="...">에서 지정된 이름을 넣으면 된다. 이 때, '#'기호가 사용됨을 유의하자.

Client-Side Imagemap의 예가 다음에 있다. 왼쪽의 각 도형을 선택하면 각각에 링크된 문서들을 보여주거나 지정된 처리과정을 거치게 된다. 예에서 왼쪽위의 사각형을 마우스로 선택하면, "rectangle.html"을 보여주고, 제일 아래의 직사각형을 선택하면, "mailto:eakim@www-kr.org"를 실행하게 된다.

<IMG SRC="images/img_map.gif" usemap="#IMG_MAP"> <MAP NAME="IMG_MAP"> <AREA SHAPE="rect" COORDS="20,25,84,113" HREF="rectangle.html"> <AREA SHAPE="polygon" COORDS="90,25,162,26, 163,96,89,25,90,24" HREF="triangle.html"> <AREA SHAPE="circle" COORDS="130,114,29" HREF="circle.html"> <AREA SHAPE="rect" COORDS="19,156,170,211" HREF="mailto:eakim@www-kr.org"> <AREA SHAPE="default" NOHREF> </MAP> [imagemap 예]

그림 3: 이미지맵 예

3.1.3 두 방법의 동시지정

앞서서 설명한 두 가지의 방법을 한꺼번에 지정할 수도 있다. 그 방법은 다음과 같다.

3.2 입력창 만들기

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

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

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

그림 4: ISINDEX의 결과

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

3.3 폼(Form)

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

3.3.1 `<FORM> ... </FORM>`

폼의 시작과 끝을 나타낸다. 하나의 HTML 문서에서 여러개의 FORM태그가 사용될 수 있다. 여기에서 사용되는 속성으로는 ACTION과 METHOD가 있다.

ACTION="URL": 폼을 처리할 프로그램이 있는 위치를 지정한다. 즉 여기에 CGI 프로그램의 이름이 들어간다.
METHOD=data_exchange method: 클라이언트와 폼을 위해 수행될 프로그램 사이의 데이타 교환 방법을 지정한다. 방법으로는 GET과 POST이 있는데, 이 중에서 POST를 일반적으로 사용한다.

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

3.3.2 `<INPUT>`

사용자가 실제 데이타를 입력해야 하는 부분을 정의한다. 각 필드들에서 입력받은 값이 대입될 변수들은 NAME과 TYPE으로 나타낸다. 본 태그는 마감태그 없이 사용한다.

TYPE="textstring"

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

TYPE="PASSWORD", TYPE="TEXT" : 문자 데이타를 입력할 수 있다.
TYPE="TEXTAREA" : 문자 데이타를 입력할 수 있으며, 입력을 위한 여러줄의 창이 나타난다.
TYPE="CHECKBOX" : 선택할 것인지 여부를 나타내는 영역으로 선택되면, CGI에 on으로 나타난다.
TYPE="RADIO" : 원형의 체크박스가 나타난다.
TYPE="SUBMIT" : 입력된 정보를 서버로 전달하기 위한 버튼을 정의한다.
TYPE="RESET" : 입력된 값들을 기본값들로 되돌린다.
TYPE="HIDDEN" : 폼을 다 완성한 후 서버로 정보를 보낼 때 같이 전달되는 정보들로 화면으로는 보이지 않는 스크립트의 상태정보 등을 지정할 때 사용한다.
TYPE="IMAGE" : 폼내에 이미지맵을 정의하고, 이미지를 마우스로 클릭한 위치 정보가 전달된다. X축과 Y축 정보는 각각 변수명에 .x와 .y가 붙어서 전달된다.

NAME="textstring"

입력한 값을 저장하여 CGI프로그램으로 보낼 변수명을 지정하며, 폼내에서는 유일한 이름으로 지정되어야 한다.
<INPUT TYPE="checkbox" NAME="box1">

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

TYPE="text", TYPE="password", TYPE="textstring" : textstring이 기본값이다. "password"값의 경우에는 사용자의 폼에 보이지 않으며, 사용자가 입력을 하게 되면 기본값과 대치되어 서버에게 전달된다.
TYPE="checkbox", TYPE="radio" : 체크박스가 체크되었을 때만 textstring이 서버에게 전달된다.
TYPE="reset", TYPE="submit" : textstring이 "reset"과 "submit" 이 정의한 버튼의 라벨로 나타난다.

CHECKED

TYPE="checkbox", TYPE="radio"일 때, CHECKED이면, 기본값으로 선택된 상태가 된다.

SIZE=n

TYPE="text", TYPE="password"인 경우에 화면에 보일 입력 필드의 크기를 글자수로 나타낸다.

MAXLENGTH=n

TYPE="text", TYPE="password"인 경우에 입력받을 값의 최대 글자수를 지정한다.

<INPUT>을 사용한 예는 다음과 같다.

3.3.3 `<SELECT>. ... </SELECT>`

폼 내에서 사용자가 하나 이상의 항목을 선택하도록 선택 리스트를 정의하고 보여주는 태그이다. 이 태그는 리스트의 각 항목마다 <OPTION>이 필요하다.

NAME="textstring": SELECT 필드명으로 CGI에 전달될 때 CGI가 갖는 변수명을 나타낸다.
SIZE=n: <OPTION>의 수를 나타낸다.
MULTIPLE: 여러 개를 선택할 수 있도록 한다.

3.3.4 `<OPTION>`

선택 항목을 만드는데 사용된다. 속성으로는 SELECTED가 있는데 이것은 초기에 현재 항목이 선택된 상태로 보이게 하는 것이다.

<FORM METHOD=GET ACTION="http://bluebird.www-kr.org/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>

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


(a) 초기 화면	(b)마우스로 클릭한 상태 화면
그림 5: SELECT를 사용한 예

다음의 예를 보면 초기부터 기본값으로 바나나가 선택된 상태로 화면에 나타난다.

3.3.5 `<TEXTAREA> ... <TEXTAREA>`

폼 내에서 텍스트 데이터를 입력할 수 있도록 정의하는 태그로, 태그사이에 텍스트를 지정하면 이것이 기본값으로 보여진다.

NAME="textstring": 변수명을 지정한다.
ROWS=n, COLS=n: <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> Result eanking Criteria: </B> Documents containing these words will be listed first.<BR> <textarea name=r cols=68 rows=1></textarea> </CENTER> </FORM> [FORM :TEXTAREA이용 예]

3.4 프레임(frame)

3.4.1 프레임 문서?

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

각 프레임마다 독립적으로 새로운 URL을 표시한다.
프레임마다 이름을 지정할 수 있다. 이를 이용하면, 원하는 프레임으로 링크 결과를 보여줄 수 있다.
프레임 크기의 동적 조정이 가능하다.

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

3.4.2 `<FRAMESET> ... </FRAMESET>`

프레임의 시작과 끝을 나타낸다. 본 태그는 BODY대신 사용되며, 만일 BODY를 쓰게 되면 프레임 태그가 작동하지 않는다. 태그로 지정된 영역 내부에는 또 다른 FRAMESET, NOFRAMES, FRAME과 같은 태그를 사용할 수 있다. 또한 ROWS와 COLS 속성을 이용하여 프레임의 열과 행의 크기를 지정한다. 값의 단위는 픽셀수나 전체 브라우저 크기에 대한 퍼센트로 나타내며, 프레임 수만큼 ','로 구분하여 각각의 크기를 지정해주어야 한다.

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

BORDER를 이용하여 구역간의 경계선 두께를 지정할 수 있다. Netscape 3.0b에서부터는 BORDER의 유무와 색을 지정할 수 있다.

<FRAMESET FRAMEBORDER="yes|no"> <FRAMESET BORDERCOLOR="color

3.4.3 `<FRAME> ... </FRAME>`

본 태그는 실제로 프레임 안에 들어가는 정보를 나타낸다.

속성으로는 IMG에서처럼 프레임안에 들어갈 정보를 지정하는 SRC라는 것이 있고, 프레임의 이름을 지정하는 NAME이 있다. 이것은 다른 프레임에서의 결과가 지정한 프레임으로 나타나도록 할 때 사용된다. 프레임의 이름중에는 미리 정의된 것들이 있다.

_blank : 새로운 윈도를 열어서 결과를 나타낸다.
_self : 자신의 프레임에 결과를 나타낸다.
_parent : 부모 프레임이나 윈도에 결과를 나타낸다.
_top : 프레임은 사라지며, 현재의 전체 윈도에 결과를 표현한다.

MARGINEWIDTH는 프레임의 좌우 여백을 픽셀크기로 지정한다. 일반적으로 브라우져는 이 변수가 지정되지 않으면 자동으로 조정한다. MARGINEHEIGHT는 프레임의 상하의 여백을 지정한다. SCROLLING은 프레임에 스크롤바를 만들 것인지의 여부를 설정하는데 사용된다. yes는 항상 나타나게 하는 것이고 no는 나타나지 않게 한다. auto는 자동으로 브라우져가 결정하도록 한다. 기본값은 auto다. NORESIZE는 사용자가 브라우저에서 프레임의 크기를 조절할 수 없도록 하는 속성이다.

3.4.4 `<NOFRAME> ... </NOFRAME>`

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

3.4.5 `<TARGET> ... </TARGET>`

다른 프레임을 지정한다. 여기서 지정되는 이름은 NAME태그를 이용하여 지정된 프레임의 이름이다.

그림 5: FRAME 예

다음은 [그림 5]의 HTML 문서이다.

<HTML> <HEAD> <TITLE>Bbird's List</TITLE> </HEAD> <FRAMESET COLS="130, *" > <FRAME SRC="idx.html" NAME="index" NORESIZE> <FRAME SRC="content.html" NAME="content"> </FRAMESET> </HTML>

위의 idx.html문서의 내용중 프레임관련 내용을 보면 다음과 같다. 일반적인 링크방법과 같이 설정하나, TARGET이라는 것을 지정하여 위의 예에서 지정한 프레임의 이름을 넣어주는 것이다. 이렇게 하면, 지정된 프레임쪽으로 결과가 나타난다.

<A HREF="distributed.html" TARGET="content"> Distributed System</A>

3.5 동적인 문서 제작하기

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

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

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

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

4. HTML 문서 작성시 주의 사항

4.1 실수하기 쉬운 것

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

태그를 중첩하여 사용할 경우, 태그 영역을 겹쳐서 사용하지 않는다. 이런 경우에는 겹쳐있는 영역의 결과를 예측할 수 없다.
다른 태그에 중첩되어 사용할 수 있는 것은 앵커와 문자 특성 태그뿐이다. 즉, 다음과 같은 경우의 사용은 허용되지 않는다. 또한 다음과 같이 문자 특성 태그의 중첩도 사용하지 않는 것이 좋다.
오타
앵커를 지정할 때 <A HREF="....">에서 오른쪽의 "을 빼버린 경우 : 이 뒤의 문서 내용들이 화면에 보이지 않는다.
마감태그를 잊어버린 경우 : 뒤의 내용들도 태그의 영향을 받는다.
태그에서 오른쪽의 '>'을 빼버린 경우
태그를 써줄 때 <와 태그이름 사이에 빈칸이 들어간 경우 : 제대로 태그를 인식하지 못한다.

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

4.2 문서 작성시 고려 사항

어디든지 예절이 있듯이 홈페이지 제작에 있어서도 예절까지는 아니더라도 고려해야할 사항들이 있다. 이것은 본인을 위해서이기도 하지만, 정보 제공자가 된 이상 이 정보를 사용할 다른 이를 위한 것이기도 하다. 특히 서버 관리자나 웹 마스터일 경우라면 더욱 눈여겨 볼 사항이다.

4.2 문서 작성시 고려 사항

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

이런 사항들을 고려해볼 때, 문서의 크기는 대략 다음과 같이 정하는 것이 좋다.
- 온라인 도움서나 메뉴같이 다른 곳으로 링크가 필요한 문서일 경우에는 24줄 정도에서 적당하게 정하면 된다.
- 일반 텍스트 문서일 경우에는 A4크기로 5장이내 정도면 무난하다.
링크와 복사의 적절한 조화
웹 사이트들을 돌아다녀보면 자신의 관심분야나 다른 이들에게 알리고 싶은 사이트들을 홈페이지에 링크시켜 놓거나 아예 파일을 복사놓은 경우가 있다. 그렇다면 과연 어떤 것을 링크시키고 어떤 것을 파일을 전체 복사해 놓을 것인가? 뉴스 기사와 같이 내용이 변하기 쉬운 내용이나 버전 2.0이니 3.0이니 하는 식으로 내용이 수정되지만 전 단계 버전이 저장되지 않는 문서일 경우에는 원하는 특정 버전을 저장해 놓는 것이 좋다. 그에 반해서 인터넷 FAQ, RFC, 웹상의 특정 주제에 관한 사이트들의 URL등은 링크시켜 놓는 것이 더 바람직하다.
링크가 올바르게 되어 있나?
간혹 웹페이지들을 살펴보면 링크가 제대로 작동하지 않는 경우들이 있다. 이런 이런 일이 없도록 잘 살펴보아야 한다.
각각의 문서는 이렇게?
- 저자 표시하자
  어떤 문서이든지 마지막 부분에는 본인의 홈페이지로 연결되는 개인의 사인을 남기고, 홈페이지에는 메일 주소와 전화번호를 기입하자. 이를 통해서 문서에 대한 의견을 나눌 수 있는 연락처를 제시할 수 있고, 문서에 대한 저작권 표시 기능도 된다.
- 정보에 대한 상태를 표시해 놓는다.
  문서가 언제 처음으로 작성되어서 마지막으로 수정되었는지, 그리고 완성본인지 작업중인지와 같은 정보를 알려주는 것이 좋다. 또한 내용상의 오자는 없는지 다시 한 번 살펴보는 자세도 중요하다.
- 링크
  HTML 문서의 장점은 링크를 만들 수 있다는 것이다. 문서에서 처음으로 나오는 특수 용어의 정보 제공이나 큰 문서의 처음과 끝으로 이동, 목차 이동 등에 사용하면 좋다.
- 제목
  제목은 히스토리 리스트 내에서의 노드 구분, 윈도의 구분, 북마크에서의 노드 구분에 사용된다. 제목의 길이는 제한이 없지만, 응용 프로그램 중에는 제목 전체를 보여주지 못하는 경우가 있으므로 영문자로 64자를 넘지 않는 것이 좋다. 제목은 문서의 내용을 한눈에 알아볼 수 있도록 짧고도 명확하게 지정하는 것이 좋다. 예를 들어서 '서문'이라고 간단하게 쓰는 것보다는 'HTML Guide : 서문'이라고 쓰는 것이 내용을 보다 명확하게 알아볼 수 있어서 좋다.
- 일반적인 브라우저들을 고려하자.
  HTML 문서는 어떤 플랫폼에서라도 일관된 형식으로 볼 수 있다. 역설하면, 하나의 웹 페이지는 서로 다른 플랫폼과 서로 다른 웹 브라우저를 이용해서 볼 수 있다는 것이다. 그러므로 특정 환경에서만 유효한 태그를 고집하는 것은 좋지 않다.
프린트하기 좋게 배려를!
각 문서의 내용들이 여러 개의 파일로 내용별로 나누어져 있는 경우에 해당된다. 이런 경우에는 각 문서들을 따로 프린트해야 하는 번거로움이 있다. 그러므로 사용자들을 위해 프린트용으로 전체를 하나의 파일로 만들어 제공하는 것도 배려의 한 가지이다.
또 한가지 고려해야 할 것은 문서의 처음이나 끝에 문서의 URL을 적어주는 것이 좋다. 프린트를 했을 경우에 URL이 같이 프린트되지 않는 경우라면 따로 기록해 놓지 않으면 나중에 그 문서를 어디에서 찾았었는지 헤매는 경우가 있다. 그러므로 URL을 적어주는 것이 좋다.
충분한 테스트를!
문서 작성이 끝난 다음에는 충분한 테스트를 거치는 것이 좋다. 여러 가지 브라우저를 이용해서 문서를 살펴보자. 과연 브라우저에 관계없이 원하는 형태로 보여지는지. 태그들은 제대로 사용되었는지 살펴볼 수 있는 기회가 된다.
항상 관심을 가지고 보완을 하자!
계속 내용이 수정되어야 할 문서라면 이 작업은 필수다. 아무리 멋있고 좋은 내용으로 만들어 놓은 페이지라 하더라도 지속적인 수정 작업이 없다면 곧 쓸모없는 정보가 되어 버린다. 그러므로 지속적으로 관심을 가지고 수정작업을 해주는 것이 좋다.
문서에 주석을 달자!
HTML문서내에 주석을 다는 것은 중요하다. 이 주석문은 실제 브라우저상에서는 보이지 않으며, 소스를 살펴볼 때만 볼 수 있다. 문서를 수정한 사람의 이름, 파일 생성에 사용된 소프트웨어의 종류및 버전, 마지막 수정 일 등을 기입하는 것이 좋다.

5. 결론

본 문서에서는 HTML 2.0 버전을 바탕으로 하여 HTML 문서 작성에 필요한 태그들과 고려사항들을 살펴보았다. HTML 문서는 작성해본 경험이 많은 사람을 수록 좋은 문서를 만들 수 있으며, 다른 사람들의 문서를 유심히 관찰하는 것이 HTML 문서를 익히는 가장 좋은 방법이다.

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

참고문헌(References)

[NCSA 97]: NCSA, A Beginner's Guide to HTML, January, 1997
URL: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
[Kevin 96]: Kevin Werbach, The Bare Bones Guide to HTML, July 21, 1996
URL: http://werbach.com/barebones/barebone.html
[Michael 96]: Michael Grobe, The Quick Reference, August 19, 1996
URL: http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html
[Eric 1996]: CWRU & Eric A. Meyer, Introduction to HTML,
URL: http://www.cwru.edu/help/introHTML/
[Linda 1996]: Webmaster in a Nutshell - A Desktop Quick Referece, O'Relly, 1996
[Netscape 1997]: Netscape Communications Corporation, 1997,
URL: http://home.netscape.com/assist/net_sites/html_extensions_3.html
[Steve 1997]: Steve Rogers, Imagemap Help Page, 1997
URL: http://www.cepinnovations.com/basics/ihip/

Last-Modified : Monday, 5-May-97 15:02:22 KST

`<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.)

`<B> ... </B>`	볼드체	볼드체 글자
`<I> ... </I>`	이텔릭체	이텔릭체 글자
`<TT> ... </TT>`	타자체	`타자체` 글자
`<BIG> ... </BIG>`	큰 글자	큰 글자
`<SMALL> ... </SMALL>`	작은 글자	작은 글자
`<BLINK> ... </BLINK>`	깜빡이는 글자	깜빡이는 글자 (넷스케이프에서만 가능)
`<SUB> ... </SUB>`	아랫첨자	log₂ = 0.142
`<SUP> ... </SUP>`	윗첨자	2³ = 8
`<U> ... </U>`	밑줄 글씨	밑줄 글자

홈페이지 제작(1) - HTML문서 작성

2.2.1 <HTML> ... </HTML>

2.2.2 <HEAD> ... </HEAD>

2.2.3 <BODY> ... </BODY>

2.3 문단 관련 태그

2.3.1 <P> ... </P>

2.3.2 <PRE> ... </PRE>

2.3.3 <LISTING> .. </LISTING>

2.3.4 <XMP> .. </XMP>;

2.3.5 <BLOCKQUOTE> ... </BLOCKQUOTE>

2.3.6 <CENTER> ... </CENTER>

2.3.7 <DIV> ... </DIV>

2.3.8 <ADDRESS> ... </ADDRESS>

2.3.9 <BR>

2.3.10

2.3.11 Horizontal Rules

2.4.1 Headings

H1 태그 사용

H2 태그 사용

H3 태그 사용

H4 태그 사용

H5 태그 사용

H6 태그 사용

2.4.2 글자모양

2.4.3 특수문자

2.4.4. 글자 크기

2.5.1 순서 리스트

2.5.2 무순서 리스트

2.5.3 정의 리스트

2.5.4 디렉토리 리스트

2.5.5 메뉴 리스트

2.5.6 중첩된 리스트만들기

2.6.1 앵커 정의

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

2.6.3 URLs 지정

2.7.1 이미지 크기 지정하기

2.7.2 이미지 정열하기

2.7.3 이미지 제목 넣기

2.7.4 백그라운드 이미지와 색 지정하기

2.7.5 그 외의 이미지 사용

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

2.8.1 <TABLE> ... </TABLE>

2.8.2 <TR> ... </TR>, <TH> ... </TH>, <TD> ... </TD>

3.Advanced HTML

3.1 이미지맵

3.1.1 Server-Side Imagemap

3.1.2 Client-Side Imagemap

3.1.3 두 방법의 동시지정

3.2 입력창 만들기

3.3 폼(Form)

3.3.1 <FORM> ... </FORM>

3.3.2 <INPUT>

3.3.3 <SELECT>. ... </SELECT>

3.3.4 <OPTION>

3.3.5 <TEXTAREA> ... <TEXTAREA>

3.4.1 프레임 문서?

3.4.2 <FRAMESET> ... </FRAMESET>

3.4.3 <FRAME> ... </FRAME>

3.4.4 <NOFRAME> ... </NOFRAME>

3.4.5 <TARGET> ... </TARGET>

3.5 동적인 문서 제작하기

4. HTML 문서 작성시 주의 사항

4.2 문서 작성시 고려 사항

5. 결론

참고문헌(References)

2.2.1 `<HTML> ... </HTML>`

2.2.2 `<HEAD> ... </HEAD>`

2.2.3 `<BODY> ... </BODY>`

2.3.1 `<P> ... </P>`

2.3.2 `<PRE> ... </PRE>`

2.3.3 `<LISTING> .. </LISTING>`

2.3.4 `<XMP> .. </XMP>`;

2.3.5 `<BLOCKQUOTE> ... </BLOCKQUOTE>`

2.3.6 `<CENTER> ... </CENTER>`

2.3.7 `<DIV> ... </DIV>`

2.3.8 `<ADDRESS> ... </ADDRESS>`

2.3.9 `<BR>`

2.3.10 ``

2.8.1 `<TABLE> ... </TABLE>`

2.8.2 `<TR> ... </TR>`, `<TH> ... </TH>`, `<TD> ... </TD>`

3.3.1 `<FORM> ... </FORM>`

3.3.2 `<INPUT>`

3.3.3 `<SELECT>. ... </SELECT>`

3.3.4 `<OPTION>`

3.3.5 `<TEXTAREA> ... <TEXTAREA>`

3.4.2 `<FRAMESET> ... </FRAMESET>`

3.4.3 `<FRAME> ... </FRAME>`

3.4.4 `<NOFRAME> ... </NOFRAME>`

3.4.5 `<TARGET> ... </TARGET>`