|
|
세번째 이야기 이번호에서는 실제로 마우스를 눌렀을 때 다른 페이지로 바뀌는 기능을 한 번 해보려고 합니다. 지난달에 보기로 공부한 화면 아래에 보면 "들어오세요"라는 글자가 있지요? 이 글자를 눌렀을 때 페이지가 바뀌게 하려면 어떻게 해야 할까요? 마우스를 눌렀을 때 다른 페이지로 이동하는 기능이 바로 "하이퍼링크"라는 것입니다. 바로 홈페이지를 만드는 HTML문서의 가장 핵심적인 기능이라고 말할 수 있지요.
|
|
링크시키는 태그는 <A> </A> 입니다. 그리고 마우스를
눌렀을 때 옮겨가는 페이지를 body.htm라고 할 때,
|
|
자, 마우스로 눌렀을 때 body.htm(왼쪽 그림과 같은 화면)이 나오게 하려고 합니다. 실제로는 "프레임"이나 "테이블"이라는 고급기능을 쓰면 훨씬 더 멋스럽게 꾸밀 수 있지만 오늘은 가장 쉬운 모양부터 실습을 해봅시다. 글꼴은 파란색으로 되어 있고 모두 다섯개의 메뉴가 있지요? 밑줄이 그어저 있는 것으로 봐서는 이 다섯개 메뉴 모두에 위에서 말한 "하이퍼링크"처리가 되어 있는 것 같군요.
|
|
<a href="./intro.htm">나의 소개 </a> 와 같이 적어주면 브라우저에서 마우스로 눌렀을 때 "나의 소개"페이지로 이동하는 것이지요. 그런데 한가지 의문스러운 것이 있군요. 메모장에서는 분명히 COLOR="GREEN" 으로 했으니까 글자가 녹색으로 나와야 하는데 왜 파란색으로 나왔을까요? 이것은 바로 링크가 있는 글자와 없는 글자를 구분해주기 위한 브라우저의 기능이랍니다. 만약 링크를 걸지 않은 글을 입력하면 녹색으로 나오겠지요.
|
|
그런데 만약 마우스로 눌렀을 때 이동해야 할 페이지를 아직 만들지 않았는데 마우스로 눌렀다면 어떻게 될까요? 즉, 페이지가 없는 링크를 누르면 브라우저는 친절하게 왼쪽 그림고 같은 글귀를 보여주면서 "찾을 수 없다"고 말합니다. 만약 페이지가 있는데도 이런 글귀가 출력된다면 옮겨갈 페이지의 파일이름이 틀리지 않았는지 살펴보아야 한답니다.
|
|
자, 이제 "나의 소개"를 마우스로 눌러서 이동했을 때의 화면을 만들어보려고 합니다. 작은 사진과 제목이 있고 간단한 소개글이 있지요? 또 사진은 글의 왼쪽에 있으며 맨 아래에는 줄이 하나 그어저 있습니다. 지금까지 배운 것을 생각해보면서 한 번 만들어 봅시다.
|
|
먼저 "나의 소개"라는 제목은 좀 크군요. 바로 FONT SIZE="6" 이기 때문이군요. 사진을 넣는 방법은 전과 같습니다. 다만, 화면의 왼쪽에 사진을 넣기 위해서는 img 태그 안에 align="left" 라는 말만 더 넣어주세요. align은 정렬이라는 뜻이고 left는 여러분도 알지요? 예, 왼쪽이라는 말입니다. 그리고 글의 끝에 <hr> 을 넣었군요. 이것이 바로 위의 화면에서 보이는 평행선이랍니다.
|
