HTML로 페이지 연결-HTML 튜토리얼-php.cn

HTML의 페이지 연결 구문

HTML을 사용하여 페이지를 연결하는 방법은 무엇입니까?

북마크 생성 링크

문서 다운로드 링크

HTML의 페이지 연결 예

예시 #2

Example #3

Conclusion

집

웹 프론트엔드

HTML 튜토리얼

HTML로 페이지 연결

PHPz

Sep 04, 2024 pm 04:51 PM

html html5 HTML Tutorial HTML Properties HTML tags

링크는 클릭할 수 있는 텍스트로 간단히 정의되므로 이 텍스트를 클릭할 때마다 한 페이지에서 다른 페이지로 이동하는 데 도움이 됩니다. 한 페이지에서 다른 페이지로 이동할 수 있도록 페이지, 이미지 또는 웹사이트와 같은 요소에 대한 링크를 제공합니다. HTML 링크는 경로가 있는 href 속성이 있는 태그는 실제로 점프하려고 했습니다. 기본적으로 HTML 코드에 포함된 모든 링크는 파란색으로 표시됩니다. 사용자가 이전에 이 링크를 이미 방문한 경우 보라색으로 표시됩니다. CSS를 사용하여 이 링크의 색상을 변경할 수도 있습니다. 이번 주제에서는 HTML에서 페이지 연결에 대해 알아 보겠습니다.

HTML의 페이지 연결 구문

HTML을 이용하여 실제로 어떻게 페이지를 링크할 수 있는지 살펴보겠습니다.

구문:

<a href="url"> Text_Content </a>

로그인 후 복사

위 구문에서 앵커 태그는 대상 링크와 같은 정의된 속성을 사용하여 새로운 대상 페이지 또는 문서를 정의하고 여는 데 도움이 됩니다.

이는 이전에 HTML 파일 경로 콘텐츠에서 본 절대 파일 경로와 정확히 동일하게 작동합니다.

구문:

<a href="url"></a<strong>>

로그인 후 복사

동일한 구문을 사용하여 해당 콘텐츠의 간단한 경로를 정의하여 웹사이트에서 특정 페이지나 부분을 열 수도 있습니다.

특정 페이지를 열어야 하는 경우 다음과 같은 상대 파일 경로를 사용하여 열 수도 있습니다

구문:

<a href="page_name.html"></a>

로그인 후 복사

HTML 링크를 사용하면 구문을 사용하여 빈 브라우저 창을 열거나 웹 페이지를 새 창에서 열 수 있으므로 흥미로운 일을 한 가지 더 할 수 있습니다.

구문:

<a href="Browser's _URL" target="_blank"></a>

로그인 후 복사

웹페이지를 상위 창에서 열려면 다음과 같은 구문을 사용하는 것도 가능합니다.

구문:

<a href="path" target="_parent"> </a>

로그인 후 복사

HTML을 사용하여 페이지를 연결하는 방법은 무엇입니까?

앞서와 같이 절대 및 상대와 같은 파일 경로를 모두 정의하는 href 속성이 있는 앵커 태그를 사용하여 웹 페이지, 이미지 및 기타 문서를 연결하는 방법을 살펴보았습니다.

또한 우리는 새 빈 창 열기, 상위 창에서 웹페이지 열기, 자체 창에서 페이지 열기와 같은 기능을 수행하기 위한 링크의 대상을 처리하는 방법도 잘 알고 있습니다. _top 속성과 기타 다양한 기능을 사용하여 전체 브라우저 창에서 실행하세요.

북마크 생성 링크

HTML의 링크를 사용하여 북마크 앵커를 만드는 방법을 살펴보겠습니다. 이러한 기능은 웹페이지의 북마크 역할을 합니다. 대용량 페이지 데이터에서 무언가를 찾고 싶을 때마다 일부 텍스트나 문서를 링크로 정의하여 이 대상 위치로 직접 이동할 수 있습니다.

