HTML의 시작과 끝

박 동규
부산시 금정구 장전동 산 30번지 부산대학교 자연과학대학
전자 계산학과 그래픽스 응용 연구실
E-mail : dongupak@pearl.cs.pusan.ac.kr
URL : http://pearl.cs.pusan.ac.kr/~dongupak/

Abstract:: HTML은 인터넷 Web상에서 사용되는 표준 문서 Format이다. 1장에서는 Web상에서 정보 저작 도구로 이용되고 있는 HTML의 특징과 기본 개념에 대하여 알아보도록 한다. 2장에서는 HTML 의 기본적인 tag들에 대해서 알아보도록 하는데, 이는 현재 표준안으로 제정된 HTML Version 2 를 중심으로 알아보도록 한다. HTML의 표준은 IETF에 의하여 제정되었으나 전세계 Web Naviagator를 주도하고 있는 Netscape사에 의하여 기본 HTML구조에 추가된 구조가 나와 있는데 이에 대해서는 3장에서 알아보도록 한다. 4장에서는 HTML문서를 만들기 위한 HTML에디터와 작성된 문서를 HTML로 변환하는 HTML변환기에 대해 알아본다. 마지막으로 5장에서는 전체에 대한 결론을 내린다.
Keywords:: HTML, Web, Authoring

1. 서론

HTML이란 Hypertext Markup Language의 약자로 WWW brower상에서 보여지도록 만 들어진 언어이다. HTML은 IETF(Internet Engineering Task Force)의 HTML working group에 서 표준안이 제정된다. 현재까지 HTML표준은 version l, version 2까지 정의 되어 있으며, 현재 HTML version 3에 대한 표준안이 draft형태로 제안되고 있으나 아직 level 3까지는 확정되지 않 았다. 따라서 현재의 HTML표준안은 HTML Version 2로, IETF RFC-1866가 WWW Consortium에 의하여 표준으로 제정되어 있다.[HTML_REF 96]

1.1 용어 설명

SGML: Standard Generalized Markup Language -- Markup Language의 사용에 대한표준안
DTD: Document Type Definition -- SGML을 사용하여 쓰여진 Markup Language의내역
HTML: HyperText Markup Language -- HTML은 SGML DTD이다. 쉽게 말하면, HTML은 WWW 문서를 구성하는 수많은 구성요소들을 정의하고 있는 MarkupTag들로 표시된 일련의 형식이다. HTML은 CERN의 Tim Berners-Lee에 의해만들어졌으며, 그는 현재 W3 콘소시움의 의장으로 있다.

1.2 HTML의 장점

HTML은 텍스트로 작성되어 있으므로 그 문서의 크기가 작으며, 인터넷 상에서 빠르게 전송될 수 있다. HTML 문서는 사용하는 컴퓨터의 기종에 독립적이다. HTML문서는 어떠 한 컴퓨터에서도 보여질 수 있다. HTML 문서를 보기 위해서는 HTML을 번역하는 브라우즈만 있으면 된다.

1.3 HTML 문서 LEVEL

HTML LEVEL 1: 가장 표준화가 잘된 HTML
HTML LEVEL 2: RFC1866, 양방향 형식 추가
HTML LEVEL 3(HTML + ): 인터넷 드래프트(최종적으로 확정되지 않음)

1.4 HTML문서 만들기

HTML 문서는 아스키(ASCII)라고 알려진 일반 텍스트 양식의 문서이며 UNIX 기계상의 Emacs나 vi와 같은 텍스트 편집기 혹은 PC상에서 수행되는 모든 종류의 텍스트 에디터를 사용 하여 작성할 수 있다. Netscape Nevigator GOLD version에서는 WYSIWYG환경의 HTML에디터를 포함하고 있다. X Window 시스템상에서의 tkWWW와 NeXT 를 기반으로 하는 CERN의 Web borwser들은 WYSIWYG 환경 에서 기본적으로 HTML editor를 포함하고 있습니다. 또한 Sun Sparcstation용의 HotMetal이나 Macintosh용의 HTML Edit와 같이 몇몇 WYSIWYG편집기들도 있다.

1.5 단순한 HTML 문서의 예

 <TITLE>  간단한 HTML 에제  </TITLE>   
 <H1> 이것은 제 1 수준 머릿글입니다. </H1>
 HTML의 세계에 오신것을 환영합니다.
 이것은 첫번째 단락입니다. <P>
 그리고 이것은 두번째 단락입니다. <P>

