1-1 HTML란 뭘까?


본격적으로 강좌에 들어가기 전, HTML는 뭘까요? 아니 그전에, WWW는 뭘까요?
WWW(World Wide Web)은 거미줄 처럼 엉킨, 정보의 망을 얘기하며 HTML(HyperText Markup Language)는 WWW에서 볼수있는 문서를 만들기 위한 일종의 표준언어입니다.
HTML로 만들어진 문서들은 확장자를 .html또는 .htm을 가집니다.

이러한 웹 문서는 우리가 직접 태그를 입력하여 만들거나, 웹 편집기(예: 나모 웹에디터 등)으로 만들 수 있습니다.
앞으로 우리가 배울 태그들을 사용하여 텍스트, 그림, 사진, 음성, 영상등 다양한 요소들을 웹 브라우저로 표현할 수 있습니다. HTML의 구성요소는 총 네가지이며, 아래와 같습니다.

요소 (Elements): 시작 태그와 종료 태그로 이루어진 모든 명령어
태그 (Tag): 요소의 일부, 시작 태그(요소를 시작)와 종료 태그(요소를 끝냄)가 있음. 
속성 (Attributes): 명령을 구체화 시키는 것으로 요소의 시작태그 안에서 사용됨.
변수 (Arguments): 속성과 관련된 값.


마지막으로 HTML는 이 요소들의 집합체라 할수 있습니다.

1-2 HTML의 기본 구조


HTML 문서는 기본적으로 머리글(Heading)과 본문(Body)으로 나뉩니다. 한번 볼까요?

<HTML>
 <HEAD>
  <TITLE>이곳은 타이틀, 즉 제목!</TITLE>
  </HEAD>

 <BODY>
  이곳은 몸체, 즉 본문
 </BODY>
</HTML>


살펴보자면, <HTML>..</HTML> 태그는 HTML로 작성된 문서라는 것을 알려주는 태그이며 보시다 싶히 시작과 끝에 쓰였습니다. <HEAD>..</HEAD> 태그는 머리글로, 문서의 기본정보를 포함하고 있는 부분입니다. 그리고 <TITLE>..</TITLE>란 태그는 <HEAD>..</HEAD> 태그안에 포함되어 있으며, 우리가 쓴 제목을 제목 표시줄에 나타내게 해주는 태그입니다.
※ 주의하실 점은 HTML에선 대소문자 구분이 존재하지 않으며, 종료태그엔 /를 붙입니다.

<BODY>..</BODY>란 태그는 뭘까요? 이곳에선 홈페이지 내용을 입력합니다. 대부분의 태그가 이곳에 들어갑니다. 한번 우리가 직접 문서를 만들어보도록 할까요? 메모장으로 한번 작성해보도록 합시다.


이렇게 작성한 태그를 한번 HTML 문서로 만들어 보도록 할까요? 파일 -> 저장, 또는 단축키 Ctrl+S를 눌러 저장을 하도록 합시다. 저장을 할때 파일 형식을 '모든 파일'로 바꾸시고 확장자 .txt를 지우신 다음에 .html를 입력하세요.
 


다 마치셨으면, 웹 브라우저로 우리가 작성한 HTML 문서를 불러오도록 합시다. 간단하게 만들어진 HTML 문서를 더블클릭 하여 바로 확인할 수 있습니다.


정상적으로 BODY 태그 사이에 자신이 입력한 문구가 표시되셨나요? 그렇다면 성공한 것이고, 그렇지 않다면 시작 태그와 종료 태그를 다시한번 살펴보시고 올바르게 태그를 사용했는지 재확인을 하실 필요가 있습니다.
저작자표시

'프로그래밍 관련 > HTML' 카테고리의 다른 글

HTML 강좌 6편. <EMBED>..</EMBED>, <TABLE>..</TABLE>  (8) 2012.02.14
HTML 강좌 5편. HTML 색상표, 링크 걸기  (2) 2012.02.14
HTML 강좌 4편. <UL>, <OL>, <LI>, 특수문자 표시, 이미지 넣기  (2) 2012.02.14
HTML 강좌 3편. <FONT>, <BIG>, <STRONG>, <CENTER>, <SUB>..  (2) 2012.02.14
HTML 강좌 2편. 본격적인 태그와 요소의 활용, <BODY>, <BR>..  (20) 2012.02.14

티스토리툴바