HTML Editor의 활용

홈페이지에 대해 전반적으로 살펴 보았습니다. 이제 자신만의 홈페이지를 만들고 싶은 충동이 솟아오르지 않으십니까? 하지만 아직은 아닙니다. 지금부터 홈페이지를 잘 만들기 위한 도구를 익혀야 합니다. 홈페이지를 만드는 방법은 텍스트 에디터를 이용해 태그를 직접 입력하는 방법과 HTML Editor를 이용하는 방법이 있다고 말씀드렸습니다. HTML Editor는 홈페이지를 쉽게 만들수 있도록 해주는 유용한 도구입니다. HTML Editor를 잘 다루고 사용할 할 수 있어야 원하는 대로 홈페이지를 만들수 있습니다.

홈페이지를 만들기 위해서 기초적으로 알아야 하는 것은 HTML 문서 작성입니다. 각종 태그를 사용해 작성하는 HTML 문서는 일반 프로그램 언어보다는 쉽지만, 워드프로세서 문서보다는 암기해야 할 지식이 훨씬 많아 작성하기가 까다롭습니다. 홈페이지 제작 전문가들은 주로 윈도 기반의 메모장이나 유닉스 기반의 VI(VIsual editor)와 같은 텍스트 기반의 에디터를 사용하고 있습니다. 그렇다고 홈페이지를 만들기 위해 처음부터 전문가들처럼 각종 태그를 암기할 필요는 없습니다. 우수한 성능을 가진 HTML 에디터 프로그램들을 사용하면 되기 때문입니다. 가볍게 워드프로세서처럼 사용할 수 있는 HTML 에디터를 이용하면 태그(Tag)에 대해 자세히 모르더라도 얼마든지 홈페이지를 제작할 수 있습니다. 현재 전 세계적으로 출시되어 있는 HTML 에디터는 20∼30여종에 이르고, 이 중에서 자신이 제작할 홈페이지의 용도와 제작 능력에 맞는 에디터를 선정해야 합니다.

HTML Editor의 종류

Microsoft사의 Frontpage Express

마이크로소프트 사가 인터넷에 관심을 돌린 다음 처음 만든 프로그램이 인터넷 익스플로러라고 한다면, 일반 사용자를 위한 만든 두 번째 프로그램이 프론트페이지입니다. 위지윅(WYSIWYG) 방식의 홈페이지 편집기 중에서 사용하기 간편하고 기능도 다양한 편입니다. 특히 프론트페이지 98에는 HTML 문서상에 각종 효과를 줄 수 있는 액티브 엘리먼트(Active Element)라고 하는 기능이 추가되었습니다. 워드프로세서에서 문서를 작성하는 것처럼 자유롭게 문서를 만들면 HTML 문서로 자동 변환되고, 타이핑 외의 모든 작업이 마우스만으로 가능합니다.

이러한 프론트페이지의 기능을 간소화한 것이 프론트페이지 익스프레스입니다. 프론트페이지 익스프레스는 완전한 프론트페이지 퍼블리싱 기능, 그리고 프레임을 지원하지는 않지만 기본적인 HTML을 사용하여 홈페이지를 만드는 데는 도움을 줄 것이다.

앞으로 만들 홈페이지에 대한 설명은 이 Frontpage Express를 이용하도록 하겠습니다. 따라서, [시작]→[프로그램]에 Frontpage Express가 설치되어 있지 않으신 분들은 사이버연수팀에서 배부해 드린 CD-ROM에서 아래와 같은 방법으로 Frontpage Express를 설치하시기 바랍니다. 물론 다른 HTML편집기를 쓰신다면 설치하실 필요가 없습니다.(내 컴퓨터에 Windows 98버전 이상이 설치되어 있다면 Windows를 설치할 때 이미 익스플로러의 모든 요소가 설치되기 때문에 별도로 설치하실 필요가 없습니다. 따라서, Windows 95를 사용하시는 분만 Frontpage Express가 설치되어 있는지 확인해 보시기 설치되어 있지 않다면 아래와 같은 방법으로 설치하시기 바랍니다.)

프론트페이지 익스프레스(Frontpage Express) 설치하기

1. 인터넷 익스플로러 4.x

① 사이버연수팀에서 배부한 CD-ROM을 CD-ROM 드라이브에 넣습니다.

② 탐색기를 열어 CD-ROM 드라이브(Chol2000)를 선택합니다.

③ Ie401폴더를 열어 Ie4setup.exe를 더블클릭해서 실행합니다.

