우리 아기 홈페이지 만들기 [제공: 아가달(http://www.dal.co.kr)]

2.인터넷에 집짓기

1장을 통해서 우리는 HTML 문법의 기초 단계를 알아봤습니다. 이제 지금까지 배운 내용을 바탕으로 실제로 웹사이트에 올릴 홈페이지용 문서파일을 만든 다음에 홈페이지를 만들도록 하겠습니다.

많은 분들이 겪는 일이지만 연습 때와 실제로 홈페이지를 만들 때의 결과가 달라서 많이 당황합니다. 나모에디터와 같은 웹에디터로 편집하고 네트스케이프에서 편집한 HTML 문서파일을 불러왔을 때는 제대로 보이던 화면이 홈페이지 공간에 올리기만 하면 이상하게 나타나는 일을 겪습니다. 그 까닭은 대부분 웹사이트 서버의 특성을 고려하지 않고 HTML 문서파일을 만들기 때문에 생깁니다.

그러나 이 책의 내용대로 문서파일을 만든다면 이런 어려움을 겪지 않고 쉽게 홈페이지를 만들 수 있습니다. 2장에서는 실제로 홈페이지를 만드는데 필요한 기초지식과 파일을 서버에 올리는 방법, 서버에 올린 후 문제가 되는 부분에 대해서 점검해드립니다.

홈페이지를 만들고자 하는 부분이 가장 어렵게 느끼는 부분이 바로 자신이 만든 HTML 문서파일을 올려서 첫번째 화면이 제대로 나오도록 하는 일입니다. 이제 2장을 통해 여러분은 그 어려운 관문을 지나 마침내 자신의 손으로 만든 홈페이지를 인터넷을 통해 구경할 수 있게 됩니다.

2.1.index.html 파일 만들기

2.1.1.홈페이지의 첫화면으로 사용할 문서파일은 index.html

이제 실제로 홈페이지에 올릴 문서파일을 만들도록 하겠습니다. 문서파일은 2개를 만들겠습니다. 그리고 여기에 필요한 그림파일도 2개를 준비했습니다.

첫번째 파일은 우리가 홈페이지 주소를 쳤을 때 나오는 첫번째 화면입니다. 이 화면은 test05.html을 조금 고쳐서 사용하겠습니다. test05.html의 내용을 다음과 같이 고친 후에 index.html이라는 이름으로 저장하기 바랍니다.

<HTML> <HEAD> <TITLE> 안녕하세요? 김다찬의 홈페이지입니다. </TITLE> </HEAD> <BODY> <CENTER> 안녕하세요? 김다찬의 홈페이지에 오신 것을 환영합니다. <A HREF=photo100.html><IMG SRC="dachan12.jpg"></A> <A HREF=photo100.html>여기나 위의 사진을 눌러보세요.</A> <A HREF=http://www.agadal.com> 아가달의 홈페이지로 가기</A> </CENTER> </BODY> </HTML>

index.html 파일은 웹브라우저가 홈페이지에 접속해 처음으로 찾아보는 파일입니다.

index.html라는 이름의 파일은 웹브라우저가 홈페이지에 처음 접속했을 때 기본적으로 찾아보는 파일이름입니다. 즉 홈페이지에 접속했을 때 웹브라우저는 제일 먼저 index.html 파일이 있나 찾아본 뒤에 index.html 파일이 있을 경우, index.html을 불러오는 것입니다.

때문에 홈페이지의 서버 즉 홈페이지용 문서파일을 올리는 메인 폴더에는 index.html이 반드시 있어야 합니다.

2.1.2.index.html의 링크 파일 만들기

index.html을 만들어 저장했으면 이번에는 다음 내용을 입력한 다음에 photo100.html로 저장합니다.

<CENTER> <A HREF=index.html> 이전 화면으로 가려면 여기를</A> <IMG SRC="dachan04.jpg"> 다찬이 백일 때의 사진입니다. 귀엽죠? </CENTER>

위의 소스파일을 분석해봅시다. 먼저 index.html의 내용부터 살펴보겠습니다. 다른 부분은 test05.html과 큰 차이 없습니다. 오히려 test05.html에 있던 <BODY BGCOLOR=BLACK> 태그와 등의 태그가 없어졌습니다.

따라서 배경색은 기본인 흰색(WHITE)로 지정되고 글꼴의 크기는 3이 지정됩니다. 그리고 글씨 색깔은 검정색으로 지정됩니다.

test05.html와 달라진 부분은 다음 부분입니다.

<A HREF=photo100.html><IMG SRC="dachan12.jpg"></A> <A HREF=photo100.html>여기나 위의 사진을 눌러보세요.</A> <A HREF=http://www.agadal.com> 아가달의 홈페이지로 가기</A>

첫번째 문장은 dachan12.jpg라는 파일에 photo100.html이라는 HTML 문서파일을 링크시켰다는 뜻입니다. 그리고 보기 좋게 하려고 두 번 줄바꿈 했습니다. 즉 빈 줄을 한 줄 삽입했습니다.

두번째 문장 역시 photo100.html이라는 HTML 문서파일을 링크시켰다는 뜻입니다. 단 이번에는 '여기나 위의 사진을 눌러보세요.'라는 문장에 photo100.html 파일을 링크시켰습니다. 그리고 보기 좋게 하려고 두 번 줄바꿈 했습니다.

따라서 dachan12.jpg 사진이나 '여기나 위의 사진을 눌러보세요.'라는 문장 위에서는 마우스 커서가 손모양으로 바뀝니다. 그리고 사진이나 '여기나 위의 사진을 눌러보세요.'라는 문장을 선택하는 순간 photo100.html 파일로 이동합니다. 즉 photo100.html이라는 문서를 보여줍니다.

세번째 문장은 '아가달의 홈페이지로 가기'라는 문장에 'http://www.agadal.com'이라는 URL을 링크시켰습니다. 이전의 두 문장은 photo100.html이라는 파일이름만 적었습니다. 따라서 웹브라우저는 photo100.html을 index.html 파일이 있는 폴더에서 찾습니다. 그러나 세번째 문장은 인터넷의 주소에서 찾습니다. 즉 도메인 주소가 www.agadal.com인 곳을 찾아서 그러한 도메인이 있다면 이동합니다.

이번에는 photo100.html 파일의 내용을 살펴보겠습니다.

<CENTER> <A HREF=index.html> 이전 화면으로 가려면 여기를</A> <IMG SRC="dachan04.jpg"> 다찬이 백일 때의 사진입니다. 귀엽죠? </CENTER>

photo100.html의 내용은 매우 간단합니다. 그리고 이미 우리가 사용한 바 있는 <CENTER> 태그와 <A HREF> <IMG SRC> 태그를 사용하고 있어서 따로 설명드리지 않아도 될 정도입니다.

이전 화면으로 이동시키려면 이전 단계의 문서를 링크시킵니다.

이 소스파일에서 주목할 부분은 '<A HREF=index.html> 이전 화면으로 가려면 여기를</A> '이라는 문장입니다. 앞서의 index.html에서 photo100.html를 링크시켰습니다. 그런데 이번에는 photo100.html에 index.html을 링크시켰습니다. 따라서 '이전 화면으로 가려면 여기를'이라는 문장을 선택하면 다시 index.html 파일을 불러옵니다. 즉 바로 전의 장면으로 돌아가는 셈입니다.

우리가 인터넷을 사용하면서 보는 '초기화면으로' '이전 장면으로'라는 아이콘이나 문장이 어떤 식으로 링크되어 있는지 짐작이 가실겁니다. '초기화면으로'라는 아이콘에는 index.html 파일을 링크시켜놓고, '이전 장면으로'라는 아이콘이나 문장에는 바로 전 단계의 HTML 문서파일을 링크시켜놓으면 됩니다.

2.1.3.웹브라우저로 먼저 시험해보기

자 그럼 먼저 사용자의 컴퓨터에서 위의 두 문서가 예상한 모양대로 나오는지 시험해봅니다. 먼저 네트스케이프나 익스플로러에서 index.html을 불러옵니다. 그러면 다음 화면과 같이 나옵니다.

이 화면에서 마우스 커서를 사진이나 '여기나 위의 사진을 눌러보세요.'라는 문장 위로 이동시켜봅니다. 마우스 커서 모양이 손모양으로 바뀌는 것을 알 수 있습니다. 손모양으로 바뀐 상태에서 사진이나 '여기나 위의 사진을 눌러보세요.'라는 문장을 선택합니다.

그러면 링크되어 있는 photo100.html 파일로 이동합니다. 즉 photo100.html 파일을 웹브라우저로 불러옵니다. photo100.html은 다음과 같이 화면을 보여줍니다.

이제 '이전 화면으로 가려면 여기를'이라는 문장에 마우스 커서를 이동시킵니다. 커서 모양이 손모양으로 바뀝니다. 이 문장을 선택하면 다시 index.html 파일을 불러옵니다.

다시 index.html 파일을 불어왔습니다. 이번에는 '아가달의 홈페이지로 가기'라는 문장을 선택합니다.

만약 네트스케이프가 인터넷에 연결 안된 상태라면 다음 화면과 같이 에러 메시지 창이 뜨면서 아가달의 서버를 발견할 수 없다고 알려줍니다.

그러나 인터넷에 접속한 상태라면 링크된 www.agadal.com의 URL로 이동하면서 아가달의 홈페이지를 보여줍니다.

지금까지의 과정이 성공적으로 수행되었다면 홈페이지에 올려도 아무런 문제가 없습니다. 이제는 지금 만든 index.html과 photo100.html 파일, 그리고 그림 파일 2개를 웹사이트의 서버에 올리면 홈페이지 만들기가 끝납니다.