Programming/HTML5

[6장]HTML5 태그(3)

ZZUYONI 2015. 1. 27. 03:19

★하이퍼링크 태그

 

 

<a>태그 - 원하는 문서나 사이트로 연결하기

 

- 기본형 : <a href="경로">...</a>

 └ 텍스트링크 : <a href="경로"><p>...</p></a>

 └ 이미지링크 : <a href="경로"><img src="경로"></a>

 

- 새 창(탭)에서 열기 : <a href="경로" target="_blank">...</a>

 

- 맨 위로 올라가기 : <a href="#top">...</a>

 

- 앵커 : 한 페이지 안에서 이동하게 하는 기능

  └ <a name="앵커이름">...</a>

                    :

<a href="#앵커이름">...</a>

 

 

※실습하기

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

 

<body>

<ul>

<li><a name="a"><img src="puppy.jpg"></a></li>        <!--앵커 설정-->

<li><a name="b"><img src="cat.jpg"></a></li>

<li><a name="c"><img src="rabbit.jpg"></a></li>

</ul>

 

<a href="http://www.facebook.com" target="_blank"><img src="fb.png"></a>

<a href="http://www.naver.com" target="_blank"><p>네이버</p></a>

 

<a href="#a"><p>강아지</p></a>

<a href="#b"><p>고양이</p></a>

<a href="#c"><p>토끼</p></a>

 

<a href="#top"><p>up</p></a>

</body>

</html>

 

 

 

 

 

▲결과