블로그 사이트에 오신 것을 환영합니다! 오늘 기사에서는 하이퍼텍스트 언어에 대해 이야기하겠습니다. HTML 마크업. 이 출판물나는 이전에 이런 글을 쓴 적이 없기 때문에 최초의 (그리고 마지막과는 거리가 먼) 것이 될 것입니다.

포스트 계획:

하지만 이제 필요한 지식을 얻고 실제로 테스트해 보았으므로 기꺼이 독자들과 공유하겠습니다. 예를 들어 HTML에 링크를 삽입하는 방법을 알기 위해 초기 단계에서 얼마나 많은 노력과 시간을 소비했는지는 이유가 없습니다. 당연히 내 게시물을 읽고 나면 당신도 이것을 알고 할 수 있을 것입니다.

일반적으로 링크 태그는 옵티마이저 작업에 꼭 필요하다는 점은 주목할 가치가 있습니다. 검색 엔진 최적화그리고 물론 SEO 분야의 전문가는 일반 블로거는 물론이고 링크 없이는 할 수 없을 것입니다. :).

아마도 html 링크 태그 A는 텍스트에 이미지를 표시하는 데 필요한 img 태그와 함께 제가 가장 많이 사용하는 태그 중 하나일 것입니다. 평균적으로 제가 게시하는 각 기사에는 내부 페이지와 외부 페이지 모두에 대한 링크가 약 5개 포함되어 있습니다.

HTML 웹사이트의 태그는 게시물을 작성할 때만 사용되는 것이 아니라는 점을 잊지 마세요. 또한 CMS WordPress 또는 기타 콘텐츠 관리 시스템에 설치한 템플릿의 코드를 변경할 때 필요합니다.

따라서 향후 링크 작업 시 문제가 발생하지 않도록 최소한 가장 기본적인 html 태그 정도는 공부해야 합니다. 예를 들어 " 비주얼 편집기"기사를 작성할 때 이 편집기가 작동하지 않으면 링크를 추가하는 기본 코드도 알지 못하기 때문에 이는 별로 좋지 않습니다.

일반적으로 HTML 마크업 언어의 기본 개념을 아는 것은 여러분의 삶을 더 쉽게 만들고 큰 도움이 될 것이라고 믿습니다. 하지만 지금 당신에게 새로운 내용을 연구하는 데 사용하는 시간은 낭비되지 않을 것입니다.

또한 작업을 더 쉽게 만들어 줄 더 많은 뉘앙스가 있으며 아래 내 기사에서 이에 대해 읽을 수 있습니다. 이는 rel=”nofollow”, target=“_blank” 및 링크와 관련된 기타 많은 흥미로운 사항입니다.

링크 태그 A – 앵커가 있거나 없는 HTML 문서에 하이퍼링크 만들기

위에서 이미 언급했듯이 링크는 제가 가장 많이 사용하는 HTML 태그 중 하나입니다. 사용자가 한 번의 클릭으로 한 문서에서 다른 문서로 쉽게 이동할 수 있도록 하기 위해 필요합니다.

그러나 하이퍼링크의 경로를 지정하려면 href 속성을 사용해야 합니다. 덕분에 링크하려는 페이지의 URL을 지정할 수 있고 지정해야 합니다. 이는 웹사이트의 내부 페이지일 수도 있고 World Wide Web의 다른 리소스 페이지일 수도 있습니다.

앵커 html 링크 태그 검색 로봇이 고려하는 중요한 요소이므로 특별한 주의가 필요합니다. 앵커에서 사용하는 것이 좋습니다 키워드, 귀하의 기사가 검색 결과의 첫 번째 위치에 나타나기를 원합니다.

HTML 문서의 하이퍼링크 이론에 대해 조금 이해한 후에 예시적인 예제를 진행할 수 있습니다. 링크에 포함되는 코드는 다음과 같습니다.

여기에 하이퍼링크 텍스트, 즉 앵커가 있어야 합니다.

보시다시피 링크는 여는 괄호 ":로 시작됩니다.

일반적으로 사용자에게 링크를 여는 방법을 알려주는 것은 좋지 않습니다. 웹사이트 사용성 전문가들은 사용자 자신이 링크를 여는 방법을 결정할 수 있다고 만장일치로 주장합니다. 그는 이 문제에 대해 우리가 바라는 바 없이 그의 창문을 정리할 것입니다. 또한 표준 브라우저 "뒤로" 버튼의 기능도 중단됩니다. 습관에 대한 무례한 간섭은 적대감을 유발할 가능성이 높습니다!