1.6 Markup Tag

HTML은 Web browser에게 텍스트를 어떠한 형태로 보여줄지를 알리기 위하여 Markup Tag를 사용한다. HTML Tag들은 반드시 (수학에서 ~보다 작다의 기호로 사용되는) 왼쪽 angle bracket(<)으로 구성되며, tag의 이름이 뒤에 오고 오른쪽 angular bracket 으로 닫는다(>).

Tag들은 <H1>과</H1>처럼, 주로 쌍을 이룬다. 끝막음 tag는 시작 tag와bracket 안에 슬래쉬(/)가 있다는 것을 제 외하면 비슷하게 보입니다.
예를 들면 <H1>는 웹 브라우저에게 형식화된 제 1 수준의 머릿글이 놓이게 된다고 지시하고, </H1>는 브라우저에게 그 머릿글이 끝난다는 것을 알려줍니다.

2. HTML문서의 구조

HTML문서의 구조는 다음과 같은 형태로 어떠한 텍스트혹은 hypertext에 대한 이름과 속성을 부여한다.

<태그_이름> 문장 </태그_이름>

<태그_이름 속성_이름=argument> 문장 </태그_이름>

<태그_이름>

예를 들면

<title> 나의 문서 </title>

와 같은 형태로 특정 텍스트의 속성을 지정하거나,

<a href="argument"> 문장 </a>

으로 하이퍼 텍스트를 나타낼 수 있다.

주의: HTML은 대,소문자를 구분하지 않는다.: <title> 은 <TITLE> , 혹은 <TiTlE>과 같이 취급됨.
리턴키 무시: 대부분의 워드 프로세서와는 달리, HTML 파일에서 캐리지 리턴은 무시됩니다.

2.1 HTML문서의 전체 구조

       HTML
        |
        \-HEAD
        |  |
        |  \-TITLE
        |      |
        |      \-<TITLE>
        |      |
        |      \-"Parsing Example"
        |      |
        |      \-</TITLE>
        |
        \-BODY
          |
          \-P
            |
            \-<P>
            |
            \-"Some text. "
            |
            \-EM
            |  |
            |  \-<EM>
            |  |
            |  \-"*wow*"
            |  |
            |  \-</EM>
            |
            \-</P>

위에서 보는 바와 같이 HTML문서는 head와 body, heading, paragraph, 등을 포함하는 요소들이 tree형태로 이루어 진다.

2.1.1 문서 구조 : HTML

HTML문서는 head와 Body 로 이루어져 있다. HEAD 부분은 title과 기타의 내용이 들어간다. BODY 부분은 여러개의 문장과 리스트를 비롯한 여러가지 요소들이 들어간다.

2.1.2 헤드부

HTML의 헤드부는 문서의 정보를 나타내는 내용이 들어간다.

    <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
    <HEAD>
    <TITLE>Introduction to HTML</TITLE>
    </HEAD>
    ...

2.1.3. 제목 : TITLE

모든 HTML문서는 반드시 <TITLE>을 포함하여야 한다.

부적절한 title :: "소개"
적절한 title :: "HTML문서에 대한 소개"

와 같이 문서의 내용을 제대로 파악하는데 도움이 되는 title을 선택

2.1.4. 기타 tag

BASE
ISINDEX
LINK
META
NEXTID

2.2 BODY

<BODY> 는 문서에서 heaging, 문장, 리스트 등을 포함하고 있다.
예를 들면 :

    <BODY>
    <h1>Important Stuff<h1>
    <p>Explanation about important stuff...
    <BODY>

2.3 HTML의 머리글

HTML에서는 여섯 단계의 수준의 머릿글이 있는데, 1부터 6까지로 나타내며,1이 가장 많이 사용됨 머릿글은 보통 몸글(body)보다 더 크고 굵은 글자체를사용. 문서의 맨 처음 머리글 은 <H1>을 사용.

<h1>. . . </h1> 가장 큰 헤드
<h2>. . . </h2>
<h3>. . . </h3>
<h4>. . . </h4>
<h5>. . . </h5>
<h6>. . . </h6> 가장 작은 크기의 헤드

2.4 Block Structuring Elements

2.4.1 Paragraph: P

HTML문서는 캐리지 리턴을 무시함. 문장에서 나뉘어지는 절을 표시하기 위해서 사용함

2.4.2 Preformatted Text: PRE

