KR19990032414A - Ｈｔｍｌ 문서 작성을 위한 테이블 태그 자동 생성 방법 - Google Patents

Ｈｔｍｌ 문서 작성을 위한 테이블 태그 자동 생성 방법 Download PDF

Info

Publication number
KR19990032414A
KR19990032414A KR1019970053455A KR19970053455A KR19990032414A KR 19990032414 A KR19990032414 A KR 19990032414A KR 1019970053455 A KR1019970053455 A KR 1019970053455A KR 19970053455 A KR19970053455 A KR 19970053455A KR 19990032414 A KR19990032414 A KR 19990032414A
Authority
KR
South Korea
Prior art keywords
html
grid
tag
html element
generating
Prior art date
Application number
KR1019970053455A
Other languages
English (en)
Other versions
KR100276084B1 (ko
Inventor
윤일지
윤석진
조창식
Original Assignee
정선종
한국전자통신연구원
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 정선종, 한국전자통신연구원 filed Critical 정선종
Priority to KR1019970053455A priority Critical patent/KR100276084B1/ko
Publication of KR19990032414A publication Critical patent/KR19990032414A/ko
Application granted granted Critical
Publication of KR100276084B1 publication Critical patent/KR100276084B1/ko

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Document Processing Apparatus (AREA)
  • Processing Or Creating Images (AREA)

Abstract

본 발명은 에이취.티.엠.엘(HTML) 문서 작성을 위한 테이블 태그 자동 생성 방법에 관한 것으로서, 본 발명에서 제공하는 테이블 태그 자동 생성 방법은 인터넷 서비스의 일종인 웹 서비스 상에 보여주기 위한 형태로 사각형의 이미지 또는 텍스트 영역을 편집하는 제 1 단계와, 상기 제 1 단계에서 생성된 이미지 또는 텍스트 영역의 각 변을 따라 직선을 그어 테이블을 생성하는 제 2 단계와, 상기 제 2 단계에서 생성된 테이블을 좌에서 우로 한줄씩 스캐닝하면서 테이블 태그를 생성하는 제 3 단계로 구성되어, 화면 상에 어떤 식으로 위치한 HTML 요소들도 편집 시 화면 상에 나타난 모습과 일치된 결과가 나올 수 있도록 HTML 문서를 생성해 낼 수 있으므로, 보다 더 편집이 자유스러운 위지윅/ 드래그-앤-드롭 방식의 HTML 편집기를 만들어 낼 수 있으며, 본 발명을 채택한 편집기를 이용하면 테이블 태그를 자동으로 생성해 줌으로써, 테이블 태그에 대해서 알지 못하는 사용자라도 쉽게 고급스러운 HTML 문서를 만들 수 있다는 장점이 있다.

Description

ＨＴＭＬ 문서 작성을 위한 테이블 태그 자동 생성 방법
본 발명은 에이취.티.엠.엘(HTML:Hyper Text Markup Language, 이하 HTML) 문서 작성을 위한 테이블 태그 자동 생성 방법에 관한 것으로서, 특히, HTML 코드를 생성하는데 있어서 HTML 요소를 적절한 위치에 배치할 수 있도록 하는 테이블 태그를 자동으로 생성하는 방법에 관한 것이다.
HTML이란, 인터넷 서비스의 일종인 웹(WWW:World Wide Web) 서비스에 사용하는 문서 교환 언어로서, 글자로 구성된 일반 텍스트(Text)문서와 '<', '단어', '>'로 이루어진 태그(Tag)로 구성되어 있으며, 태그의 종류는 <p>와 같이 절(paragraph)을 바꾸기 위한 태그에서부터 그림 파일을 읽어오도록 하는 <image>, 문자열을 하이퍼 링크시키는 <a href>등 다양한 태그들이 있다.
이러한 태그, 글자 및 이미지 등을 표현하는 HTML로 작성된 HTML 문서는 서비스 받는 측의 브라우저가 해석하여 정보 작성자가 원하는 문서 내용을 보여주게 되는데, 지금까지의 일반적인 HTML 편집기에 붙어있는 HTML 코드 생성기는 HTML 요소의 배치에 있어서 HTML 문서의 장식효과에 따라 단순히 태그(Tag)를 앞뒤로 붙여주는 데에 불과하였다.
도 1은 웹 편집방식을 나타내는 구성 개념도로서, 도 1을 참조하면, 마우스 커서(10)를 이용하여 원하는 이미지(Image) 요소(20) 또는 문자(Text) 요소(30)를 편집 윈도우(40)상에 자유롭게 배치한 것으로서, 이러한 배치 결과에 따라 HTML 코드를 생성하기 위해서는 테이블(Table) 태그를 사용하는 것이 효과적이다.
상기 테이블(Table)태그는 HTML 문서상에 표를 표현하기 위한 태그로써 <TABLE>, <TR>, <TD>의 세 종류의 태그로 이루어져 있는데, <TD>는 표의 격자 하나를 나타내는 태그이고 <TR>은 표의 한 줄을 나타내는 태그이다. 또한, 각 셀을 나타내는 태그는 넓이를 나타내는 폭(width)과 높이를 나타내는 높이(height) 파라미터를 줄 수 있고, 가로폭값(COLSPAN)과 세로폭값(ROWSPAN) 파라미터는 격자가 테이블에서 차지하는 칸의 값을 의미한다.
도 2는 테이블 태그를 사용하여 HTML 편집 내용을 표현한 결과 표시도로서, 상기 태그 및 파라미터들을 이용해 도 1에 나타난 문서의 내용을 HTML 문서로 나타낸 결과는 도 2와 같다.
상기와 같은 테이블 태그를 생성하기 위한 변환 작업을 종래와 같이 수작업으로 하게 되면 복잡한 계산을 해야 한다는 단점이 있으며, 복잡한 계산으로 말미암아 일반적으로 여러 번의 시행착오를 거쳐야 완벽한 테이블 태그를 만들어낼 수 있는 어려운 점이 있다.
따라서, 본 발명에서는 상기와 같은 단점을 해결하기 위해 HTML 요소들을 적절하게 배치하기 위한 테이블 태그를 자동으로 생성하는 에이취.티.엠.엘(HTML) 문서 작성을 위한 테이블 태그 자동 생성 방법을 제공하고자 한다.
본 발명에서 제공하는 테이블 태그 자동 생성 방법은 인터넷 서비스의 일종인 웹 서비스 상에 보여주기 위한 형태로 사각형의 이미지 또는 텍스트 영역을 편집하는 제 1 단계와, 상기 제 1 단계에서 생성된 이미지 또는 텍스트 영역의 각 변을 따라 직선을 그어 테이블을 생성하는 제 2 단계와, 상기 제 2 단계에서 생성된 테이블을 좌에서 우로 한줄씩 스캐닝하면서 테이블 태그를 생성하는 제 3 단계로 구성된다.
도 1은 웹 편집방식을 나타내는 구성 개념도,
도 2는 테이블 태그를 사용하여 HTML 편집 내용을 표현한 결과 표시도,
도 3은 본 발명에 따른 테이블 태그의 자동 생성 방법에 대한 흐름도,
도 4는 본 발명에 따른 테이블 태그 변환에 대한 처리 흐름도,
도 5는 본 발명에 따른 HTML 요소의 가로폭값(COLSSPAN)과 세로폭값(ROWSPAN) 생성에 대한 처리 흐름도.
〈도면의 주요부분에 대한 부호의 설명〉
10 : 마우스 커서 20 : 이미지(Image) 요소
30 : 문자(Text) 요소 40 : 편집 윈도우
이하, 첨부된 도면을 참조하여 본 발명을 좀더 상세히 설명한다.
도 3은 본 발명에 따른 테이블 태그의 자동 생성 방법에 대한 흐름도이고, 도 4는 본 발명에 따른 테이블 태그 변환에 대한 처리 흐름도이고, 도 5는 본 발명에 따른 HTML 요소의 가로폭값(COLSSPAN)과 세로폭값(ROWSPAN) 생성에 대한 처리 흐름도이다.
도 3을 참조하여 테이블 태그로 변환하는 과정을 설명하면, 본 발명의 테이블 태그 변환 방법은 인터넷 서비스의 일종인 웹 서비스 상에 보여주기 위한 형태로 사각형의 이미지 또는 텍스트 영역을 편집하는 편집 단계(s100)와, 상기 편집 단계(s100)에서 생성된 이미지 또는 텍스트 영역의 각 변을 따라 직선을 그어 테이블을 생성하는 테이블 생성 단계(s200)와, 상기 테이블 생성 단계(s200)에서 생성된 테이블을 좌에서 우로 한줄씩 스캐닝하면서 테이블 태그를 생성하는 테이블 태그 생성 단계(s300)로 구성된다.
상기 편집 단계(s100)에서 편집된 각 HTML요소들(즉, 이미지 아이콘(Image Icon) 및 문자 아이콘(Text Icon))은 연결 리스트 형태로 메모리 장치에 저장된다. 그리고, 상기 HTML 요소들을 포함하는 테이블을 생성(s200)시키기 위해 사각형의 형태인 상기 HTML 요소들이 차지하는 위치, 즉 각 사각형의 각 변을 따라서 직선을 긋는다. 이 때, 생성된 테이블은 2차원 배열로 표현되고, 테이블 태그를 생성(s300)하기 위해 완성된 테이블을 좌에서 우로 한 줄씩 스캔한다. 이 때, 스캔한 격자에 HTML 요소가 차지 하고 있으면 차지한 위치에 따라 그 HTML의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN)을 늘리고, 상기 가로폭값(COLSPAN) 또는 세로폭값(ROWSPAN)에 의해 점유된 격자는 스킵(Skip)하면서, 이러한 스캔 과정을 테이블 전체에 걸쳐 반복하여 도 2와 같은 결과를 만들어 낸다.
도 4는 본 발명에 따른 테이블 태그 변환에 대한 처리 흐름도로서, 상기 테이블 태그 생성단계(s300)를 나타내는 흐름도인데, 도 4를 참조하면, 먼저, 상기 테이블 생성 단계(s200)에서 생성된 테이블의 격자 배열을 좌에서 우로 스캐닝 시작(s301)하고 테이블의 한 줄을 나타내는 태그(<TR>)를 생성(s302)한 후, 상기 테이블의 격자 하나를 나타내는 태그(<TD>)를 생성(s303)한다.
그리고, 상기 스캐닝(s301) 시작에 의해 현재 스캐닝한 격자 내에 HTML 요소가 존재하는지를 확인(s304)하여, 상기 격자내에 HTML 요소가 존재하는 경우 그 HTML 요소의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN)을 초기화한 후 HTML 요소의 태그를 생성(s305)하고, 상기 HTML 요소가 차지하는 격자의 수를 인식하기 위해 그 HTML 요소의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN)을 결정(s306)한다.
이 때, 상기 단계(s303 내지 s306)는 왼쪽 끝(s307)에 있는 격자를 스캐닝할 때까지 반복한 후, 다음줄을 대상으로 수행(s308)하며, 더 이상 남은 줄이 없을 때(s309) 종료한다.
도 5는 본 발명에 따른 HTML 요소의 가로폭값(COLSSPAN)과 세로폭값(ROWSPAN) 생성 과정(s306)에 대한 처리 흐름도로서, 도 5를 참조하면, 상기 테이블 태그 생성 과정(s300)의 테이블 스캐닝 도중 HTML 요소가 나타났을 때 그 HTML 요소의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN) 파라미터를 늘리는 과정을 나타내고 있다. 먼저, 현재 발견된 HTML 요소가 현재 위치에서 아래 격자 부분도 차지하고 있는지 검사(s310)하여, 만약 존재하면 <TD> 태그의 세로폭값(ROWSPAN) 파라미터를 하나 증가(s311) 시키고, 그 밑에 더 이상 HTML 요소가 차지하고 있지 않은지 검사(s312)하여 있으면 상기 단계(s310)(s311)를 반복수행하여 상기 세로폭값(ROWSPAN) 파라미터를 증가시킨다. 상기 검사(s312)결과 더 이상 차지하고 있지는 격자가 없으면, 오른쪽 격자를 차지하고 있는지를 검사(s313)한다. 상기 검사(s313) 결과 만약, 오른쪽 격자도 HTML 요소를 차지하고 있으면 그 HTML 요소의 가로폭값(COLSPAN) 파라미터를 하나 증가(s314)시키고, HTML이 차지한 오른쪽 격자가 더 있는지를 검사(s315)하여, 더 이상 오른쪽으로 차지하는 격자가 없을 때까지 상기 가로폭값(COLSPAN)증가(s314)를 반복한다.
상기와 같은 본 발명의 방법은 화면 상에 어떤 식으로 위치한 HTML 요소들도 편집 시 화면 상에 나타난 모습과 일치된 결과가 나올 수 있도록 HTML 문서를 생성해 낼 수 있으므로, 보다 더 편집이 자유스러운 위지윅/ 드래그-앤-드롭 방식의 HTML 편집기를 만들어 낼 수 있으며, 본 발명을 채택한 편집기를 이용하면 테이블 태그를 자동으로 생성해 줌으로써, 테이블 태그에 대해서 알지 못하는 사용자라도 쉽게 고급스러운 HTML 문서를 만들 수 있다는 장점이 있다.