또한 “사용자가 사이트를 떠나고 있습니다!”라는 나쁜 인상을 남깁니다. 그는 결코 여기로 돌아오지 못할지도 모릅니다! 아 아 아! 무엇을 해야 할까요? 열어보자 새 링크다른 창에서! 어쩌면 그가 필요한 것을 모두 본 후에 이 창을 닫으면 그는 다시 우리에게 올 것이고 그러면 그는 확실히 단골 손님이 될 것입니다!”

의미는 분명합니다. 사이트를 고품질의 유용하고 흥미로운 콘텐츠로 채우면 방문자가 의식적이고 독립적으로 돌아올 것입니다.

그러나 도덕적인 측면 외에도 이 문제에는 기술적인 측면도 있습니다. 즉, 대상 속성이 누락되었습니다. XHTML 사양 1.0 엄격하므로 유효성 검사를 통과할 수 없습니다!

유효한 솔루션: JavaScript

이전 단락에도 불구하고 여전히 새 창에서 페이지를 열기로 결정했거나 강제로 열었다면 적어도 올바르게 수행해 봅시다.

이것이 JavaScript가 구출되는 곳입니다. 링크의 onclick 이벤트를 가로채고 window.open() 함수를 사용하여 새 창을 강제로 열도록 시도해 보겠습니다. 그런 다음 return false를 지정하여 기본 창에서 링크를 따라가는 것을 금지합니다.

링크가 새 창에서 열립니다

결과 솔루션을 확인합니다.

모든것이 좋아. 브라우저는 자신있게 새 창에서 링크를 엽니다. 유효성 검사기는 녹색 성공 메시지로 우리를 기쁘게 합니다. 진정할 수 있을 것 같지만 그렇지 않습니다! 브라우저에서 하드 팝업 차단기를 설정하고 링크를 다시 클릭해 보세요!

더 나은 솔루션

팝업 차단기는 주로 성가신 광고를 방지하도록 설계되었습니다. 이 기능은 모든 최신 브라우저에서 사용할 수 있습니다. 일부 브라우저는 다양한 수준의 차단 기능을 제공합니다. 예를 들어 Opera 9+에서는 "원치 않는" 창만 차단하거나 모든 창을 차단할 수 있습니다.

팝업으로 인해 극심한 어려움을 겪는 사용자가 몇 퍼센트인지는 모르겠지만 이러한 설정을 통해서만 창을 여는 대신 "팝업 창이 차단되었습니다"라는 작은 메시지가 나타납니다. 또한 클릭에 대한 브라우저의 반응 표현도 설정에서 비활성화할 수 있습니다. 이 경우 링크의 기능이 상실됩니다. "클릭했는데 아무 일도 일어나지 않습니다!"

이 글을 읽은 후 누군가가 이렇게 말한다면, “모든 사람을 만족시킬 수는 없습니다! 글쎄, 그들의 의사는 누구이며 그들을 위해 모든 것이 꺼져 있습니다!”라고 말하면 우리는 그런 사람들과 같은 길을 가고 있지 않습니다. 나머지 부분에 대해서는 계속하겠습니다.

링크가 새 창에서 열립니다

여기서 우리는 window.open() 함수가 반환한다는 사실을 이용했습니다. 진실, 창이 성공적으로 열리면 거짓이고, 그렇지 않으면 거짓입니다. 즉, 링크가 새 창에서 성공적으로 열린 경우 자체 창에서 링크가 열리는 것을 차단합니다. 반환은 true=false입니다. 반대로, 창을 열 수 없는 경우 true를 반환하면 링크가 정상적으로 작동할 수 있습니다.

좋은 하루 되세요, 독자 여러분. 질문에 대한 답변은 오랫동안 출판되지 않았으며 많은 사람들이 이미 질문에 대한 답변을 기다리고 있다고 생각합니다. 여러분 중 일부는 제 도움 없이 이미 귀하의 질문에 대한 답변을 찾았습니다. 답변을 드리지 못한 점 사과드립니다. 나는 개선할 것이다. 안타깝게도 오늘은 모든 질문에 답하지 않고 하나만 대답하겠습니다.

나는 이 질문이 매우 흥미롭고 유용하다고 생각했기 때문에 특별히 주의를 기울이기로 결정했습니다. 그래서 여기에 질문이 있습니다.

target="_blank" 태그를 사용하여 링크가 새 브라우저 창에서 열리도록 할 수 있습니까? 이것은 해로운 것이 아닌가? 이것이 어떤 영향을 미치나요?

매우 흥미로운 질문입니다. 사실 태그 속성은 , HTML에서 가장 논란이 많은 것 중 하나인 target="_blank"는 새 창이나 브라우저 탭에서 링크를 엽니다. 나 자신은 그것을 독자들에게만 사용하고 두 번 이상 사용하지만 여전히 이 문제를 이해하고 어떤 의견을 얻으려고 노력할 가치가 있습니다.

