HTML에 하이퍼링크를 삽입하는 방법은 무엇입니까? HTML에서 하이퍼링크를 만들고 사용합니다. 포럼에서 HTML, Vkontakte에서 사진을 링크로 만들고 CSS 이미지를 하이퍼링크로 사용하는 방법
이번 강의에서는 HTML로 링크를 만드는 방법에 대해 이야기하겠습니다. 링크는 웹사이트에서 매우 자주 사용되며, 이를 통해 웹사이트의 한 페이지에서 다른 페이지로 이동할 수 있습니다. 링크의 특징은 웹페이지뿐만 아니라 파일, 이미지 등으로도 연결될 수 있다는 것입니다.
링크는 내부 및 외부일 수 있습니다. 내부 링크는 한 사이트 내의 페이지와 파일로 연결됩니다. 외부 링크는 제3자 사이트, 문서 및 파일로 연결됩니다. 동시에 이러한 유형의 링크는 거의 동일하게 설정됩니다.
HTML로 링크를 만드는 방법, 예1. HREF - 링크가 어디로 연결되어야 하는지를 담당합니다. 표준 링크는 다음과 같이 지정됩니다. 링크 텍스트.
2. TARGET - 문서가 열리는 창을 담당합니다. 기본 새 문서현재 브라우저 창에서 열립니다. "target" 속성을 사용하면 새 브라우저 창에서 링크를 열 수 있습니다. 이 속성에는 다음 매개변수가 있습니다.
- _blank - 새 창에 페이지를 로드합니다.
- _self - 현재 창에 페이지를 로드합니다.
- _parent - 페이지를 상위 프레임에 로드합니다.
- _top - 모든 프레임을 취소하고 새 창에 페이지를 로드합니다.
3. NAME - 페이지 내 특정 영역으로 이동하는 데 사용됩니다. 해시 기호 뒤에는 키워드(북마크 또는 태그)가 따옴표로 표시됩니다. 이 라벨로 이동하려면 이 라벨이 작성된 링크를 사용하세요.
외부링크 예시웹사이트로 이동
사이트로 이동 무료 WordPress 레슨예 4: 링크로서의 이미지.
참고용 예시 이미지
텍스트로 이동
페이지 텍스트...
이 예에서는 "name" 속성을 사용하여 페이지에 "list" 레이블이 지정되었습니다. 이 라벨을 링크하면 페이지의 특정 영역으로 이동하게 됩니다.
파일 다운로드 편지 쓰기"body" 태그에 지정된 속성을 매개변수로 사용하여 링크 색상을 설정할 수 있습니다. 다음 속성을 고려하십시오.
- 링크 - 방문하지 않은 링크, 기본적으로 파란색으로 표시됩니다.
- alink - 활성 링크, 기본값은 빨간색입니다.
- vlink - 방문한 링크, 기본값은 보라색입니다.
이로써 우리는 HTML에서 링크가 생성되는 원리를 알아냈습니다. 링크에 특정 스타일을 지정할 수 있습니다. 링크를 따라가시면 해당 강의를 통해 보실 수 있습니다.
내 생각에는 당신이 이미 내 말을 이해하고 있다고 생각합니다 우리 얘기하자이 장에서는.. 링크가 무엇인지 알고 계시다면 여기를 클릭하십시오. 링크에는 여러 유형이 있으며 링크를 클릭하기 위한 "메커니즘"도 있습니다. 이 장에서는 링크를 등록하는 방법과 링크 작업의 복잡성에 대해 자세히 설명하겠습니다.
서정적 여담:
군대에 있을 때 참모총장이 나에게 다가와서 다음과 같은 명령을 내렸다.
그 문서를 가져오세요. 어디에 있는지, 무엇인지는 모르겠지만!! 왜 서 있나요? 뛰자!! 나는 늦었다!!!
따라서 이것이 의미하는 바는 브라우저가 그때처럼 혼란에 빠지지 않도록 문서의 정확한 이름, 문서의 경로 및 문서를 가져올 장소를 알아야 한다는 것입니다. 또는 오히려 그것을 열 곳.
~에 이 순간메모장을 사용하여 우리는 단 하나의 HTML 문서를 만들었습니다. index.html이라는 이름이 있습니다. (왜 그렇게 이상한 이름 index.html을 선택했고 왜 필요한가요?) 어떤 문서가 나온 것인지 모르겠습니다. 이름을 직접 사용했지만, 물론 당신이 내 참모총장이 아니라면 그것이 어디에 있는지 기억하고 알고 있다고 생각합니다. :).. 이 문서에서는 아직 가지고 있지 않은 다른 문서에 대한 링크를 만들려고 노력할 것입니다. .. 링크하기 전에 링크를 만들어야 합니다. 왜냐하면 당신은 이미 이 작업을 수행하는 방법을 알고 있기 때문입니다.
이제 나는 두 개의 HTML 문서 index.html과 Primer.html이 있고 추가 교육을 위한 최소 세트가 있다는 것을 알고 있습니다.
텍스트 링크.태그를 만나보세요 (앵커에서) 텍스트나 그림을 포함할 수 있으며, 이는 특정 문서에 대한 링크가 됩니다. 태그 속성 href는 링크가 가리키는 문서의 이름과 경로를 지정합니다.
모두 합쳐서 다음과 같이 작성됩니다.
여기 내 사진이 있습니다 !!아마 이해하셨겠지만, Primer.html은 두 번째 HTML 문서의 이름이고 "Here are my photos!!"라는 문구가 있습니다. 이것은 index.html 파일의 텍스트입니다.
사진과 유사하게 태그는 열려는 문서에 대한 링크 경로는 동일한 방법을 사용하여 지정됩니다.
여기 내 사진이 있습니다 !! - 이는 Primer.html 파일이 해당 문서보다 한 단계 높은 위치에 있음을 의미합니다.
여기 내 사진이 있습니다 !! -문서는 웹 사이트 www.site.ru에 있습니다..
자, 한번 해보자? 다음은 서로를 가리키는 링크가 포함된 두 문서의 예입니다.
Index.html 파일:
텍스트에 대한 링크 만들기
말해봐, 얘야. 어느 쪽 귀에서 윙윙거리는 거야?
오른쪽인가요 왼쪽인가요?
Primer.html 파일:
여기 링크를 따랐어요
하지만 내 추측이 틀렸어! 양쪽 귀에서 윙윙거리는 소리가 납니다.
글쎄, 난 그런 식으로 플레이하지 않는데...
예제에서 링크가 색상으로 강조 표시되는 것을 볼 수 있습니다. 기본적으로 파란색은 링크이고 빨간색은 이미 방문한 링크입니다. 이러한 색상은 이미 잘 알려진 시작 태그를 사용하여 변경할 수 있습니다.< body >그리고 그 속성.
링크 - 링크 색상.alink - 클릭된 활성 링크의 색상입니다.
vlink - 방문한 링크의 색상입니다.
다음과 같이 작성되었습니다.
텍스트 링크의 색상에 대해 계속해서 이야기하면서 필요한 경우 친숙한 태그와 해당 색상을 사용하여 전체 링크와 개별 부분(문구, 단어, 문자)을 강제로 색상으로 강조 표시할 수 있다는 점을 언급할 가치가 있습니다. 기인하다. 그러나 이는 색상에만 적용되는 것이 아니라 텍스트의 크기, 스타일 및 글꼴을 별도로 설정할 수도 있습니다. 하지만 색상 조작은 태그 내부에서 수행되어야 한다는 점을 기억하세요. 여기그렇지 않으면 링크 색상이 기본적으로 지정되거나 태그에 지정된 대로 지정됩니다.
Index.html 파일:
무지개
무지개 색깔의 위치를 기억하는 데 도움이 되는 문구를 보세요
아르 자형
ㅏ
디
유
G
ㅏ
Primer.html 파일:
무지개
모든
사냥꾼
소원
알다
어디
앉아있다
꿩
메인페이지로 돌아가기
사이트의 페이지 중 하나는 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 그래픽 링크(그림 링크)위에서 말했듯이 이미지 링크를 생성하려면 를 사용해야 합니다. 이러한 링크의 예는 다음과 같습니다.
그러면 브라우저에 다음이 표시됩니다.
기본적으로 브라우저는 프레임이 있는 그래픽 링크의 이미지를 둘러쌉니다. 이를 원하지 않는 경우 IMG 태그의 테두리 속성을 0으로 설정해야 합니다.
테두리="0">
홈페이지
§ 3. 내부 링크내부 링크는 콘텐츠가 많은 페이지를 편안하게 탐색하는 데 사용됩니다. 저는 그들의 도움을 받아 “수업 내용”을 만들었습니다(이 페이지의 시작 부분 참조). 내부 링크는 외부 링크와 동일한 원리를 사용하여 생성됩니다. href 속성의 값만이 링크의 "앵커"를 지정합니다. "앵커"는 name 속성에 의해 생성됩니다.
name="앵커 이름">텍스트
그리고 “앵커”의 이름은 임의로 설정됩니다. 여기서는 모든 브라우저가 "앵커"의 러시아어 이름을 이해하는 것은 아니라는 점을 언급할 가치가 있으므로 라틴 알파벳을 사용하는 것이 좋습니다. "앵커"를 생성하기 위해 태그 사이의 텍스트는 필수가 아니며 대부분 지정되지 않습니다.
"나는 홍역입니다"는 사용자가 링크를 클릭한 후 이동해야 하는 페이지의 위치에 있습니다.
위에서 말했듯이 내부 링크의 href 속성에는 주소 대신 원하는 "앵커"의 이름이 앞에 필수 해시 기호(#)와 함께 표시됩니다. 예를 들어 살펴 보겠습니다.
저는 zagolovok이라는 "앵커"를 만들어 이 강의 제목(HTML의 하이퍼링크) 옆에 있는 페이지 코드에 배치했습니다. 앵커 코드는 다음과 같습니다.
이름="zagolovok">
href="#zagolovok">제목으로
그리고 브라우저에서는 다음과 같습니다.
제목에 대한 내부 링크를 클릭하면 브라우저 주소 표시줄의 URL이 다음과 같이 변경되었습니다.
원래 주소로:
http://www..html
http://www..html#zagolovok
그리고 이 기능을 사용하면 인터넷의 모든 리소스에서 페이지의 특정 위치로 연결할 수 있습니다! 즉, 어떤 것에 대한 긴 기사가 포함된 페이지를 만들고(또는 페이지에 많은 수의 사진을 게시함) 내부 링크를 표시했다고 가정해 보겠습니다. 에서는 기사(또는 사진)가 있는 페이지뿐만 아니라 기사의 특정 위치(또는 특정 사진)로 링크해야 했습니다. 주소에 내부 링크가 포함된 옵션을 사용하면 필요한 것을 쉽게 얻을 수 있습니다.
§ 4. 절대 및 상대 참조홈페이지
그러나 상대 링크를 사용하면 좀 더 복잡해집니다. 이러한 링크에서 주소는 사이트의 루트 폴더(메인 페이지가 있는 폴더) 또는 소스 페이지를 기준으로 표시됩니다. 예를 들어 사이트가 다음 위치에 있는 경우 이러한 링크가 필요합니다. 가정용 컴퓨터. 또는 이것은 사이트가 아니라 다른 문서를 가리키는 페이지입니다.
다음과 같은 폴더에 있는 klienty.html 페이지를 참조해야 한다고 가정해 보겠습니다. 홈페이지대지. 그러면 상대 링크 코드는 다음과 같습니다.
/klienty.html">클라이언트
이제 메인 페이지와 동일한 폴더에 zakazy 폴더가 있고 klienty.html 페이지가 이미 그 폴더에 있다고 가정하면 상대 링크 코드는 다음과 같습니다.
/zakazy/klienty.html">클라이언트
이제 소스 페이지에 상대적인 하이퍼링크를 생성하는 방법을 살펴보겠습니다. price.html(소스 페이지) 페이지가 있고 이 페이지에서 klienty.html 페이지로 링크해야 한다고 가정하면 다음과 같은 일반적인 옵션이 있습니다.
1. Price.html 및 klienty.html 페이지는 동일한 폴더에 있습니다.
klienty.html">클라이언트
2. 사이트의 루트 폴더에서 한 수준 위의 zakazy 폴더에 Price.html 페이지가 있습니다.
코드는 다음과 같습니다:
../klienty.html">클라이언트
두 개의 점은 현재 폴더에서 더 높은 수준으로 이동해야 함을 나타냅니다.
3. klienty.html 페이지와 zakazy 폴더는 사이트의 루트 폴더에 있고, mebel 폴더는 zakazy 폴더에 있고, price.html 페이지는 mebel 폴더에 있습니다(즉, klienty.html 페이지는 원래 가격.html 페이지는 두 수준 더 높습니다.)
../../klienty.html">클라이언트
즉, 각 레벨은 두 개의 점과 슬래시("/")로 표시됩니다.
4. 사이트의 루트 폴더에서 klienty.html 페이지는 zakazy 폴더에 있습니다(즉, 이제 원래 가격.html 페이지에 비해 klienty.html 페이지는 한 수준 아래에 있습니다).
zakazy/klienty.html">클라이언트
이 경우 점과 슬래시는 사용되지 않습니다.
5. Price.html 페이지(원본 페이지)와 zakazy 폴더는 사이트의 루트 폴더에 있고, mebel 폴더는 zakazy 폴더에 있고, klienty.html 페이지는 mebel 폴더에 있습니다(즉, 이제 klienty .html 페이지는 원래 가격을 기준으로 합니다. html 페이지는 두 수준 아래에 있습니다.
zakazy/mebel/klienty.html">클라이언트
6. 사이트의 루트 폴더에는 zakazy와 oplata라는 두 개의 폴더가 있습니다. klienty.html 페이지는 zakazy 폴더에 있고 원래 가격.html 페이지는 oplata 폴더에 있습니다(즉, 두 페이지 모두 사이트 루트 폴더 한 수준 아래의 서로 다른 폴더에 있습니다).
../zakazy/klienty.html">클라이언트
이메일에 대한 링크를 생성하려면 href 속성 값의 URL을 프로토콜(mailto:)을 나타내는 이메일 주소로 바꿔야 합니다. 그리고 이 링크를 클릭하면 창이 뜹니다 메일 프로그램"받는 사람" 필드에 입력한 이메일 주소로 HTML 코드에서는 다음과 같습니다.
메일 수신자: [이메일 보호됨]">내 메일
그리고 브라우저에서는 그렇게 됩니다.
안녕하세요, 블로그 사이트 독자 여러분! 아시다시피, 웹사이트를 성공적으로 홍보하고 검색 결과에서 위치를 높이려면 웹사이트의 고품질 SEO 최적화를 수행해야 합니다. 내부와 외부로 구분되는 ""의 개념은 "내부 및 외부 사이트 링크"와 같은 개념과 불가분의 관계가 있습니다. 따라서 사이트에 몇 개의 링크가 있어야 하는지, 링크 수를 확인하는 방법, 사이트에서 불필요한 링크를 제거하고 색인 생성을 차단하는 방법, 링크 질량을 늘리는 방법 등을 아는 것이 매우 중요합니다. 내부 및 외부 링크에 관한 이러한 모든 질문에 답하기 위해 먼저 HTML에서 링크(또는 하이퍼링크)가 무엇인지 이해해 봅시다.
이 기사에서는 링크가 무엇인지, 웹 사이트에서 HTML로 하이퍼링크를 만드는 방법, 새 창에서 링크를 여는 방법, 이메일 주소(이메일)에 대한 링크를 만드는 방법 및 링크를 만드는 방법에 대해 설명합니다. 사진에 대한 링크를 만드세요. 또한 html 태그 및 하이퍼링크 속성, 링크 앵커, html 앵커 및 해시 링크와 같은 개념도 다룰 것입니다. 그럼 시작해 보겠습니다.
링크(하이퍼링크)란 무엇입니까?하이퍼링크가 존재하지 않는(삭제, 이동) 웹 페이지나 파일로 연결되거나 해당 주소가 잘못된 경우 이러한 링크를 끊어진 링크라고 합니다. 사이트에 끊어진 링크가 있어서는 안 됩니다. 링크가 방문자를 오도하고 해당 링크를 클릭하면 해당 사이트로 돌아올 가능성이 낮기 때문입니다. 깨진 링크가 나타나는 이유, 이를 찾아 수정하는 방법에 대해서는 별도의 기사에서 자세히 설명하겠습니다. 이제 계속하겠습니다.
웹사이트에 HTML로 링크(하이퍼링크)를 만드는 방법.귀하의 사이트나 다른 사이트의 다른 페이지로 연결하는 것은 매우 쉽습니다. 하이퍼링크를 만들려면 브라우저에 링크가 무엇인지 알려주고 링크가 연결될 문서의 주소를 표시해야 합니다. 이는 HTML 태그를 사용하여 수행됩니다. 필수 href 속성은 다음과 같습니다.
여기서 URL은 이동하려는 문서의 주소입니다. 그리고 태그 사이에 있는 하이퍼링크 텍스트 그리고는 링크 앵커라고 하며 웹페이지 방문자에게 표시됩니다. 링크 텍스트(앵커)는 독자에게 전환이 이루어질 위치를 알려준다는 사실 외에도 사이트 순위에 영향을 미치는 결정 요소 중 하나로 작용하므로 검색 엔진 최적화(SEO)에서도 매우 중요합니다. 이 앵커에 포함된 키워드에 대해 일반적으로 이러한 유형의 순위를 링크 순위라고 합니다.
절대링크
다른 사이트의 문서를 가리키는 데 사용됩니다(link is external).
한 사이트 내에서 절대 링크를 만드는 것도 가능하지만, 내부 링크를 만들려면 더 짧아 보이는 상대 주소를 사용하는 것이 더 정확합니다. 그런데 다양한 사이트를 분석해 보니 대다수의 웹마스터들이 절대 주소로 내부 링크를 만들고 있다는 사실을 알게 되었습니다. 페이지를 복사하면 작동하는 백링크를 받게 되므로 이점이 있습니다.
보시다시피 절대 링크를 사용하면 모든 것이 간단합니다. 상대 항목의 경우 더 어렵습니다. 문서를 만들 때 문서의 원래 위치에 따라 href 속성의 어떤 값을 지정해야 하는지 이해해야 하기 때문입니다. 내가 이미 말했듯이, 아무도 이것에 대해 정말로 신경 쓰지 않고 사이트의 모든 링크를 절대적으로 만듭니다. 그러나 웹사이트에 대한 상대 링크를 올바르게 생성하는 방법에 대해 더 자세히 알고 싶다면 ktonanovenkogo.ru 블로그 작성자인 Dmitry의 기사를 추천해 드릴 수 있습니다. 나는 이보다 더 자세하고 이해하기 쉬운 설명을 본 적이 없습니다.
예를 들어, 사이트 루트와 관련된 파일로 연결되는 링크가 어떻게 생겼는지 보여 드리겠습니다. (비슷한 절대 링크에서 세 번째 슬래시 왼쪽에 있는 모든 항목을 잘라냅니다.)
상대링크
메인으로
링크 텍스트(앵커)
팝업 텍스트의 색상과 디자인은 설정에 따라서만 달라집니다. 운영 체제그리고 브라우저.
새 창에서 링크를 여는 방법.기본적으로 링크를 클릭하면 새 문서가 현재 창에서 열립니다. 하지만 웹사이트를 탐색할 때 개인적으로는 이것이 편리하지 않습니다. 기사를 읽고 링크를 따라갈 때 페이지가 새 창에서 열리고 언제든지 이전 기사를 계속해서 읽을 수 있어서 편리합니다. 링크를 새 창에서 여는 또 다른 이유는 다른 사람의 사이트에 접속했을 때 독자가 다시 돌아오지 않을 확률이 높다는 점이다. 특히 그가 여러 번 전환하고 몇 분 전에 어디에 있었는지 기억하지 못하는 경우에는 더욱 그렇습니다.
태그의 target 속성은 새 창에서 링크를 여는 데 도움이 됩니다. . 기본적으로 _self 값을 가지며 일반적으로 지정되지 않습니다. 새 창에서 문서를 열려면 target 속성의 값을 _blank 로 변경하세요.
| 1 | 새창 |
새창
현재 창에 링크가 열려 있는 다른 사람의 사이트를 방문할 때 해당 링크를 새 창에서 열고 싶다면 어떻게 해야 합니까? 버튼이 아닌 마우스 휠을 사용하여 클릭하면 됩니다. 이 경우 새 페이지새 창에서 열립니다.
이메일(이메일 주소)에 대한 링크를 만드는 방법.이 링크를 클릭하면 작업할 수 있는 프로그램이 열립니다. 이메일로, 기본적으로 설치되며 "받는 사람" 필드가 이미 채워져 있습니다. 편지 제목을 자동으로 입력하려면 다음 유형의 이메일에 대한 링크를 만들어야 합니다.
Dmitry KtoNaNovenkogo는 HTML 앵커를 사용하지 않고 웹 페이지 텍스트에 북마크를 설정하는 다른 방법을 조언합니다. 이를 위해 페이지에서 사용할 수 있는 모든 HTML 태그에서 북마크를 만들고 이에 universal id 속성을 할당합니다. 예를 들어, h3 제목 태그를 북마크해 보겠습니다.
제목 텍스트
앵커 이름의 첫 번째 문자로 id 속성에 라틴 문자를 포함하는 것이 중요합니다. 그런 다음 허용되는 다른 문자를 사용할 수 있습니다.
예를 들어 " "라는 제목으로 돌아가서 계속해 보겠습니다.
해시 링크를 사용하면 한 페이지 내에서 원하는 위치로 이동할 수 있을 뿐만 아니라 사이트의 다른 페이지로 이동할 수도 있습니다. 이를 위해 오른쪽 페이지의 올바른 위치에 html 앵커를 설정하고 해시 링크 자체에서 해시 기호 앞에 이 페이지의 주소를 씁니다. 예를 들어:
HTML 앵커 북마크에 텍스트 링크
HTML의 하이퍼링크 유형 및 색상.- 방문하지 않은 링크는 파란색으로 밑줄이 그어져 있습니다.
- 활성 링크 - 링크를 마우스로 클릭한 후 새 페이지 로드가 시작될 때까지 빨간색으로 변합니다. 그녀가 이 상태에 있는 것은 짧은 시간뿐임이 분명합니다.
- 방문한 링크 – 클릭하면 색상이 보라색으로 변경됩니다.
태그와 다음 속성을 사용하여 HTML 문서의 하이퍼링크 색상을 변경할 수 있습니다.
- 링크 - 방문하지 않은 링크의 색상입니다.
- Alink - 활성 링크의 색상입니다.
- Vlink - 방문한 링크의 색상입니다.
위의 모든 속성은 다음과 같이 결합될 수 있습니다.
| 1 |
HTML 페이지와 이메일에 하이퍼링크를 만드는 방법, 그림을 링크로 만드는 방법, 텍스트 앵커, 해시 링크 및 html 앵커가 무엇인지, html 태그와 링크 속성이 무엇인지 이제 명확해졌기를 바랍니다. 나는 최선을 다해 HTML의 링크가 무엇인지, 그것이 무엇인지 자세히 설명하려고 노력했습니다. 텍스트에 하이퍼링크를 삽입하는 작업은 HTML 모드에서만 수행된다는 점을 상기시켜 드리겠습니다.
나는 이전에 10,000자가 넘는 긴 기사를 쓴 적이 없습니다. 그러나 이것이 링크 주제의 끝이 아니며 계속됩니다.
이 글이 도움이 되셨다면 아래 SNS 버튼을 눌러주세요. 페이지에서 다시 만나요!
사랑하는 친구와 독자 여러분 모두에게 좋은 하루 되세요. 귀하께서 제 대회에 참여하기로 결정하셨고 이미 귀하의 블로그 활동에 대해 글을 쓰고 계시기를 바랍니다. 글쎄요, 저는 HTML 언어에 대한 연구를 계속하고 싶습니다. 그리고 오늘은 가장 중요한 구성 요소 중 하나인 하이퍼링크에 대해 말씀드리고 싶습니다.
그렇습니다. 그러한 하이퍼링크가 없으면 인터넷은 그다지 편리하지 않을 것입니다. 아뇨, 거짓말이에요. 탐색이 전혀 쉽지는 않을 것입니다. 그것들이 없는 인터넷을 상상할 수 있습니까? 나는 개인적으로 그렇지 않습니다.
그리고 오늘은 HTML에 하이퍼링크를 삽입하는 방법을 배워보겠습니다. 하지만 먼저 여러분께 묻고 싶습니다. 하이퍼링크가 무엇인지, 일반 링크와 어떻게 다른지 아시나요? 실제로 모든 것이 간단합니다. 링크는 문서를 참조하는 간단한 정보입니다. 동시에 이 텍스트를 클릭할 수는 없지만(아무 일도 일어나지 않음) 정보를 찾을 위치를 알고 있습니다.
예: //site/adobe-photoshop/kak-vydelit-volosy/에서 Photoshop에서 머리카락을 강조 표시하는 방법을 확인할 수 있습니다.
하이퍼링크는 동일한 텍스트이며, 그 본질은 이 텍스트를 클릭하여 원하는 페이지, 사이트 또는 기타 개체로 이동할 수 있다는 것입니다. 또한 텍스트 자체는 무엇이든 될 수 있지만 주소는 내부에 별도로 작성되어 완전히 다를 수 있습니다. 그러나 구어체에서는 여전히 단순히 링크라고 불립니다. 다음은 하이퍼링크의 예입니다.
내 튜토리얼 중 하나에서 Photoshop에서 머리카락을 적절하게 강조 표시하는 방법에 대해 읽을 수 있습니다.
그래도. 좋은 이론. 이제 연습으로 넘어가서 이 모든 문제에 책임이 있는 사람이 누구인지 살펴보겠습니다.
쌍을 이루는 태그는 하이퍼링크를 담당하지만 그 자체로는 아무것도 나타내지 않습니다. 항상 속성과 함께 사용됩니다. 그리고 이 경우에도 동일한 href를 지속적으로 작성해야 합니다. 속성 값에 원하는 리소스 자체에 대한 링크를 넣습니다. 그리고 콘텐츠 자체에는 클릭할 수 있어야 하는 텍스트 자체를 작성합니다(클릭하면 작동함). 예를 보시면 모든 것을 이해하실 수 있다고 생각합니다.
Yandex 검색 엔진
아시다시피, 이 예에서는 "Yandex 검색 엔진"이라는 텍스트를 클릭하면 사용자가 href 속성 값에 적힌 주소로 이동한다고 썼습니다.
내부 링크와 외부 링크가 있다는 사실은 많은 분들이 알고 계시리라 생각합니다. 내부 링크는 하나의 디렉토리, 즉 사이트 내에서 수행되며 외부 링크는 일부 타사 리소스로 연결됩니다. 이제 두 가지를 모두 수행하는 방법을 보여 드리겠습니다.
내부 전환 파일이 동일한 폴더에 있음
그러나 링크하려는 파일이 링크를 배치하는 파일과 동일한 폴더에 있는 경우 이러한 전환이 작동합니다. 다른 옵션의 경우 모든 것이 약간 다릅니다.
지금 우리는 무엇을 했나요? 그리고 우리는 다음을 수행했습니다. 사진 경로가 pushkin.html 파일과 동일한 폴더에 있는 별도의 img 폴더에 있으므로 먼저 속성 값에 폴더 이름을 작성해야 합니다. 그런 다음 슬래시(/)를 통해 문서의 전체 이름(이 경우 사진)을 입력합니다.
이제 브라우저에서 pushkin.html 파일을 저장하고 실행하세요. "Photo"라는 단어가 파란색으로 강조 표시되고 클릭할 수 있게 된 것을 볼 수 있습니다. 즉, 이 링크를 클릭하면 img 폴더에 있는 fofo.jpg 파일로 이동하게 됩니다.
그래서 방법? 공습 경보 신호? 무슨 일이 생기면 주저하지 말고 물어보세요.
외부 전환물론 외부 링크를 언급하지 않을 수 없습니다. 클릭하면 완전히 다른 사이트로 이동됩니다. 그러나 여기에는 복잡한 것이 없습니다. 요점은 사이트나 웹페이지의 전체 주소를 href 값에 넣는 것입니다. 위에서 Yandex를 사용한 예를 보여주었습니다. 하지만 여기 또 다른 예가 있습니다:
나는 사회사업의 달인이 되기 위해 공부할 것이다.여기에서 특정 사이트의 특정 페이지로 이동합니다.
기본적으로 링크를 클릭하면 문서가 페이지와 동일한 창에서 열립니다. 귀하의 페이지가 닫힐 것입니다. 그리고 이것은 좋지 않습니다. 특히, 홍보하는 콘텐츠 프로젝트나 블로그의 경우 링크를 클릭하면 페이지를 닫지 않고 문서가 새 창이나 탭에서 열리는 것을 권장합니다.
“_blank” 값을 가진 target 속성이 이에 도움이 될 것입니다. 여기에는 복잡한 것이 없습니다. 여는 태그 안에 이것을 삽입하면 됩니다. href 속성 값 뒤에. pushkin.html 페이지에 대한 링크를 만든 lukomorye.html 파일에서 발췌한 내용을 살펴보겠습니다. 이제 바로 이 속성을 작성하겠습니다. 다음과 같아야 합니다.
시 Ruslan과 Lyudmila에서 (저자 - A.S. Pushkin)
글쎄, 여기서는 모든 것이 명확합니다. 이제 해당 내용을 클릭하면 원하는 페이지가 새 창에서 열립니다. 등록하지 않으면 사용자가 페이지를 떠나게 되기 때문에 이는 매우 필요합니다. 따라서 어떤 경우에도 그는 특별히 닫지 않는 경우에만 그 상태를 유지합니다. 모든 것을 스스로 해보고 모든 것을 자신의 손으로 아름답게 만드십시오. 복사해서 붙여넣을 필요가 없습니다.
왠지 이렇게. 가장 중요한 사항을 모두 말씀드린 것 같지만, 이 방향으로 나아가 HTML과 CSS를 배워 전문 웹사이트, 블로그, 심지어 온라인 상점까지 만들고 싶다면 이 주제에 대한 훌륭한 비디오 코스를 꼭 시청하세요. 강의는 정말 훌륭하며 아직 웹사이트 구축에 익숙하지 않거나 전혀 익숙하지 않은 사람들을 위해 강의됩니다.
자, 이것으로 오늘 수업을 마치겠습니다. 당신이 내 기사를 좋아하길 바라며, 당신이 나의 단골 독자가 된다면 기뻐할 것입니다. 그러니 흥미로운 내용을 놓치지 않도록 내 블로그 업데이트를 구독하는 것을 잊지 마세요. 글쎄, 나는 당신의 모든 노력에서 성공을 기원합니다. 안녕!
감사합니다, 드미트리 코스틴.
