HTML 3.2 and other HTML extentions

류중희
대전광역시 유성구 구성동
한국과학기술원 전기 및 전자공학과 THINK Lab.
E-mail : ryu@ee.kaist.ac.kr
URL : http://ee.kaist.ac.kr/~ryu

Abstract:: HTML (Hyper-Text Markup Language)은 처음 제안된 버젼 1.0 이래 많은 기술적인 발전과 사용자 및 브라우저 제작사의 요구를 바탕으로 버젼업을 거듭하여 현재는 W3C에서 표준으로 제정된 HTML 3.2가 최신 버젼으로 발표되어 있다. 또한 HTML 3.2에 나와 있는 내용 이외에 Netscape나 Microsoft와 같은 브라우저 제작사들이 자체적으로 제안하여 자사의 브라우저에서 동작하도록 만든 HTML extention들도 널리 쓰이고 있다. 이러한 최신의 HTML들의 문법과 용례를 알아보고 HTML 3.2와 Netscape Navigator, Internet Explorer 각각의 extention을 비교해 본다.
Keywords:: HTML, HTML 3.2, HTML Extention

1. The Brief History of HTML standard

HTML+ (Unpublished)
HTML 2.0 (Proposed Standard)
HTML 3.0 (Expired)
HTML 3.2 (W3C Working Draft)

2. HTML 3.2

2.1 Introduction

HTML 3.2는 World Wide Web Consortium (이하 W3C)에 의해 1996년 상반기 부터 개발되어온 HTML 규격으로, IBM, Microsoft, Netscape Communications, Novell, SoftQuad, SpyGlass, Sun 등의 업체들과 공동으로 개발되어 오고 있다. (현재 Working Draft임)
HTML 3.2에는 테이블이나 자바 애플릿을 지원하기 위한 기능등 새로운 기능이 추가 되어 있으며 HTML 2.0과의 하위호환성을 보장하고 있다. W3C는 현재 멀티미디어 오브젝트, 스크립트, 스타일 시트, 레이아웃, 폼, 수학식 및 다국어 지원등의 기능을 HTML에 추가하려고 하고 있으며 이는 HTML의 다음 버전에 반영 될 것이다.

2.2 Structure

HTML 3.2를 따르는 문서의 표준 구조는 다음과 같다.

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">
  <HTML>
  <HEAD>
  <TITLE>A study of population dynamics</TITLE>
  ... other head elements
  </HEAD>
  <BODY>
  ... document body
  </BODY>
  </HTML>

여기서 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN">는 문서가 HTML 3.2 규약을 따르고 있음을 나타낸다.

2.3 HEAD element

HTML 3.2의 규약은 매우 방대하며 HTML 2.0과 하위호환성이 있으므로 HTML 3.2에 새롭게 추가된 기능들 중에서 중요한 것들만 살펴보기로 한다.
먼저 HEAD 엘레먼트와 같이 쓰이는 엘레먼트들에 대해 알아보자.

2.3.1 BASE

BASE 엘레먼트는 관련 URL들의 위치를 정의해 주기 위해 사용된다. 예를 들면,

    <BASE href="http://www.acme.com/intro.html">
     ...
    <IMG SRC="icons/logo.gif">

이때 이미지의 위치는 아래와 같다.

    http://www.acme.com/icons/logo.gif

BASE가 생략되는 경우에는 해당 문서의 URL이 같은 용도로 사용된다.

2.3.2 SCRIPT

Client-side script (예를 들면 JavaScript)를 사용하기 위해 사용된다. 구체적인 내용은 아직 정의 되어 있지 않다.

2.3.3 STYLE

스타일 시트를 사용하기 위해 필요하다. 구체적인 내용은 아직 정의되지 않았다.

2.3.4 META

META 엘레먼트는 문서의 속성을 정의하는 name/value 쌍을 포함시키는 기능을 한다.
예를 들면,

    <META NAME="Author" CONTENT="Ryu Jung-hee">

특수한 경우로, HTTP-EQUIV는 HTTP header의 값을 직접 변경해 주는 기능을 한다. 예를 들면,

    <META   HTTP-EQUIV="Expires" CONTENT="Tue,  20 Aug   1996 14:25:27 
GMT">

이 경우 HTTP header에 나타나는 결과는 다음과 같다.

    Expires: Tue, 20 Aug 1996 14:25:27 GMT

이것을 응용하면 언제 문서를 서버에서 가져올 것인지 지정해 줄 수 있다.

2.3.5 LINK

LINK 엘레먼트는 다른 문서나 리소스와의 관계를 정의해 주기 위해 사용된다.
함께 사용되는 옵션은 다음과 같다.

HREF

문서의 URL을 지정한다.

REL

문서 사이의 관계 종류를 지정한다.

REV

역관계를 지정한다. 즉 문서 A에 REL에 의해 문서 B에 대한 관계가 설정된 것은 문서 B에 REV에 의해 문서 A에 대한 관계가 설정된 것과 동일하다.

TITLE

관련 문서에 대한 제목을 붙일때 쓰인다.