여기에서는 유효성 검사 관점에서 대상을 사용하고 유용성 관점에서 새 창이나 브라우저 탭에서 링크를 여는 두 가지 측면에서 상황을 고려해 볼 가치가 있습니다. 첫 번째부터 시작하겠습니다.

target="_blank" 속성은 유효하지 않은 속성이며 해당 사용은 전환 문서에서만 허용됩니다.

비교를 위해 Blogger에서는 다음과 같습니다.

브라우저에 페이지 해석 방법을 알려주는 웹 페이지의 필수 요소인 문서 유형에 대한 정보가 포함되어 있습니다. 나는 HTML, XML, XHTML 생성의 역사를 다루지 않을 것입니다. 이 모든 것은 둘 이상의 기사에 대한 자료입니다. 하지만 본질을 전달하려고 노력하겠습니다.

Blogger에 대해 이야기하는 경우 템플릿은 HTML과 XML이라는 두 가지 언어가 혼합되어 있으므로 XHTML 1.0 Strict를 지정해야 합니다. 이 유형의 문서에는 명확한 구문이 있어야 하며 이 유형의 문서에 대한 사양에는 target="_blank" 속성이 없습니다. 그렇기 때문에 이 속성은 유효하지 않으며 실제로 사용이 금지되어 있습니다.

다른 사이트에 대해 이야기하는 경우 거기에서 target="_blank" 속성을 사용할 수 있습니까? 그런 다음 페이지의 소스 코드, 즉 항목을 살펴봐야 합니다.

문서 유형은 사이트 레이아웃 시 사용된 언어나 버전에 따라 특정 사이트의 개발자가 설정합니다.

이런 상황에서는 어떻게 해야 할까요?
나는 이 상황에 대한 두 가지 해결책만을 알고 있습니다. 그리고 두 옵션 모두 이상적이지 않습니다.

첫 번째 옵션은 문서가 유효하도록 하기 위해 새 브라우저 폴더에서 페이지를 여는 특수 JavaScript 또는 JQuery 스크립트를 사용할 수 있다는 것입니다.

이 방법의 단점: 브라우저 설정에서 JavaScript가 비활성화되어 있으면 페이지가 새 창에서 열리지 않습니다.

두 번째 옵션은 target="_blank"를 사용하는 것이며 더 이상 이 문제가 발생하지 않습니다. 이 속성은 유효하지 않지만 여전히 모든 브라우저에서 지원됩니다. 그리고 그 사용은 검색 엔진의 사이트 색인 생성에 어떤 식으로도 영향을 미치지 않습니다.

우리는 질문의 첫 번째 부분에 대해 논의했지만 이미 말했듯이 문제에는 유용성, 방문자 편의성이라는 또 다른 측면이 있습니다. 독자가 새 탭에서 링크를 여는 것이 편리합니까?

개발자 중 특정 부분(얼마나 많은지 알 수 없음)은 사용자가 동일한 탭이나 새 탭에서 페이지를 여는 방법을 스스로 결정할 기회를 박탈하는 것이 나쁜 형태라고 생각합니다. 그리고 또한, 더 ㅏ나는 고급(경험이 풍부한) 사용자의 일부입니다. 그들은 적어도 동일한 마우스에서 링크가 제공되기 때문에 링크를 여는 방법을 스스로 결정할 수 있다고 믿습니다. 반면 인터넷에는 평균 이하의 수준을 가진 사용자가 많이 있으며, 동일한 마우스를 사용하면 새 창에서 모든 링크를 열 수 있다는 사실을 모르는 사람이 많습니다.

아직 어떻게 해야 할지 모르신다면 제가 알려드리겠습니다. 모든 마우스에는 휠이 있어야 하므로 링크 위에 마우스를 놓고 휠을 클릭하면 링크가 새 창에서 열립니다. 또는 3개의 버튼이 있는 마우스가 있는데, 이 기능은 가운데 키로 수행됩니다. 그러나 내가 말했듯이 모든 인터넷 사용자가 그렇게 즐거운 작은 일에 대해 아는 것은 아닙니다.

또한 많은 사용자의 관점에서 볼 때 내부 링크는 동일한 브라우저 창(탭)에서 열리고 외부 링크는 새 탭에서 열리는 것이 편리하며 이는 많은 사람들에게 간단하고 논리적입니다.

이러한 반대 의견과 사용자의 지식 수준이 다르기 때문에 target="_blank" 속성과 일반적으로 새 창에서 링크를 여는 문제가 가장 뜨거운 논쟁거리가 되는 주제입니다.