④ 인터넷 익스플로러 4.01을 다시 설치하시면서 설치옵션을 [전체설치]로 선택하시면 Frontpage Express를 설치하실 수 있습니다

　

2. 인터넷 익스플로러 5.x

① Windows의 [시작]버튼→[설정]→[제어판]을 차례로 선택합니다.

② 제어판 창이 열리면 [프로그램추가/삭제] 아이콘을 더블클릭합니다.

③ [프로그램 추가/삭제 등록정보] 창에서 현재 내 컴퓨터에 설치되어 있는 프로그램의 목록중 [Microsoft Internet Explorer 5 및 인터넷 도구]를 선택하고 [추가/삭제]버튼을 선택합니다.

④ [Internet Explorer 5 및 인터넷 도구] 창에서 [구성 요소 추가]를 선택하고, [확인]버튼을 클릭합니다.

⑤ 구성요소중 웹 제작 도구 구성 요소의 [FrontPage Express]를 클릭하고 [다음]버튼을 선택합니다.

　

Netscape사의 Composer

Netscape Composer는 넷스케이프 커뮤니케이터 설치시 같이 설치되며, 화면상에서 직접 입력 및 편집 과정을 거치는 위지윅(WYSIWYG) 기능을 가진 HTML 저작도구입니다. 흔히 사용하는 워드프로세서와 같이 잘라 붙여넣기 및 끌어놓기 등과 같은 간단한 작동만으로 HTML 문서를 만들 수 있으므로 숙련자와 초보자 모두에게 매우 편리한 저작도구입니다. Composer의 특징을 살펴보면 입력되는 개체에 적용되는 단락 및 글꼴에 관련된 태그를 볼 수 있고, 문장의 추가, 삭제 및 수정이 용이합니다. 또한, 작업되는 HTML 문서에 테이블과 이미지, 수평선 및 각종 링크와 개체를 쉽게 삽입할 수 있습니다.

나모 인터렉티브사의 나모 웹에디터

나무의 옛 말인 나모에서 빌려와 붙였다는 나모 웹에디터는 순수한 국산 기술로 만들어졌음에도 불구하고 외국의 유명 HTML 에디터들과 비교해 기능면이나 인터페이스에서 뒤지지 않아 크게 인기를 끌고 있습니다. 위지윅(WYSIWYG) 방식의 HTML 에디터로서, HTML 태그(Tag)에 익숙하지 않은 사용자라도 워드프로세서를 사용하듯이 홈페이지를 손쉽게 만들 수 있다.

기본적인 문서 편집 기능 외에 홈페이지를 관리할 수 있는 사이트매니저 프로그램까지 포함되어 있어 체계적이면서 간편하게 홈페이지를 관리할 수 있습니다. 또한 함께 제공되는 템플릿들과 클립아트 모음집도 초보자들에게 도움이 되는 요소이며, 최근 인기를 끌고 있는 CSS1(Cascading Style Sheet1)도 지원하고 있습니다. 특히 국산 프로그램이니만큼 한글 지원도 완벽합니다. PC통신망의 자료실에 업로드되어 있는 파일은 나모웹에디터 4.0버전으로 45일간 사용할 수 있습니다. 미국, 영국, 유럽, 호주, 일본 등 15개국에 수출되고 있습니다.

Sausage사의 Hot Dog

파일 관리의 편이성을 위하여 탐색기 부분이 있으며 내장 브라우저로 결과를 확인하면서 작업을 할 수 있습니다. Dynamic HTML과 CSS 스타일을 지원하며 전문가에게 적합한 에디터입니다.

　

Allaire사의 Homesite

다양한 태그를 지정하는 툴바와 문서의 전송 속도를 미리 알 수 있는 Document Weight기능 등을 제공합니다. 이미지 작업에 용이하도록 자체 Thumbnail을 볼 수 있는 View를 두고 있으며, 내장 브라우저로 결과 확인이 용이하고 다양한 CSS 스타일을 지원합니다. 문서관리에도 용이하며 전문가에게 적합한 에디터입니다.

　

Macromedia사의 Dreamweaver

위지윅(WYSIWYG) 방식의 에디터로 다양한 CSS 스타일 지원과 Dynamic HTML 편집도구로 적합하며, 레이어 편집에 용이합니다. 강력한 자바 스크립트 지원 기능이 있으며, 다국어 Encoding을 지원하여 사용하기 편리합니다.

　

위지윅(WYSIWYG)