HTML은 문서에서 캐리지 리턴과 추가의 공백문자들은 broser에 의해서 무시된다. 즉 스페이스 문자가 10개 있으나 1개 있으나 모두 같은 방식으로 나타난다. <PRE> 태그는 추가의 공백문자들과 캐리지 리턴을 그대로 출력할 때 사용한다.

    <PRE>
    Line 1.
           Line 2 is to the right of line 1.     <a href="abc">abc<a>
           Line 3 aligns with line 2.            <a href="def">def<a>
    </PRE>

는 다음과 같은 효과를 낸다.

    Line 1.
           Line 2 is to the right of line 1.     abc
           Line 3 aligns with line 2.            def

2.4.3 Address: ADDRESS

대게 HTML문서에서 ADDRESS 태그는 문서의 제일 시작부나 끝 부분에서 주소, signature, authorship등의 정보들을 포함한다. 예를 들면

<ADDRESS>
박 동규<BR>
부산시 금정구 장전동 산 30번지 부산대학교 자연과학대학<BR>
전자 계산학과 그래픽스 응용 연구실 <BR>
E-mail : dongupak@pearl.cs.pusan.ac.kr <BR>
URL : <A HREF="http://pearl.cs.pusan.ac.kr/~dongupak/"> 
<ADDRESS>

과 같이 사용될 수 있으며 일반적으로 Browser에 의해서 이탤릭체로 나타난다.

2.4.4 Block Quote: BLOCKQUOTE

<BLOCKQUOTE> 태그는 다른 출처로 부터 인용된 문장을 포함한다. 이는 Browser에 의해서 일반적으로 오른쪽과 왼쪽이 약간 들어간 이탤릭 폰트로 나타난다.

2.5 논리적 스타일(Logical Styles)

<em> . . . </em>: 강조
<strong> . . . </strong>: 강한 강조
<code> . . . </code>: HTML 명령임을 알려줌
<samp> . . . </samp>: sample output을 표시
<kbd> . . . </kbd>: keyboard key표시
<var> . . . </var>: 변수 <dfn> . . . </dfn>; definition을 보여줌 (not widely supported)
<cite> . . . </cite>: 인용구(citation) 임을 표시

2.6 물리적 스타일(Physical Styles)

<b> . . . </b>: Boldface
<i> . . . </i>: Italics
<u> . . . </u>: Underline
<tt> . . . </tt>: Typewriter font

2.7 Definition list/glossary: <dl>

definition list는 술어와 이에 대응하는 정의의 list를 나타낼때 사용된다. 예를 들어

<dl>

<dt>
정의할 항목
<dd>
첫 항목 정의
<dt>
다음 항목
<dd>
다음 항목 정의
</dl>

와 같은 태그는 다음과 같이 나타난다.

정의할 항목: 첫 항목 정의
다음 항목: 다음 항목 정의

2.8 순서없는 목록(unordered list)보이기 <ul>

<ul>
<li>
목록의 첫 항목
<li>
목록의 두 번째 항목
</ul>

2.9 순서있는 리스트(ordered list) 보이기 <ol>

<ol>
<li>
목록의 첫 항목
<li>
목록의 두 번째 항목
</ol>

2.10 메뉴 목록 보이기 <menu>

<menu>
<li>
목록의 첫 항목
<li>
목록의 두 번째 항목
</menu>

2.11 디렉토리 목록 보이기 <dir>

<dir>
<li>
목록의 첫 항목
<li>
목록의 두 번째 항목
</dir>

2.12. Anchor: A

<A> element는 하이퍼 링크 연결을 위한 태그로 닻(anchor) 태그라고 불린다. 이 태그는 하이퍼 링크를 나태내기 위하여 적어도 하나의 NAME 혹은 HREF 속성을 포함하여야 한다.

HREF: 하이퍼 링크가 참조하는 URL
NAME: 하이퍼 링크에 의해 사용되는 anchor의 이름(일반적으로 동일한 문서내의 특정 부분을 링크할때 사용)

World Wide Web은 다른 서버상의 화일 위치를 나타내기 위해 Uniform Resource Locators(URLs)를 사용. URL은 접속하는 resource의 형태(예를 들면 gopher,WAIS), 서버 의 주소,그리고 화일의 위치를 나타낸다. 예를 들면:

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

과 같다.

이 중에서 scheme은 아래에 명시된 것들이 포함된다.

file

local system 상의 파일, 또는 anonymous FTP server 상의 파일

http

World Wide Web server 상의 파일

