HTML 문서의 기본구조

1. HTML 문서의 기본구조 알기

HTML 문서의 기본 구조는 머리글(Heading)과 본문(Body)으로 나누어 집니다.  머리글은 문서의 제목(Title)을 적고 본문은 문장의 실제 내용들이 들어가게 되는 것이지요.
그러면, 기본 형태를 한번 보실까요?

:     본문 내용          :

HTML 문서의 시작   HTML 문서의 헤더 시작    HTML 문서의 제목 작성    HTML 문서의  헤더 끝    HTML 문서의 본문 시작   HTML 문서의 본문내용 작성    HTML 문서의 본문 끝   HTML 문서의 끝

○ : HTML 문서 지정
작성된 문서가 HTML로 작성되었다는 의미를 가지고 있으며, 앞으로 사용할 모든 태그는 과 사이에 들어가야 합니다.

○ : 문서의 머리글
보여주는 문서의 제목을 작성하는 부분으로 태그와 함께 사용하지요.  이곳에는 문서의 내용을 가장 잘 나타낼 수 있는 짧고 명료한 단어나 문장을 입력합니다.  여기서 입력한 제목이 웹 브라우저의 화면 상단의 [제목표시줄]에 표시가 되거든요.

○ : 문서의 본문
표현하고자 하는 모든 문서들이 나열되는 곳으로 홈페이지의 내용을 전부 포함한다고 할 수 있죠!

2. HTML 문서 작성해 보기

지난 강좌에서도 말씀 드렸듯이 HTML 문서를 작성하기 위해서는 편집기(Editor)가 필요한 데, HTML 문서는 ASCII모드를 지원하는 텍스트로 된 문서이기 때문에 흔히 우리가 사용하는 워드프로세서나 메모장을 이용할 수가 있습니다.
여기서는 윈도우에서 기본적으로 내장하고 있는 가장 간단한 문서편집기인 메모장을 이용하여 문서를 작성해 보겠습니다.

그러면, 메모장을 을 클릭하세요. 메모장이 어디있는지 모른다고요?  
① 메모장은 [시작]단추를 클릭해서 [프로그램]-[보조프로그램]-[메모장]메뉴를 선택하면

    됩니다. 자! 이제 [메모장]에서 아래와 같이 HTML문서를 작성해 볼까요?

 

참!  작성시 알파벳 대소문자 구분 없습니다.  그리고, 위에 있는(< >, )를 태그(tag)라고 합니다.
태그에는 기본적으로 시작과 끝이 있지요. 종료태그에는 기본적으로 "/"기호를 붙여 줍니다. 단독으로 쓰여지는 태그도 물론 있습니다만, 그것은 나중에 공부하며 익혀 가도록 하지요.

② 그러면, 메모장에서 작성된 위의 내용을 저장을 해야 겠군요.
여러분이 공부하기 편하게 HTML이라는 폴더를 만드시고 " index.html" 이라고 저장해 보세요. 지난 강좌에서 배우셨듯이 확장자가 "html"입니다. 기억하세요. 물론 "htm" 도 가능하다 그랬죠?

③ 그리고, 유의해야 할 사항은 [메모장]에서 저장할 때 [파일형식]이 [텍스트 문서]로 되어 있어요. [텍스트 문서]는 확장자가 "txt'가 되는 것이죠.
그래서 [모든파일]로 [파일형식]을 바꾸어야 "html" 또는 "htm" 확장자를 쓸 수 있어요. 잊지 마세요.

3. 웹 브라우저로 문서 불러오기

① 웹 브라우저(여기서는 익스플로러기준)를 먼저 실행 하세요.
② [파일]-[열기]메뉴에서 " index.html" 화일을 불러오면 "HTML 문서의 기본 구조입니다..." 라고 나타납니다.