하이퍼링크 사용하기

◈ 하이퍼링크 사용하기

지금까지 알아본 것처럼 웹페이지를 작성하는 과정은 워드프로세서나 편집기를 이용해 일반적인 문서들을 크게 다르지 않습니다. 하지만 HTML의 목적은 단순이 문서를 꾸미기 위한 것만은 아닙니다. 아래에서는 HTML의 핵심적인 기능이라고 하는 하이퍼링크에 대하여 설명되어 있습니다.

▶ <A></A> : 이 태그는 문서와 문서를 연결 시켜주는 기능을 하는 태그로서 HTML 문서를 만드는데 제일 중요한 기능을 하는 태그입니다.

<A>의 속성
HREF	이동하고 싶은 경로를 지정한다. URL 이 들어갈 수도 있고, NAME속성에 의해 지정된 곳의 이름이 들어갈 수도 있다. URL 사용의 예 : <A HREF="http://www.lycos.co.kr">라이코스 홈페이지</A> 이름 사용의 예 : <A HREF="#name">문서의 첫번째 위치로</A>
NAME	하이퍼 텍스트로 연결할 HTML 문서의 특정 위치에 표식을 만든다. NAME 속성 뒤에 나오는 이름은 나중에 HREF 속성에서 연결하기 위해 사용하게 될 이름이 되기도 한다. 표식 지정의 예 : < A NAME="#name_1">문서의 첫번째 위치</A> 이 기능을 책갈피 기능이라고도 한다.
TITLE	연결에 대한 정보를 제공한다.
TARGET	특정 프레임에서 링크가 실행되도록 하는 기능이다. 예 : <a href="contents.html" target="프레임 이름'> _top : 링크를 윈도우 전체에서 실행 예 : <a href="contents.html" target="_top'> _blank : 링크를 새로운 윈도우에서 실행 예 : <a href="contents.html" target="_blank'>

※ 주의사항 : 경로를 지정하실 때에는 절대경로 보다는 상대경로를 사용세요.
상대경로란? 예를들어 c:\homepage에 index.html 파일이 있고 c:\homepage\menu에 contents.html 파일이 있다고 가정하고 index.html 파일에 contents.html 이라는 파일을 연결시킬 경우 그림을 넣을 경로를 menu/contents.html 이라고 사용하는 것이 상대 경로이고 절대경로란? c:\homepage\menu\contents.html 이라고 사용하는 것이 절대경로입니다.
상대경로를 사용할 경우 링크를 수정하지 않고 여러 서버에 올려 놓더라도 링크가 깨지지 않습니다.
또한 서버가 대소문자를 구별하기 때문에 파일명이나 경로명을 지정하실 때 대소문자를 잘 보고 똑같이 지정하십시오.
그리고 서버에서 한글을 지원하지 않는 경우도 많이 있기 때문에 한글로 파일 이름이나 디렉토리를 지정하시면 실행이 안될 수도 있습니다.

▶ 이미지를 통한 문서의 연결

<A>태그를 이용하여 연결하기 : <A>태그를 이용하여 이미지를 문서연결 도구로 사용할 수 있습니다. 즉 마우스로 특정 이미지를 클릭하게 하는 경우 여기에 연결된 문서로 자동으로 연결되는 것입니다. 이미지를 이용하여 문서를 연결하는 방법은 <A>태그와 </A>태그 사이에 <IMG>태그로 이미지를 삽입하기만 하면 됩니다.
예) <a href="index.html"><img src="img/lycos.gif></a>

▶ 전자메일 주소 연결하기 : 전자메일 주소를 연결 시킬려면 프로토콜 부분에 'mailto:'만 붙여주면 됩니다.
예) <a href ="mailto:webwiz@lycos.co.kr">

▶ 자료의 연결 : 홈페이지를 운영하다 보니 다운로드하게 하는 방법을 물어오는 사람들이 많은데 이것 역시 문서를 링크시킬 때와 똑같이 하면 됩니다.
예) <a href="pds/pds.zip">자료 다운로드</a>