이 문제에 대한 나의 의견은 무엇입니까? 나 자신은 초보자 였고 인터넷에 대해 알고있는 것은 Yandex와 Odnoklassniki 뿐이며 모니터가 무엇인지, 키보드에 버튼이 너무 많은 이유, 마우스 휠이 왜 필요한지 전혀 모르는 많은 사람들을 알고 있습니다. 전혀 필요합니다(물론 이러한 공백은 빠르게 채워집니다). 나는 지금 내가 있는 탭에서 새 사이트를 여는 것이 매우 불편하다고 생각합니다. 정말 사이트를 떠날 생각이더라도 이전 탭을 닫으면 크게 걱정하지 않으셔도 됩니다. 사이트 내부 링크는 동일한 탭에서 열리고, 외부 링크는 새 탭에서 열리길 원합니다. 이는 제 개인적인 의견이며 진실이라고 주장하지 않습니다.

이 문제에 대해 진지하게 생각하고 특별한 스크립트를 사용하기로 결정했다면 해결책을 찾으려고 노력했습니다. 이 스크립트는 모든 웹사이트, CMS 및 Blogger 플랫폼에 적합합니다. Blogger를 예로 들어 설명하겠습니다.

디자인 – HTML 편집으로 이동하여 코드를 찾아 그 앞에 코드를 삽입하세요.

링크가 새 탭에서 열릴 것임을 사용자에게 경고하려면 제가 한 것처럼 링크에 스타일을 적용하면 됩니다. 이렇게 하려면 템플릿의 ]]> 줄 앞에 다음 스타일을 추가하세요.