위지윅은 What You See Is What You Get의 약자로 '보는 그대로 얻는다'는 뜻입니다. 일반적으로 위지윅은 우리가 눈으로 보는 그대로를 인쇄해 낸다는 것인데 HTML에디터에서 위지윅 기능이라면 HTML에디터로 작성한 그대로가 브라우저에 보여진다는 것입니다. 요즘은 위지윅이라는 말 대신 비주얼(Visual)이라는 말을 쓰기도 합니다.

FrontPage Express로 기본 홈페이지 만들기

앞장 홈페이지 개요에서 홈페이지 만드는 순서에 대해 8단계로 나누어 설명을 드렸습니다. 이제 그 단계에 맞춰 홈페이지를 만들어 보도록 하겠습니다.

　

1단계는 홈페이지를 등록할 서버를 결정하는 단계입니다.

천리안, 나우누리, 넷츠고, 채널아이, 신비로에 가입해 있으신 분은 무료로 홈페이지 공간이 제공되므로 별도 신청절차에 따라 서비스회사에 신청해 홈페이지 공간을 확보하시면 됩니다.

하이텔, 유니텔, 아이네트, 엘림네트, 코넷, 키텔 등을 사용하는 분은 일반가입이 아닌 요금을 더 내고 별도의 계정서비스에 가입해야 하므로 라이코스, 네띠앙과 같이 회원으로 가입하면 무료로 홈페이지 공간을 주는 곳에 가입하시기 바랍니다. 자, 서버는 결정이 되셨죠?

　

2단계는 도메인 네임을 결정하는 단계입니다.

각 통신회사에서 홈페이지 공간을 부여받으면 대부분 http://통신회사URL/~회원ID로 홈페이지 주소가 결정됩니다. 별도로 개인 도메인 네임(pe.kr)을 받으려면 년 22,000원의 사용료를 내고 한국인터넷정보센터(KRNIC)에서 도메인을 받아야 합니다. 이때, 주의하실 점은 현재 가입해 있는 통신회사의 주소를 KRNIC에서 받은 도메인과 연결시켜주는 인터넷 로밍서비스가 제공되는지를 반드시 확인해야 합니다. 아니면, 괜히 도메인을 받아 놓고 사용하지 못할 수 도 있으니까요.

　

3단계는 어떤 홈페이지를 만들것인지 기획하는 단계입니다.

먼저 어떤 내용으로 홈페이지를 만들것인가를 정해야 합니다. 홈페이지의 주제를 잘 정해야지만 단순히 나만 보고 즐기는 홈페이지가 아니라 다른 사람에게 보여줄 수 있는 진정한 정보공유를 위한 홈페이지가 되겠죠. 이 단계가 어떻게 보면 가장 어려운 단계일 수도 있습니다.

주제가 정해졌으면 세부적으로 홈페이지 구성을 설계할 차례입니다. 소개말을 무엇으로 하고, 홈페이지의 주제를 잘 나타낼 수 있는 이미지를 어디에 넣을 것이며, 어떤 사이트와 연결해서 접속한 다른 사람에게 소개를 시켜줄 것인가...등등.

하지만 아직은 홈페이지 만들기에 대해 전체적으로 알지 못하므로 우선은 좋은 주제만이라도 먼저 선정하시기 바랍니다. 은행원으로서 은행상품 비교라든지, 여행을 좋아하시는 분은 여행지에 대한 소개, 사진이나 영화, 그림 등의 취미를 가지신 분은 취미활동에 대해 남들에게 소개해 줄만할 것 등. 생각해 보시면 무한한 소재가 널려 있을것입니다. 조금 더 고민하셔서 훌륭한 주제를 선정하시기 바랍니다.

　

4단계에서 이제 내 홈페이지를 만듭니다.

어떤 내용으로 홈페이지를 꾸밀 것인가 정하셨으면 HTML문서를 작성해야 합니다. 아직 태그를 이용해 메모장에서 홈페이지를 만들기에는 익숙하지 않으므로, 일단 HTML Editor를 이용하고, 나중에 홈페이지 만들기에 익숙해 지시면 아마도 메모장이나 HTML Editor의 HTML편집 기능을 이용해 직접 태그를 입력하는 경우도 많이 생길 것입니다. 여기서는 Frontpage Express를 이용해서 홈페이지를 만들도록 하겠습니다. 이미 기존에 다른 HTML Editor를 사용하시던 분들은 대부분 기능이 비슷하므로 반드시 Frontpage Express를 사용하실 필요는 없습니다. 아래의 홈페이지 만드는 방법은 예제이므로 그대로 똑같이 만드는게 아니라 원하는 주제를 선택하셔서 예제를 참고해 만드시면 됩니다.

