1. 링크 태그 : <A>.....</A> -Anchor
마우스를 클릭하면 연결된 위치로 갈 수 있게 해주는 문자를 하이퍼텍스트(hypertext)라고 한다.
<A>(anchor tag)를 사용하여 다른 문서나 자신의 문서 일부분으로 이동한다. <A>와 </A>를 사용하고 그 안에 <href>속성을 이용한다.
1.1. 속성
|
속성 |
설명 |
|
href="URL" |
하이퍼 링크의 경로를 지정한다.(Uniform Resorce Locater) |
|
name="위치이름" |
현재 문서내의 위치를 지정한다. |
|
target="프레임 이름, _self, _top, _parent, _black" |
링크된 문서를 나타낼 특정 위치의 프레임의 이름을 지정한다. _self : 자기 자신을 의미하므로, 현재 프레임의 내용이 선택된 내용으로 대치된다. _top : 포함하고 있는 모든 프레임을 삭제하고 전체 브라우저 윈도우에 문서를 읽어 들인다. _parent : 프레임 셋 안에 다시 프레미 셋이 정의될 경우 자신의 상위 프레임 셋이 전체 내용에 선택된 내용을 표시해준다. _blank : 이름이 없는 새윈도우에 읽어들인다. |
|
title="제목입력" |
(예)<A title="링크"> |
|
shape="rect", "circle", "poly" |
링크대상이 이미지 맵일 경우 표시하는 모양 종류를 지정한다. |
2. 다른 홈페이지로 연결
2.1. HTML 문서
|
<html> <head> <title>다른 홈페이지로 연결 </title> </head> <body> <a href="http://www.joins.com">1.중앙일보</a><br> <a href="http://www.chosun.com">2. 조선일보</a><br> <a href="http://www.andong.ac.kr">3. 안동대 홈페이지</a><br> <a href="http://anu.andong.ac.kr/~sonice">4. 교과목 홈페이지</a><br> <a href="http://homepi.co.kr">5. HTML 강의 홈페이지</a><br> </body> </html> |
2.2. 브라우저 화면
밑줄 친 부분을 클릭하면 다른 홈페이지로 이동한다.
3. 다른 문서로 연결
같은 사이트 내에서 다른 문서로 이동한다.
3.1. HTML 문서
|
<html> <head> <title>다른 문서로 연결 </title> </head> <body> <a href="글꼴.html">1. 글꼴 태그</a><br> <a href="글자색.html">2. 글자색 만들기</a><br> <a href="글자크기.html">3. 글자크기 정하기</a><br> <a href="글자태그h1.html">4. 글자태그 연습</a><br> <a href="수평선.html">5. 수평선 그리기</a><br> </body> </html> |
3.2. 브라우저 화면
밑줄 친 부분을 클릭하면 다른 문서로 이동한다.
4. 같은 문서 내에서 다른 위치로 연결
같은 문서 내에서 이동하기 위해서는 이동할 위치에 <A NAME="위치이름">을 지정해야 한다.
4.1. HTML 문서
|
<html> <head> <title>같은 문서내에서 다른 위치로 연결 </title> </head> <body> <!--이동할 위치에 이름을 지정해주고 그 이름으로 하이퍼 링크로 연결하면 밑줄 친 부분을 클릭할 때 그이름이 있는 위치로 이동한다.--> <a href="#1">1. 번호 없는 목록을 나탸냅니다.</a><br> <a href="#2">2. 번호 없는 목록(type=square)을 나타냅니다.</a><br> <a href="#3">3. 번호 없는 목록(type=circle)을 나타냅니다.</a><br>
<p><a NAME="1">1. 번호 없는 목록을 나타냅니다.</a><br> <ul type=disc> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ul><br>
<a NAME="2">2. 번호 없는 목록(type=square)을 나타냅니다.</a><br> <ul type=square> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ul> <br> <a NAME="3">3. 번호 없는 목록(type=circle)을 나타냅니다.</a><br> <ul type=circle> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </body> </html> |
4.2. 브라우저 화면
4.3. 밑줄 친 2.번을 클릭하면 2번 내용으로 이동한다.
5. 웹 문서에서 메일 보내기 만들기
웹 브라우저 상에서 메일 보내기를 만들 수 있다.
5.1. HTML 문서
|
<html> <head> <title>웹 문서에서 모내는 메일 </title> </head> <body> 문의 사항이 있으시면 <a href="mailto:sonice@chollian.net"> 컴퓨터 응용 강사(고주영)</a>에게 연락하시기 바랍니다.
</body> </html> |
5.2. 브라우저 화면
