쌍용정보통신 통신사업본부
"쌍용 LAN / WAN 입문 강좌"
[본 내용 중 홈페이지 서버
부분은 쌍용정보통신 사내 서버의 경우를 예로 들었습니다.
하지만, 일반적인 ISP의 경우와 흡사하므로 잘 읽어두시면
도움이 될 것입니다]
인터넷에 자신의 홈페이지를 가지기 위해서는 우리 회사 서버인 toody의 자신의 계정에다 필요한 HTML 파일을 올려야 한다. 한글 워드 95를 이용하여 자신의 홈페이지를 10분만에 작성하여 인터넷에 올리는 방법을 소개한다. 가벼운 마음으로 따라 하여 나도 홈페이지를 하나 가지도록 하자.
1. 한글 워드 95 인터넷 어시스턴트 설치
기존의 한글 워드 95로는 인터넷 문서인 HTML 파일을 작성할 수가 없다. HTML 기능을 한글 워드 95에 추가시키기 위해서는 마이크로소프트사에서 무료로 제공하는 MS 한글 워드 for 인터넷 어시스턴트를 다운로드 받아야 한다. 먼저 아래의 주소로 접속한다.
이 페이지는 한글 워드 95 인터넷 어시스턴트(이하 워드 IA)의 홈페이지이다. 여기서 ‘다운로드’를 클릭하면 워드 IA를 자신의 운영체제 환경에 맞게 다운로드 받을 수 있다.
<그림 5.1 한글 워드 95 IA를 다운로드 받는 모습>
한글 워드 IA를 다운로드 받았으면 이제 설치해 보자. 하드디스크에 자신이 지정해준 폴더에 ‘WRDIA20z.exe’라는 파일이 저장되어 있을 것이다. 이를 더블클릭하면 모든 것이 자동으로 설치된다. 참고로 설치 파일을 실행하기 전에 오피스 관련 프로그램은 종료하는 것이 좋다.
<그림 5.2 한글 워드 IA의 설치>
이제 워드 IA의 설치는 모두 끝났다. 화면 상으로 나타나는 변화가 없어서 좀 어리둥절할 것이다. 하지만 워드 95를 실행시켜 보면 그 변화를 알 수 있다. 즉, 워드 IA는 독립된 프로그램이 아니라, 단순히 워드 95에다 홈페이지 작성 기능을 추가시켜주는 기능을 하는 것이다. 그 변화는 ‘파일’ 메뉴를 보면 바로 알 수 있는데, ‘URL 열기’와 ‘웹 찾아보기’가 있을 것이다.
<그림 5.3 변화된 워드의 ‘파일’ 메뉴>
2. 워드로 홈페이지 만들기 - 기본
워드를 이용하면 HTML의 문법을 전혀 모르더라도 간단하게 홈페이지를 만들 수 있다. 우선 우리가 작성할 홈페이지와 이미지들을 저장할 폴더를 만든다. 예를 들어 ‘MyHome’과 같은 이름으로 폴더를 작성한다. 그 다음 해야 할 일은 메뉴 바에서 ‘파일’ -> ‘새 파일'을 선택하는 것이다. 그러면 새 파일 대화상자가 나타나는데, ‘General’ 탭에서 “Html”을 더블클릭한다.
<그림 5.4 Html 파일 작성을 새로 시작한다>
그러면 새로운 홈페이지를 만들 수 있는 상태가 된다. 도구 모음을 가만히 살펴보면 원래의 워드와는 많이 다른 것을 발견할 수 있을 것이다. 이 도구 모음들이 전부 홈페이지 작성에 사용되는 것이다. 여기서는 홈페이지를 간단하게 작성하고 자신의 계정에 업로드하는 것만 배울 것이다.
워드 IA를 이용하면 인터넷 상에서 실제로 보는 고급 웹페이지들도 사람에 따라서 쉽게 작성할 수 있다. 여기서 일단 간단히 배우고 워드 IA를 이용한 고급 홈페이지 작성에 대해 더 깊이 배우고 싶은 분들은 에프원 출판사의 ‘ 홈페이지 제작 바이블 ’을 참고하기 바란다. 이 책은 홈페이지의 기초부터 고급 테크닉까지 풍부한 그림과 자세한 해설로 쉽게 따라 할 수 있도록 구성되어 있다. 아주 좋은 책이다. 적극 추천한다!!
2.1 홈페이지 제목 작성
홈페이지의 제목을 작성하기 위해서는 메뉴 바에서 ‘파일’ - ‘HTML 문서 정보’를 선택한다. 그러면 다음 그림과 같이 홈페이지의 제목을 입력할 수 있는 대화상자가 나타난다. 여기서 입력하는 제목은 홈페이지에 접속했을 때 브라우저의 타이틀 바에 나타나는 문자열이다. 잠시 후면 모든 것을 확인하게 될 것이다.
<그림 5.5 문서 제목 입력 대화상자>
다음에 해볼 것은 홈페이지 이름을 적어 보자. 맨 첫 라인에 “체첸의 홈페이지”라고 입력하고, ‘표준’ 도구 모음의 ‘유형’ drop-down 리스트에서 ‘제목 1, H1’을 선택하고 ‘가운데 맞춤’ 버튼을 누른다. 물론 기성 홈페이지와 같이 멋있게 이미지로 처리할 수도 있지만, 그런 테크닉들은 필자가 추천한 책을 참조하도록 하고 여기서는 기본만 배우도록 하자.
<그림 5.6 페이지의 제목을 작성한다>
2.2 이미지의 삽입
다음에는 홈페이지에 들어갈 예쁜 이미지를 하나 삽입해 보자. 원칙적으로는 이미지를 직접 작성해야 하지만 우리는 그럴만한 실력이 아직 되지 않으므로 우리가 가지고 있는 gif 파일이나 jpg 파일을 이용해 보도록 하겠다. 직접 따라해 보기 바란다.
우선 메뉴 바에서 ‘삽입’ - ‘그림’을 선택한다. 그러면 아래 그림과 같은 그림 삽입 대화상자가 나타날 것이다. ‘그림’ 탭의 ‘찾아보기’ 버튼을 누르면 그림 파일을 선택하는 대화상자가 나타나는데, 원하는 그림을 선택한다. 필자의 경우는 “sports.gif”라는 이미지를 선택하였다.
<그림 5.7 그림 삽입 대화상자>
‘대체 문자열’ 입력 난은 브라우저가 이미지를 다운로드 받을 동안 나타낼 문자열을 입력하면 된다. ‘비디오’ 탭에서는 동화상을 삽입할 수 있으나 네트워크의 속도 상 사용하지 않는 것이 좋고, ‘옵션’ 탭에서는 그림의 크기를 강제로 조절하거나 괘선을 나타낼 때 사용하면 된다. 일단 ‘확인’ 버튼을 누른다.
이미지를 삽입할 때 가장 주의해야 할 사항은 이미지 파일명을 모두 소문자로 통일하는 것이 좋다. 왜냐하면 유닉스는 기본적으로 파일명의 대소문자를 엄격하게 구분하므로, 로컬로는 잘 보여도, 인터넷 상에 막상 올려두면 파일을 찾지 못하는 경우가 있기 때문이다. 그리고 되도록 미리 이미지 파일을 홈페이지를 작성하고 있는 디렉토리로 복사해 와서 나중에 일괄적으로 업로드하기로 한다.
이제 아래 그림과 같이 그림이 삽입된 홈페이지가 나타날 것이다. 필자는 그림을 가운데 정렬하기 위해서 커서를 그림 옆으로 이동시킨 후, ‘가운데 맞춤’ 도구 모음을 이용했다.
<그림 5.8 클립아트를 삽입하고 그림을 가운데 정렬하였다>
2.3 홈페이지의 내용 입력
이제는 홈페이지의 핵심인 내용 문자열을 입력할 순서이다. 연습용이니까 아무거나 입력하자. 아니면 요번에 제대로 한 번 작성해서 그냥 올려 놓고자 하는 분은 신경써서 입력해 주시기 바란다. 혹시 묘령의 여인에게서 연락이 올지도 모르니까 말이다. 홈페이지에서는 되도록이면 문자열을 가운데 정렬하는 것이 보기가 좋다. 물론 표도 이용하여 신문과 같은 다단 편집 효과도 낼 수 있다. 그에 관해서는 필자가 추천한 책에 잘 나와 있으므로 참조하기 바란다.
<그림 5.9 홈페이지의 내용을 입력하였다>
3. 워드로 홈페이지 만들기 - 응용
3.1 하이퍼링크의 삽입
이제 홈페이지의 핵심인 하이퍼링크를 삽입해 보도록 하자. 하이퍼링크란 인터넷 상의 다른 문서로 이동할 수 있는 접점을 제공하는 연결점을 말한다. 하이퍼링크를 삽입하기 위해서는 먼저 원하는 문자열을 타이프한 다음, 마우스로 드래그하여 선택한 후 메뉴 바에서 ‘삽입’ - ‘하이퍼링크’를 선택하면 된다.
우선 필자는 하이퍼링크를 생성하기 전에 하이퍼링크를 위한 한 라인의 문자열을 입력하였다. 그리고 보기 좋게 중앙 정렬하였다.
“홈페이지 | 나의 가족 | 나의 경력 | 쌍용정보통신 | 연구소”
먼저 ‘홈페이지’를 드래그하여 선택한 다음 ‘하이퍼링크’를 선택하여 아래의 대화상자를 불러왔다. 홈페이지는 이 페이지 자체를 말한다. 다른 사람이 나의 홈페이지에 접속할 때 웹 서버는 내 계정에 있는 ‘index.htm’ 파일을 찾게 되므로 파일 이름은 반드시 ‘index.htm’으로 해야 한다. 아직 이 페이지를 저장하지 않았지만, 미리 그렇게 설정하도록 하자.
<그림 5.10 ‘홈페이지’란 문자열에 하이퍼링크를 설정하였다>
마찬가지로 ‘나의 가족’, ‘나의 경력’ 등은 메뉴 바의 ‘새 파일’을 이용하여 새로운 웹 문서를 두 개 작성한 다음 저장하고 난 후, 그 파일의 이름을 설정해 주면 된다. 가장 확실한 방법은 ‘찾아보기’ 버튼으로 파일을 지정해 주는 것이다. 그래야 브라우저에서 ‘File not found’ 같은 에러가 뜨지 않는다.
‘쌍용정보통신’이나 ‘연구소’같은 하이퍼링크는 다른 사이트의 주소를 지정해야 한다. 그러므로 ‘쌍용정보통신’ 문자열에는 ‘http://www.sicc.co.kr’이라는 우리 회사 URL을 입력하였다.
<그림 5.11 외부 사이트의 하이퍼링크 설정>
하이퍼링크를 모두 설정하였다면 그 다음 행에 미관을 위한 가로선을 삽입해 보자. 커서를 그 다음 행으로 이동시킨 다음, 도구 모음의 ‘가로선 삽입’ 버튼을 누르면 된다.
<그림 5.12 가로선의 삽입>
마지막으로 뭔가 있어 보이게 저작권 정보를 입력하였다. 모두 가운데 정렬하였으며, 글꼴의 크기를 좀 줄이고 이탤릭체를 선택하였다. 이로서 우리의 첫 홈페이지는 완성되었다.
<그림 5.13 저작권 정보의 삽입>
3.2 파일의 저장
이제 홈페이지의 작성이 끝났으므로, 저장을 해야 한다. 앞에서도 언급했듯이 남들이 내 홈페이지에 접속할 수 있도록 하기 위해서는 홈페이지의 파일명을 대부분의 경우‘index.htm’으로 주어야 한다. 물론 다른 문서들은 상관이 없다. 다른 사람이 내 홈페이지의 주소로 접속했을 때 서버가 브라우저로 보내주어야 하는, 즉 방문자들이 처음 보게 되는 페이지가 바로 홈페이지이며, 그 페이지의 이름은 대부분의 경우 ‘index.htm’로 하자고 약속이 되어 있다.(다를 수도 있으므로 ISP의 홈페이지 담당자에게 문의한다)
3.3 나머지 문서들의 작성
앞에서 배운 기법을 이용하여 나머지 문서들은 직접 작성해 보도록 한다. 본 예제에서는 ‘나의 가족’과 ‘나의 경력’이다. 회사의 스케너를 이용하여 가족의 사진을 그림 파일로 저장하여 삽입하면 될 것이고, 인터넷 상에 공개된 무료 이미지가 많으므로 그것을 이용하면 될 것이다.
4. 홈페이지, 인터넷에 등록하기
4.1 작성한 페이지의 브라우저 확인
이제 홈페이지 작성은 모두 끝났다. 홈페이지에 있어서 가장 중요한 것은 하이퍼링크가 정확하게 설정되었는지, 이미지가 명칭이 확실한지를 확인하는 일이다. 하이퍼링크의 경우에는 워드 IA에서 링크를 더블클릭하면 그 페이지로 이동하며, 이미지가 제대로 로드되는지 브라우저에서 확인하면 된다.
<그림 5.14 브라우저에서 불러온 홈페이지>
4.2 홈페이지의 업로드
이제 모든 작업은 끝났다. 이 홈페이지를 나의 계정에 업로드 해야 한다. 우리 회사 직원이라면 toody 서버의 자신의 계정이 개설되어 있을 것이다. 홈페이지를 업로드하기 위해서는 다음의 요건이 필요하다.
1. 자신의 계정에 ‘/www’라는 디렉토리를 작성한다.
2. 그곳에다 홈페이지와 이미지 파일들을 Ws_FTP를 사용하여 업로드한다.
3. 홈페이지에 해당하는 파일명은 반드시 ‘index.htm(l)’이어야 한다.
이제 인터넷에 자신의 홈페이지를 등록하는 방법을 알았을 것이다. 간단한 자기 소개서라도 한 번 올려보도록 하자.
4.3 나의 홈페이지 주소
일단 ISP의 서버에 자신의 홈페이지를 등록하였다면, 자신의 홈페이지 주소는 다음과 같다.
http://ISP 서버의 주소/~자신의 아이디
여기서 자신의 ID는 자신의 ISP 접속시 계정의 아이디를 말한다. 아이디 앞의 ~ 표시는 반드시 붙여주어야 한다. (참고로 Inet의 경우에는 http://member.iworld.net/아이디 형태로 ~가 필요가 없다)
이제 여러분은 인터넷의 시민권을 따 내 진정한 인터넷의 일원이 되었다. 홈페이지 한 장에 만족하지 말고, 자신의 웹사이트를 체계적으로 한 번 구축해 보도록 하자.
(C) 1998 Ssangyong Information&Communications
Corp. R&D Institute |