① 홈페이지를 만들기 위해 [시작]→[프로그램]→[Internet Explorer]→[Frontpage Express]를 차례로 눌러 Frontpage Express를 실행합니다. 먼저 선정한 주제에 따라 홈페이지 내용을 워드문서를 작성하듯이 입력합니다. 먼저, 제목을 입력하고, 개략적으로 홈페이지의 주제에 따라 내용을 입력합니다. 그리고, 마지막에 나에게 E-Mail을 보내고 싶은 사람을 위해 Mail주소를 입력합니다.

　

② 내용이 입력되었으면 보기 좋게 내용을 편집합니다. 먼저, 제목의 글꼴을 선택하고, 텍스트 크기를 크게, 글씨색을 선택합니다. 조금 굵게 표시하려면 글씨유형을 선택하고, 가운데로 정렬합니다. 글씨색에서 기본색이 아닌 다른 색을 선택하시려면 [사용자 정의 색 만들기]버튼을 누르시면 됩니다.

(결과)

　

③ 이제 List를 이용해 '어깨를 내주는 사람'과 '신발 한 짝'이라는 목록을 보기 좋게 만들어 보겠습니다. 두 문자열을 마우스 끌기로 선택하고 [번호매기기]나 [글머리표]를 선택하면 기본적으로 동그란 글머리표가 지정됩니다. 다른 글머리표로 바꾸거나 번호를 아라비아 숫자가 아닌 로마 숫자로 바꿔주려면 [서식]→[글머리표/번호매기기]에서 지정합니다.

(결과)

　

④ '어깨를 내주는 사람'과 '신발 한 짝'이라는 문자열의 색깔을 다른 색으로 지정하기 위해 마우스 끌기로 선택한후 아이콘을 눌러 색을 지정합니다. 아래 'E-Mail : ...'이라는 문자열도 색을 지정하고, 아이콘을 이용해 가운데로 정렬하는 것이 보기가 좋을 것 같습니다.

(결과)

　

⑤ 간단한 홈페이지가 만들어 졌습니다. 홈페이지를 C:의 MyHomepage라는 폴더를 만들어 저장합니다. 메뉴에서 [파일]→[저장]을 선택하고, 페이지 제목에 홈페이지의 제목을 입력합니다. [파일로 저장]버튼을 클릭하고 [파일로 저장]창이 나오면 서버에 등록했을 때 이 페이지가 첫번째 페이지가 되야하므로 파일이름은 index.html이나 index.htm으로 지정하고 [저장]버튼을 누릅니다.

저장이 되었으면 첫번째 홈페이지인 index.html에서 '어깨를 내주는 사람'이나 '신발 한 짝'이라는 문자열을 눌렀을 때 내용을 보여줄 두번째 페이지와 세번째 페이지를 작성해 story01.htm과 story02.htm라는 이름으로 저장합니다. 그러면, MyHomepage라는 폴더에 총 3개의 HTML문서가 저장되어 있습니다.

(두번째 HTML문서 : story01.htm)

(세번째 HTML문서 : story02.htm)

　

⑥ 이제 세 개의 문서를 하이퍼링크로 연결하도록 하겠습니다. 먼저 첫번째 페이지에서 '어깨를 내주는 사람'을 누르면 story01.htm으로, 신발 한 짝을 누르면 story02.htm으로 연결되도록 하이퍼링크를 지정합니다.

먼저, 하이퍼링크로 지정하고자 하는 문자열을 마우스 끌기로 선택하고, 아이콘을 누릅니다. [하이퍼링크 만들기]라는 창이 표시가 되면, [하이퍼링크 종류]는 HTML문서이므로 [http:]을 선택하고, URL에 연결할 파일의 URL을 입력합니다. 기본적으로 http://홈페이지주소/~본인ID/파일이름이 됩니다. 이제 '어깨를 내주는 사람'이라는 문자열을 클릭하면 story01.htm파일이 열리도록 하이퍼링크를 지정했습니다. '신발 한 짝'이라는 문자열도 마찬가지 방식으로 story02.htm에 링크되도록 지정합니다.

　

⑦ 만약, 첫번째 홈페이지에서 story01.htm으로 이동했는데, story01.htm에서는 어디로 갈까요? 블랙홀이 되었군요. 브라우저에서 [뒤로]나 [앞으로]버튼을 클릭하거나 아니면 다시 주소를 입력하고 홈페이지로 돌아갈까요? 이렇게 되면 않됩니다. 다른 사람이 내 홈페이지에 접속해서 다른 문서로 이동했을 때 반드시 또 다른 곳으로 이동할 수 있는 링크를 반드시 만들어 주어야 합니다. 미로가 되면 보는 사람이 얼마나 황당하겠습니까? 따라서, story01.htm과 story02.htm에 다시 홈페이지로 갈 수 있는 링크를 만들어 주어야 합니다.