Claims (5)

  1. 인터넷 서비스의 일종인 웹 서비스 상에 보여주기 위한 형태로 사각형의 이미지 또는 텍스트 영역을 편집하는 제 1 단계와,
    상기 제 1 단계에서 생성된 이미지 또는 텍스트 영역의 각 변을 따라 직선을 그어 테이블을 생성하는 제 2 단계와,
    상기 제 2 단계에서 생성된 테이블을 좌에서 우로 한줄씩 스캐닝하면서 테이블 태그를 생성하는 제 3 단계로 구성된 것을 특징으로 하는 HTML 문서 작성을 위한 테이블 태그 자동 생성 방법.
  2. 제 1 항에 있어서,
    상기 제 3 단계는
    상기 제 2 단계에서 생성된 테이블의 격자 배열을 좌에서 우로 스캐닝 시작하고 한 줄을 나타내는 태그를 생성하는 제 31 단계와,
    상기 테이블의 격자 하나를 나타내는 태그를 생성하고 현재 스캐닝한 격자 내에 HTML 요소가 존재하는지를 확인하는 제 32 단계와,
    상기 제 32 단계의 확인 결과 상기 격자내에 HTML 요소가 존재하는 경우 그 HTML 요소의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN)을 초기화한 후 HTML 요소의 태그를 생성하는 제 33 단계와,
    상기 제 33 단계에서 발생한 HTML 요소가 차지하는 격자의 수를 인식하기 위해 그 HTML 요소의 가로폭값(COLSPAN)과 세로폭값(ROWSPAN)을 결정하는 제 34 단계로 구성되며,
    테이블의 격자 배열 중 마지막 줄을 스캐닝할 때까지 반복하는 것을 특징으로 하는 HTML 문서 작성을 위한 테이블 태그 자동 생성 방법.
  3. 제 2 항에 있어서,
    상기 제 32 단계 내지 제 34 단계는
    왼쪽 끝에 있는 격자를 스캐닝할 때까지 반복되는 것을 특징으로 하는 HTML 문서 작성을 위한 테이블 태그 자동 생성 방법.
  4. 제 2 항에 있어서,
    상기 제 34 단계는
    현재 스캐닝한 격자내에 발견된 HTML 요소가 현재 스캐닝한 격자의 아래 격자를 차지하고 있는 경우 그 HTML 요소의 가로폭값(ROWSPAN)에 1을 추가하고, 오른쪽 격자를 차지하고 있는 경우 그 HTML 요소의 세로폭값(COLSPAN)에 1을 추가하는 것을 특징으로 하는 HTML 문서 작성을 위한 테이블 태그 자동 생성 방법.
  5. 제 1 항 또는 제 4 항에 있어서,
    상기 제 3 단계는
    상기 테이블을 스캐닝할 때, 임의의 HTML 요소의 세로폭값(ROWSPAN)과 가로폭값(COLSPAN)에 의거하여 HTML 요소가 점유하고 있는 격자는 스킵하는 것을 특징으로 하는 HTML 문서 작성을 위한 테이블 태그 자동 생성 방법.
