HTML 문서 작성하여 실행하기

안녕하세요. 이미보라입니다!

지난 포스트에서 우리는 HTML 문서의 기본 골격이 되는 태그들을 살펴보았습니다. 

오늘은 HTML 문서를 저장하고 실행하는 방법에 대하여 간략히 알아보도록 하겠습니다. 

 

 

 

먼저 HTML 문서를 만들기 위해서는 HTML 편집기가 필요합니다. 이때 크게 일반 문서 형태의 편집기와 HTML 전용 편집기로 나누어 볼 수 있습니다. 

 

일반 문서 편집기란 우리가 흔히들 사용하는 메모장이나, 에디트플러스 등의 텍스트 문서를 저장하는 데 사용되는 프로그램을 말합니다. 

 

HTML 전용 편집기란 HTML 문서를 만들기 위한 전용 편집기로, 나모 웹에디터나 드림위버와 같이 화면에 보이는 대로 편집하면 자동으로 HTML 코드를 생성해주는 편집기가 있습니다. 저의 경우 중학생일 때 정보 컴퓨터 교과에서 나모 웹에디터를 실습한 경험이 있습니다만, 현재는 많이 사용되지는 않는 추세입니다. 

 

그래서 저는 누구나 한번쯤은 다뤄봤을 텍스트 편집기인 메모장으로 HTML 문서를 작성하는 방법을 알려드리겠습니다. 

 

 

 

1. 메모장 프로그램을 실행하여 다음과 같이 작성해봅시다. 

 

 

 

 

2. [파일] > [다른 이름으로 저장]을 선택합니다. 

 

 

 

3. 파일 이름을 index.html이라고 작성하고 , 파일 형식을 모든 파일로 설정한 후 [저장] 버튼을 누릅니다. 

 

해당 파일은 파란색 박스 안에 위치한 경로에 저장됩니다.

 

4. 파란색 박스 안에 위치한 경로에 다음과 같이 index.html 파일이 생성된 것을 확인할 수 있습니다. 

 

우리가 작성한 html문서의 경우 웹브라우저를 통하여 번역되어 실행된 결과를 확인할 수 있습니다. 위의 index.html을 더블클릭하여 실행하면 아래와 같이 실행화면을 확인할 수 있습니다. 

 

 

5. 실행화면

 

 

이제 우리는 html 문서를 생성하고, 그 결과를 확인할 수 있습니다. 

 

 

+ editplus (에디트플러스) 프로그램

 메모장 프로그램 이외에도 에디트플러스라는 프로그램을 사용하여 html 문서를 작성할 수 있습니다.  에디트플러스 프로그램은 프로그래머가 사용하기에 편의성을 제공하는데, 구문 단락 구분, 줄 번호 표시 등을 지원합니다. 

 

위의 예제 코드를 에디터플러스에서 작성한 모습은 아래의 이미지와 같습니다.

 

 

에디트플러스의 경우 쉐어웨어임으로 설치 후 최초 30일 동안 평가판으로 무료 사용이 가능합니다. 에디트플러스 프로그램의 평가판 다운로드는 아래 링크에서 가능합니다. 

 

에디트플러스 문서 편집기 - 평가판 무료 다운로드

 

오늘은 기본적인 html 문서 만들기와 그 결과를 실행하는 방법을 알아보았습니다. 다음 포스트에서는 HTML 태그 중에서 글자와 관련된 태그에 대해서 살펴보도록 하겠습니다. 감사합니다.