HTML 문서에 링크를 만드는 방법. 태그 A - 구문과 속성

  1. 인터넷상의 페이지의 URL 또는 "주소"
  2. <A> 태그 및 기본 구문
  3. 절대 및 상대 참조
  4. 현재보다 높은 디렉토리에 대한 상대 링크
  5. <A> 태그의 속성. 새 창에서 참조로 문서를 여는 방법
  6. 제목 링크. <A> 태그의 title 속성
  7. 특성 하이퍼 링크 nofollow. 참조에 의한 사이트의 "신뢰"의 이전 금지
  8. 내부 링크 또는 문서 안의 앵커
  9. 링크 앵커 - 그림
  10. 계속

참조 (또는 하이퍼 링크)는 혈관처럼 인터넷에 스며든다. 링크가 없으면 인터넷이 없습니다.

HTML 문서에 링크를 만들고 올바르게 속성을 등록하는 방법, URL이 무엇인지, 검색 엔진이 링크와 관련되는 방법 - 초보자가 HTML을 배울 수 있도록 다음 강의에서 다룹니다.

인터넷상의 페이지의 URL 또는 "주소"

웹상의 모든 HTML 문서에는 고유 한 "정확한 주소"가 있습니다. 영어에서 "URL"이라고합니다. URL - URL ( Uniform Resource Locator)

URL 구조는 브라우저의 검색 주소창에 표시되는 경우가 많습니다. 그것은 다음을 포함합니다 :

  1. 프로토콜 이름은 http : // 또는 https : //입니다.
  2. 사이트 도메인
  3. 이 문서가 위치한 폴더의 경로 또는 경로,
  4. 파일 이름 (항상 같지는 않을 수도 있음).

이 "정확한 주소"덕택에이 문서를 다른 문서의 텍스트에서 참조 할 수있게되었습니다.

<A> 태그 및 기본 구문

나는 "구문"이라는 단어가 더 이상 당신을 두렵게하지 않기를 바란다.

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> 링크 텍스트 </a>

보시다시피 <A> 태그를 시작한 후에는 이동하려는 문서의 주소를 지정하는 필수 href 속성이 있어야합니다.

<A> 컨테이너 태그 자체 안에는 링크 텍스트 인 텍스트 (그림이있을 수 있음)가 있습니다. " 앵커 "또는 간단히 - 앵커라고도합니다.

절대 및 상대 참조

위의 예에서 절대 참조가 사용되었습니다. 문서의 전체 URL 을 포함하는 URL

어떤 경우에는 href 속성에 프로토콜 이름과 사이트 도메인이 포함 된 전체 URL이 포함되지 않습니다. 링크가 연결된 문서가 동일한 사이트에있는 경우 문서가있는 위치에서부터 이어지는 상대 링크를 사용할 수 있습니다.

상대 참조가 적용될 때의 계획

예 : first.html 문서의 링크는 뉴스 폴더에있는 second.html 파일로 연결됩니다.

현재보다 높은 디렉토리에 대한 상대 링크

코드 :

<a href="../first.html"> 디렉토리 수준의 파일에 대한 상대 링크 </a>

이 링크는 "parent"디렉토리의 first.html 파일로 연결됩니다. 한 수준 위로 .

../의 조합은 링크가 만들어지는 파일의 주어진 위치로부터 한 레벨 위로 폴더를 나타냅니다.

<A> 태그의 속성. 새 창에서 참조로 문서를 여는 방법

새 브라우저 탭에서 문서를 열려면 target = "_ blank"속성을 사용해야합니다.

새 브라우저 탭에서 문서를 열려면 target = _ blank속성을 사용해야합니다

속성 링크 target = "_ blank"

그것을 남용하지 마십시오. 이 속성을 사용하여 사이트에 대한 내부 링크를 만들 필요가 없습니다. 사용자는 "sparking window"에 짜증을냅니다.

일반적으로이 대상 속성은 전체 스토리입니다. 여전히 많은 의미가 있지만, 오늘날은 거의 사용되지 않습니다.

