진보호스팅 블로그

6. 링크 만들기

월드와이드웹의 진정한 힘은 정보들을 거미줄처럼 연결해 주는 하이퍼링크 기능으로부터 나온다고 해도 과언이 아닙니다. 이 때 연결되는 정보는 웹페이지일 수도 있고 그래픽, 사운드, 동영상과 같은 멀티미디어 파일은 물론 애니메이션, 소프트웨어, 고퍼서버의 내용물, 원격컴퓨터의 로그인 세션, 아키, FTP 사이트 등 한마디로 컴퓨터로 만들어진 대부분의 것들이 하이퍼링크라는 기능에 의해 웹페이지에 연결될 수 있습니다.

이러한 강력한 기능에 반해서 링크를 만드는 방법은 너무나 간단합니다. 정보원들을 연결하기 위해 라는 요소를 사용하고 각 정보들의 위치와 접근방법을 나타내기 위 해 URL(Uniform Resources Location)을 사용합니다. 시작 태그와 끝내기 태그 사이에는 웹브라우저에 나타날 하이퍼텍스트를 적어 주거나 웹브라우저에 나타날 이미지 파일을 삽입하고 href=" "의 " " 내에 링크될 정보의 URL을 적어주면 됩니다.

6.1. HTML 문서의 링크
의 " " 내에는 링크될 HTML 문서의 파일명을 적어주고 와 사이 에 웹브라우저에 나타날 하이퍼텍스트를 적어주면 됩니다. 그러면 웹브라우저 상에는 파란색 글씨로 하이퍼텍스트가 나타나고 이 하이퍼텍스트를 마우스로 클릭하면 연결된 문서가 나타나게 됩니다.

6.2. 이미지 파일로 링크걸기
홈페이지에 이미지 파일을 링크하는 방법도 HTML 문서를 링크하는 방법과 동일합니다. 단지 HTML 문서 파일명 대신 다음 예와 같이 이미지 파일명을 적어주면 됩니다.

이 때 주의할 점은 이미지 파일이 이미지를 삽입할 HTML 문서와 다른 디렉토리에 있는 경우 이미지 파일이 있는 경로를 지정해 주어야 한다는 것과 웹브라우저가 출력할 수 없는 이미지가 있다는 것이다. 위의 예에서 GIF 확장자를 가진 이미지는 웹브라우저가 출력할 수 있지만 PNG나 CGM과 같은 확장자를 가진 이미지 파일은 웹브라우저를 통해 직접 볼 수 없는 경우가 있습니다. 이 경우는 해당 플러그인(넷스케이프의 경우)이나 액티브엑스(익스플로러의 경우)를 설치하거나 어플리케이션 프로그램을 설치해야 합니다.

6.3. 웹사이트 링크
자신의 홈페이지가 저장되어 있는 서버의 홈페이지는 물론 다른 서버에 저장되어 있는 홈페이지도 링크할 수 있습니다. 비로소 이것에서 세계적인 거미줄인 월드와이드웹이 탄생하게 되는데 링크시키는 방법은 앞에서 배운 것과 동일합니다. 단 파일명을 적어 주던 곳에 다음과 같이 웹사이트의 주소를 적어 주면 됩니다.

6.4. 같은 페이지 내의 특정부분 링크하기
인터넷 문서의 경우 한 페이지의 크기는 정해져 있지 않아 때론 아주 긴 페이지들을 종종 방문하게 됩니다. 페이지가 웹브라우저 화면을 넘는 경우 스크롤바가 나타나긴 하지만 페이지 가 무척 길다면 스크롤하는데 많은 시간이 소요되고 필요한 부분이 단지 특정부분이라면 그렇게 할 필요없이 직접 그 부분을 링크할 수 있습니다.

이렇게 하기 위해서는 Named Anchor라고 부르는 표시가 필요하게 되는데 문서 내의 목적지 위치를 정의하는 역할을 하게 됩니다. 그리고 그 표시한 부분을 다음과 같이 앵커태그를 사용하여 연결할 수 있습니다.

즉 위와 같이 링크를 만들어 놓으면 웹브라우저에 나타난 하이퍼텍스트 '이미지 파일 링크'를 클릭하게 되면 라고 되어 있는 부분이 웹브라우저의 상단에 나타나게 되는데 이 Named Anchor는 웹브라우저에 나타나지 않기 때문에 hidden reference maker라고 부릅니다.

6.5. 웹사이트의 특정부분을 링크하기
앞에서 다루었던 Named Anchor가 반드시 자신이 만든 문서에 있을 필요는 없습니다. 전세계 어느 홈페이지에 있는 Named Anchor이든 참조하여 링크시킬 수 있습니다. 이 경우도 앞의 경우와 동일 한데 다음에 보는바와 같이 형식을 이용합니다.

이 경우 웹브라우저 상에는 앞의 경우와 마찬가지로 '1장'라는 하이퍼텍스트가 나타나고 이 텍스트를 마우스로 클릭할 경우 http://homepage.jinbo.net이라는 URL내의 intro.html이라는 파일 내의 Named Anchor #chap1이 있는 부분을 여러분의 웹브라우저 상단에 출력해 줍니다. # 기호를 꼭 기억하도록 합니다.

6.6. 하이퍼 그래픽 - 이미지에 링크 걸기
지금까지는 웹브라우저 상에 나타난 텍스트를 클릭하여 원하는 문서나 이미지 등을 연결하는 방법을 주로 알아보았습니다. 하지만 하이퍼링크가 반드시 텍스트에만 연결할 수 있는 것은 아닙니다. 웹페이지 내에 이미지를 삽입하고 이 이미지에 다른 웹사이트나 각종 자료를 연결할 수 있는데 이렇게 이미지에 링크 기능을 부여하는 것을 하이퍼 그래픽이라고 합니다.

이렇게 하면 웹브라우저에는 home.gif 파일명의 이미지가 나타나고 이 이미지를 마우스로 클릭하였을 때 index.html이라는 문서를 웹브라우저로 불러오게 되는 것이죠. 이 때 눈여겨볼 것은 border=0 이라는 속성코드를 태그 내에 삽입시킨 점입니다. 앞에서도 이야기했듯이 이미지에 링크를 걸게 되면 파란색의 테두리가 생기게 됩니다. 이를 없애 주기 위해서 border=0라는 속성을 명시해 주어야 합니다.

6.7. 다양한 하이퍼링크 방법
월드와이드웹은 인터넷의 강력한 도구로 성장을 계속하고 있습니다. 그것은 각종 멀티미디어 기술을 이용할 수 있는 것과 더불어 하이퍼링크 기능을 이용하여 다양한 기존의 인터넷 서비스들을 연결하고 웹브라우저 상에서 직접 그러한 서비스들을 이용할 수 있도록 해 주기 때문이다.

6.7.1. 전자우편창 링크

6.7.2. FTP 서비스

6.7.3. Gopher 사이트 링크

6.7.4. 뉴스그룹 링크
전자우편 창을 링크하는 경우와 같이 레퍼런스에 'news:뉴스그룹명'의 형식을 사용하면 됩니다.