작성: 카이thruthesky@yahoo.co.kr
홈페이지:http://jangnans.com
기타: 본 문서의 저작권은 작성자에게 있습니다. 재 배포(복사)를 하실때에는 작성자와 홈페이지 주소를 남겨주세요.

HTML은 Hyper Text Makeup Langage 의 약자입니다. 대충 해석을 해 보면, 문서를 표기하는데 사용되는 (프로그래밍) 언어라고 할 수 있습니다.
HTML 로 문자열(글자들)의 색깔, 크기, 이미지 표현, 다른 문서로 이동 등의 작업을 할 수 있습니다. 이것은 우리가 흔히 보는 (매일 같이 접하는) 인터넷 홈페이지의 모습입니다. 아, ... 그리고 보니 지금 여러분이 보고 있는 이 글(본 강좌 문서) 엮시 HTML 로 작성이 되었습니다.

HTML 은 단순히 텍스트 문서를 화면에 표현하는 것으로 그치지 않습니다. 우리가 웹브라우저로 음악, 영화, 그림, (플래쉬)게임 등 여러가지 요소를 즐길 수 있는 것만 봐도 알 수 있습니다. HTML 은 이와 같이 멀티미디어를 표현하는데에 직접적으로 사용할 수 있습니다.

HTML 은 하나의 언어입니다. 물론 여러가지 의미로 해석이 될 수 있지만, 컴퓨터 프로그래밍 언어(영어, 한국어 이런 개념과는 약간 틀린)로서 이해를 하는게 낳습니다. HTML 언어에는 태그라는 명령어가 있습니다. 예를 들면 <BR> 태그나 <HR> 과 같은 것들입니다. 태그에는 종류가 있습니다.

이러한 HTML 의 태그를 직접 사용해서 홈페이지를 만드는 것은 쉽지가 않습니다. 그래서 HTML 을 몰라도 홈페이지를 만들 수 있는 프로그램들이 생겨나기 시작했습니다. 나모웹에디터나 드림위버와 같은 것들이 대표적인것들입니다. 나모를 사용하면 그냥 글자만 입력하면 HTML 태그는 자동으로 만들어집니다. 그러나 홈페이지를 직접 만들어서 운영하기 위해서는 HTML 태그를 반드시 알아야합니다. 물론 HTML 태그를 익히고나서 작업의 속도를 높이기 위해서 나모웹에디터나 드림위버와 같은 편집기를 사용하시는 것은 좋습니다. 그러나 <BR> 태그나 <IMG> 태그에 대해서 아무것도 모르는체 HTML 편집기를 이용해서 문서를 작성한다면 여러분은 머지않아 큰 어려움에 맞닥드리게 될 것입니다.

본 강좌를 따라한다면 여러분들은 지금 당장은 필요치 않겠지만, 곧 여러분만의 홈페이지 계정이 필요하게됩니다. 아래의 링크 페이지를 보고 미리 무료 홈페이지 계정을 발급 받아 놓으시기 바랍니다.
http://jangnans.com/?cate=bbs&mode=read&idx=2646
http://jangnans.com/?cate=bbs&mode=read&idx=2792

이 강좌에서 여러분들은 HTML 작성에 대해서 같단하게 예제를 맞보게 될 것입니다.
우전 저를 따라 해보십시오.

먼저 탐색기를 실행합니다. 탐색기가 뭔지 모르시는 분 없죠? 아래의 그림과 같습니다.

위 그림(클릭시 큰화면)을 보시면 C: 드라이브 위치라는 것을 알 수 있습니다. 이 디렉토리에서 폴더를 만듭니다. 폴더 이름은 html (모두 소문자로 html 입니다.) 이라고 할까요?
아래의 그림과 같이 폴더를 만듭니다.

위 화면에서 html 폴더를 만들고 있는 모습을 볼 수 있습니다.

금방 우리가 만든 html 폴더는 C 드라이브에 있습니다. 전체 위치(경로)를 적어보면 C:html 입니다. 우리는 지금 부터 이 폴더(C:html)에 모든 HTML 파일을 저장할 것입니다.

그럼 이제 메모장을 열어봅시다. 메모장이 뭐냐구요? 아래의 그림과 같은 프로그램입니다. 모든 윈도우에 다 설치되어있습니다. 아마 여러분들도 자주 보셨을 것입니다.
실행하셨나요? 그럼 아래와 같이 그냥 "안녕. 나는 장난을 해." 라고 입력을 해보십시오.

위 화면과 같이 입력을 하셨나요? 위 화면을 보시면 그냥 글자만 입력되어 있습니다. 즉, HTML 태그는 아직 사용이 되지 않았습니다. 뭐, 홈페이지에 꼭 HTML 태그가 들어가야한다는 법은 없습니다. 그런 법 따위는 지킬 필요도 없구요. 그 다음에는 무엇을 해야할까요? 아니 제가 무엇을 하려고 할까요?

네 그렇습니다. HTML 파일로 저장을 해야합니다. 지금은 그냥 텍스트 편집기에 문자열(글자)를 입력한 것입니다. HTML 로 저장을 해야 진짜 홈페이지 파일이 되는 것입니다. 방법은 간단합니다. 아래의 그림과 같이 파일 이름(확장자)을 .html 로 해주면 됩니다.