예는 다음과 같다.

    <LINK REL=Contents HREF=toc.html>
    <LINK REL=Previous HREF=doc31.html>
    <LINK REL=Next HREF=doc33.html>

2.4 BODY element

이번에는 BODY 엘레먼트와 함께 사용되는 엘레먼트들 중 몇가지 새로운 것들을 살펴보 기로 하자.

2.4.1 Tables

표를 작성하고 형태를 정의하기위한 엘레먼트들이 추가되었다. 이는 RFC 1942의 내용중 일부를 구현한 것이다.
표 작성을 위한 일반적인 폼은 다음과 같다.

  <TABLE BORDER=3 CELLSPACING=2 CELLPADDING=2 WIDTH="80%">
  <CAPTION> ... table caption ... </CAPTION>
  <TR><TD> first cell <TD> second cell
  <TR> ...
  ...
  </TABLE>

여기서 TABLE 엘레먼트는 표의 시작과 끝을 알리는 역할을 하며, TR과 TD는 각각 열과 열을 이루는 자료들의 시작과 끝을 정의한다.
표에 관한 보다 자세한 내용은 [Raggett 96 2]를 참고하도록 한다.

2.4.2 Font style

폰트의 스타일을 지정하는 엘레먼트들이 몇가지 추가되었다.

BIG: 글자의 크기를 크게 한다. 예를 들면 BIG과 같다.
SMALL: 글자의 크기를 작게 한다. 예를 들면 SMALL과 같다.
SUB: 아래첨자를 만들어 준다. 예를 들면 _SUB과 같다.
SUP: 위첨자를 만들어 준다. 예를 들면 ^SUP과 같다.

2.4.3 APPLET

자바 어플릿을 삽입하기 위해 쓰인다.
간단한 예는 다음과 같다.

    <applet code="Bubbles.class" width=500 height=500>
    Java applet that draws animated bubbles.
    </applet>

PARAM 엘레먼트를 이용한 다른 예는,

    <applet code="AudioItem" width=15 height=15>
    <param name=snd value="Hello.au|Welcome.au">
    Java applet that plays a welcoming sound.
    </applet>

APPLET에 관한 보다 자세한 내용은 [Raggett 96 2]를 참고하도록 한다.

2.4.4 MAP

MAP 엘레먼트는 client-side image map⁽¹⁾을 정의하기 위해 쓰인다.

간단한 예는 다음과 같다.

<img src="navbar.gif" border=0 usemap="#map1">

<map name="map1">
 <area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28">
 <area href=search.html alt="Search" shape=rect coords="184,0,276,28">
 <area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28">
 <area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28">
</map>

예에서 알 수 있듯이 client-side image map을 구성하기 위해서는 우선 원하는 이미지를 삽입하 기 위한 IMG 엘레먼트에 usemap="#[map 이름]"과 같이 맵의 이름을 지정해 준다. 다 음에 MAP 엘레먼트로 이미지 맵의 시작과 끝을 정의하며 AREA 엘레먼트를 이용하여 클릭 가능한 영역을 정의한다. 영역의 형태와 좌표 표시 방법은 다 음과 같다.

shape=default

shape=rect coords="left-x, top-y, right-x, bottom-y"

shape=circle coords="center-x, center-y, radius"

shape=poly coords="x₁,y₁, x₂,y₂, x₃,y₃, ..."

3. HTML extentions

W3C에 의해 표준으로 제정된 HTML 2.0이나 작업중인 HTML 3.2와는 별도로, 웹 브라우저를 생산하는 각 업체들은 별도의 HTML extention들을 정의하여 자사의 브라우저 기능 강화를 위해 사용하고 있다.
여기서는 대표적인 웹 브라우저인 Netscape Communications Corporation의 Navigator와 Microsoft Corporation의 Internet Explorer에서 해석 가능한 HTML extention중 중요한 몇가지를 알아보도록 하겠다.

3.1 Netscape Navigator

3.1.1 HTTP File Upload

기존의 FORM 엘레먼트에 ENCTYPE 속성을 추가하여 파일을 직접 업로드 할 수 있는 폼을 만들어 주는 기능을 추가하였다.
간단한 예는 다음과 같다.

<FORM ENCTYPE="multipart/form-data" ACTION="_URL_" METHOD=POST>
Send this file: <INPUT NAME="userfile" TYPE="file">
<INPUT TYPE="submit" VALUE="Send File">
</FORM>

3.1.2 Frames

프레임은 브라우저의 화면을 분할하여 효율적으로 정보를 전달하는 방법 혹은 분할된 각각의 화면을 뜻한다. 프레임을 정의하는 방법은 다음과 같다.

<HTML>

<HEAD> </HEAD>

<FRAMESET> </FRAMESET>

</HTML>

즉 BODY 엘레먼트의 위치에 FRAMESET 엘레먼트를 사용하면 된다.

구체적인 프레임의 정의를 위해서는 FRAME 엘레먼트를 사용한다. 프레임을 작성한 간단한 예는 다음과 같다.

<FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> </FRAMESET>

