HTML 학습 15 부 : 자습서 HTML에서 링크를 만드는 방법

당신은 확실히 이미 알고 있습니다다양한 웹 사이트에서 텍스트 또는 이미지 형태의 링크를 찾을 수 있기 때문에 "링크"라는 용어. 문제는 HTML 문서에서 링크를 만드는 방법입니다. 이 질문에 답하기 위해이 기사에서는 HTML 문서에 대한 링크를 삽입하는 방법 및 링크와 관련된 기타 사항을 설명합니다.

링크는 하나의 링크로 사용됩니다다른 페이지가있는 페이지 보다 명확하게 HTML에서 링크를 사용하면 HTML 문서를 대상 주소 인 다른 페이지에 연결합니다. 링크는 특정 주소와 관련된 텍스트 또는 이미지입니다. "링크"자료를 더 잘 이해하려면 아래 설명을 고려하십시오.

a. <a> 태그 사용

HTML 문서에서 링크 사용은 다음과 같이 표시됩니다.앵커 요소, 즉 쌍 태그 <a> …… </a> 사용. 브라우저에서 링크는 일반적으로 밑줄이있는 파란색 텍스트로 표시됩니다. 링크가 포함 된 텍스트 나 이미지를 클릭하면 링크 자체의 경로가 탭 자체 또는 새 탭에서 열립니다. <a> 태그에 포함 된 속성은 다음과 같습니다.

속성	기능
href	대상 문서의 위치를 나타냅니다
아이디	페이지에서 스타일 시트 (CSS) 연결 또는 위치 표시
hreflang	사용 된 언어를 나타냅니다
타입	대상 문서의 내용 유형에 대한 메모 제공
레일	현재 문서와 대상 문서의 관계 설명
rev	대상 문서와 원본 문서 간의 관계 설명
문자셋	웹 문서 인코딩의 문자를 지정합니다
제목	툴팁에 링크 제목을 제공합니다

다음은 HTML에서 링크를 사용하는 간단한 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>

브라우저에서 위의 HTML 코드를 실행하면 아래와 같이 나타납니다.

b. ID 속성

<a> 태그의 href 속성은대상 파일을 선언하십시오. <a> 태그 내부의 HTML 대상 경로 다음에는 독자를 문서의 특정 부분으로 가져 오는 데 사용되는 id 속성을 사용할 수 있습니다.

이해하기 쉽도록 링크의 href 속성에 "#about"을 작성하고 <p> 태그에 id = "about"속성을 작성하십시오. 코드 작성 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>

브라우저의 결과는 다음과 같습니다.

의도적으로 많은 태그를 사용했습니다.이 속성의 기능을 쉽게 이해할 수 있습니다. "정보"링크를 클릭하면 "Nesabamedia.com은 컴퓨터 자습서에 관한 것입니다 ... ..."문장의이 부분으로 즉시 연결됩니다.

c. 제목 속성

다음으로 title 속성을 사용하면제목의 내용은 링크 위에 마우스를 올리면 표시되는 툴팁으로 표시됩니다. 다음은 HTML로 작성하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>

위의 코드를 실행하면 전기 링크를 가리키면 아래와 같은 화면이 나타납니다.

d. 외부 링크와 로컬 링크의 차이점

외부 링크는 웹 페이지를 여는 데 사용됩니다다른 웹 사이트 (다른 도메인)에 상주하며 보통 "http : //"섹션으로 완전한 목적지 경로 주소를 작성합니다. 다음은 HTML로 작성하여 사용하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>

HTML 코드가 브라우저에서 실행되면 다음과 같이 나타납니다.

동일한 웹 사이트 또는 문서 루트에서 웹 페이지를 여는 데 사용되는 로컬 링크와 달리 예를 들어 웹 사이트 주소 www.nesabamedia.com 그리고 웹 사이트에는라는 페이지가 있습니다 belajarpiano.html. 해당 페이지에 링크를 만들고 싶다면 다음과 같이 전체 URL을 작성할 필요가 없습니다. www.nesabamedia.com/belajarpiano.html href 속성에서 belajarpiano.html 만. 아래와 같이 쓰는 예 :

<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>

이와 같은 또 다른 예는 다음과 같은 폴더가 있다고 가정합니다. HTML 배우기. 폴더 안에는 2 개의 html 파일과 2 개의 폴더가 있으며 각 폴더에는 1 개의 html 파일이 있습니다. 분명히 폴더 구조는 다음과 같습니다.

자 여기 있습니다. 제가 현재webku.html이라는 파일을 편집하고 story.html의 페이지를 가리키는 링크를 만들고 싶습니다. 그래서 다음과 같이 HTML 코드를 작성하면됩니다.

<a href="cinta/kisahku.html">

여전히 web.html 파일을 편집하고 있다고 가정하지만 이번에는 경력 페이지 html을 가리키는 링크를 만들고 싶습니다. 그러면 HTML 코드는 다음과 같습니다.

<a href="bisnis/karirku.html">

여전히 web.html 파일을 편집 중입니다. post.html 페이지를 가리키는 링크를 만들려면 HTML 코드는 다음과 같습니다.

<a href="posting.html">

로컬 링크를 사용하면 이동하려는 페이지의 주소를 전체적으로 작성할 필요가 없습니다.

사진을 링크로 만들기

우리가 사진을 찍고 싶을 때가 있습니다버튼이 실제로 이미지로 구성된 다른 페이지로 연결되는 버튼 만들기와 같은 특정 요구에 대한 링크 HTML 코드의 예는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>

브라우저에서 위의 HTML 코드를 실행하면 다음과 같습니다.

버튼 이미지를 클릭하면post.html 페이지로 리디렉션되었습니다. 예, <img scr = "사진 주소"를 작성해 주셔서 감사합니다 ... 틀린 경우 사진이 나타나지 않는지 확인하십시오. 위의 HTML 코드에서 파일 tombol.jpg html 파일로 하나의 폴더에 넣었으므로 <img src = "button.jpg"... 이미지 파일의 전체 주소를 쓸 필요가 없습니다. 그리고 html 파일의 이름은 gambar.html 내가 명명 한 이미지 파일 버튼.

앞에서 설명한 로컬 링크의 개념을 이해하면이 단계에서 혼동하지 않습니다.

d. 링크의 대상 속성

대상 속성은 또는링크가 클릭 된 후 현재 경로 / 창에서 열렸는지 또는 새 탭 / 창에서 열렸는지 대상 경로가 표시되는 방법을 지정하십시오. 다음은 사용할 수있는 대상 속성의 값입니다.

속성	기능
_ 공백	새 탭 또는 창에서 대상 웹 페이지를 엽니 다
_self	현재 탭 또는 창에서 대상 웹 페이지를 엽니 다 (기본값)
_ 부모	부모 프레임에서 대상 웹 페이지를 엽니 다
_top	열려있는 탭 또는 창에서 대상 웹 페이지를 열고 모든 프레임을 취소합니다

"_parent"를 사용하여 HTML5에서 명심하십시오.웹 사이트가 이제 프레임 또는 프레임 세트를 기반으로 작성되지 않았으므로 "_top"은 사용되지 않습니다. 이 두 가지 속성 외에는 거의 사용되지 않습니다. 링크에서 대상 속성을 지정하지 않으면 기본적으로 대상 웹 페이지가 현재 열려있는 탭 또는 창에서 열립니다 ( "_self").

다음은 코드를 작성하고 HTML에서 target = "_ blank"속성을 사용하는 예입니다.

<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>

브라우저에서 위 코드를 실행하면 아래와 같이 나타납니다.