하이퍼 링크 태그
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">
<!-- top 으로 책갈피 위치 지정 -->
<A NAME="top"><img src="images/logo_kan.gif" width="210" height="80"></A>
<!-- 상단 글자 메뉴 부분 - 책갈피로 하이퍼링크 지정 -->
<P align="left">
<A href="#a">a로 고고싱!!</A> |
<A href="#b">b로 고고싱!!</A> |
<A href="#c">c로 고고싱!!</A>
</P>
<br><br><br><br>
<A NAME="a">>&gr; A 입니다~</A>
<br><br>
<p><IMG src="imgages/kan01.jpg" width="300" height="287" border="5"></p>
<p>
<FONT size="3" face="바탕">
에이~~~ ㅋㅋㅋ
</FONT>
</p>
<br><br>
<A NAME="b">>> B 입니다~</A>
<br><br>
<p><IMG src="images/kan02.jpg" width="300" height="322" border="5"></p>
<p>
<FONT size="3" face="바탕">
비 비 비 비 비 비 비 비
</FONT>
</p>
<br><br>
<A NAME="c">>> C 입니다~</A>
<br><br>
<p><IMG src="images/kan03.jpg" width="300" height="322" border="5"></p>
<p>
<FONT size="3" face="바탕">
씨 X X 아 !!! ㅜ.ㅜ
</FONT>
</p>
<br><br>
<!-- 하단 메뉴부분 - 맨위로 자동 이동 책갈피로 하이퍼링크 지정 -->
<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="다각형 형태의 이미지 맵">