여기를 클릭 하면 결과를 볼 수 있다.

프레임에 관한 보다 자세한 내용은 [Netscape 96 3]을 참고 하도록 한다.

3.1.3 Targets

프레임 등으로 나뉘어진 윈도우나 복수개의 브라우저 윈도우를 제어하기 위해 각 윈도우에 이름을 붙이고 지정된 윈도우에 문서를 불러 들이기 위해 사용된다.
형식은 다음과 같다.

<A HREF="url.html" TARGET="window_name"> Click here and open a New Window </A>

혹은 BASE 엘레먼트를 이용하여 default target window를 지정해 줄 수도 있다. 이를 이용 하면 해당 문서의 모든 링크는 별도로 지정해 주기 이전에는 BASE에 의해 지정된 윈도우로 문 서를 불러들인다.
형식은 다음과 같다.

<BASE TARGET="default_target">

3.1.4 Embedded Objects

특정한 오브젝트를 HTML 페이지로 직접 삽입하기 위해 쓰여진다. 플러그인을 이용하여 멀티미 디어 데이터를 보고자 하는 경우를 여로 들 수 있다.

EMBED 엘레멘트와 SRC, HEIGHT, WIDTH등의 속성으로 정의한다.

3.2 Microsoft Explorer

3.2.1 BGSOUND

배경 음악을 지정하기 위해 사용된다. SRC 속성으로 음악 파일의 URL을 지정 하며 LOOP 속성으로 반복횟수를 지정할 수 있다. LOOP=INFINITE이면 무한 반복된다.

3.2.2 MARQUEE

스크롤되는 일종의 텍스트 전광판을 만들기 위해 사용된다.
간단한 예는 다음과 같다.

<MARQUEE DIRECTION=RIGHT BEHAVIOR=SCROLL SCROLLAMOUNT=10 SCROLLDELAY=200>This is a scrolling marquee.</MARQUEE>

MARQUEE에 관한 보다 자세한 내용은 [Microsoft 96]을 참고하도록 한다.

3.2.3 OBJECT

OLE에 의한 오브젝트들을 HTML 문서에 삽입시키기 위해 사용된다.

OBJECT에 관한 보다 자세한 내용은 [Microsoft 96]을 참고하도록 한다.

4. The Future of HTML Standard

W3C에서는 다음과 같은 기능들을 HTML에 추가하거나 강화시키려고 하고 있다.

Scripting
Fill-out Forms
Frames, Layout and Subsidiary Windows
Math
Kink Types, Resource Variants and Meta Information

참고문헌(References)

[Connolly 96]: Connolly, Dan, HTML Specs, Drafts, and Reports, May 7, 1996
URL:http://www.w3.org/pub/WWW/Mar kUp/Bibliography
[Raggett 96 1]: Raggett, Dave et al, Introducing HTML 3.2
URL:http://www.w3.org/pub/WWW/MarkUp/ Wilbur
[Connolly 95]: Connolly, Dan, HTML 2.0 Proposed Standard Materials, Dec 21, 1995
URL:http://www.w3.org/pub/WWW/Mark Up/html-spec
[W3C 96]: World Wide Web Consortium, HTML 3.2 Features At a Glance
URL:http://www.w3.org/pub/W WW/MarkUp/Wilbur/features.html
[Raggett 96 2]: Raggett, Dave, HTML 3.2 Reference Specification, Sep 9, 1996
URL:http://www.w3.org/pub/WWW/TR/WD- html32
[Netscape 96 1]: Netscape Communications Corporation, EXTENSIONS TO HTML 3.0, May 7, 1996
URL:http://www.netscape.co m/assist/net_sites/html_extensions_3.html
[Netscape 96 2]: Netscape Communications Corporation, FRAMES: AN INTRODUCTION, 1996
URL:http://www.netscape.com/assist/ne t_sites/frames.html
[Netscape 96 3]: Netscape Communications Corporation, FRAMES - SYNTAX, 1996
URL:http://www.netscape.com/as sist/net_sites/frame_syntax.html
[Netscape 96 4]: Netscape Communications Corporation, NEW HTML 3.0 PROPOSALS, 1996
URL:http://www.netscape.com/ assist/net_sites/new_html3_prop.html
[Netscape 96 5]: Netscape Communications Corporation, HTML Language Specification, 1996
URL:http://developer.n etscape.com/library/documentation/htmlguid/index.htm
[Microsoft 96]: Microsoft Corporation, HTML Reference, 1996
URL:http://www.microsoft. com/workshop/author/newhtml/htmlr018.htm
[Raggett 96 3]: Raggett, Dave et al, W3C Activity: Hypertext Markup Language (HTML), Aug 30, 1996
URL:http://www.w3.org/pub/WWW/MarkUp /Activity

각주(Footnotes)

(1): Client-side image map이란 서버에서 작동되는 별도의 CGI 프로그램의 도움 없이 HTML 만으로 클릭 가능한 영역을 지니는 이미지와 그 영역을 지정하는 것을 말한다.

Last-Modified : Tuesday, 09-Dec-2014 17:25:21 UTC