gopher

Gopher server 상의 파일

WAIS

WAIS server 상의 파일

news

Usenet newsgroup

telnet

Telnet과 관련된 service에 대한 연결

2.13. Line Break: BR

HTML문서는 캐리지 리턴을 무시하기 때문에 다음 라인으로 가기 위해서는 <BR> 태그를 이용하여 강제로 라인을 넘긴다.

2.14. Horizontal Rule: HR

<HR> Tag는 브라우저 폭에 맞는 수평선을 그려준다.

2.15 Image: IMG

대부분의 Web 브라우저에서는 글자들과 함께 나오는 in-line 이미지들을 보여준다. (Lynx같은 Text oriented 브라우즈는 예외) 그리고 이것들은 X bitmap(XBM)이나 GIF 포맷의 이미지를 보여준다. <IMG> element의 속성들로는 다음과 같은것이 있다.

ALIGN - 기준선에서 이미지와 텍스트를 어떻게 정렬할 것인가.
1. TOP
2. MIDDLE
3. BOTTOM
ALT - 참조하는 이미지에 대한 설명(Text oriented 브라우즈를 사용하는 사용자는 ALT="xxx"와 같이 사용된 경우 xxx라는 문자를 볼 수 있다.
ISMAP - imagemap사용할 경우
SRC - 이미지 화일의 URL, 혹은 화일 이름.

2.16 SPECIAL CHARACTERS

< to generate a <
> to generate a >
& to generate a &
" to generate a "

3. Netscape Communications사에서 지원하는 확장 HTML

여기서 언급하는 확장 HTML태그들은 Netscape Navigator 2.0이상에서 사용가능한 태그들로 일부는 인터넷 드래프트로 제시된 내용이며, 일부는 Netscape Communications사에서 자체적으로 정의한 태그들이다. 이러한 태그들 중의 일부는 HTML의 표준화라는 측면에서 많은 문제를 안고 있다. 즉 Netscape Navigator이외의 브라우즈를 사용하였을 때 심할 경우에는 웹페이지 자체가 나타나지 않을 수도 있다. 그러나 전세계 웹브라우즈의 약 85% 이상을 차지하고 있는 Netscape사에서 지원하는 HTML코드이니 만큼 앞으로 제정될 HTML 3.0 표준안에서 Netscape사에서 정의한 extended HTML 태그들이 반영될 가능성이 크다. 또한 표준이란 머물러 있는것이 아니고 항상 발전하는 것이므로 기존의 웹페이지를 발전시키는 측면에서 긍정적인 요소를 가지고 있는것도 사실이다.

3.1 <ISINDEX>

ISINDEX tag에 PROMPT tag를 추가하여 키워드를 찾을때 사용하는 메시지를 변경할 수 있다.

3.2 <HR>

horizontal rule 태그에 다음과 같은 rule을 추가 하였다.

<HR SIZE=number>: SIZE tag는 작성자가 horizontal rule의 두께를 얼마로 할 것인가를 지시한다.
<HR WIDTH=number|percent>: default horizontal rule은 항상 웹페이지의 한 줄을 나타낸다. WIDTH tag를 사용하여 작성자는 문서 크기에 대한 horizontal rule의 상대 크기를 지정할 수 있다.
<HR ALIGN=left|right|center>: horizontal rule에서 WIDTH를 줄때 문서에서 오른쪽, 왼쪽, 중앙, 중의 어디에 정렬할 지를 결정한다.
<HR NOSHADE>: 그림자가 없는 형태로 표시한다.

<HR> 태그를 사용한 예 :

<br>
<HR WIDTH=100% ALIGN=right SIZE=6>
<HR WIDTH=50% ALIGN=right SIZE=6>
<HR WIDTH=30% ALIGN=right SIZE=6>
<HR WIDTH=17% ALIGN=right SIZE=6>
<HR WIDTH=10% ALIGN=right SIZE=6>
<HR WIDTH=7% ALIGN=right SIZE=6>

3.3 리스트 목록 표시.

<UL> 작은공 모양의 표시를 제작자가 원하는 타입으로 변경할 수 있다. TYPE=disc, TYPE=circle, or TYPE=square와 같은 속성을 주어서 작은 공모양의 표시를 변경한다.

<OL> 목록에 번호 붙이는 방법을 지정한다. 대문자 (TYPE=A), 소문자 (TYPE=a), large roman numerals(TYPE=I), small roman numerals (TYPE=i), 혹은 기본 숫자(TYPE=1)와 같은 속성 변경이 가능하다.
START=".." 속성은 목록에서 시작하는 번호를 지정할 수 있으며, 이 속성을 주지 않으면 기본값은 1로 setting된다.

<LI> <UL> 태그와 <OL> 태그에서 사용한 속성을 모두 사용할 수 있다.

3.4 <IMG>

이 부분은 가장 많이 확장된 tag일 것이다.

<IMG ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom>: ALIGN option에서 기본적으로 지원하는 top, bottom, middle, 속성과 더불어 left, right, texttop, absmiddle, baseline, absbottom 등의 속성항목이 추가되었다.
<IMG WIDTH=value HEIGHT=value>: 이미지의 폭과 높이를 픽셀 수로 지정한다. 여기서 지정한 값이 실제 이미지의 크기와 같을 경우 display속도가 빨라진다. 왜냐하면 이미지를 ㅤ읽을 필요 없이 좌표를 지정할 수 있기 때문이다.
<IMG BORDER=value>: 이미지를 둘러싸고 있는 경계의 폭을 지정한다.
<IMG VSPACE=value HSPACE=value>: 이미지와 텍스트의 수평 간격을 픽셀 수로 지정.

3.5 <BR>

추가 속성 :
CLEAR=".." 텍스트와 이미지가 정렬되는 곳에서 CLEAR속성은 이미지 아래에 새로운 줄을 시작할 것을 지정한다.

3.6 <NOBR>

NO BReak의 약자로 <NOBR> 과 <NOBR>사이의 텍스트는 브라우즈에서 항상 같은 줄로 나타난다.

3.7 <WBR>

WBR 태그는 자주 쓰이지 않으며 <NOBR> 태그 내에서 윈도우의 크기를 줄일때 이 부분이 다음 줄로 넘어가는 역할을 하게 된다.

3.7 <FONT SIZE=value>

문서에서 사용하는 텍스트의 폰트 크기와 색상을 지정할수 있다. FONT 태그에는 다음과 같은 속성을 줄 수 있다.

SIZE: 폰트의 상대크기와 절대 크기를 지정할 수 있다.
COLOR: 폰트의 색상을 지정할 수 있다

폰트 크기를 변화시킨 예.

Surprise! You can change the FONT size.

3.8 <BASEFONT SIZE=value>

BASEFONT 태그는 문서상에서 상태 FONT크기가 사용하는 기본 폰트의 크기를 변경시킨다.

3.9 <CENTER>

<CENTER>태그는 문장을 페이지의 중간에 위치시킨다.

3.9 <TABLE>

테이블은 HTML 3.0 기능중의 하나이다. 웹페이지에서 테이블을 그려주는 기능을 한다. 속성으로는 BORDER, CELLSPACING, CELLPADDING, WIDTH, HEIGHT 등이 있다.

3.9.1 BORDER

이 태그는 테이블의 테두리의 크기를 지정해 준다. 이 태그에 사용되는 숫자는 픽셀 단위로 테두리의 두께이다.

3.9.2 CELLSPACING

BORDER 속성이 테두리의 입체부분의 두께를 나타낸다면, 이 속성은 테두리 평면부분의 두께를 나타낸다. 이 속성도 BORDER속성과 마찬가지로 픽셀의 크기를 지정한다.

3.9.3 CELLPADDING

칸과 칸사이의 간격을 지정해 주는 속성

3.9.4 WIDTH

이 속성은 테이블의 가로크기를 지정해주는 속성으로서, 픽셀 크기로 지정해 주거나 또는 백분율로 지정해 준다.

3.9.5 HEIGHT

이 속성은 테이블의 세로크기를 지정해 준다.

3.9.6 <CAPTION>

테이블의 표제를 나타낸다. 표제는 테이블의 상단 또는 하단에 올 수 있다.

ALIGN: 표제의 위치를 지정하며, top인 경우 테이블의 상단으로, bottom인 경우 테이블의 하단으로 지정한다. 기본값은 top이다.

3.9.7 <TR> ; (TABLE ROW)

테이블의 행을 나타낸다. 테이블 행의 갯수는 이 태그의 갯수와 동일하다.

ALIGN: 수평 정렬, 여기서 사용되는 속성은 LEFT, CENTER, RIGHT,등이 있다.
VALIGN: 수직 정렬, 여기서 사용되는 속성은 TOP, MIDDLE, BOTTOM, BASELINE, 중의 하나이다.

3.9.8 <TH> ; (TABLE HEAD)

테이블의 행을 나타낸다. 테이블 행의 갯수는 이 태그의 갯수와 동일하다.

ALIGN: 수평 정렬, 여기서 사용되는 속성은 LEFT, CENTER, RIGHT,등이 있다.
VALIGN: 수직 정렬, 여기서 사용되는 속성은 TOP, MIDDLE, BOTTOM, BASELINE, 중의 하나이다.
NOWRAP: 이 속성이 있으면 줄이 길어도 다음줄로 넘어가지 않는다.
COLSPAN: 한칸을 지정된 열의 크기로 확장한다.
ROWSPAN: 한칸을 지정된 행의 크기로 확장한다.
WIDTH: 한칸의 가로 크기를 지정한다.
HEIGHT: 한칸의 세로 크기를 지정한다.

3.9.9 <TD> ; (TABLE DATA)

테이블의 한 칸을 나타내며, 일반 글자체로 나타나고 ALIGN 속성의 기본 값이 LEFT인 것을 제외하고는 <TH>와 동일하다.

ALIGN: 수평 정렬, 여기서 사용되는 속성은 LEFT, CENTER, RIGHT,등이 있다.
VALIGN: 수직 정렬, 여기서 사용되는 속성은 TOP, MIDDLE, BOTTOM, BASELINE, 중의 하나이다.

예를 들면 :

<TABLE border=10 width="60%" cellspacing="2" cellpadding="10">
 <TR>
  <TH ALIGN=Center> 시간표
  <TH ALIGN=Center>Session A
  <TH ALIGN=Center>Session B

 <TR>
  <TH ALIGN=Center>12:30-13:40
  <TD ALIGN=Center colspan=2> 등록

 <TR>
  <TH ALIGN=Center>13:40-14:00
  <TD ALIGN=Center colspan=2>Opening Address

 <TR>
  <TH ALIGN=Center>14:00-15:00
  <TD ALIGN=Center rowspan=2> A1. PC환경에서 WWW
  <TD ALIGN=Center rowspan=1> B1. 비지니스와 WWW

 <TR>
  <TH ALIGN=Center>15:00-16:00
  <TD ALIGN=Center COLSPAN=1> B2. WWW 보안과 전자화폐

 <TR>
  <TH ALIGN=Center>16:00-17:00
  <TD ALIGN=Center rowspan=2> A3. HTML과 홈페이지 디자인 
  <TD ALIGN=Center rowspan=2> B3. Java Tutorial
 <TR>
  <TH ALIGN=Center>17:00-18:00
 <TR>
  <TH ALIGN=Center> 18:00-19:00
  <TD ALIGN=Center colspan=2> 저 녁 식 사
<TR>
  <TH ALIGN=Center>19:00-20:00
  <TD ALIGN=Center colspan=2> 각종 BOF
 <TR>
  <TH ALIGN=Center>20:00-21:30
  <TD ALIGN=Center colspan=2> 웹코리아 총회(안)
</TABLE>

과 같은 테이블은 아래와 같이 출력 된다.

시간표 Session A Session B
12:30-13:40 등록
13:40-14:00 Opening Address
14:00-15:00 A1. PC환경에서 WWW B1. 비지니스와 WWW
15:00-16:00 B2. WWW 보안과 전자화폐
16:00-17:00 A3. HTML과 홈페이지 디자인 B3. Java Tutorial
17:00-18:00
18:00-19:00 저 녁 식 사
19:00-20:00 각종 BOF
20:00-21:30 웹코리아 총회(안)

시간표	Session A	Session B
12:30-13:40	등록
13:40-14:00	Opening Address
14:00-15:00	A1. PC환경에서 WWW	B1. 비지니스와 WWW
15:00-16:00	B2. WWW 보안과 전자화폐
16:00-17:00	A3. HTML과 홈페이지 디자인	B3. Java Tutorial
17:00-18:00
18:00-19:00	저 녁 식 사
19:00-20:00	각종 BOF
20:00-21:30	웹코리아 총회(안)

3.10 <FRAME>

SRC: <IMG>태그의 SRC와 유사하게 참조하는 HTML문서의 URL을 지정한다.
NAME: 프레임의 이름을 지정함.
MARGINWIDTH: 윈도우의 가로 마진을 픽셀크기로 지정한다. 기본값을 브라우저가 적절히 지정한다.
MARGINHEIGHT: 윈도우의 세로 마진을 픽셀크기로 지정한다. 기본값을 브라우저가 적절히 지정한다.
SCROLLING: "YES"일 경우 윈도우가 스크롤이 가능한게 만든다. "NO"일 경우 스크롤이 불가능하게 만들며, "AUTO"브라우저가 적절히 판단을 한다.
NORESIZE: 프레임의 크기는 웹브라우저에서 사용자가 조정할 수 있는데 이 태그는 프레임의 크기를 사용자가 임의로 조정할 수 없도록 한다.

3.10.1 <FRAMESET>

속성

ROWS: 프레임의 세로크기를 지정한다. TABLE과 같이 픽셀이나 비율을 지정할 수 있다.
COLS: 프레임의 가로 크기를 지정한다. TABLE과 같이 픽셀이나 비율을 지정할 수 있다.

3.11 <NOFRAME>

프레임을 지원하지 않는 않는 브라우저를 위한 것으로 프레임을 지원하는 브라우즈는 이것을 무시한다.

3.12 <TARGET>

다른 프레임의 HTML문서를 지정할 수 있다.

3.13 <SCRIPT>

자바 스크립터를 비롯한 스크립터 언어를 사용하기 위한 태그.

<SCRIPT LANGUAGE="JavaScript">

ATTRIBUTE로 LANGUAGE="JavaScript"를 사용할 경우 자바 스크립터를 내장한 웹페이지가 된다. 자바 스크립터는 컴파일된 자바 Byte-code가 아닌 자바 소스코드로 브라우저에 의해서 인터프리터되어서 바로 실행이 된다.

3.14 <BLINK>

BLINK 태그는 웹페이지 상에서 <BLINK>...</BLINK> 사이의 부분이 깜빡거리게 하는 효과를 낸다.

3.15 <BODY>

<BODY> 태그 안에는 다음과 같은 속성을 부여하여 웹페이지 자체의 배경색상, 텍스트, 링크의 색상을 변화 시키는 효과를 주었다. 이를 위하여 추가된 속성으로 다음과 같은 것이 있다.

BGCOLOR: 배경 색상을 지정된 방식으로 준다.
BACKGROUND: 배경으로 사용할 이미지를 지정한다. 이 배경 이미지는 일반적으로 작은 크기의 타일형태의 이미지를 사용한다.
TEXT: 웹페이지 전체의 텍스트의 색상을 지정한다.
LINK: 웹페이지 전체에서 링크된 텍스트의 색상을 지정한다.
VLINK: 웹페이지 전체에서 이미 링크가 생성된 텍스트의 색상을 지정한다.

4. HTML문서 생성기

HTML문서를 생성하기 위해서는 vi, EDIT등과 같은 Full screen editor를 이용하는 방법과 HTML문서 전용 편집기를 이용하는 방법이 있으며, 기존에 작성된 문서가 있을 경우 기존에 작성된 문서 형식을 HTML로 변환해 주는 소프트웨어를 이용할 수 있다.

4.1 HTML 에디터.

4.1.1 기존 편집기 이용

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

4.1.2 편집 Sotfware 이용

SoftQuad HotMetal Pro: 여러 윈도우 시스템에서 사용가능한 HTML편집기 이며, 문법검사기능, 그래픽 편집 기능이 있다. ftp://ftp.ncsa.uiuc.edu/Web/html/hotmetal
tkWWW: 브라우저 기능과 편집 기능을 함께 제공한다.
http://uu-gna.mit.edu:8001/tk-www/help/overview.html
htmltext: WYSIWYG HTML편집기의 기능을 함께 제공한다.
http://web.cs.city.ac.uk/homes/njw/htmltext/htmltext/html
나의 보금자리여(Myhome): 경북대학교 컴퓨터 공학과에서 개발한 HTML에디터 http://comeng.ce.kyungpook.ac.kr/~dgp/myhome.htm
Netscape Navigator Editor: Netscape Navigator Gold 2.0에서 부터 HTML에디터 기능이 추가 되었다.
HotDog: 핫도그는 다양한 툴바와 편리한 사용자 인터페이스를 가진 HTML에디터이다. http://www.sausage.com/ 에서 구할 수 있는 shareware Software이다.

4.2 HTML 변환기.

4.2.1 RTF화일을 HTML화일로 변환

마이크로 소프트사에서 개발한 문서 포매팅 언어인 rtf(Rich Text Format) 화일을 html화일로 변환해 주는 기능을 가진 변환기.

rtftohtml: ftp://ftp.cray.com/src/WWW/stuff/RTF/latext/src/unix.tar.Z
rtftoweb: ftp://ftp.rrzn.uni-hannover.de/pub/unix-local/misc/rtftoweb/html/trftoweb.html

4.2.2 Latex화일을 HTML화일로 변환

Knuth교수에 의해 개발된 LateX화일을 HTML언어로 변환해 주는 기능을 가진 변환기.

latex2html: latex화일을 html화일로 변환해 준다. version 96/1이 사용 가능하다. http://cbl.leeds.ac.uk/nikos/tex2html/ghindex.html

4.2.3 text화일을 HTML화일로 변환

일반 텍스트 화일을 HTML문서로 변환해 주는 도구로 http://www.cs.wustl.edu/~seth/txt2html.html 에서 구할 수 일다.

4.2.4 Postscript화일을 HTML화일로 변환

http://stasi.bradley.edu/ftp/pub/ps2html/home.html

4.3 기타 HTML생성기들

여기서 언급한 HTML생서기 이외에 HTML문법 검사도구, HTML 테이블 생성도구 MailBox To HTML변환기, troff2html, man2html, Word Perfect to HTML, Frame Maker Interchange Format( MIF )화일 변환기, DECwrite to HTML변환기, Quark to HTML, PagerMaker to HTML변환기, C++ to HTML< Windows Excel 테이블 HTML변환기 등이 있으며, 이에 대한 자세한 사항은 http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converters.html 을 참조하면 된다.

5. 결론

HTML은 현재 IEFT에 의해 Version 2.0이 표준안으로 제정되었으며, dratf 상태로 Version 3.0 이 제안되었으며, 일부 기능이 Netscape과 같은 브라우즈상에서 구현이 되어 있다.
현재 전세계 Web Broswer의 약 85%를 차지하는 Netscape Communications사는 extended HTML을 제시하였으며, Netscape Navigator상에서 브라우징이 가능하다. 그러나 Netscape사의 extended HTML은 Netscape Navigator이외의 브라우즈에서는 지원이 되지 않기 때문에 Netscape이외의 다른 브라우즈를 사용하는 사용자의 입장에서는 많은 문제가 되고 있다. 그러나 현재와 같이 Netscape사가 전세계 웹브라우즈를 독점하고 있는 상황에서는 extended HTML이 많이 이용될 전망이다.
웹의 활성화와 함께 HTML의 사용은 점차 증가하고 있으며, 현재 Latex, Postscript, MS Word, 아래아 한글 등으로 제작된 문서를 HTML로 변환해 주는 소프트웨어가 제작되어 있으며, HTML문서를 제작하기 위한 HTML에디팅 소프트웨어도 활발히 제작되고 있다.
현재의 HTML은 홈페이지의 동적인 구성이 어렵다는 단점이 있다. 이를 보완하기 위하여 자바 언어를 수용한 웹페이지들이 속속 등장하고 있으며 자바 스크립터를 내장한 웹페이지들이 앞으로 인터넷상에서 활성화될 전망이다.

참고문헌(References)

[HTMLQR]: The HTML Quick Reference Guide; http://kuhttp.cc.ukans.edu/lynx_help/HTML_quick.html
[HTMLspec]: The official HTML specification; http://info.cern.ch/hypertext/WWW/MarkUp/MarkUp.html
[SGML]: 표준 SGML(Standard Generalized Markup Language); http://info.cern.ch/hypertext/WWW/MarkUp/SGML.html
[HTML_REF]: HTML Reference Manual; http://www.sandia.gov/sci_compute/html_ref.html
[Converter]: Converters to and from HTML; http://union.ncsa.uiuc.edu/HyperNews/get/www/html/converters.html
[Dave 95a]: Dave Raggett,HyperText Markup Language Specification Version 3.0 ,March,1995; URL: http://www.w3.org/pub/WWW/MarkUp/html3/CoverPage.html
[Dave 95b]: Dave Raggett, The HTML3 Table Model/W3C Working Draft 25-Sep-95; URL: http://www.w3.org/pub/WWW/TR/WD-tables-950925.html
[WEB_PUBLISHING]: Laura Lemay, Web Publishing with HTML
[HTML_SOURCE]: Ian S. Graham, HTML Source Book

Last-Modified : Friday, 8-Mar-96 02:05:11