KR1019970053455A 1997-10-17 1997-10-17 에이취티엠엘문서작성을위한테이블태그자동생성방법 KR100276084B1 (ko)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1019970053455A KR100276084B1 (ko) 1997-10-17 1997-10-17 에이취티엠엘문서작성을위한테이블태그자동생성방법

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1019970053455A KR100276084B1 (ko) 1997-10-17 1997-10-17 에이취티엠엘문서작성을위한테이블태그자동생성방법

Publications (2)

Publication Number Publication Date
KR19990032414A true KR19990032414A (ko) 1999-05-15
KR100276084B1 KR100276084B1 (ko) 2000-12-15

Family

ID=19522982

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1019970053455A KR100276084B1 (ko) 1997-10-17 1997-10-17 에이취티엠엘문서작성을위한테이블태그자동생성방법

Country Status (1)

Country Link
KR (1) KR100276084B1 (ko)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20010035005A (ko) * 2000-08-29 2001-05-07 채진석 Ｘｍｌ 문서의 외형 정보 지정 방법
KR100430309B1 (ko) * 2000-12-20 2004-05-04 주식회사 로커스 음성포탈 서비스에서 보이스엑스엠엘 에디터 시스템

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20010035005A (ko) * 2000-08-29 2001-05-07 채진석 Ｘｍｌ 문서의 외형 정보 지정 방법
KR100430309B1 (ko) * 2000-12-20 2004-05-04 주식회사 로커스 음성포탈 서비스에서 보이스엑스엠엘 에디터 시스템