위 그림을 보십시오.(그림을 클릭하면 큰 화면으로 나타납니다.) 네모 형태의 붉은 테두리가 두개 보입니다. 위에 붉은 테두리를 보면 현제 파일을 저장하는 위치가 C: 드라이브 밑에 html 폴더라는 것을 알 수 있습니다. 이와 같이 우리는 모든 문서를 C:html 에 저장을 할 것입니다.
밑에 붉은 테두리를 보세요. 파일 이름이 index.html 이죠? 마지막에 파일의 확장자가 html 이라는거 잊지마세요. index.html 파일은 좀 특별합니다. 기본적으로 사용되는 파일입니다. 자세한 것은 나중에 알아보도록 합시다.

일단 위의 그림과 같이 해서 저장을 하십시오. 저장을 했나요? 그럼 아래의 그림과 같을 것입니다.

위 그림을 보면 C: 드라이브의 html 폴더 밑에 index.html 파일로 저장이 되었다는 것을 알 수 있습니다. 이제 이 index.html 파일을 더블 클릭해보세요. 마우스로 따닥~! 빠르게 두번 클릭입니다. 더블클릭을 하면? 어떤 현상이 벌어집니까? 아래의 그림과 같은(혹은 비슷한) 모습이 됩니까?

위 화면을 잘 보면, 웹브라우저(인터넷 익스플로러)가 실행이 되었고 그 내용은 우리가 메모장으로 작성한 "안녕. 나는 장난을 해."입니다. 즉, 우리가 좀 전에 더블 클릭한 C:htmlindex.html 파일이 웹브라우저 내에서 보여진 것입니다. 왜 이럴까요? 에 대한 대답을 본 문서에서 기대하지 마세요. 물론 쉽게 설명을 할 수 있을지도 의문이지만, 차근 차근 공부를 해 가면서 배운다고 생각을 하세요. 그냥 지금은 HTML 파일을 클릭하면 웹브라우저가 실행되어서 그 안에 내용이 보인다는 정도로만 외워두세요.

자 어떤가요? 여러분은 지금까지 메모장으로 문서를 만들고 HTML 파일로 저장한 다음 그 파일의 내용을 웹브라우저로 보았습니다. 여러분들은 드디어 HTML 파일을 만든 것입니다. 좀 밋밋한가요? HTML 파일이라고 할 수는 있지만, 엄밀한 의미로 웹페이지는 아닙니다. 웹페이지는 웹에 있어야 웹페이지가 될 수 있습니다. 이부분에 대해서도 차차 알아봅시다.

우선, 여러분이 작성한 index.html 파일에 살짝 HTML 태그를 넣어(추가 해)봅시다. HTML 태그가 뭐라고 했습니까? 본 문서의 맨 처음에 HTML 은 문서내의 문자(글자)에 다양한 시각적 효과를 주기 위한 언어라고 했죠. 이제는 그 HTML 을 통해서 직접 여러분의 index.html 에 시각적 효과를 줘 봅시다.

위의 그림을 보세요. HTML 태그가 추가된 모습니다. 아래와 같죠.

<h1>안녕.</h1><font color=blue>나는 장난을 해.</font>

위 문장에서 <h1> 은 문자열의 크기를 크게 보여주는 역활을 합니다. <h1>안녕.</h1> 과 같이 나타내면 "안녕." 글자를 크게 보여주는 것이죠. HTML 태그에서 어떤 것은 시작과 끝을 나타내기도 합니다. 끝 태그는 항상 </ XXX > 와 같이 / 기호를 태그 이름 앞에 붙여줍니다.
<font color=blue> 는 글자의 색깔을 파랗게 나타냅니다. <font > 의 끝 내그는 </font>입니다. 즉, <font>와 </font> 사이에 있는 글자들에 대해서 효과를 나타냅니다.

위와 같이 작성을 했으면 저장을 해야합니다. 저장하는 방법아시죠? index.html 에 저장을 하고 다시 더블 클릭을 해봅니다. 그럼 어떻게 나오나요?

아까처럼 웹브라우저가 뜨면서 글자가 나타나죠? 그런데 글자의 모습이 처음의 것과는 조금 틀리죠? 그렇죠?

네, 좋습니다. 본 문서에서는 여기까지 마치겠습니다. index.html 파일의 내용을 이리 저리 변경을 해 보면서 응용을 해보세요.

다음 강좌에서 뵙겠습니다. 그럼,

참고로 말씀드리면 전 본 강좌를 작성하면서 HTML 태그를 직접 사용하지 않았습니다. 그냥 문서 편집을 하는거죠. 글을 입력하고 원한다면 마우스를 이용해서 글자 크기, 색깔 등을 조절합니다. 이렇게 해서 홈페이지에 어떻게 글을 올리냐구요? 저는 그냥 문서를 작성한 다음 게시판에 직접 저장을 합니다. 웹브라우저로 복사나 카피를 하는게 아니라, 문서 편집기에서 직접 게시판으로 저장을 해 버립니다. 본 강좌에 보이는 이미지 파일들있죠? 이런것도 자동을 알아서 게시판으로 저장이 된답니다. 어떻게요? 음.. 차차 배워야죠. 아참, 혹시 장난하세요?

그럼 다음 강좌에서 뵙겠습니다.