나는 당신이 이미 이 장에서 논의될 내용을 이해하고 있다고 생각합니다. 그리고 링크가 무엇인지 알고 있습니다. 그렇지 않은 경우 여기를 클릭하십시오. 링크에는 여러 유형과 이를 따르는 "메커니즘"이 있습니다. 이 장에서는 링크를 등록하는 방법과 링크 작업의 복잡성을 설명하는 방법에 대해 자세히 설명하려고 합니다.
서정적 탈선:
일단 군대에 갔을 때 참모장이 나에게 와서 명령을 내렸습니다.
그 문서를 가져오십시오. 비록 그것이 어디에 있고 무엇인지 모르지만!! 서있는게 뭐야? 뛰자!! 나는 늦었다!!!
그렇다면 나는 왜 나 같은 브라우저가 혼란에 빠지지 않도록 문서의 정확한 이름, 문서의 경로, 문서를 가져올 장소 또는 그것을 열려면.
에 이 순간메모장을 사용하여 하나의 HTML 문서만 만들었습니다. 이름이 index.html인 문서가 있습니다. (왜 그런 이상한 이름 index.html을 선택했고 왜 살펴봐야 합니까?) 이름을 생각해 냈지만 물론 당신이 내 비서실장이 아닌 한 그 이름이 어디에 있는지 기억하고 알고 있다고 생각합니다. :) 이 문서에서 우리는 아직 가지고 있지 않은 다른 문서에 대한 링크를 만들려고 노력할 것입니다 .. 따라서 참조하기 전에 생성해야 합니다. 이미 알고 계시니 감사합니다.
- 메모장을 엽니다.
- 우리는 html로 코드를 작성합니다. 예를 들어, 여러 장의 사진이 있는 페이지입니다.
- 같은 위치에 html 페이지로 저장합니다. 작업 폴더, 우리가 만든 첫 번째 문서가 이미 거기에 있습니다. 혼동하지 않도록 primer.html이라고 부르고 첫 번째 이름을 index.html로 바꾸겠습니다.
이제 나는 당신에게 두 가지가 있다는 것을 압니다. HTML 문서및 index.html 및 primer.html이 있으며 이제 추가 학습을 위한 최소 세트가 있습니다.
텍스트 링크.
친해지기 태그 (앵커에서 앵커), 특정 문서에 대한 링크가 될 텍스트 또는 그림을 그 안에 넣을 수 있습니다. 태그 속성 href링크가 가리키는 문서의 이름과 경로를 지정합니다.
모두 합쳐서 다음과 같이 쓰여 있습니다.
여기 내 사진이 있습니다!!아마도 primer.html은 두 번째 html 문서의 이름이고 "여기 내 사진이 있습니다!!"라는 문구가 있다는 것을 이해하셨을 것입니다. 이것은 index.html 파일의 텍스트입니다.
사진 태그와 유추하여
열려 있는 문서에 대한 링크 경로는 다음과 같은 방식으로 작성됩니다.
여기 내 사진이 있습니다!!- 그리고 이것은 primer.html 파일이 문서보다 한 단계 높은 위치에 위치한다는 것을 의미합니다.
여기 내 사진이 있습니다!!-이 문서는 웹 사이트 www.site.ru에 있습니다..
자, 시도해 볼까요? 다음은 서로를 가리키는 링크가 등록된 두 문서의 예입니다.
index.html 파일:
말해봐, 사랑하는 아이 : 어느 귀에서 윙윙 거리고 있습니까?
에 법또는 왼쪽?
프라이머.html 파일:
예제는 링크가 색상으로 강조 표시되어 기본적으로 파란색은 링크이고 빨간색은 이미 방문한 링크임을 보여줍니다. 이러한 색상은 이미 우리에게 잘 알려진 여는 태그를 사용하여 변경할 수 있습니다. < body > 그리고 그 속성.
링크- 링크 색상.링크- 클릭한 활성 링크의 색상.
브링크- 방문한 링크의 색상.
다음과 같이 작성됩니다.
>텍스트 링크의 색상에 대해 계속 이야기하면서 필요한 경우 친숙한 태그를 사용하여 전체 링크와 개별 부분(구절, 단어, 문자)을 모두 강제로 색상 강조 표시할 수 있다는 점을 언급할 가치가 있습니다. 그리고 그 속성 색깔.그러나 이것은 색상뿐만 아니라 텍스트의 크기, 스타일 및 글꼴을 별도로 설정할 수 있습니다. 그러나 색상 조작은 태그 내에서 이루어져야 함을 기억하십시오. 여기 그렇지 않으면 링크의 색상이 기본적으로 또는 태그에 쓰여진 대로 됩니다.
index.html 파일:
링크="#008000" alink="#ff0000" vlink="#ffff00">
무지개의 색상 위치를 기억하는 데 도움이 되는 문구를 찾으세요.
아르 자형
하지만
디
~에
G
하지만
프라이머.html 파일:
링크="#008000" alink="#ff0000" vlink="#ffff00">
각
사냥꾼
소원
알다
어디
앉아
꿩
메인 페이지로 돌아가기
사이트의 페이지 중 하나 필연적으로불려야 한다 index.html사람이 사이트 이름을 입력할 때 로봇 프로그램이 찾는 것은 사이트에서 이 이름을 가진 파일입니다. 페이지 이후 index.html먼저 열릴 것이고, 그것을 메인으로 할 것입니다. 나머지 페이지는 원하는 대로 부를 수 있습니다. 더 이상 이름에 뉘앙스가 없습니다.
대소문자에 대해 .. 문서의 경로와 이름을 작성할 때 기억하십시오. 예를 들어: Page.html, page.html 및 PAGE.html은 이름입니다. 각종 서류! 책갈피 이름과 그림에도 동일하게 적용됩니다. 코드를 작성할 때 항상 대소문자를 구분하므로 특정 브라우저에서 이러한 이름을 인식하지 못할 가능성이 높습니다. 모든 것을 작은 라틴 문자로 작성하고 이름을 부르는 것을 원칙으로 하면 인적 요소와 프로그램의 변덕스러운 위험이 0으로 줄어들 것입니다.
세 번의 클릭 규칙.
사이트 방문자가 링크에 대한 최소한의 클릭을 위해 사이트의 모든 페이지에서 사이트의 모든 위치로 이동할 수 있는 방식으로 "링크 트리"를 형성하십시오. 로 3회 이상 전환 올바른 장소이것은 더 이상 사이트에 좋지 않습니다 .. 사람이 필요하지 않은 페이지를 끝없이로드하면 신경 쇠약 및 사이트 조기 폐쇄로 이어질 수 있습니다. 사람들의 시간, 돈, 신경을 절약하십시오.
HTML 문서의 주요 기능은 다음을 포함한다는 것입니다. 하이퍼링크(또는 단순히 링크) 다른 문서, 사이트, 파일, 그림 등에 대한 링크입니다. 인터넷을 매우 대중적이고 사용하기 편리하게 만든 것은 외부 개체에 대한 링크를 페이지에 삽입하는 기능이었습니다. 따라서 사이트를 만들 때 항상 링크의 "마법"을 기억하십시오.
이번 강의에서는 링크를 만드는 방법사이트, 별도의 페이지 또는 파일로. 링크의 텍스트를 변경하는 방법, 새 창에서 여는 방법, 링크 이미지를 만드는 방법, 외부 및 내부 링크가 무엇인지 등을 배우게 됩니다. 또한 이전 단원에서 다루었던 링크 작업에 대한 정보가 이미 있습니다(예: 에서 링크 색상을 변경하는 방법에 대해 이야기했습니다).
일반적으로 이 수업은 링크 구축에 대한 아이디어를 완전하고 충분하게 만듭니다. HTML에서 하이퍼링크를 만드는 방법과 그 이유를 이해할 수 있습니다. 그리고 그 속성을 관리하는 법을 배웁니다.
자귀
§ 1. 파일 링크, 사이트 링크, 페이지 링크
파일에 대한 링크와 사이트 또는 개별 페이지에 대한 링크의 차이점에 대한 수많은 질문으로 인해 이 수업의 맨 처음에 이에 대한 답변을 입력해야 했습니다. 대답은 다음과 같습니다. 나열된 모든 링크는 외부에 있습니다. 원래의페이지와 같은 방식으로 생성됩니다.
나무를 따라 생각이 퍼지지 않도록 예를 들어 모든 것을 보여 드리겠습니다.
브라우저에서 다음을 볼 수 있습니다.
브라우저에서 다음을 볼 수 있습니다.
보시다시피 모든 유형의 링크는 정확히 같은 방식으로 생성됩니다. 유일한 차이점은 주소참조할 개체입니다. 이제 강의의 주요 부분으로 넘어가겠습니다.
§ 2. 외부 링크 생성
링크는 다음과 같이 서로 다릅니다. 외부그리고 내부, 뿐만 아니라 텍스트그리고 그래픽. 외부 링크는 html 페이지의 "한계" 외부로 연결되고 내부 링크는 다른 부분으로 연결됩니다. 똑같다페이지. 텍스트 링크는 텍스트(기본적으로 파란색으로 강조 표시되고 밑줄이 그어져 있음)이고, 그래픽 링크는 클릭해야 이동하는 개체로서 일종의 그림이 포함되어 있습니다. 이러한 모든 유형의 링크는 태그(영어 앵커 - 앵커의 약어)를 사용하여 HTML로 생성됩니다. 더 자세히 고려해 보겠습니다.
사이트, 페이지 또는 파일에 대한 외부 링크를 생성하기 위해 태그 속성이 사용됩니다. href. 이 속성은 값으로 취합니다. URL사이트, 페이지 또는 파일(위에서 이에 대해 설명했습니다). 태그와 태그 사이에는 링크의 가시적인 부분(링크 앵커)이 있습니다. 즉, 브라우저 화면에서 볼 수 있는 것입니다. 링크 앵커는 일반 텍스트(텍스트 링크) 또는 그래픽 이미지(이미지 링크)일 수 있습니다. 와 태그 사이에 친숙한 태그를 삽입하여 이미지 링크를 만듭니다. 일반적으로 링크를 만드는 구문은 다음과 같습니다.
예를 들어 텍스트 링크를 만들려면 홈페이지이 사이트에서 다음 HTML 코드를 작성해야 합니다.
http://www.seoded.ru/"> 사이트 홈페이지
브라우저에서는 다음과 같이 표시됩니다.
이 튜토리얼의 맨 처음에 쓴 것처럼 링크 텍스트(앵커)의 색상은 . 일반적으로 링크의 텍스트에 페이지의 본문과 동일하게 적용할 수 있습니다(예: 굵게, 기울임꼴, 제목 사용 등).
§ 2.1 그래픽 링크(사진 링크)
위에서 말했듯이 이미지 링크를 생성하기 위해서는 . 이러한 링크의 예는 다음과 같습니다.
그러면 브라우저에 다음이 표시됩니다.
기본적으로 브라우저는 이미지 링크의 이미지를 프레임으로 묶습니다. 이것이 원하지 않으면 속성 국경꼬리표 이미지 0으로 설정해야 합니다.
테두리="0">
메인 페이지
§ 3. 내부 링크
콘텐츠가 많은 페이지를 편안하게 탐색할 수 있도록 내부 링크를 사용합니다. 그들의 도움으로 수업 내용을 만들었습니다(이 페이지의 시작 부분 참조). 내부 링크는 외부 링크와 동일한 방식으로 생성됩니다. 속성 값에서만 href링크의 "앵커"가 표시됩니다. 앵커는 속성에 의해 생성됩니다. 이름:
name="앵커 이름">텍스트
그리고 "앵커"의 이름은 임의로 설정됩니다. 여기에서 모든 브라우저가 "앵커"의 러시아어 이름을 이해하는 것은 아니므로 라틴 알파벳을 사용하는 것이 좋습니다. "앵커"를 만들기 위한 태그 사이의 텍스트는 선택 사항이며 대부분 지정되지 않습니다.
"나는 홍역입니다"는 사용자가 링크를 클릭한 후 이동해야 하는 페이지의 해당 위치에 있습니다.
위에서 말했듯이 속성에서 href주소 대신 내부 링크, 원하는 "앵커"의 이름은 필수 해시 기호( # ) 그 앞에서. 예를 들어 보겠습니다.
"앵커"라는 이름을 만들었습니다. 헤더이 강의 제목 옆에 있는 페이지의 코드에 배치했습니다("HTML의 하이퍼링크"). "앵커" 코드는 다음과 같습니다.
이름="제목">
href="#zagolovok">제목으로 이동
그리고 다음과 같이 브라우저에서:
제목에 대한 내부 링크를 클릭한 후 URL이 주소 표시 줄브라우저:
원래 주소로:
http://www.html
http://www..html#헤더
그리고 이 기능을 사용하면 인터넷의 모든 리소스에서 페이지의 특정 위치로 연결할 수 있습니다! 즉, 무언가에 대한 방대한 기사가 포함된 페이지를 만들거나 페이지에 게시했다고 가정해 보겠습니다. 큰 숫자사진) 내부 링크로 표시했습니다. 에 있으면 기사(또는 사진)가 있는 페이지뿐만 아니라 그 페이지의 특정 위치(또는 특정 사진)를 참조해야 했습니다. 주소에 내부 링크가 있는 옵션을 사용하면 필요한 것을 쉽게 얻을 수 있습니다.
§ 4. 절대 및 상대 참조
메인 페이지
그러나 상대 링크를 사용하면 조금 더 복잡합니다. 이러한 링크에서 주소는 다음 중 하나로 표시됩니다. 비교적사이트의 루트 폴더(기본 페이지가 있는 폴더) 또는 원본 페이지에 상대적입니다. 예를 들어 사이트가 다음 위치에 있는 경우 이러한 링크가 필요합니다. 가정용 컴퓨터. 또는 웹 사이트가 아니라 다른 문서에 대한 페이지 포인터입니다.
페이지에 링크해야 한다고 가정해 보겠습니다. 클라이언트.html, 거짓말 한 폴더에사이트의 메인 페이지와 함께. 그러면 상대 링크 코드는 다음과 같습니다.
/clienty.html">클라이언트
이제 기본 페이지가 있는 동일한 폴더에 있다고 가정합니다. 폴더 순서그리고 이미 그 안에 klienty.html 페이지가 있습니다. 그러면 상대 링크 코드는 다음과 같이 됩니다.
/zakazy/clienty.html">고객
이제 하이퍼링크를 만드는 방법을 살펴보겠습니다. 원본 페이지를 기준으로. 페이지가 있다고 가정해 보겠습니다. price.html(소스 페이지) 및 그 페이지에서 페이지로 연결해야 합니다. 클라이언트.html다음은 일반적인 옵션입니다.
1. price.html 및 clienty.html 페이지는 한 폴더에.
clientty.html">클라이언트
2. 사이트의 루트 폴더에서, 페이지 price.html 주문 폴더에 있습니다 한 단계 위로).
코드는 다음과 같을 것입니다.
../clienty.html">고객
두 개의 점은 현재 폴더를 더 높은 수준으로 종료해야 함을 나타냅니다.
3. klienty.html 페이지와 zakazy 폴더는 사이트의 루트 폴더에서, 가구 폴더 주문 폴더에 있습니다, 페이지 price.html mebel 폴더에 있습니다(즉, 원래 price.html 페이지에 상대적인 klienty.html 페이지는 두 단계 위로).
../../clienty.html">고객
즉, 각 레벨은 두 개의 점과 슬래시 " / ».
4. 사이트의 루트 폴더에서, 페이지 clienty.html 주문 폴더에 있습니다(즉, 이제 klienty.html 페이지는 원래 price.html 페이지에 상대적입니다. 한 단계 아래로).
zakazy/clienty.html">고객
이 경우 점과 슬래시는 넣지 않습니다.
5. price.html 페이지(원본 페이지)와 zakazy 폴더는 사이트의 루트 폴더에서, 가구 폴더 주문 폴더에 있습니다, 페이지 clienty.html mebel 폴더에 있습니다(즉, 이제 klienty.html 페이지는 원래 price.html 페이지에 상대적입니다. 두 단계 아래에 있습니다).
zakazy/furniture/clienty.html">고객
6. 사이트의 루트 폴더에서 두 개의 폴더가 있습니다: zakazy 및 oplata. clienty.html 페이지 주문 폴더에 있습니다, 원래 price.html 페이지 oplata 폴더에 있습니다.(즉, 두 페이지 모두 안에 다른 폴더한 단계 아래로사이트의 루트 폴더에서).
../zakazy/clienty.html">고객
§ 5. 이메일 링크
에게 이메일 링크 생성, 속성 값의 URL 대신 필요합니다. href프로토콜( 메일:). 그런 다음 그러한 링크를 클릭하면 창이 열립니다. 메일 프로그램"받는 사람" 필드에 입력한 이메일 주소로 HTML 코드에서는 다음과 같습니다.
메일: [이메일 보호됨]">내 메일
브라우저에서도 마찬가지입니다.
블로그 사이트 독자 여러분 안녕하세요. 오늘 우리는에 대해 이야기 할 것입니다 HTML에서 하이퍼링크를 만드는 방법, "A" 태그와 해당 href 및 대상 속성을 사용하는 방법을 배우고 이미지를 링크로 만드는 방법을 배웁니다.
하이퍼링크는 웹 페이지의 핵심 요소입니다. 서로 다른 html 페이지를 하나의 완전한 웹사이트로 연결합니다. 일반적으로 링크는 밑줄이 그어진 텍스트로 표시되며, 링크 위로 마우스를 가져가면 마우스 커서가 가리키는 손가락이 됩니다.
또한 하이퍼링크는 다음과 같이 보일 수 있습니다. 그래픽 이미지또는 그 단편. 링크를 클릭하면 브라우저는 링크의 속성에 지정된 웹 페이지를 로드합니다. 하이퍼링크를 사용하면 사이트의 내부 페이지와 인터넷의 다른 리소스에 연결할 수 있습니다.
텍스트 하이퍼링크 만들기
간단하게 시작하여 규칙적으로 만드는 방법을 살펴보겠습니다. 텍스트연결. 텍스트 하이퍼링크를 만들려면 링크가 되어야 하는 텍스트 조각을 묶는 것으로 충분합니다. 페어 태그 A. 그리고 안에 href 속성이 태그의 경우 인터넷에서 대상 웹 페이지의 주소를 지정해야 합니다.
이 html 코드는 링크가 포함된 단락을 만듭니다. 링크는 www.site.ru 사이트의 루트 폴더에 저장된 카탈로그 폴더에 있는 page15.html 웹 페이지를 가리킵니다.
페이지를 사용하지 않는 경우 CSS 스타일추가 속성이 적용되지 않으면 페이지의 하이퍼링크가 다음과 같이 기본적으로 표시됩니다.
- 일반 링크는 파란색으로 표시됩니다.
- 방문한 링크는 보라색으로 강조 표시됩니다.
- 활성 하이퍼링크(현재 클릭된)는 빨간색으로 표시되지만 링크를 클릭한 후 새 문서를 로드하기 시작하는 시간이 매우 짧기 때문에 이 링크 상태는 매우 짧습니다.
- 링크 텍스트에 밑줄이 그어져 있습니다.
인터넷 주소
전체 주소에는 웹 서버의 인터넷 주소와 검색할 파일의 경로가 포함됩니다. 예를 들어:
여기서 www.site.ru는 웹 서버의 주소이고 /catalog/page15.html은 이 서버에 있는 파일의 경로입니다. 일반적으로 전체 인터넷 주소는 일반적으로 다른 웹사이트에 있는 일부 리소스를 가리키는 하이퍼링크를 생성해야 하는 경우에만 사용됩니다.
현재 웹 페이지와 동일한 사이트의 일부인 파일을 가리키는 하이퍼링크를 생성할 때는 축약된 인터넷 주소를 사용하는 것이 가장 좋습니다. 축약된 주소에는 서버의 파일 경로만 포함됩니다. 웹 서버의 주소는 이미 브라우저에 알려져 있습니다.
약식 인터넷 주소는 순수한그리고 상대적인. 절대 주소는 사이트의 루트 폴더를 기준으로 대상 파일의 경로를 지정합니다. 이러한 주소는 루트 폴더를 나타내는 문자 /(슬래시)로 시작합니다. 예를 들어, 주소 "/page15.html"은 사이트의 루트 폴더에 저장된 page15.html 파일을 가리킵니다. 또는 "/catalog/page.html" 주소는 사이트의 루트 폴더에 중첩된 카탈로그 폴더에 있는 page.html 파일을 가리킵니다.
상대 주소는 현재 웹 페이지의 파일에 대한 상대 파일 경로입니다. 상대 주소에는 선행 슬래시가 포함되지 않습니다. 몇 가지 예를 살펴보겠습니다.
예를 들어, "page.html" 주소는 현재 웹 페이지의 파일과 같은 폴더에 있는 파일을 가리킵니다. 그리고 "catalog/page.html" 주소는 현재 페이지가 저장된 폴더에 중첩된 카탈로그 폴더에 저장된 page.html 파일을 엽니다.
주소 시작 부분에 두 개의 점을 사용하여 이전 중첩 수준의 폴더를 지정할 수 있습니다. 따라서 예를 들어 주소 ".../page.html"은 현재 웹 페이지가 있는 폴더가 중첩된 폴더에 저장된 page.html을 가리킵니다.
메일 링크
사용하여 HTML 언어당신은 만들 수 있습니다 메일 하이퍼링크, 클릭하면 프로그램이 실행됩니다. 메일 클라이언트. 속성에 주소를 지정할 때 href이메일 앞에 두기 "메일투:", 즉. 다음과 같이: href="mailto: [이메일 보호됨]". 또한 콜론 뒤에는 우편 주소 앞에 공백이 없어야 합니다.
이미지 링크를 만드는 방법
html 페이지의 인라인 요소이므로 텍스트 대신 "A" 태그 안에 이 태그를 삽입하기만 하면 됩니다.
게다가 간단한 옵션하이퍼링크 이미지를 만들 때 html을 사용하면 그래픽 이미지의 일부를 하이퍼링크로 전환할 수 있습니다. 또한 이미지를 부분으로 분할할 수 있으며 각 부분은 인터넷 주소를 가리키는 하이퍼링크가 됩니다. 이 옵션은 이미지 맵.
현재 이미지 맵은 매우 많은 수의 태그가 필요하고 html 코드가 다루기 어렵고 혼란스러워 거의 사용되지 않습니다.
이미지 맵은 세 단계로 생성됩니다.
이미지 맵을 생성하는 전체 html 코드는 다음과 같습니다.
여기에서 우리는 webcodius 사이트의 메인 페이지를 가리키는 하나의 직사각형 영역, 동일한 사이트에 모든 기사가 있는 페이지를 가리키는 하나의 원형 영역, 링크가 없는 하나의 다각형 영역을 만들었습니다.
앵커
앵커 또는 상표- 이것은 html 페이지의 별도 조각을 표시하고 문서의 내용을 탐색할 수 있도록 하는 일종의 하이퍼링크입니다.
제목 바로 뒤에 기사 섹션 제목 목록이 있는 페이지를 이미 본 적이 있을 것입니다. 이 목록을 클릭하면 관심 항목의 섹션으로 이동합니다.
앵커는 다음을 사용하여 일반 하이퍼링크와 같이 생성됩니다. 짝을 이루는 태그 A, href 속성 대신에 name 또는 id 속성이 그 안에 배치되며, 그 값은 레이블의 고유 식별자를 설정합니다. 이 경우 "A" 태그 자체에는 일반적으로 콘텐츠가 없습니다.
빈 "A" 요소를 만들 필요가 없는 앵커를 만드는 두 번째 방법이 있습니다. 또는 와 같이 이미 웹 페이지에 있는 요소를 사용할 수 있습니다. 이렇게 하려면 원하는 요소에 범용 id 속성을 추가합니다.
안녕하세요, 블로그 사이트 독자 여러분! 아시다시피 사이트를 성공적으로 홍보하고 결과에서 위치를 높이려면 검색 결과, 사이트의 고품질 SEO 최적화를 수행하는 것이 필요합니다. 내부와 외부로 나뉘는 ""의 개념은 "내부 및 외부 사이트 링크"와 같은 개념과 불가분의 관계에 있습니다. 따라서 사이트에 몇 개의 링크가 있어야 하는지, 링크 수를 확인하는 방법, 사이트에서 불필요한 링크를 제거하고 인덱싱에서 닫는 방법, 링크 매스를 늘리는 방법 등을 아는 것이 매우 중요합니다. 내부 및 외부 링크, 먼저 HTML에서 링크(또는 하이퍼링크)가 무엇인지 이해합시다.
이 기사에서는 링크가 무엇인지, 웹사이트에서 HTML로 하이퍼링크를 만드는 방법, 새 창에서 링크를 여는 방법, 전자 메일 주소(이메일)에 대한 링크를 만드는 방법 및 방법에 대해 설명합니다. 링크 이미지를 만듭니다. 또한 html 태그 및 하이퍼링크 속성, 링크 앵커, html 앵커(앵커) 및 해시 링크와 같은 개념을 다룰 것입니다. 시작하겠습니다.
링크(하이퍼링크)란 무엇입니까?
하이퍼링크가 존재하지 않는(삭제, 이동된) 웹 페이지나 파일로 연결되거나 해당 주소가 올바르지 않은 경우 이러한 링크를 끊어진 링크라고 합니다. 사이트에 깨진 링크가 있어서는 안 됩니다. 방문자를 오도하고 그러한 링크를 클릭하면 사이트를 다시 방문할 가능성이 낮기 때문입니다. 깨진 링크가 나타나는 이유, 링크를 찾고 수정하는 방법에 대해서는 별도의 기사에서 자세히 설명하겠습니다. 이제 계속합시다.
웹사이트에서 HTML로 링크(하이퍼링크)를 만드는 방법.
귀하의 사이트 또는 다른 사이트의 다른 페이지에 링크하는 것은 매우 쉽습니다. 하이퍼링크를 만들려면 브라우저에 링크가 무엇인지 알려주고 링크가 연결될 문서의 주소를 표시해야 합니다. 이것은 HTML 태그를 사용하여 수행됩니다. 및 필수 href 속성:
여기서 URL은 이동할 문서의 주소입니다. 그리고 태그 사이에 있는 하이퍼링크의 텍스트 그리고, 링크 앵커라고 하며 웹 페이지 방문자에게 표시됩니다. 링크 텍스트(앵커)는 전환이 이루어질 위치를 독자에게 알리는 것 외에도 검색 엔진 최적화(SEO)에서 매우 중요합니다. 검색 엔진 최적화는 키워드이 앵커에 포함되어 있습니다. 일반적으로 이러한 유형의 순위를 참조라고 합니다.
절대 링크
다른 사이트(외부 링크)의 문서를 가리키는 데 사용됩니다.
동일한 사이트 내에서 절대 링크를 만드는 것은 허용되지만 상대적 주소를 사용하여 내부 링크를 만드는 것이 더 정확하여 더 짧아 보입니다. 그러나 여러 사이트를 분석하는 동안 웹마스터의 대다수가 절대 주소로 내부 링크를 만드는 것을 발견했습니다. 여기에 플러스가 있습니다. 페이지가 복사되면 이러한 방식으로 외부 링크를 다시 작업할 수 있기 때문입니다.
보시다시피, 절대 링크모든 것이 간단합니다. 상대적 속성을 사용하면 더 어렵습니다. 문서를 만들 때 문서의 원래 위치에 따라 달라지기 때문에 지정해야 하는 href 속성의 값을 이해해야 하기 때문입니다. 내가 말했듯이, 아무도 이것에 정말로 신경쓰지 않으며 사이트의 모든 링크를 절대적으로 만듭니다. 그러나 사이트에 대한 상대 링크를 올바르게 생성하는 방법에 대해 더 알고 싶다면 ktonanovenkogo.ru 블로그의 저자인 Dmitry의 기사를 추천할 수 있습니다. 나는 아직 더 자세하고 이해하기 쉬운 설명을 보지 못했다.
예를 들어, 사이트 루트를 기준으로 파일로 연결되는 링크가 어떻게 생겼는지 보여드리겠습니다(비슷한 절대 링크에서 세 번째 슬래시 왼쪽에 있는 모든 것을 잘라냅니다):
상대 링크
메인으로
링크 텍스트(앵커)
팝업 텍스트의 색상과 모양은 설정에만 의존합니다. 운영 체제그리고 브라우저.
새 창에서 링크를 여는 방법.
기본적으로 링크를 클릭하면 현재 창에서 새 문서가 열립니다. 그러나 개인적으로 사이트를 볼 때 이것은 나에게 편리하지 않습니다. 기사를 읽고 링크를 따라갈 때 페이지가 새 창에서 열리고 언제든지 이전 기사를 계속 읽을 수 있어 편리합니다. 새 창에서 링크를 여는 또 다른 이유는 다른 사람의 사이트에 갔을 때 독자가 다시 오지 않을 확률이 높기 때문입니다. 특히 그가 여러 번 전환하고 몇 분 전에 있었던 위치를 기억하지 못하는 경우.
대상 태그 속성은 새 창에서 링크를 여는 데 도움이 됩니다. . 기본값은 _self 이며 일반적으로 작성되지 않습니다. 새 창에서 문서를 열려면 대상 속성 값을 _blank 로 변경하십시오.
| 1 | <a href = "http://site" target = "_blank" >새창</아> |
새창
현재 창에서 링크가 열려 있는 다른 사람의 사이트를 방문할 때 새 창에서 열고 싶다면 어떻게 하시겠습니까? 버튼이 아닌 마우스 휠로 클릭하면 됩니다. 이 경우 새 페이지새 창에서 열립니다.
이메일(이메일 주소)에 대한 링크를 만드는 방법.
이 링크를 클릭하면 작업을 위한 프로그램이 열립니다. 이메일, 기본적으로 설치되며 "받는 사람" 필드가 이미 채워져 있습니다. 편지의 제목을 자동으로 채우려면 다음 형식의 이메일 링크를 만들어야 합니다.
"subject_of the letter"라는 단어 대신 원하는 주제를 작성해야하며 물론 라틴 문자로 작성해야합니다. 많은 브라우저와 이메일 프로그램이 키릴 자모와 잘 작동하지 않고 제목 줄에 온갖 종류의 횡설수설을 볼 기회가 있기 때문에 이렇게 합니다. 이 어렵지 않은 조언을 사용하면 불필요한 놀라움에 대한 두려움 없이 전자 메일에 대한 링크를 만들 수 있습니다.
이미지 링크를 만드는 방법.
여기서 title 속성은 툴팁이며, 브라우저에서 이미지가 비활성화된 경우 alt 속성(대체 정보 소스)에 작성된 텍스트가 페이지에 나타납니다. 제목 속성이 우선 독자의 편의를 위해 제공되면 검색 엔진은 alt 속성으로 그림에 표시된 내용을 이해하려고 시도합니다. 이러한 태그에 키워드를 작성하는 것이 좋습니다. 이는 검색 엔진 최적화에서 매우 중요합니다. 결국, 아무도 사진으로 검색을 취소하지 않았습니다.
하나의 html 페이지에 하이퍼링크(html 앵커)를 만드는 방법.
위에서 우리는 이미 내부 또는 외부에 관계없이 웹 사이트 페이지에 대한 링크를 만드는 방법을 고려했습니다. 그러나 때로는 동일한 웹 페이지 내에서 하이퍼링크를 만들어야 합니다. 무엇 때문에? 예를 들어 매우 긴 텍스트를 읽을 때 해당 부분으로 빠르게 이동할 수 있습니다. 또는 기사의 시작 부분에 내용을 하나씩 게시할 때 유용할 것입니다. 그런 다음 원하는 항목을 클릭하면 관심 있는 자료로 즉시 이동합니다. 이러한 전환은 html 앵커(텍스트 앵커와 혼동하지 말 것)라고 하는 기사 본문에 미리 설치된 책갈피 및 특수 해시 링크를 사용하여 이루어집니다.
앵커를 생성하려면 먼저 태그의 name 속성을 사용하여 지정된 이름(라틴 문자, 숫자, 하이픈 및 밑줄만 사용)으로 책갈피를 만듭니다. :
위로
| 1 | <a href = "자바스크립트:스크롤(0,0);" > |
Dmitry KtoNaNovenkogo는 html 앵커를 사용하지 않고 웹 페이지 텍스트에 책갈피를 설정하는 또 다른 방법을 조언합니다. 이를 위해 페이지에서 사용할 수 있는 HTML 태그에서 책갈피를 만들고 여기에 범용 id 속성을 지정합니다. 예를 들어 h3 헤더 태그에서 책갈피를 만듭니다.
제목 텍스트
id 속성에 라틴 문자를 앵커 이름의 첫 번째 문자로 쓰는 것이 중요합니다. 그러면 다른 허용되는 문자를 사용할 수 있습니다.
예를 들어 " "라는 제목으로 돌아가서 계속 진행해 보겠습니다.
해시 링크를 사용하면 한 페이지 내에서 올바른 위치로 이동할 수 있을 뿐만 아니라 사이트의 다른 페이지로 이동할 수도 있습니다. 이를 위해 올바른 페이지의 올바른 위치에 html 앵커를 설정하고 해시 링크 자체에서 해시 기호 앞에 이 페이지의 주소를 씁니다. 예를 들어:
HTML 책갈피 앵커에 텍스트 연결
HTML에서 하이퍼링크의 유형과 색상.
- 방문하지 않은 링크는 파란색으로 밑줄이 그어져 있습니다.
- 활성 링크 - 링크를 클릭하고 새 페이지를 로드하기 시작하는 사이에 빨간색으로 바뀝니다. 물론 이 상태에 오래 있지는 않았습니다.
- 방문한 링크 - 클릭하면 색상이 보라색으로 변경됩니다.
태그를 사용하여 html 문서의 하이퍼링크 색상을 변경할 수 있습니다.
및 다음 속성:- 링크 - 방문하지 않은 링크의 색상입니다.
- Alink - 활성 링크 색상입니다.
- Vlink는 방문한 링크의 색상입니다.
위의 모든 속성을 결합할 수 있습니다.
| 1 | <본문 링크 = "#1122cc" vlink = "#6611cc" alink = "#d14836" > |
HTML 페이지와 이메일에 하이퍼링크를 만드는 방법, 그림을 링크로 만드는 방법, 텍스트 앵커, 해시 링크 및 HTML 앵커, html 태그 및 링크 속성이 무엇인지 이제 명확해졌으면 합니다. HTML에 있는 링크와 링크가 무엇인지 자세히 설명하기 위해 최선을 다했습니다. 텍스트에 하이퍼링크를 삽입하는 것은 HTML 모드에서만 수행된다는 것을 상기시켜 드리겠습니다.
10,000자 이상의 긴 기사를 작성할 필요가 없었습니다. 그러나 이 링크 주제는 계속해서 끝나지 않습니다.
이 기사가 도움이 되었다면 아래 소셜 네트워크의 버튼을 클릭하십시오. 페이지에서 만나요!
HTML 문서의 주요 구별 기능은 하이퍼링크라고 하는 다른 문서에 대한 특수 활성 링크를 만드는 것입니다.
그 위로 마우스를 가져가면 커서가 손 모양을 하고, 브라우저 창을 클릭하면 다른 웹페이지나 특정 문서가 열린다. 하이퍼링크는 텍스트 또는 이미지일 수 있습니다.
대상 문서가 현재 문서와 동일한 디렉토리에 있는 경우 작동합니다. 또한 "/" 기호를 사용하여 웹 사이트의 루트 디렉터리에 상대적인 파일 경로를 지정할 수 있습니다.
예를 들어:
예를 들어:
HTML에서 하이퍼링크를 만드는 것은 간단한 과정입니다. 기본적으로 그들은 밑줄이 그어져 있고 파란색으로 강조 표시되어 있는 반면 방문한 것은 보라색입니다.
- 링크 - 웹 페이지 링크의 색상
- vlink - 방문한 웹 페이지 하이퍼링크의 색상.
- 링크는 웹 페이지의 활성 링크 색상입니다.
예를 들어:
지정된 속성은 전체 HTML 문서의 링크 색상을 결정합니다. 이 코드를 태그에 붙여넣으면
, 매번 글꼴 색상을 설정할 필요가 없습니다.하이퍼링크의 기본 속성
1. 제목 - 하이퍼링크 위에 마우스 커서를 올리면 팝업되는 툴팁 텍스트를 만들 수 있습니다.
예를 들어:
2. target - 링크를 열 창을 브라우저에 알려줍니다.
다음 값을 사용할 수 있습니다.
- _blank - 링크는 새 탭에서 열어야 합니다.
- _self - HTML 하이퍼링크는 현재 탭에서 열려 있어야 합니다. 기본값;
- _parent - 브라우저는 부모 창에 링크를 로드해야 합니다.
- _top - 하이퍼링크가 브라우저 창의 전체 공간에 로드됩니다(이 경우 프레임이 사라짐).
예를 들어:
링크 이름
따라서 초보 웹마스터가 자주 묻는 질문에 대한 답변 " HTML에 하이퍼링크를 삽입하는 방법" 받았다.
웹 프로그래밍 학습의 성공을 기원합니다!