외부 (
패딩: 0 10px 2px 0;
배경: url(http://lh6.googleusercontent.com/_G92voTj-yF0/TcFG68RdfLI/AAAAAAAABfA/QJM25G6lInk/externallink.gif) 반복 없음 오른쪽 중앙;
}

패딩 필드 값을 게시했습니다. 사용하는 글꼴과 텍스트 표시 설정에 따라 이 숫자를 자신에게 맞게 조정해야 합니다. 앨범에 사진을 업로드하거나 다른 사진을 모두 사용할 수도 있습니다.

세 가지 다른 스크립트를 테스트했는데 위에서 제안한 스크립트가 모든 곳에서 작동하지 않는다고 말하고 싶습니다. 위에서 제안한 스크립트가 작동하지 않으면 다음 옵션을 시도해 볼 수 있습니다.

http://sites.google.com/site/seobiblioteka/extlinks.js
http://sites.google.com/site/seobiblioteka/external.js

그러나 마지막 두 스크립트는 스타일 자동 로딩을 지원하지 않으므로 내부 링크와 다른 외부 링크에 대한 스타일을 사용하려면 링크에 class="external" 클래스를 할당하는 것을 잊지 마십시오.

target="_blank"를 사용하고 새 탭에서 링크를 여는 것이 전부입니다. 독자의 질문에 답변을 드렸기를 바랍니다. 이 정보가 다른 모든 사람에게도 유용할 것입니다.

친애하는 블로거 여러분, 귀하의 질문이 Blogger와 관련된 경우 포럼에 질문하실 것을 적극 권장합니다. 답변은 블로그에 자주 게시되지 않고 정기적으로 게시되지 않으며 상당히 기본적인 질문에 대한 답변을 얻으려면 몇 주를 기다려야 합니다. 포럼에 질문하시면 몇 시간 내에 저나 다른 사용자로부터 답변을 받으실 수 있습니다.
좋은 주말 보내세요.

안녕하세요, 블로그 사이트 독자 여러분. 오늘은 하이퍼링크가 무엇인지에 대해 더 자세히 이야기하고 싶습니다. HTML 언어, 사이트의 텍스트에 배치하는 방법, 사진에 대한 링크를 만드는 방법, "A" 태그와 해당 "Href" 및 "Target 공백" 속성을 올바르게 사용하는 방법(새 창에서 열기).

일반적으로 하이퍼링크는 핵심 요소입니다. 또한 링크는 이제 웹사이트의 성공적인 홍보에 영향을 미치는 세 가지 주요 요소 중 하나입니다. 예를 들어 이를 올바르게 적용하고 회계에 어떤 영향을 미치는지 이해합니다. 검색 엔진, 리소스 트래픽에 큰 영향을 미칠 수 있습니다.

하이퍼링크와 앵커란 무엇입니까?

따라서 우리는 일상적인 사용에 권장되지 않는 오래된 태그에 대해 이미 알고 있습니다. 우리의 더 많은 친분을 계속합시다.

HTML 코드에서 하이퍼링크를 만들려면 A 태그도 사용해야 하는데, 이를 위해 다양한 속성을 사용할 수 있는데, 예를 들어 이 링크를 따라 이동하기 위한 대상의 URL 주소(href)를 설정하거나 지시할 수 있습니다. 새 창에서 열립니다(대상= _blank). 하지만 모든 것을 순서대로 이야기합시다.

위에서 언급했듯이 하이퍼링크는 Html 언어의 핵심 요소이며 이를 통해 사이트의 내부 페이지와 다른 인터넷 리소스에 모두 연결할 수 있습니다. 진부함을 말씀 드리겠습니다. 링크를 클릭하면 링크를 따라갈 수 있습니다(어떻게 생각하시나요?).

내부 또는 외부로 나눌 수 있다는 사실 외에도 보조적일 수도 있으며 사이트 페이지를 열 때 사용하는 브라우저의 요구에 맞게 독점적으로 사용될 수도 있습니다.

이 경우에는 페이지에 표시되지 않습니다. Head 영역에 등록되어 있습니다. 소스 코드페이지에 내용이 표시되지 않는 문서입니다(관련 기사에서 하이퍼텍스트 마크업 언어 코드의 구조를 언급했습니다).

서비스 하이퍼링크는 일반 하이퍼링크와 같이 "A" 태그를 사용하지 않고 "링크" 태그를 사용하여 생성됩니다. 예를 들어, 이를 사용하여 수행하는 작업이 상당히 많습니다. HTML 문서 CSS CSS 스타일 시트가 있는 외부 파일(예: .

하지만 오늘은 이를 만드는 방법을 살펴보지 않고(나중에 설명하겠습니다) Body 영역 내부에서 생성할 수 있는 표시 링크에 대해 자세히 설명하고 그에 따라 표시됩니다. 웹 페이지.

그러나 그럼에도 불구하고 모든 하이퍼링크(표시 및 서비스 모두)에는 한 가지 공통점이 있습니다. 모두 필수 Href 속성을 포함하고 있다는 것입니다. 그 안에는 문서의 특정 위치(이전에 앵커로 표시된 경우) 또는 인터넷의 문서 자체 주소(Href, 즉 페이지 경로)가 값으로 기록됩니다. 또는 다른 파일이 기록됩니다).

하이퍼링크는 네트워크의 다른 문서로 사용자를 이동시키거나 Html 앵커라고도 하는 문서 본문에 미리 만들어진 표시를 사용하여 이미 보고 있는 웹 페이지의 콘텐츠를 탐색하도록 설계된 탐색 요소입니다.

여기서 약간의 혼란이 있을 수 있습니다. 왜냐하면... SEO에서 단어는 이지만 HTML에서 "앵커"는 앵커(앵커라는 단어의 번역) 또는 참조할 수 있는 텍스트의 표시를 의미합니다.

HTML에서 앵커가 사용되는 이유는 무엇입니까? 다소 긴 웹페이지에서 네비게이션을 생성할 때 매우 편리합니다. 아마도 페이지를 열 때 온라인에서 본 적이 있을 것입니다. 제목 바로 아래에는 해당 페이지에 게시된 기사 섹션의 이름이 있습니다.

이렇게 하면 독자는 번거롭게 텍스트를 스크롤하고 시각적으로 올바른 위치를 검색하는 대신 관심 있는 정보가 있는 페이지의 위치로 즉시 이동할 수 있습니다. 편리하고 향상됩니다.

앵커 및 링크 해시가 생성되는 방법

따라서 이 경우 우리의 임무는 페이지(문서)의 올바른 위치에 앵커를 설치하는 것입니다. 일반적으로 다음과 같습니다.

저것들. 앵커를 만들려면 빈 하이퍼링크 태그 "A"에 단일 속성 "이름"을 입력해야 합니다. 이 값은 공백을 포함할 수 없는 고유 레이블을 사용하고 라틴 문자, 숫자를 사용할 수 있습니다. , 하이픈 및 밑줄(URL을 생성할 수 있는 규칙( ,,,[_],[-])과 완전히 유사).

이 경우 페이지 자체에는 앵커가 표시되지 않습니다. “A” 요소 안에는 어떤 텍스트도 쓰지 않았습니다. 그러나 이러한 방식으로 생성된 앵커는 Html 코드를 오염시키므로 이제 앵커보다 다른 방법을 사용하여 레이블을 생성하는 경우가 훨씬 더 많습니다.

이 경우 빈 "A" 태그를 만들 필요는 없지만 텍스트의 올바른 위치에 이미 사용 가능한 요소를 사용할 수 있습니다. 예를 들어, 이는 .

저것들. 앵커의 아날로그를 생성하려면 다음과 같이 모든 태그에 범용 ID 속성을 할당하는 것으로 충분합니다(모든 태그에 사용할 수 있으며 이를 기반으로 작동함).

제목 텍스트

따라서 이제 필요한 수의 앵커를 생성하여 코드를 오염시키고 나타나는 대신 이 순간유효하지 않은 경우(Html ​​언어를 개발하는 W3C 컨소시엄에서는 권장하지 않음) 간단히 Id를 추가합니다.

이를 위해서는 평소와 같이 하이퍼링크 "A" 내에 필수 속성 "Href"를 삽입해야 하지만 그 값은 해시 앞에 원하는 레이블(앵커)의 이름으로 구성됩니다. 해시라고도 하는 "#" 기호(그런데 이것은 자주 사용되는 이름의 다리가 자라는 곳입니다: 링크 해시):

앵커가 표시된 페이지로 이동합니다.

이러한 하이퍼링크를 클릭하면 새 문서가 열리지 않는다는 점에 유의하세요. 브라우저는 이미 스크롤됩니다 페이지 열기앵커를 삽입한 텍스트 위치가 화면 맨 위에 위치하도록 설정합니다. 브라우저의 혼란을 피하기 위해 한 페이지의 모든 태그(앵커) 값은 고유해야 한다고 가정하는 것이 논리적입니다.

편리한 위치에 있는 태그의 ID 속성을 사용하여 앵커를 만드는 경우 사용되는 문자 유형(,,,[_],[-])에 대한 제한 외에도 ID 값을 고려해야 합니다. 라틴 문자로 시작해야 합니다.

그러면 모든 유효한 문자를 수량에 관계없이 배치할 수 있지만 ID 속성 값에 있는 앵커 레이블의 첫 번째 문자는 문자(물론 라틴어)여야 합니다. 그렇지 않으면 Html 코드에 삽입된 앵커가 작동하지 않습니다(대부분의 브라우저에서).

해시 기호 "#" 뒤에 앵커 레이블 이름(href="#")을 쓰지 않으면 해당 하이퍼링크가 페이지를 처음으로 스크롤합니다. 다음은 이미지에서 링크를 만들고(이에 대해서는 나중에 설명하겠습니다) 웹사이트 템플릿에 삽입하여 간단한 "맨 위로 가기" 버튼을 만드는 방법입니다. 예를 들면 다음과 같습니다.

Href는 모든 하이퍼링크의 필수 태그 속성입니다.

이제 문서 내부 탐색(앵커 사용)에서 외부 탐색으로 이동해 보겠습니다. 우리 사이트나 다른 사이트의 다른 문서로 연결되는 링크를 만들어야 합니다. 이제 Href 속성에서는 더 이상 앵커 레이블을 지정할 필요가 없지만 열려는 파일의 경로를 지정할 필요가 있습니다(설계상 페이지는 후속 표시를 위해 브라우저에 로드되는 파일입니다).

닻

여기서 더 이야기해야 하지만 이미 언급된 자료에서 이에 대해 더 자세히 썼기 때문에 다시 반복하는 것은 의미가 없을 것입니다. 하지만 생성한 하이퍼링크의 Href 속성에 파일 경로를 설정하는 방법을 알아야 합니다. 그러므로 제공된 자료에 익숙해지려고 하지 마십시오.

그러나 Url을 생성할 때 (,,,[_],[-]) 문자만 사용하고 공백을 사용하지 않는 것이 바람직하다는 점을 상기시켜 드리겠습니다. 절대 링크에 대한 Href 속성의 내용을 고려하면 다음과 같이 개략적으로 표현할 수 있습니다.

거의 사용하지 않는 것을 버리면 동일한 것을 다소 단순화된 형태로 제시할 수 있습니다.

프로토콜(일반적으로 http)://domain_name(예: 웹 사이트)/path_to_file( 웹페이지)

간단한 http 프로토콜 외에도 인터넷에서는 암호화를 사용한다는 점이 다른 https 프로토콜의 링크를 찾을 수 있습니다. 후자는 서버와 클라이언트 브라우저 간의 데이터 교환 채널을 보호해야 하는 사이트에서 사용됩니다. 예를 들어 웹머니 전자화폐 서비스에 사용됩니다.

인터넷에서는 다음과 같은 다양한 버전의 Href 콘텐츠를 찾을 수 있습니다.

https://site/videokursy

또는 다음과 같습니다(파일 확장자 포함).

https://site/seo/kak-raskrutit-sajt.html

이는 본질을 변경하지는 않지만 하이퍼링크 내부의 Href 속성 내용 끝에 슬래시가 있으면 더 이상 파일에 대한 액세스가 아니라 해당 인덱스 개체가 있는 폴더에 대한 액세스가 가능함을 의미합니다. 검색하세요(자세한 내용은 위에 언급된 URL 주소에 대한 기사를 참조하세요).

링크에서 뭔가를 다운로드하세요

보시다시피, 이 하이퍼링크는 일반 하이퍼링크와 다르지 않습니다. 브라우저는 zip 확장자를 가진 파일을 다운로드해야 한다는 것을 이해하고, 예를 들어 다음과 같은 문서 파일을 보기 위해 열려고 시도하지 않습니다. HTML 확장. 그러나 개인적인 필요에 맞게 브라우저에서 이 모든 것을 순전히 개별적으로 사용자 정의할 수 있습니다.

FTP 서버에서 다운로드

예를 들어 Href에 해당 URL을 추가하여 (메일) URL을 만들 수도 있습니다.

편지 쓰기

이 링크를 클릭하면 사용하는 기본 링크가 컴퓨터에서 열립니다. 메일 프로그램(브라우저에서는 Gmail 등에서 열리도록 Href의 mailto 링크를 구성할 수 있습니다.) 그러면 Href에 지정된 이메일 주소가 "받는 사람" 필드에 삽입되는 새 문자 생성 대화 상자가 나타납니다.

실제로 이메일 전송 대화 상자의 다른 필드를 채워 매우 복잡한 이메일 링크를 만들 수 있지만 이는 거의 사용되지 않습니다.

그리고 일반적으로 웹마스터는 최근에우리는 Href에서 mailto가 포함된 하이퍼링크 사용을 실질적으로 중단했습니다. 이는 스패머에 의해 모든 결과가 파싱된다는 사실 때문입니다. 연락처 페이지에 모든 것이 여전히 기본 형식으로 표시되어 있지만 웹사이트에서 만드는 것이 더 좋습니다. 여유롭게 바꿔야겠어요(아닐지... 생각해보겠습니다).

새 창에서 링크를 여는 방법(대상이 비어 ​​있음)

HTML 코드로 링크를 만들 때 우리는 종종 질문에 직면합니다. 링크가 연결되는 문서를 어느 브라우저 창에서 열어야합니까? 기본적으로 이 하이퍼링크가 배치된 페이지와 겹치는 기존 창에서 열립니다.

개인적으로 저는 링크가 있는 문서를 열어두고 새 창에서 페이지를 열 수 있도록 하는 값이 공백인 Target 속성을 크게 지지합니다. 이것이 내 블로그의 유용성에 어떤 영향을 미치는지는 모르겠지만 저는 이 옵션을 더 좋아하고 거의 모든 경우에 사용합니다.

검색 엔진에서는 새 창에서 링크가 열리도록 구성하여 결과를 항상 가까이에 두고 언제든지 돌아갈 수 있도록 하는 것을 좋아합니다. 이러한 목적을 위해 이미 언급했듯이 Html은 기본적으로 Self 값을 갖는 특별한 Target 속성을 사용합니다.

같은 창에서 문서를 엽니다.

물론 "A" 태그에 target="_self"라고 쓰는 사람은 없지만, 이 값이 기본적으로 사용되기 때문에 새 창에서 페이지를 열어야 하는 경우에는 target="_blank라고 적어야 합니다. ":

새 창에서 열립니다

Target 속성 값은 처음에 밑줄(_blank)로 표기되는데 이는 하이퍼텍스트 마크업 언어 구멍이 포함된 Wc3 유효성 검사기에 규정되어 있기 때문입니다. 주목할만한 점은 Html이 기본 링크 열기 옵션을 변경하는 기능을 제공한다는 것입니다.

예를 들어 사이트의 모든 하이퍼링크를 새 창에서 열려면 사용 중인 템플릿의 헤드 영역에 target="_blank" 속성이 있는 기본 태그를 추가해야 합니다.

거기 뭔가 다른 게 있어

이제 동일한 창에서 링크 중 하나를 열려면 기본적으로 _blank를 사용하므로 "A" 태그에 target="_self"를 추가해야 합니다. 아, 어떻게.

그건 그렇고, 위에서 설명한 방식으로 Base 요소를 사용했지만 새 창에서 열어야 하는 여러 하이퍼링크가 있는 코드 영역도 포함했습니다. 저것들. 또한 Body 영역 내부에 닫는 Base 태그를 사용했는데 제대로 작동했습니다. 물론 그러한 코드는 유효하지 않은 것으로 판명됩니다.

하이퍼링크 호버 및 클릭 색상 - 변경 방법

Html 언어는 사용자가 이미 열었던 링크와 그대로 남아 있는 링크를 쉽게 탐색할 수 있도록 설계되었습니다.

이를 위해 사용자가 하이퍼링크를 클릭하고 연결된 문서가 성공적으로 열릴 때 변경되는 색상이 사용됩니다. 원래 페이지로 돌아가면 사용자는 자신이 방문한 링크의 색상이 변경되었음을 알 수 있습니다. 모든 브라우저에서 이 트릭을 수행할 수 있습니다.

기본적으로 순수 HTML(사용하지 않음) CSS 속성) 링크는 밑줄로 강조 표시되며 세 가지 색상 옵션을 가질 수 있습니다.