HTML문서 제일아래에 [홈페이지로...]라는 문자열을 입력하고, 홈페이지로 돌아 가도록 링크를 연결해 줍니다. URL주소는 http://홈페이지주소/~본인ID/index.html이 됩니다.

　

⑧ 마지막으로 첫번째 페이지에서 메일주소를 누르면, 바로 전자우편을 보낼 수 있도록 하이퍼링크를 지정해 줍니다. 이번에는 연결될 문서가 HTML문서가 아니고 전자우편주소입니다. 따라서, 하이퍼링크 종류에서 [mailto:]를 선택하시고 내 전자우편 주소를 입력합니다. 이제, 다른 사람에 내 홈페이지에 접속해서 바로 나에게 전자우편을 보낼 수 있습니다. 과연 얼마나 편지가 올까요? 기대되지 않으십니까?

이제 홈페이지가 완성되었습니다. HTML문서가 많더라도 다른 사람이 내 홈페이지에 접속해 미아가 되지 않도록 하이퍼링크를 이용해 유기적으로 잘 연결해 주어야 합니다. 이제 다른 사람이 내 홈페이지를 볼 수 가 있을까요? 아직은 아닙니다. 서버에 등록되어 있지 않고 아직까지 내 컴퓨터에 저장되어 있기 때문입니다.

　

5단계는 만들어진 홈페이지를 다른 사람들에게 보여주기 위해 서버에 등록합니다.

WS_FTP와 같은 FTP프로그램을 이용해 작성한 홈페이지를 서버에 등록합니다.

① FTP프로그램은 설치하셨습니까? FTP프로그램이 설치가 되어 있으면 [시작]→[프로그램]→[WS_FTP]를 차례로 선택해 WS_FTP프로그램을 실행합니다.

▶ Profile Name : FTP프로그램으로 접속할 서버의 이름을 입력합니다.

▶ Host Name/Address : FTP프로그램으로 접속할 서버의 주소를 입력합니다.

▶ User ID : 통신 서비스회사에 접속할 때 이용하는 ID를 입력합니다.

▶ Password : 통신 서비스회사에 접속할 때 이용하는 비밀번호를 입력합니다.

이러한 설정은 처음 한 번만 해주시면 됩니다. 다음 접속부터는 Profile Name칸의 역삼각형버튼을 눌러 등록되어 있는 Profile Name중에서 접속하고자 하는 Profile Name을 선택해 주면 됩니다.

접속할 서버가 지정되었으면 아래의 [확인]버튼을 클릭합니다.

　

② 홈페이지를 등록할 서버에 접속이 되었습니다. 좌측의 [Local System]은 내 컴퓨터, 우측의 [Remote System]을 서버입니다. 이제, 좌측에서 홈페이지를 작성해 놓은 C:의 MyHomepage폴더를 찾아 갑니다. 아래에 [-c-]라고 표시되어 있는 것이 C드라이브입니다. 더블클릭하면 C드라이브의 폴더와 파일을 보여줍니다. 다시 MyHomepage폴더를 더블클릭하면 지금까지 작성했던 HTML파일이 보입니다.

　

③ [Local System]의 위치가 [C:\MyHomepage]로 되어 있고 작성해 놓았던 HTML파일이 보입니다. 서버에 등록하고자 하는 파일을 선택하고, 가운데의 아이콘을 클릭하면 파일이 내 컴퓨터에서 서버로 전송됩니다. 물론 반대로 [Remote System]에서 파일을 선택하고 아이콘을 클릭하면 서버에서 내 컴퓨터로 다운로드됩니다.

하나의 파일이 아니라 지금처럼 여러 개의 파일을 전송하려면 파일을 선택할 때 [Ctrl]키를 누른 상태에서 마우스로 선택하면 여러 개의 파일을 선택할 수 있습니다.

　

④ 이제 서버로 홈페이지 파일들이 전송되었습니다. 지금부터 세계 어느 곳에서나 내 홈페이지 주소를 입력하면 다른 사람들이 내가 작성한 홈페이지를 볼 수 있습니다. 브라우저를 실행해서 내 홈페이지 주소를 입력해 보세요. 작성한 홈페이지 제대로 보이는지, 링크는 잘못된게 없는지 확인해 보시기 바랍니다.

　

　