|
김관석
|
2021-11-08 16:52:09, 조회수 : 213 |
1990년대 후반에 인터넷에 관심을 갖기 시작해서 HTML(HyperText Markup Language)을 배우기 시작했습니다. 처음에는 HTML 에디터에다 원하는 글을 쓰면 자동으로 HTML로 번역한 것을 구경하는 데에서 시작했습니다. 그러다가, 너무 복잡한 형삭은 편집이 힘들어서 가장 단순한 방식의 자립적인 홈페이지 http://www.at.co.kr를 만들어서 내용을 업데이트하기 편하게 만들었습니다. 근래에 위키백과의 편집에 참여하다가, 문득 지금의 HTML(+)의 본래 의미와 여기(홈페이지와 게시판)에서 어떻게 작동하는가 궁금해졌습니다. 그래서 다음과 같이 간략히 리뷰합니다.
월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷을 통해 하이퍼미디어(Hypermedia) 문서를 검색하기 위한 광역 클라이언트-서버 아키텍처(wide-area client-server architecture)입니다. 또한 참고 문헌, 전화 번호부 및 사용 설명서와 같은 원격 정보 소스를 검색하는 수단도 지원합니다. 검색 가능한 개체에 대한 명명 체계, 프로토콜(protocols)-메시지를 주고 받는 양식과 규칙의 체계 및 교환 포맷(formats)의 세 가지 주요 구성 요소가 있습니다.
- 문서에 대한 범용 명명 체계: URL(Universal Resource Location) 구문은 문서를 검색하는 데 사용할 프로토콜, 인터넷 호스트 및 경로 이름과 관련하여 문서를 지정합니다. 위치 독립 수명 식별자 형식은 현재 IETF(Internet Engineering Task Force)-국제 인터넷 표준화 기구에서 정의하고 있습니다. 네트워크 프로토콜을 사용하면 URN(Universal Resource Numbers)을 사용 가능한 가장 가까운 사본의 URL로 확인할 수 있습니다.
- 인터넷을 통해 문서를 검색하기 위한 사실상의 프로토콜(de facto protocols): FTP(File Transfer Protocol)-파일 전송 프로토콜, NNTP(Network News Transfer Protocol)-네트워크 뉴스 전송 프로토콜, WAIS(wide area information server)-광역 정보 서버, Gopher(Gopher protocol) 및 HTTP((HyperText Transfer Protocol)를 포함합니다. 후자는 World Wide Web을 위해 특별히 설계되었으며 문서 교환을 위해 MIME(Multipurpose Internet Mail Extensions) 메시지 포맷을 사용합니다.
- 하이퍼텍스트 링크를 지원하는 문서 포맷: 다양한 디스플레이 유형에서 렌더링될 수 있는 URL 및 URN을 기반으로 합니다. HTML+는 이 역할에서 기존 HTML 형식의 후속 제품으로 사용됩니다.
HTML+ 문서는 이미지, 사운드 시퀀스, MPEG(Moving Picture Experts Group) 영화, 디지털 인쇄 기술의 근간인 프레임워크의 일종인 포스트스크립트 파일 및 기타 포맷을 포함한 다양한 미디어에 하이퍼텍스트 링크를 제공하는 수단을 제공합니다. 이 링크를 통해 새로운 서버와 문서 이름이 발표될 때 정보 소스의 글로벌 웹을 구축할 수 있습니다. 정보 소스의 레지스터는 사용자가 키워드를 통해 정보를 검색할 수 있도록 하는 기능을 사용하여 웹을 통해 사용할 수도 있습니다. HTML+는 HTTP 뿐만 아니라 이메일과 네트워크 뉴스를 통한 정보 교환에 유용할 것으로 기대됩니다.
HTML+는 HTML의 상위 집합이며 테이블, 캡션이 있는 그림 및 원격 데이터베이스 쿼리 또는 설문지를 메일로 보내기 위한 양식과 같은 기능을 통해 이전 형식에서 점진적으로 롤오버(roll over)할 수 있도록 설계되었습니다. 큰 문서는 명시적 또는 암시적 탐색 링크를 사용하여 대기 시간을 줄이기 위해 여러 개의 작은 노드로 분할할 수 있습니다. 이 초안에는 수학 공식에 대한 지원을 추가하는 제안도 포함되어 있습니다. HTML+ 문서는 몇 가지 선택적 선언과 다음 중 하나 이상의 요소로 구성됩니다.
- Header
태그 H1, H2, ... H6은 헤더를 나타내는 데 사용됩니다. H1은 가장 중요하며 큰 글꼴 * 1(가장 중앙에 위치)로 렌더링됩니다. H2에서 H6은 점진적으로 덜 중요하며 일반적으로 더 작은 글꼴로 플러시 왼쪽으로 렌더링됩니다. 헤더 이름은 문서의 다음 섹션에 적합해야 하며 제목은 문서 전체를 덮어야 합니다. 헤더의 순서에는 제한이 없습니다. 레벨 1 헤더 다음에 레벨 3 헤더를 사용할 수 있습니다. 헤더 및 섹션 요소는 하이퍼텍스트 링크의 명명된 대상으로 사용하기 위해 현재 문서에 고유한 식별자를 사용할 수 있습니다.
예) *{h1 id="intro"}Introduction to HTML+{/h1}
- 단락(Paragraphs)과 *{P}
*{P} 이것은 HTML+가 공식적으로 줄 바꿈을 요구하지 않기 때문에 작동합니다. 단락으로 텍스트를 올립니다.
- 문자 관련
** less than sign & lt; 결과 <, greater than sign & gt; 결과 >, the double quote sign & quot; 결과 ", en space & ensp; 결과(공백), non breaking space & nbsp; 결과(반공백),
copyright sign & copy; 결과 ©, trade mark sign & trade; 결과 ™, registered sign & reg; 결과 ®, 하이퍼텍스트 링크 HREF(hypertext reference) {a href="xxx"}xxxxx{/a}
*{s}strike through{/s} strike through, {tt}fixed pitch{/tt} fixed pitch, {EM}normal emphasis{/EM} normal emphasis,
*{img align=top width=30 src="http://at.co.kr/at.ico"} I made http://at.co.kr in 1997 and designed the icon of my homepage. At that time the browser was Netscape.
 I made http://at.co.kr in 1997 and designed the icon of my homepage. At that time the browser was Netscape.
*{a href="http://at.co.kr"} {image align=top width=30 src = "http://at.co.kr/at.ico"} http://at.co.kr{/image} {/a}
http://at.co.kr
*Click {a href="http://at.co.kr"}here{/a} for more information!
Click here for more information!
- 목록(List)
*{OL}{LI}Wake up{LI}Get dressed{LI}Have breakfast {LI}Drive to work{/OL} (ordered list)
- Wake up
- Get dressed
- Have breakfast
- Drive to work
*{UL}{LI}Wake up{LI}Get dressed{LI}Have breakfast{LI}Drive to work{/UL} (undefined list)
- Wake up
- Get dressed
- Have breakfast
- Drive to work
*{DL}{DT}King Henry{DD}I myself heard the King say he would not be ransomed.
{DT}Williams{DD}Ay, he said so, to make us fight cheerfully: but when our throats are cut ... {/DL} (definition list)- King Henry
- I myself heard theKing say he would not be ransomed.
- Williams
- Ay, he said so, to make us fight cheerfully: but when our throats are cut ...
- Figures [여기서는 작동하지 않음]
- 테이블(Table)
TH 요소는 머리글 셀(cell) 텍스트 앞에 오고 TD 요소는 데이터 셀 텍스트 앞에 옵니다. TR 요소는 테이블 행을 구분하는 데 사용됩니다.
*{table border}{caption}A simple table{/caption}
{th}Year {th}Month {th}Day {tr}
{td}1972 {td}June {td}23rd {tr}
{td}1982 {td}October {td}7th{/table}A simple table| Year | Month | Day | | 1972 | June | 23rd | | 1982 | October | 7th |
행(row)과 열(column)의 셀들은 SPAN과 함께 병합될 수 있습니다. 기본적으로 텍스트는 각 셀의 중앙에 있으나 ALIGN으로 위치를 지정할 수 있습니다.
*{table border}{caption}A more complex table{/caption}
{th rowspan=2}{th colspan=2}average{th rowspan=2}other{br}category{tr}
{th}height {th}weight {tr}
{th align=left}males {td}1.9 {td}0.003 {td}yyy {tr}
{th align=left}females {td}1.7 {td}0.002 {td}xxx{/table}A more complex table | average | other
category | | height | weight |
|---|
| males | 1.9 | 0.003 | yyy |
|---|
| females | 1.7 | 0.002 | xxx |
|---|
- 양식(Forms) [홈페이지에는 기본으로 장착됨]
- Literal 또는 사전-형식화된(preformatted) 텍스트 [여기서는 작동하지 않음]
- 수학 공식 [MATH 명령이 작동하지 않음]
*H(s) = ∫{sub}0{/sub}{sup}∞{/sup} e{sup}-st{/sup} h(t) dt{
H(s) = ∫0∞ e-st h(t) dt
* { } 대신에 < > 로 표기하면, HTML로 인식하여 다음과 같이 출력됨.
** &xxxx; 를 & xxxx; 로 표기함. (HTML 표기)
p.s. 이 홈페이지를 처음 만들 당시 Netscape라는, Explorer와 형식이 조금 다른, 더 멋진(?) browser가 있었음.^^ |
|
|