이는 더 이상 인기가없는 프레임 에서 사이트와 작업하도록 설계 되었기 때문에 HTML5 의 출현과 함께 과거의 일이되어 가고 있기 때문입니다.

제목 링크. <A> 태그의 title 속성

또 다른 유용한 속성은 title = "이 링크의 위치를 ​​설명하는 텍스트"

구문 :

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="the pop-hint"> 힌트 링크입니다 </a>

보시다시피, 브라우저는이를 도구 팁으로 표시합니다. 그러나 아직까지는 검색 엔진을 고려합니다.

링크 타이틀의 속성 힌트

특성 하이퍼 링크 nofollow. 참조에 의한 사이트의 "신뢰"의 이전 금지

rel = "nofollow"링크에는 모호한 속성이 하나 더 있습니다.

그는 검색 엔진에 링크 문서가 신뢰할 수 없다고 말합니다. 동시에 원본 사이트의 신뢰 ( "신뢰") 표시는 참조로 사이트에 전송되지 않습니다.

"신뢰"와 링크 순위의 주제는 여전히 앞서 있지만 검색 엔진에있는 사이트의 "운명"은이 사이트로 연결되는 링크의 수에 따라 달라집니다. 그들 중 상당수가 신뢰할 수있는 사이트 링크 - 참조로 사이트의 신뢰성.

어떤 경우에는이 속성을 사용하여 링크를 "스크리닝"하는 것이 좋습니다. 예를 들어, 서비스에 대한 부정적인 리뷰를 작성한 경우.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> 나쁜 사이트 </a>

내부 링크 또는 문서 안의 앵커

대형 텍스트의 경우, 문서의 논리적 부분에 소위 "앵커"를 설치해야하는 경우가 종종 있습니다. 그런 다음이 장소에 있습니다. 참조 할 수 있습니다.

이것을 사용하는 가장 쉬운 방법은 이러한 앵커로 연결되는 하이퍼 링크를 사용하여 로컬 목차를 만드는 것입니다. 이러한 목차는 일반적으로 기사의 맨 처음에 배치됩니다.

이러한 앵커를 만들 때 href 속성 대신 name 속성이 사용됩니다.

앵커를 만드는 구문은 다음과 같습니다.

<a name="top"> </a>

링크를 만들 때 URL 끝에 "#"앵커 이름을 추가합니다.

<p> <a href="#top"> 상위 </a> </ p>

전환은이 장소, 즉 브라우저는 위쪽 부분에이 위치를 배치합니다.

흔히 긴 문서에서 맨 아래에는 "Top"과 같은 링크가 있습니다.

... 향기로운 곡물 세계를 여행하다 보니 아프리카, 아시아, 중남미의 유명인이 가장 높은 품질을 발견했습니다. 따라서 오늘날 브랜드의 커피 하우스에서 커피 콩 공인 된 제조업체의 커피 종류가 가장 좋습니다.

? 맨위로 ?

다른 문서에서 URL 끝에 # sign_ name_accord를 추가하면이 장소로 이동할 수 있습니다.

<a href="http://domen-saita.ru/dokument.html#top"> 링크 텍스트는이 문서의 앵커 "상단"으로 연결됩니다. </a>

링크 앵커 - 그림

모든 이미지는 링크가 될 수 있습니다.

코드 :

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width ="100 "height ="131 "/> </a>

기본적으로 링크는 브라우저에 밑줄이 그어져 있으며 파란색 파란 선이 표시되며 링크 그림에는 파란색 프레임이 표시됩니다.

링크 - 사진은 파란색 프레임을 얻습니다.

이를 없애기 위해 사이트의 CSS 파일에 간단한 규칙이 추가됩니다.

a {border : 0px;}

이것은 모든 이미지 링크의 테두리 두께를 0으로 만드는 명령입니다.

계속

다음 글에서는 전자 메일 링크, 악의적 인 스패머의 "보호"속성 및 특성에 대해 이야기하겠습니다.