파란색은 사용자가 아직 클릭하지 않은 팔로우되지 않은 링크의 색상입니다.

빨간색 - 하이퍼링크를 클릭한 후 즉시 요청한 문서가 네트워크를 통해 사용자의 브라우저에 다운로드될 때까지 허용됩니다(현대 상황에서는 이 순간을 포착하는 것이 전혀 쉽지 않으며 모든 것이 모든 곳에서 비난을 받습니다).

보라색은 사용자가 이미 팔로우한 링크의 색상입니다.

Html 4.01에서는 이러한 링크 색상이 기본값이지만 Body 태그에 기록된 특수 속성을 사용하여 변경할 수 있습니다. 이 속성은 사용 중인 템플릿 파일 중 하나에서 찾을 수 있습니다. 세 가지 색상을 모두 변경하려면 각각 세 가지 속성이 사용됩니다.

링크 - 방문하지 않은 링크의 색상을 설정합니다.

Alink - 브라우저에서 처리 중인 현재 활성 색상

Vlink - 사용자가 이미 방문한 하이퍼링크의 색상

기억하세요. 나는 이미 방법에 대해 썼습니다. 따라서 언급된 속성은 다음과 같습니다.

당연히 여기서 의미하는 것은 순수한 Html 옵션이었습니다. 어떤 이유로든 스타일링을 사용하는 것이 편리하지 않거나 불가능할 때, 그렇지 않으면 이러한 모든 색상을 를 사용하여 쉽게 설정하고 변경할 수 있습니다.

