하이퍼링크

[유리하나]

하이퍼링크.
다른 문서나 미디어 파일을 연결(Link)시켜주는 것으로, 'anchor(닻)'을 의미합니다.
<a href="웹페이지주소">연걸어</a> 의 형식으로 쓰이며, 'href'는 Hyper와 Reference
라는 요소를 뜻합니다. <a>태그를 이용하여 웹하이트의 URL은 물론, HTML문서, 워드프로세서,
압축파일, 실행파일 등을 모든 종류의 파일로 링크시킬 수 있습니다.
예)

<a href="http://www.naver.com">네이버</a>
<a href="story.html">이야기</a>
<a href="music.wma">음악</a>
<a href="winzip.exe">윈집다운받기</a> 

1. 문자로 링크시키기.

   링크태그의 기본입니다. 글씨를 클릭해서 링크를 시키는 거죠.
소스-
--------------------------------------------------------------------------------
<a href="http://www.naver.com" target="_blank"> <font color="0000cc"> 네이버로 </font> </a>
--------------------------------------------------------------------------------
설명-
<a href="">부분과 </a> 부분은 링크태그의 시작과 끝을 알리는 것입니다.
http://www.naver.com 부분은 링크시킬 주소 부분입니다.
target="_blank" 는 링크된 페이지가 나타날 창을 정해주는 겁니다. 기본적으로 지정해 주지 않으면
현재 페이지를 다른곳으로 넘깁니다. (target의 종류 및 기능은 아래에)
네이버로 부분은 연결어로, 이 글씨를 클릭하면 링크시킨 주소로 넘어가게 되죠.
<font...></font> 부분은 링크시킬 연결어의 글씨 색을 파란색으로 지정한 것일 뿐;

결과-

네이버로  


[TIP!]타겟(target)의 종류 및 기능

종류	기능
target=xxx	링크시킨 html 문서를 <frameset>의 name으로 붙여준 프레임에서 열  게 한다. 예) target=right / targer=main
target=_top	링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된  브라우저 화면으로 열도록 한다.
target=_blank	링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고,  새로운 브라우저(새 창, New Navigator)에서 열게한다.
target=_parent	기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조 로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크한다.
target=_self	하이퍼링크 시킨 문서를 같은 프레임에서 열게한다.

2. 그림으로 링크시키기.

   그림을 링크시킵니다. 그림에 마우스를 클릭하면 그림에 걸려있는
   링크로 이동시킵니다.
소스-  <a href="이동시킬주소"> <img src="그림주소" border="0"> </a>

예) 네이버 사이트를 "img/link.jpg" 라는 그림으로 하이퍼링크 시킬때.

소스.------------------------------------------------------------------------------
<a href="http://www.naver.com"> <img src="img/link.jpg" border="0"> </a>
-----------------------------------------------------------------------------------

실행결과-  클릭해보세요.


※ 여기서 빨간색으로 표시된 border="0" 속성은 그림을 링크시킬 때 꼭 적어줘야 합니다.
    링크시킬 때 그림에 테두리를 없애주는 속성이기 때문이지요.

★TAG TIP!!★★★★★★★★★★★★★★★

그리고 저그림을 클릭할 때 주위테두리에 점선같은게 생깁니다.(클릭하고 나서도 보이죠)
클릭할 때 점선 안생기게 하려면 아래 속성을 이용하면 됩니다
[안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()" 아주 좋은 속서이죠. 링크태그에 추가하시면 됩니다
이런식으로...ex)
 <a href="http://www.naver.com" [안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()"> 지식까지 검색해주셈 </a>
 <a href="main.html" target="in" [안내]태그제한으로등록되지않습니다-xxonfocus="this.blur()"> <img src="img/main.jpg"> </a>
대충 보시면 아시리라 믿습니다;;.
연습은 태그연습장에-
ex 하나 보여드립니다. 타겟은 _blank 입니다. 클릭할 때 점선 생기는지를 보세요.

3. 이메일 (e-mail)의 링크.

  전자메일 주소를 링크시키려면 <a> 태그의 href 속성에 반드시 'mailto:'라는 URL 표기 방식을 먼저
  넣어주어야 합니다. 이 'mailto:'라는 속성에 의해 사용자가 링크된 곳을 클릭하면 자동으로 전자우편
  메시지를 작성할 수 있는 작성창이 뜨며, 수취인(To) 란에 E-mail 주소가 자동으로 입력되도록 하는
  겁니다.
예)-(소스)
      <a href="mailto:tokyo-rose@hanmail.net"> tokyo-rose@hanmail.net </a>
      <a href="mailto:jkw87@hanmir.com"> 메일보내기 </a>

아웃룩 익스프레스가 뜨기 때문에 결론적으로 추천은 안합니다.

4. 기타, 파일(동영상,음악,자료,압축,프로그램) 의 링크.

  음악이나 동영상을 클릭해서 띄우거나, 압축파일,프로그램 등을 클릭해서 다운받게 하는 방법입니다.
  이것도 <a href="">사이에 그 파일의 주소만 넣어주면 되는 거죠.
예)-(소스)
      <a href="alzip.exe"> 알집 다운 </a>                 -  프로그램다운
      <a href="mulanluge.wav"> 음악 </a>          -  미디어 열기
      <a href="kensin.asf"> 애니메이션 </a>             -  동영상
 //
여기서 상대 경로와 절대 경로가 있습니다.
예를들면 위의 alzip.exe는 상대경로 입니다.
그러면 위 태그를 적용하는 곳이 alzip.exe 가 있는 같은 공간일 경우에는
상관이 없지만 다른 곳에서는 alzip.exe를 쓰면 링크가 걸리지 않습니다.

그래서 이런 경우에는 절대경로를 써 줍니다.
예를들면 http://pierload.x-y.net/util/alzip.exe 와 같이 http부터 모두 써 주는 겁니다.