HTML 문서

이글은 제가 2004년 1월 8일 시카고 중앙일보에 올렸던 글이지만 2020년 지금에도 웹사이트 구축에 도움이 될만한 글이라 생각되어 다시 공유 합니다. 업데이트 된부분은 노랑색으로 하이라잇 하였습니다.

HTML 은 HyperText Markup Language 의 약자로 월드 와이드 웹을 통해 보여주는 문서의 표준 언어이다. HTML문서 내에는 글, 그림, 소리, 동영상, 플래쉬 Movie외에 이를 적절하게 표현해주는 글씨체와 크기 또한 형식등의 내용을 포함하여 웹 부라우저에서 어떻게 보여줄지를 설명해 준다. 월드 와이드 웹에서는 텍스트 문서와 HTML 변종의 몇가지 문서 형식을 제외하고는 대부분이 HTML 언어를 사용해 문서 표기를 하기 때문에 웹 페이지를 직접 디자인 하기 위해서는 어느정도의 HTML 에 관한 지식을 가져야 한다. (2004년 당시에는 HTML4 를 쓰고 있었지만 현재는 대부분 HTML5 를 사용한다.)

HTML 은 웹 문서 표기 방식으로 태그(TAG) 를 사용하여 문서의 특성을 표기한다. 태그는 <이름> 식으로 “<” 와 “>” 안에 keyword 이름을 포함하고 종류로는 단독 태그와 복합 태그가 있다. 단독 태그는 홀로 사용할수 있는 태그이며 복합 태그는 <이름> 과 식으로 시작태그와 마침태그가 쌍으로 되어있다. HTML 에 대한 언어 표기 방법을 모두 설명하자면 책 한권 정도의 분량이고 사용할수 있는 태그의 숫자와 사용용도가 다양하므로 사람이 모두 기억하고 직접 HTML 문서를 만드는데는 조금의 어려움이 있다.

하지만, 요즈음에 좋은HTML 편집 프로그램이 (Editor) 개발되어 HTML 언어를 직접 알지 않고도 웹 문서를 제작할수 있다. 많이 쓰이는 편집 Editor으로는 마이크로 소프트사의 Frontpage 와 메크로 미더어사의 Dreamweaver 가 (어도비 회사에서 메크로 미디어를 인수하여 현재는 Adobe Dreamweaver 라 한다) 있다. 두개의 Editor 모두 WYSIWYG (What-You-See-Is-What-You-Get) 형식으로 만들어져 사용자가 부라우저에서 직접 보는것 처럼 웹 문서를 제작하기 때문에 웹 페이지 디자인이 상당히 수월하다. 쉽게 이야기하면 워드 프로세서에서 일반 문서를 작성하듯이 HTML Editor 에서 웹 문서를 제작하기 때문에 누구든지 워드 프로세서를 사용하듯이 쉽게 문서를 작성할수 있다. HTML 문서는 문서 이름의 확장자를 .html 또는 .htm 을 써서 다른 부류의 파일들과 분리해 준다.

또한, HTML 문서내에는 태그 형식으로 포함해 글씨체와 글의 크기, 그리고 내용을 쉽게 포맷해주는 CSS (Cascading Style Sheet) 와 문서를 다이네믹하고 Interactive 하게 만들어 주는 자바 스크립트 (Javascript) 를 포함할수 있다. CSS 와 Javascript 또한 HTML 과 마찬가지로 다양한 기능을 제공해 주기 때문에 전문적인 웹 페이지를 만들기 위해서 많이들 사용한다.

우리는 홈페이지를 만들경우 HTML 문서를 제작해 웹 사이트를 만든다. 하지만 전문적인 웹 사이트를 만들경우 대체적으로 문서의 헤더 (Header) 부분과 메뉴바 (menubar), 푸더 (footer) 부분은 같은 내용을 보여준다. 하지만, 하나의 HTML 문서를 통해 이처럼 여러부분을 보여 주려면 문서 마다 똑같은 내용을 실어야 한다. 또한, 이 부분중 일정 내용을 바꿀경우 여러문서에 있는 내용을 반복해서 바꾸어 주어야 하기 때문에 내용을 바꾸기에 큰 어려움을 겪을수 있다. 이러한 점을 쉽게 해 주기 위해 한문서를 여러 조각으로 나누어 각각의 부분 부분을 새로운 파일로 저장하고 각각의 문서에서 이렇게 나누어 저장한 파일들을 불러와 하나의 문서를 만드는 기술을 쓸수 있다. 이처럼 여러문서를 하나로 묶어 줄수 있는 툴로는 Webbot 과 SSI (Server Side Includes) 또는 템플렛 등이 있다.