사진을 링크로 만드는 방법 - 두 가지 방법

글쎄, 여기에서는 모든 것이 아주 간단합니다. 왜냐하면 은 소문자 요소이므로 대체로 모든 이미지는 단지 문자로 간주될 수 있으며 아마도 더 큰 크기일 수도 있습니다.

순수 HTML의 경우 링크를 만든 이미지 주위에 3픽셀 너비의 프레임이 생깁니다. 또한 이 프레임의 색상은 귀하의 사이트에 허용되는 링크 색상과 완전히 일치합니다(텍스트에서 조금 더 높게 설명했습니다).

하이퍼링크한 이미지에 테두리 추가를 제거하려면 Img 태그에 값이 0인 Border 속성을 추가해야 합니다.

이것은 사진을 링크로 만드는 매우 간단한 방법이지만 이미지 맵이라는 더 복잡한 옵션이 있습니다. 이 경우 상당히 많은 수의 HTML 태그와 속성을 사용하므로 하나의 이미지에서 활성 영역(클릭 가능하고 다양한 모양(직사각형, 원, 다각형)이 있음)이 있는 전체 링크 맵을 만들 수 있습니다.

예를 들어, 페이지에 큰 사진을 배치하고 사진의 다른 부분을 클릭하면 다른 페이지가 다른 하이퍼링크와 함께 열리도록 할 수 있습니다. 사실, 이미지 맵을 설명하는 데는 꽤 오랜 시간이 걸리고, 누구도 사용하지 않을 것 같으니 하지 않겠습니다. 왜냐하면 "게임은 촛불을 들일 가치가 없기 때문입니다."

