최신 웹 개발 튜토리얼

HTML 링크

❮ 이전 다음 장 ❯

링크는 거의 모든 웹 페이지에서 발견된다. 링크는 사용자가 페이지에서 페이지로 그들의 방법을 클릭 할 수 있습니다.

HTML 설명 링크

하이퍼 링크, 또는 단순히 링크, 독자가 직접 수행 할 수있는 데이터에 대한 참조입니다 중, 클릭 도청, 또는 유혹에 의해.

하이퍼 링크는 전체 문서 또는 문서 내의 특정 요소를 가리 킵니다. 하이퍼 텍스트는 하이퍼 링크 텍스트입니다. 에서 링크 된 텍스트 앵커 텍스트라고합니다.

보기 및 하이퍼 링크를 생성하기 위해 사용되는 소프트웨어 시스템은 하이퍼 텍스트 시스템, 그리고 하이퍼 링크를 생성하기 위해 하이퍼 링크 (또는 간단히 링크)이다. 사용자 다음 하이퍼 링크가 이동 또는 하이퍼 텍스트를 검색 할 수 있다고한다.

HTML 링크 - 하이퍼 링크

HTML 링크는 하이퍼 링크입니다.

하이퍼 링크는 다른 문서에 텍스트 나 클릭 할 수있는 이미지, 그리고 점프입니다.

HTML 링크 - 구문

HTML에서 링크가 정의되어 <a> 태그 :

<a href=" url "> link text </a>

예

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
»그것을 자신을 시도

href 속성 목적지 어드레스를 지정한다 (http://www.w3ii.com/html/default.html)

링크 텍스트는 보이는 부분이다 (Visit our HTML tutorial) .

링크 텍스트를 클릭하면, 지정된 주소로 보내드립니다.

링크 텍스트는 텍스트가 될 필요가 없습니다. 그것은 HTML 이미지 또는 다른 HTML 요소가 될 수 있습니다.

하위 폴더 주소에 후행 슬래시없이, 당신은 서버에 두 개의 요청을 생성 할 수 있습니다. 대부분의 서버는 자동으로 주소로 후행 슬래시를 추가 한 다음 새 요청을 생성합니다.

지역 링크

위의 예는 절대 URL 사용 (A full web address) .

로컬 링크 (link to the same web site) 상대 URL로 지정됩니다 (without http://www.... ) .

예

<a href="html_images.asp">HTML Images</a>
»그것을 자신을 시도

HTML 링크 - 색상

당신이 링크 위로 마우스를 이동하면 두 가지 일반적으로 일어날 것입니다 :

  • 마우스 화살표는 작은 손으로 켜집니다
  • 링크 요소의 색상이 변경됩니다

기본적으로 링크는 다음과 같이 나타납니다 (in all browsers) :

  • 방문하지 않은 링크는 밑줄과 파란색입니다
  • 방문 된 링크는 밑줄과 보라색입니다
  • 활성 링크는 밑줄과 빨간색

당신은 스타일을 사용하여 기본 색상을 변경할 수 있습니다 :

예

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
»그것을 자신을 시도

HTML 링크 - target 특성

target 속성은 링크 된 문서를 여는 위치를 지정한다.

이 예는 새 브라우저 창이나 새 탭에서 링크 된 문서를 엽니 다 :

예

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
»그것을 자신을 시도
목표 값 기술
_blank 새 창이나 탭에 링크 된 문서를 엽니 다
_self 이 클릭되었을 때 동일한 프레임에서 링크 된 문서를 엽니 다 (this is default)
_parent 상위 프레임에서 링크 된 문서를 엽니 다
_top 창 전체에 링크 된 문서를 엽니 다
framename 명명 된 프레임에 링크 된 문서를 엽니 다

웹 페이지가 프레임에 고정되어있는 경우, 당신이 사용할 수있는 target="_top" 프레임의 탈옥 :

예

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
»그것을 자신을 시도

HTML 링크 - 링크로 이미지

이 링크로 이미지를 사용하는 것이 일반적이다 :

예

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
»그것을 자신을 시도

테두리 : 0 IE9 방지하기 위해 추가된다 (and earlier) 화상의 주위에 테두리를 표시하지.

HTML의 링크 - 책갈피 만들기

HTML 북마크는 독자가 웹 페이지의 특정 부분으로 이동할 수 있도록하는 데 사용됩니다.

당신의 웹 사이트가 긴 페이지가있는 경우 즐겨 찾기 실용적입니다.

책갈피를 만들려면 먼저 책갈피를 만든 다음에 링크를 추가해야합니다.

링크를 클릭하면 페이지가 북마크와 위치로 스크롤됩니다.

예

첫째,와 책갈피 생성 id 속성을 :

<h2 id="tips">Useful Tips Section</h2>

그런 다음 즐겨 찾기에 링크를 추가 ("Useful Tips Section") 같은 페이지 내에서 :

<a href="#tips">Visit the Useful Tips Section</a>

또는, 즐겨 찾기에 링크를 추가 ("Useful Tips Section") 다른 페이지에서 :

예

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
»그것을 자신을 시도

장 요약

  • HTML 사용 <a> 링크를 정의하는 요소를
  • HTML 사용 href 링크 주소를 정의하는 속성을
  • 은 HTML 사용 target 링크 된 문서를 열 위치를 정의하는 속성을
  • HTML 사용 <img> 요소를 (inside <a> ) 링크로 이미지를 사용하는
  • 은 HTML 사용하여 id 속성 ( id=" value ") 페이지에 책갈피를 정의 할 수
  • HTML 사용 href 속성 ( href="# value ") 북마크 링크

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»

HTML 링크 태그

꼬리표 기술
<a> 하이퍼 링크를 정의합니다

❮ 이전 다음 장 ❯