HyperText Markup Language Version 3.0
최희창
삼성전자 멀티미디어 연구소 네트웍 그룹
E-mail:hcchoi@khgw.info.samsung.co.kr
URL:http://net.info.samsung.co.kr/~hcchoi/
Abstract
웹에서 사용되는 문서 포맷인 HTML은 그 구현의 쉬움으로 인해서 웹의 확장에 많은 역할을
해 왔다. 점차로 웹을 사용하는 사람들이 늘어나면서 웹의 문서 작성에 보다 많은 기능을 요구
하게 되었다. HTML3.0에서는 기존의 HTML2.0 규약에 명시된 기능 외에도 다양한 기능을
제공해서 실제 웹의 문서를 만드는데, 좀더 유연한 기능들을 제공한다. HTML3.0의 주요 기능인
테이블, 수학식의 표현, 스타일 시트 등에 대해서 알아보고 나아가 Java와 VRML과 같은 다른
인터넷 기술과의 연계 점을 살펴보기로 한다.
Keyword
HTML, SGML, Web, Authoring
1.서론
인터넷의 폭발적인 사용의 증가는 WWW이라는 새로운 정보 구조와 이를 쉽게 볼 수 있는 브라
우져의 대중적 보급에 힘입는 바가 크다. 아울러 WWW에서 정보 저작 도구
인 HTML(HyperText Markup Language)이라는 언어는 사용상의 편리함 및 간단한 구조로
인해서 웹 서비스의 구축에 중요한 역할을 해왔다. 바로 이러한 웹 상에서의 정보 저작 도구로
HTML의 기본 개념과, SGML(Standard General Markup Language)와의 관계를 살펴보고
현재 많이 사용하고 있는 HTML2.0에 비해서 HTML 3.0에서는 어떠한 점들이 추가되었는가를
구체적으로 살펴보기로 한다.마지막으로 간단하게 웹의 정보 저작이라는 측면에서 HTML 이외의
다른 사항들에 대한 가능성을 살펴보기로 한다.
1.1 HTML이란?
HTML이란 HyperText Markup Language의 약자로 여러 플랫폼에서 사용 가능한 하이퍼 텍스
트
문서를 만드는데 사용되어지는 간단한 마크업 시스템이다. 이는 1990년대부터 웹의 광범위한
사 용과 더불어서 많이 사용되어져 왔으며, 웹이란 문서 기반 구조에서 문서들을 기술하는데
사용되어지는 언어이다.
HTML은 국제 표준 ISO8879:1986 Standard Generalized Markup Language(SGML)의 응용
프로그램으로 정의되어져 있다. 흔히들 HTML을 SGML의 부분집합등으로 잘못알고 있는
경우가 많은데, HTML은 SGML의 하나의 응용프로그램(Application)이다. 즉, C나 C++과
같은 언어로 다양한 프로그램을 만드는데, 이렇게 만들어진 프로그램은 C나 C++의 응용
프로그램이지 부분집합은 아니다. 마찬가지로 SGML의 문법으로 작성되어진 HTML도
SGML의 응용 프로그램이다. 이 경우에는 응용프로그램이 기존의 프로그래밍 언어에서의
의미보다는 메모양식, 보고 양식등 문서의 타입을 응용프로그램이라고 생각하면 된다.
1.2 HTML3.0
현재 HTML의 버전은 1.0에서 2.0을 거쳐서 3.0이 확정하려는 작업 중에 있으며 HTML 2.0은
현재 HTML 워킹 그룹에서 최종 심의(Final Review)를 마친 상태이다. 참고로 HTML에 대한
표준은 IETF의 HTML 워킹그룹에서 이루어진다. HTML 3.0에 대한 초기 드래프트는 1995년
3월에 인터넷 드래프트의 형태로 만들어졌다. 주요 내용으로는 테이블과 사진(Figure), 수학식,
특정문서에 한한 도구 바와 배너 영역, 그리고 스타일 시트 등이 포함된다. 또한 현재
이 드래프트는 각 항목마다 조그마한 문서로 나뉘어져서 논의되어지고 있다.
- 테이블
- HTML 3.0이 만들어진고 난 다음부터 많은 양의 작업이 이루어졌고 현재 드래프트 테이
블 스펙은 W3C 멤버의 리뷰를 기다리고 있는 상태이다. 드래프트 스펙에서는 넷스케이프 1.1N과
완전한 호환성을 유지하며, 테이블의 경계선에 대한 부가적인 조정기능도 가지고 있다.
- HTML 문서에 삽입되는 그림(Figure)과 오브젝트
- 여기서는 FIG 태그와 IMG의 확정에 대해서 다룬다. 또한 액티브 오브젝트를 HTML 문
서내에 포함시키는 방법에 대해서도 다룬다.
- 양식
- 양식에 대한 확장과 더불어 스크립트 언어를 연결하는 표준적인 방법에 대해서 다룬다.
초기의 HTML 3.0에 비해서 확장된 점은 필드라벨과 관련된 필드를 하나의 프레임으로 그룹핑하
는 것과 네스티드 양식과 새로운 데이터베이스 레코드 입력 방법이다.
- 도구 바, 배너 그리고 부가적인 윈도우
- 문서에 특정한 도구 바와 스크롤 되지 않는 고정된 배너 영역 등을 다루며, 아울러 여러
개
의 문서 윈도우에 대한 관계를 지정하는 방법을 논의한다.
- 수학식
- HTML 3.0의 수학식 표현방법에 대해서 자세히 검토한다. 이는 LaTex과 Tex와 밀접하
게 연관되어져 있으며 그래픽칼 표시이외에도 말로 표현할 수 있게끔 검토되어진다.
1.3 HTML3.0 디자인 가이드 라인
HTML3.0의 스펙은 다음과 같은 가이드라인에 따라서 쓰여졌다.
- 웹의 혼성 외국어(Lingua Franca)
- HTML은 다양한 소스의 정보들을 일반적인 미디어로 한데 묶으려는 수단이다. 이는 기존
문서 포맷의 제약을 뛰어넘을 수 있는 수단이며, 개별적인 정보 시스템에 대한 오픈 인터페이스
를
제공하는 수단이다.
- 간단성(Simplicity)
- 첫 번째 버전의 HTML은 굉장히 간단해서 이를 가지고 문서를 만드는 사람이나 브라우져
를
만드는 사람들에게 많은 도움이 되었다. 이로 말미암아 웹이 광범위하게 사용되질 수 있게 되었
다.
HTML3.0은 HTML2.0의 확장 판으로 기존의 간단한 문서 포맷을 유지한 채로 테이블,수학식의
표현
등을 지원한다.
- 확장성(Scaleability)
- 시간이 지날 수록 사람들의 기대사항이 늘어나면서 HTML에 대한 요구도 많이 늘어났다.
이는 보다 많은 태그들을 요구하게 형태로 나타났는데, HTML3.0에서는 태그 항목들을 서브클래
싱
해서 사용할 수 있는 방법들을 제공한다. 확장성은 URI 형태로 다른 포맷의 정보를 삽입하는 방
법으로도 이루어진다.초기에는 주로 이미지 포맷에만
한정되어져 있던 것들이 드로잉 포맷이나 비디오, 분산 가상 현실과 다른 응용프로그램을 삽입
하는
형태로 발전되어질 것이다.
- 플랫폼 독립성(Platform Independent)
- HTML은 다양한 종류의 디바이스에 출력이 되도록 디자인되어졌다. 이는 일반 컴퓨터뿐만
이
아니라 음성이나 점자로도 표현이 되어진다. HTML3.0은 비-그래픽컬 클라이언트에서도 잘 표현
되어
지도록 디자인되어졌다.
- 표현이 아닌 내용에 대한 마크업
- 정보 제공자들의 문서에 대한 최종 형태를 조정하기를 원함에 따라서 이를 플랫폼 독립성
을
보장하는 차원에서 HTML3.0에서는 기존의 문서를 표현하는데 사용되는 독립적인 스타일 시트를
제공한다.
- 종속(Cascaded) 스타일시트의 지원
- 웹에 있어서 종속되는 스타일 시트를 지원하는 것은 가치 있는 일이다. 종속적인 스타일
시트를
지원함으로써 일반적으로 사용되는 스타일 시트를 LINK 항목에 URI로 지정해 놓고 이에 반하는
내용들을
따로 STYLE이라는 태그를 이용해서 지정함으로 보다 효율적으로 문서의 스타일을 지정할 수 있
다.
- 비시각적인 장치에 대한 지원
- HTML3.0은 시각적으로 완전하지 않은 장치에서도 잘 나타내어 질 수 있도록 고안되어졌
다.
- HTML 작성에 대한 다양한 방법의 지원
- HTML3.0은 문서가 다양한 방법으로 만들어질 수 있게끔 지원한다. 손으로 직접 처넣을 수
있으며, WYSWYG 에디터를 사용할 수도 있으며, 포맷 변환기를 통해서 만들어질 수도 있다.
2. HTML 3.0의 주요 요소들
이번 장에서는 위에서 간략하게 소개된 HTML3.0의 새로운 기능들에 대해서 구체적으로
살펴보기로 한다. 참고로 이 내용들은 1995년 3월에 만들어진 HTML 3.0 드래프트를 바탕으로
해서 이 후에 각 항목별로 새로 만들어진 문서들이 있을 경우에 이를 기반으로
했다.
2.1 테이블
이전 버전에 비해서 HTML3의 기능으로 가장 많이 알려진 것이 바로 테이블에 대한 지원이다.
이는 넷스케이프 등에서 기존의 HTML의 확장 판으로 사용됨으로써 사용자들에게는 친숙한 기
능이
되어져 버렸다. 따라서 95/9/25일자의 HTML3의 테이블 모델에서는 주요 이슈로 기존에 많이
사용되던 넷스케이프의 테이블 태그들에 대한 호환성을 내세우고 있다. 아울러 SGML CALS
델을
따르는 테이블을 쉽게 가져올 수 있는 기능이 주요 목표이다.
초기의 HTML3 스펙에서 확장된 기능으로는 다음과 같은 것이 있다.
- "." 과 ":" 과 같은 문자에 대한 정렬방법
- 테이블 프레임과 가로선에 대한 유연한 지정법
- 커다란 테이블에 대한 점진적인 화면 표시
- 고정된 헤더를 유지한 채로 테이블의 내용을 스크롤 가능하게 하는 것
- 프린트 시에 테이블이 여러 페이지에 걸쳐 있을 때 이를 잘 처리해 주는 것
- 정렬 속성에 대한 열 단위의 기본 속성 지정
다음은 테이블에 대한 예이다.
<TABLE BORDER>
<CAPTION>A test table with merged cells</CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2>Average
<TH ROWSPAN=2>other<BR>category<TH>Misc
<TR><TH>height<TH>weight
<TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003
<TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002
</TABLE>
위의 예를 보면 일단 테이블에 대한 정의는 이란 태그를 사용한다. 실제
테이블에 대한 내용은 이 두 태그 사이에 들어온다. 테이블의 속성으로 위에서 BORDER라고
지정한 것은 실제 테이블의 선을 지정한 것이다. 그 다음에 있는 <CAPTION>은 테이블에
대한 설명으로 있을 수도 있고 없을 수도 있다.
일반적으로 테이블은 행과 열로 구분되며, 행과 열의 첫 번째 각 항목을 표시하는 헤더가
올 수 있는데, 각각을 지정하는 태그는 다음과 같다.
- 행<tr>
렬- 따로 없음.
- 헤더 <th>
- 데이타 <td>
위의 각각의 태그들은 끝 태그를 생략할 수 있다. 또한 여러 개의 테이블 항목들을 행과 열과 합
칠 수가 있는데, 이들을 지정하는 방법에 ROWSPAN, COLSPAN등을 속성을 사용하면
된다.
A test table with merged cells
| Average
| other
category | Misc
|
|---|
| height | weight
|
|---|
| males | 1.9 | 0.003
|
|---|
| females | 1.7 | 0.002
|
|---|
<table border=2 frame=topbot rules=cols>
<caption>CODE-PAGE SUPPORT IN MICROSOFT WINDOWS</caption>
<col align=center>
<col align=left>
<col align=center span=2>
<col align=center span=3>
<thead valign=top>
<tr>
<th>Code-Page<br>ID
<th>Name
<th>ACP
<th>OEMCP
<th>Windows<br>NT 3.1
<th>Windows<br>NT 3.51
<th>Windows<br>95
<tbody>
<tr><td>1200<td>Unicode (BMP of ISO 10646)<td><td><td>X<td>X<TD>*
<tr><td>1250<td>Windows 3.1 Eastern European<td>X<td><td>X<td>X<TD>X
<tr><td>1251<td>Windows 3.1 Cyrillic<td>X<td><td>X<td>X<TD>X
<tr><td>1252<td>Windows 3.1 US (ANSI)<td>X<td><td>X<td>X<TD>X
<tr><td>1253<td>Windows 3.1 Greek<td>X<td><td>X<td>X<TD>X
<tr><td>1254<td>Windows 3.1 Turkish<td>X<td><td>X<td>X<TD>X
<tr><td>1255<td>Hebrew<td>X<td><td><td><td>X
<tr><td>1256<td>Arabic<td>X<td><td><td><td>X
<tr><td>1257<td>Baltic<td>X<td><td><td><td>X
<tr><td>1361<td>Korean (Johab)<td>X<td><td><td>**<td>X
<tbody><tr><td>437<td>MS-DOS United States<td><td>X<td>X<td>X<TD>X
<tr><td>708<td>Arabic (ASMO 708)<td><td>X<td><td><td>X
<tr><td>709<td>Arabic (ASMO 449+, BCON V4)<td><td>X<td><td><td>X
<tr><td>710<td>Arabic (Transparent Arabic)<td><td>X<td><td><td>X
<tr><td>720<td>Arabic (Transparent ASMO)<td><td>X<td><td><td>X
</table>
위의 예제 2를 보면 예제 1과는 약간 다른 태그들이 사용되어진 것을 볼 수 있다. col이라는
태그와 thead와 tbody등이 그것이다. col이라는 태그를 사용해서 하나의 열에 대한
속성을 지정할 수 있으며, 테이블 헤더와 몸체를 각각 thead와 tbody를 이용해서 지정할
수 있다.
CODE-PAGE SUPPORT IN MICROSOFT WINDOWS
Code-Page
ID
| Name
| ACP
| OEMCP
| Windows
NT 3.1
| Windows
NT 3.51
| Windows
95
|
| 1200 | Unicode (BMP of ISO 10646) | | | X | X | *
|
| 1250 | Windows 3.1 Eastern European | X | | X | X | X
|
| 1251 | Windows 3.1 Cyrillic | X | | X | X | X
|
| 1252 | Windows 3.1 US (ANSI) | X | | X | X | X
|
| 1253 | Windows 3.1 Greek | X | | X | X | X
|
| 1254 | Windows 3.1 Turkish | X | | X | X | X
|
| 1255 | Hebrew | X | | | | X
|
| 1256 | Arabic | X | | | | X
|
| 1257 | Baltic | X | | | | X
|
| 1361 | Korean (Johab) | X | | | ** | X
|
| 437 | MS-DOS United States | | X | X | X | X
|
| 708 | Arabic (ASMO 708) | | X | | | X
|
| 709 | Arabic (ASMO 449+, BCON V4) | | X | | | X
|
| 710 | Arabic (Transparent Arabic) | | X | | | X
|
| 720 | Arabic (Transparent ASMO) | | X | | | X
|
2.2 배너, 특정 문서에 한정된 도구바, 지정된 가이디드 튜어
LINK 항목은 문서와 다른 객체간의 관계를 설정하는데 사용되어지는 태그로 이를 이용해서
브라우져의 화면상에 스크롤되지 않는 고정 배너 영역을 만들거나, 문서에 한정된 도구 바
(toolbar), 그리고 이를 이용한 웹 사이트에 대한 가이디드 튜어(Guided Tour)등을 구현할
수 있다.
LINK의 주요 속성을 살펴보면 다음과 같은 것이 있다.
- REL
- 링크로 지정되는 관계를 설정한다.
- REV
- 역관계를 설정한다. 때로는 문서의 저자에 대한 정보를 담기고 한다.
- HREF
- URI를 이용한 객체의 지정
그럼 LINK 항목을 이용해서 각종 효과를 얻는 방법에 대해서 알아보기로 한다.
2.2.1 배너 만들기
배너( BANNER)는 주로 회사의 로고나 항해 도움말, 또는 알리고 싶은 내용을 담을 것으로 이는
문서의 다른 부분과 달리 스크롤 되지 않고 항상 고정영역을 차지하는 부분이다. 이는 LINK 항
목을 이용해서 다음과 같이 지정할 수 있다.
<LINK REL=Banner HREF=banner.html>
위의 HREF에 할당되는 것이 실제 배너로 사용되어질 문서를 가리킨다. 배너를 만드는 또 다른
방법은 직접 BANNER 태그를 이용하는 것으로 이는 다음과 같이한다.
<BANNER>배너의 내용</BANNER>
2.2.2 LINK를 이용하여 문서에 특정한 도구바를 만드는 방법
LINK 항목을 이용해서 항해 도구버튼이나 메뉴 항목에 있는 것과 같은 기능을 하는 도구 바를
만들 수가 있다.
도구 바를 위한 LINK의 REL의 지정된 값은 다음과 같은 것이 있다.
- REL=Home
- 이 링크는 홈 페이지를 지정하거나 일종의 계층 구조에서 맨 위의 것을 가리킨다.
- REL=ToC
- 이 링크는 목차를 나타내는 문서를 가리킨다.
- REL=Index
- 이 링크는 현재 문서에 대한 인덱스를 가지고 있는 문서를 가리킨다.
- REL=Glossary
- 이 링크는 현재 문서에 있는 용어에 대한 해설을 담고 있는 문서를 가리킨다.
- REL=Copyright
- 이 링크는 현재 문서에 대한 저작권을 명시한 문서를 가리킨다.
- REL=Up
- 문서들이 일종의 계층 구조를 형성할 때, 이 링크는 현재 문서의 바로 위 항목을 가리
킨다.
- REL=Next
- 이 링크는 가이디드 투어의 다음 번 방문 문서를 가리킨다.
- REL=Previous
- 이 링크는 가이디드 투어의 이전 방문 문서를 가리킨다.
- REL=Help
- 이 링크는 도움말을 주는 문서를 가리킨다.예를 들면 보다 자세한 사항이라던 지 관련
되는 중요한 정보를 담은 문서에 대한 링크를 제공한다. 이는 길을 잃은 사용자에게 방향감각을
주기 위한 목적으로도 사용된다.
- REL=Bookmark
- 북마크는 확장 문서에 대한 중요한 포인트로 바로 갈 수 있는 방법을 제공한다.
TITLE 항목의 북마크의 항목으로 사용되질 수 있다. 각각의 문서에 여러 개의 북마크가 정의되
어질 수 있으며, 확장 문서에 대한 정보를 제공하기 위한 수단으로 사용되어진다.
다음은 도구 바 LINK 항목에 대한 예제이다.
<LINK REL=Previous HREF=doc31.html>
<LINK REL=Next HREF=doc33.html>
<LINK REL=Bookmark TITLE="Order Form" HREF=doc56.html>
<HTML>
<HEAD>
<TITLE>Kletterfrer Blautal -- Warnung</TITLE>
<link rel=banner href=banner.htm>
<link rel=ToC href=inhalt.htm>
<link rel=Copyright href=cr.htm>
<link rel=index href=idx.htm>
<link rel=help href=help.htm>
</HEAD>
<BODY background="../gif/abfall.gif">
.....
</BODY>
</HTML>
2.2.3 Link 항목을 스타일 시트와 연결시키는 방법
LINK 항목의 REL 속성을 스타일 시트로 주어서 문서의 스타일시트를 연결시킬 수가 있는데,
스타일시트는 현재 문서를 화면상에 나타내는데 사용되는 정보를 담고 있는 것이다.
다음은 이렇게 사용하는 스타일시트의 예이다.
<LINK REL=StyleSheet HREF=housestyle.dsssl>
2.3 그림(Figure)
FIG 항목은 문서 내에 그림을 삽입하기 위해서 사용되어진다. 이후의 항목들은 만약
그림 주변에 충분한 공간이 있을 경우에, 이 공간에 채워지게 된다. 이러한
특성은 정렬 속성이 중앙(기본)이나 양옆에 맞추어져 있는 경우(justify)의
경우에는 나타나지 않는다. 이러한 그림들은 서로 중복되어져 나타날 수 있는데,
이는 커다란 배경화면에 조그마한 그림들이 바뀌면서 나타날 수 있는 기능을 제공한다.
다음은 사진 이미지를 캡션과 소유권을 함께 표현한 예이다.
<FIG SRC="nicodamus.jpeg">
<CAPTION>Ground dweller: <I>Nicodamus bicolor</I>
builds silk snares</CAPTION>
<P>A small hairy spider light fleshy red in color with a brown abdomen.
<CREDIT>J. A. L. Cooke/OSF</CREDIT>
</FIG>
위의 예를 보면 그림의 표현은 FIG라는 태그로 나타내며 이 태그 안에 CAPTION과
CREDIT등을 가질 수 있다.
다음은 FIG의 또 다른 예로 한 회사의 홈 페이지의 예로, 여기에서는 클라언트 사이트
이미지 맵의 역할을 하는 예를 보여준다.
<FIG SRC="mainmenu.gif">
<H1>Access HP from Hewlett Packard</H1>
<P>Select between:
<UL>
<LI><A HREF="guide.html" SHAPE="rect 30,200,60,16">Access
Guide</A>
<LI><A HREF="about.html" SHAPE="rect 100,200,50,16">About
HP</A>
<LI><A HREF="guide.html" SHAPE="rect 160,200,30,16">News</A>
<LI><A HREF="guide.html" SHAPE="rect
200,200,50,16">Products</A>
<LI><A HREF="guide.html" SHAPE="rect 260,200,80,16">Worldwide
Contacts</A>
</UL>
</FIG>
위의 예를 보면 FIG로 지정된 이미지에 핫존(hotzone)을 설정하는 방법을 보여준다. 핫존들은 무
정렬 리스트 UL로 표현되는데,
리스트의 항목으로 주어진 그림에서의 핫존을 SHAPE라는 속성으로 줄 수 있다. 즉 사용자가 그
림상의 특정영역을 클릭 했을 경우 그
위치가 위에서 지정된 핫존 중에 하나에 걸린다면 핫존에 설정된 URI가 나타나게 된다.
다음의 예는 이미지들이 중첩이 되는 것을 보여준다.
<FIG SRC="newyork.jpeg">
<OVERLAY SRC="map.gif">
<P>New York from the air!
</FIG>
위의 예는 FIG에서 SRC로 지정된 newyork.jpeg이 OVERLAY라고 지정된 map.gif위에 겹쳐져서
나타나게 된다.
2.4 Math
HTML3.0의 커다란 특징중의 하나가 문서 내에 수학식을 표현할 수 있다는 점이다. 수학식을
표현하는데 사용되어지는 태그가