하이퍼 링크하기

하이퍼 링크 태그 1. 글자와 그림에 하이퍼링크 만들기 - A 글자에 하이퍼링크를 주는 경우 <A href="URL" target="링크 방법"> 글내용 </A> 그림에 하이퍼링크를 주는 경우 <A href="URL" target="링크 방법"> <IMG src="URL"> </A> - URL : 하이퍼링크로 연결할 html 문서, 그림, 기타 파일경로를 지정. - target : 다른 웹 브라우저 창이나 프레임세트 기능을 이용하여 프레임 창에 하이퍼 링크로 연결한 문서가 나타나게 합니다. 지정하지 않았을 경우 같은 웹 브라우저 창에 하이퍼 링크로 연결한 문서가 나타납니다. ①_black : 새로운 웹 브라우저 창에 하이퍼링크로 연결한 문서가 나타남. ②_parent : 프레임 문서의 구조에서 하이퍼링크로 연결한 문서를 현제 프레임이 포함한 상위 프레임창에 나타냄. ③_top : 프레임 문서의 구조라 하더라도 웹 브라우저의 화면 전체 창 현태로 하이퍼링크로 연결한 문서를 보여줌. ④_self : 현재와 같은 웹 브라우저 창에 하이퍼링크로 연결한 문서를 보여줌 ⑤프레임 이름 : 프레임 구조의 문서에서 지정한 프레임 창에 하이퍼링크로 연결한 문서를 보여줌. 2. 하이퍼링크 색상 수정하기. <BODY link="색상" vlink="색상" alink="색상"> - link : 보통 상태의 하이퍼링크 색상으로 16진수 생상 코드값이나 영문 색상명을 입력. - vlink : 한번 누른적있는 방문한 상태의 색상 - alink : 누르고 있는동안의 색상 3. 메일 링크 만들기 - a 글자에 메일 링크 만들기 <A href="mailto:이메일 주소">글내용</A> <A href+"mailto:이메일 주소?subject=메일 재목">글내용</A> 그림에 메일 링크 만들기 <A href="mailto:이메일 주소"><IMG src="URL"></A> <A href="mailto:이메일 주소?subject=메일 재목"><IMG src="URL"></A> 4. 문서의 가고 싶은 곳으로 자동 이동하는 책갈피 만들기 - Name anchar 책갈피 위치 지정하기 <A NAME="책갈피 이름">책갈피 위치</A> 책갈피 위치로 하이퍼링크를 만들기 <A href="#책갈피 이름">그림이나 글내용</A> ex) <html> <head> <title> 책갈피 이용하기 1</title> </head> <body leftmargin="100" topmargin="10" background="images/back_blue.gif">  <A NAME="top"><img src="images/logo_kan.gif" width="210" height="80"></A>  <A href="#a">a로 고고싱!!</A> | <A href="#b">b로 고고싱!!</A> | <A href="#c">c로 고고싱!!</A> <A NAME="a">&gt;&gr; A 입니다~</A> <IMG src="imgages/kan01.jpg" width="300" height="287" border="5"> 에이~~~ ㅋㅋㅋ <A NAME="b">&gt;&gt; B 입니다~</A> <IMG src="images/kan02.jpg" width="300" height="322" border="5"> 비 비 비 비 비 비 비 비 <A NAME="c">&gt;&gt; C 입니다~</A> <IMG src="images/kan03.jpg" width="300" height="322" border="5"> 씨 X X 아 !!! ㅜ.ㅜ  <A href ="#top"> 맨위로</A> </body> </html> 5. 그림의 부분 부분에 서로 다른 하이퍼 링크 걸기 - Imagemap 이미지맵으로 사용할 그림에 맵 이름 지정하기 <IMG src="URL" usemap="#맵 이름"> 이미지맵 영역 지정하기 <MAP name="맵 이름"> <AREA shape="rect" coords="좌표" href="URL" alt="풍선 도움말"> <AREA shape="circle" coords="좌표" href="URL" alt="풍선 도움말"> <AREA shape="poly" coords="좌표" href="URL" alt="풍선 도움말"> </MAP> - name : <IMG>의 usemap에서 지정한 맵 이름과 동일해야함. - shape : 이미지맵의 모양을 사각형(rect), 타원형(circle), 다각형(poly) 중에서 지정합니다. - coords : shape에서 선택한 이미지맵에 따라 좌표 부분이 달라집니다. 다각형(poly)의 경우 최소 3개의 꼭지점이 필요함. ① 사각형(rect) : 왼쪽 위 모서리의 X 좌표, 왼쪽 위 모서리의 Y좌표, 오른쪽 아래모서리의 X좌표, 오른쪽 아래 모서리의 Y좌표 ② 원(circle) : 중심점 X 좌표, 중심점 Y 좌표, 반지름 ③ 다각형(poly) : 각이 지는 꼭짓점 1 부분의 X 좌표, Y 좌표 각이 지는 꼭짓점 2 부분의 X 좌표, Y 좌표 각이 지는 꼭짓점 3 부분의 X 좌표, Y 좌표 ex)  <AREA shape="rect" coords="0,0,120,50" href="nameanchor1_tag.html" alt="사각형형태이미지맵">  <AREA shape="circle" coords="180,25,25" href="a4_tag.html" alt="원형 형태의 이미지맵">  <AREA shape="poly" coords="240,0,360,25,300,50" href="a1_tag.html" alt="다각형 형태의 이미지 맵">