행운을 빕니다! 블로그 사이트 페이지에서 곧 뵙겠습니다.

당신은 관심이 있을 수도 있습니다

선택, 옵션, 텍스트 영역, 라벨, 필드셋, 범례 - 태그 HTML 양식드롭다운 목록 및 텍스트 필드
에 삽입하는 방법 HTML 링크그리고 사진(사진) - IMG와 A 태그
Iframe 및 Frame - 이것이 무엇이며 Html에서 프레임을 가장 잘 사용하는 방법
공백 문자 HTML의 코드 형식 및 특수 문자 중단되지 않는 공간그리고 기타 니모닉
MailTo - 그것이 무엇이며 이메일을 보내기 위해 HTML로 링크를 만드는 방법
HTML 및 CSS 코드에서 색상을 설정하는 방법, 테이블에서 RGB 음영 선택, Yandex 출력 및 기타 프로그램
글꼴(얼굴, 크기 및 색상), 인용구 및 사전 태그 - 기존 텍스트 형식 순수 HTML(없이 CSS를 사용하여)
Img - 그림 삽입(Src), 그림 주위에 텍스트 정렬 및 배치(align), 배경 설정(배경)을 위한 HTML 태그입니다.
HTML 코드 목록 - UL, OL, LI 및 DL 태그
제목 태그 및 속성 H1-H6, 수평선 Hr, 줄바꿈 Br 및 Html 4.01 표준에 따른 단락바꿈 P