Also Published As

Publication number Publication date
KR100276084B1 (ko) 2000-12-15

Similar Documents

Publication Publication Date Title
KR970006400B1 (ko) 아이콘을 사용한 정보처리시스템
US7703004B2 (en) Systems and methods for automatically converting web pages to structured shared web-writable pages
KR20060015494A (ko) 콘텐츠 작성 시스템, 콘텐츠 작성 방법, 이 콘텐츠 작성방법을 실행시키기 위한 컴퓨터 실행 가능한 프로그램, 이프로그램이 기록된 컴퓨터 판독 가능한 기억 매체,그래피컬 유저 인터페이스 시스템 및 표시 제어 방법
US20050028090A1 (en) Retrieving documents transitively linked to an initial document
CA2666305C (en) Method, system, and program for supporting object selection in web page authoring
JPH06348890A (ja) 文書処理方法及び装置
JPH0547853B2 (ko)
US7765472B2 (en) Method and device for editing SVG type digital graphical documents in particular from a browser
KR100276084B1 (ko) 에이취티엠엘문서작성을위한테이블태그자동생성방법
US20030229611A1 (en) Mapping, navigation, and data input for electronic documents
US20100169866A1 (en) Navigation in computer software applications developed in a procedural language
JPH10222510A (ja) 文書変換方法
CN115495079A (zh) 一种基于PSD文件格式的Qt界面动态生成方法及其系统
US20030154462A1 (en) Software maintenance material generation apparatus and generation program therefor
CN113569161A (zh) 试题答案标注方法、装置、电子设备及计算机可读介质
JP4148029B2 (ja) 文書処理装置
JP3965836B2 (ja) 画像処理システム
JP2004326567A (ja) 表コンテンツ作成支援システム、方法及びプログラム
EP0617374A1 (en) A data processing system for printing screen information
JP3454987B2 (ja) 文書編集装置及び方法
JPH10260961A (ja) Ｗｗｗ用ｈｔｍｌファイル作成方法及び装置
JP2685762B2 (ja) 複合文書作成装置及び複合文書作成方法
Syriani Graphical Projectional Editing in Gentleman
JP2009015753A (ja) 表示パネル、画面編集方法及び画面編集プログラム
JPH05342325A (ja) 文書処理装置およびその装置のためのフォーム登録装置

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant
FPAY Annual fee payment

Payment date: 20090914

Year of fee payment: 10

LAPS Lapse due to unpaid annual fee