북마크를 정의하려면 태그 내 href에 포함된 '#' 기호를 전달하여 실제로 해당 값보다 점프하려는 특정 요소에 속성으로 id를 추가해야 합니다. . 이는 아래와 같습니다.

예:

<a href="#home"> Homepage </a>
<h4 id="home"> Home </a>
<h6>This code works as a bookmark, so can jump directly to the home
Section by clicking on link </h6>

로그인 후 복사

또한 해당 페이지의 URL을 href 속성이 있는 앵커 태그에 정의하기만 하면 다른 페이지에서 특정 섹션을 직접 열 수도 있습니다. 다음과 같습니다.

예:

<a href="Demo.html #contactus"> Contact US </a>

로그인 후 복사

문서 다운로드 링크

HTML 링크를 통해 문서 다운로드에 도움이 되는 링크를 생성할 수도 있습니다. 텍스트를 링크로 정의하고 대상 파일의 경로를 URL로 추가하는 것과 동일하므로 이 링크를 클릭할 때마다 연결된 문서나 웹페이지가 자동으로 다운로드됩니다. 따라서 PDF, zip, jpg 등과 같은 파일 형식을 다운로드할 수 있습니다.

예:

<a href="downloads/demo.pdf"> This will download file in PDF format </a>
<a href="downloads/brochures.zip"> This will download file in zip
Format </a>
<a href="downloads/dinjo.jpg"> This will download file as a Image</a>

로그인 후 복사

HTML 링크로서의 이미지: HTML 링크의 또 다른 기능은 이미지를 HTML 문서의 링크로 간주하는 것입니다. 이는 다음과 같이 정의할 수 있습니다.

예:

<a href="demo.html"> <img src=”travelling.png alt="Travel"> </a>

로그인 후 복사

링크로서의 버튼: HTML에서도 버튼을 링크로 정의할 수 있습니다. 추가적으로 자바스크립트 코드도 추가해야 합니다. 따라서 클릭 이벤트가 발생할 때마다 링크된 페이지가 열립니다.

HTML의 페이지 연결 예

아래에 언급된 예시는 다음과 같습니다

예시 #1

이 예에서는 하나는 웹사이트에 대한 간단한 HTML 링크를 추가하고 다른 하나는 시스템에 로컬로 저장된 웹페이지를 추가합니다.

코드:

<!DOCTYPE html>
<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>HTML Page Link</h2>
<p>Stay stunned with us for the latest news and update across all over globe </p>
<h4><a href="https://timesofindia.indiatimes.com/">Latest News and Updates</a></h4>
<p>Open another webpage by linking pages in HTML</p>
<h4><a href="Webpage%20Design%20HTML.html">To browse new webpage click Here</a></h4>
</body>
</html>

로그인 후 복사

출력:

첫 번째 링크는 홈페이지가 열립니다

두 번째 링크의 경우 로컬 시스템에 저장된 웹페이지가 열립니다

예시 #2

링크를 클릭할 때마다 새 탭에서 웹페이지를 열고 이미지를 링크로 사용하여 새 문서를 여는 예입니다.

코드:

<html>
<head>
<title>Linking Pages in HTML</title>
</head>
<body>
<h2>linking Pages in HTML</h2>
<p>Learn and grow your Technical skills with Us. We have exciting courses for you.</p>
<h4><a href="https://www.educba.com/" target="_blankwindow">More About US</a></h4>
<h2>HTML Image as Page Link</h2>
<p>As we discussed we can give link to the image, so are giving link to the image here which will open another page.</p>
<a href="Webpage%20Design%20HTML.html">
<img src="t3.jpg" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
</body>
</html>

로그인 후 복사

출력:

The first link to open another page in the new target window:

Image as a link to open another webpage:

Example #3

In this example, we are using Button as a link.

Code:

<!DOCTYPE html>
<html>
<body>
<h4>Linking Pages in HTML Using Button as a Link</h4>
<p>Most important thing we can do give the link to the button to open another page.</p>
<button onclick="document.location='HTML inline tags.html'">HTML Inline tags</button>
</body>
</html>

로그인 후 복사

Output: