하이퍼 링크는 웹 사이트에서 자주 사용되는 HTML 요소입니다. 웹 사이트의 다양한 페이지는 하이퍼 링크로 구성되며 하이퍼 링크는 페이지 간 점프를 완료합니다. 하이퍼 링크는 시청자와 서버 간의 주요 상호 작용 수단이며, 후속 기술에서 학습이 점차 심화 될 것입니다.
- 참고 : 이미지는 링크로 사용될 수 있으며 다음 장 웹 페이지에서 사진을 자세히 배울 수 있습니다.
4.5.1 텍스트에 링크를 추가합니다하이퍼 링크의 태그는 <a> </a>이며 텍스트에 하이퍼 링크를 추가하는 것은 다른 수정 된 태그와 유사합니다. 링크의 텍스트에는 다른 텍스트와 구별 할 수있는 특별한 스타일이 있습니다. 기본 링크 스타일은 파란색 텍스트이며 밑줄입니다. 하이퍼 링크는 다른 페이지로 리디렉션되며 <a> </a> 태그에는 새 페이지의 주소를 지정하는 HREF 속성이 있습니다. HREF가 지정한 주소는 일반적으로 상대 주소를 사용합니다.
- 참고 : 웹 사이트 개발에서 문서는 주소에 비해 더 일반적으로 사용됩니다.
A.HTM이라는 D :/ Web/ Directory에서 웹 페이지 파일을 작성하고 코드 4.18에 표시된대로 코드를 작성하십시오.
코드 4.18 하이퍼 링크 설정 : A.HTM
<html>
<헤드>
<title> 하이퍼 링크 설정 </title>
</head>
<body>
<font size = 5>
<a href = ul_ol.htm> 목록의 설정 페이지를 입력하십시오 </a>
</font>
</body>
</html>
브라우저 주소 표시 줄에 http : //localhost/a.htm을 입력하면 브라우징 효과가 그림 4.19에 나와 있습니다.
그림 4.19 하이퍼 링크 설정
독자는 그림 4.19에서 하이퍼 링크의 기본 스타일을 볼 수 있습니다. 페이지에서 링크를 클릭하면 페이지가 동일한 디렉토리, 즉 이전 섹션의 목록 설정 페이지에서 Ul_ol.htm 페이지로 이동합니다. 브라우저의 뒤로 버튼을 클릭하고 A.HTM 페이지로 돌아 오면 텍스트 링크의 색상이 자주색으로 변하며,이 링크 가이 링크를 방문했음을 알려줍니다.
4.5.2 링크의 창 시작 방법을 수정하십시오기본적으로 하이퍼 링크가 새 페이지를 열리는 방식은 자체 오버레이입니다. 시청자의 다양한 요구에 따라 독자는 하이퍼 링크를위한 새로운 Windows를 열는 다른 방법을 지정할 수 있습니다. 하이퍼 링크 태그는 _self (self -everwrite, default), _blank (새 페이지를 열기위한 새 창 생성), _top (전체 브라우저 창에서 열면 모든 프레임 구조가 무시됩니다) 및 _parent (이전 창에서 열림)와 같은 값을 설정하기위한 대상 속성을 제공합니다.
- 참고 : _top 및 _parent 메소드는 프레임 페이지에 사용되며 다음 장에는 자세한 설명이 있습니다.
4.5.3 링크에 프롬프트 텍스트를 추가하십시오대부분의 경우 하이퍼 링크의 텍스트는 연결될 내용을 설명하기에 충분하지 않습니다. 하이퍼 링크 태그는 시청자의 프롬프트를 용이하게하기 위해 제목 속성을 제공합니다. 제목 속성의 값은 프롬프트 내용입니다. 브라우저의 커서가 하이퍼 링크에 머무를 때 프롬프트 내용이 나타납니다. 이는 페이지 레이아웃의 깔끔함에 영향을 미치지 않습니다. A.HTM 웹 페이지 파일을 수정하고 코드 4.19에 표시된대로 코드를 작성하십시오.
코드 4.19 하이퍼 링크 설정 : A.HTM
<html>
<헤드>
<title> 하이퍼 링크 설정 </title>
</head>
<body>
<font size = 5>
<a href = ul_ol.htm target = _blank title = Hello Reader, 지금 보는 것은 프롬프트 텍스트입니다. 이 링크를 클릭하여 Ul_ol.htm 페이지로 이동하십시오. > 목록의 설정 페이지를 입력하십시오 </a>
</font>
</body>
</html>
브라우저 주소 막대에 http : //localhost/a.htm을 입력하면 브라우징 효과가 그림 4.20에 나와 있습니다.
그림 4.20 하이퍼 링크 프롬프트 텍스트
4.5.4 앵커 가란 무엇입니까?많은 웹 기사에는 많은 콘텐츠가있어 긴 페이지로 이어집니다. 시청자는 브라우저의 스크롤 바를 지속적으로 드래그하여 필요한 콘텐츠를 찾아야합니다. 하이퍼 링크의 앵커 함수는이 문제를 해결할 수 있습니다. 앵커는 배에서 끌어온 앵커입니다. 앵커가 버리면 배는 쉽게 떠 다니거나 길을 잃지 않습니다. 실제로 앵커는 단일 페이지 내의 다른 위치에서 점프하는 데 사용되며 일부 장소에서는 북마크라고합니다.
하이퍼 링크 태그의 이름 속성은 앵커의 이름을 정의하는 데 사용됩니다. 한 페이지는 여러 앵커를 정의 할 수 있습니다. 하이퍼 링크의 HREF 속성을 통해 이름에 따라 해당 앵커로 점프 할 수 있습니다. a_anchor.htm이라는 d :/ web/ directory에서 웹 페이지 파일을 작성하고 코드 4.20에 표시된대로 코드를 작성하십시오.
코드 4.20 하이퍼 링크 앵커 : a_anchor.htm
<html>
<헤드>
<title> 하이퍼 링크 설정 </title>
</head>
<body>
<font size = 5>
<a name = top> 여기에 상단의 앵커가 있습니다 </a> <br />
<a href =#1> 첫 번째 </a> <br />
<a href =#2> 두 번째 </a> <br />
<a href =#3> 세 번째 </a> <br />
<a href =#4> 네 번째 사람 </a> <br />
<a href =#5> 5th </a> <br />
<a href =#6> 6th </a> <br />
<H2> 미국의 성공적인 대통령 </h2>
● 첫 번째 사람 (1789-1797) <이름 = 1> 이것은 첫 번째 사람의 앵커입니다 </a> <br />
이름 : George Washington <br />
조지 워싱턴 <br />
태어나고 죽었다 : 1732-1799 <br />
정당 :: Federation <br />
● 두 번째 사람 (1797-1801) <a name = 2> 여기에 두 번째 사람의 앵커가 있습니다 </a> <br />
이름 : John Adams <br />
존 아담스 <br />
태어나고 죽었다 : 1735-1826 <br />
정당 :: Federation <br />
● 세 번째 사람 (1801-1809) <이름 = 3> 여기에 세 번째 사람의 앵커가 있습니다 </a> <br />
이름 : Thomas Jefferson <br />
토마스 제퍼슨 <br />
태어나고 죽었다 : 1743-1826 <br />
정당 :: 인민 공산당 <br />
● 4 번째 포스트 (1809-1817) <a name = 4> 여기 4 번째 게시물의 앵커가 있습니다 </a> <br />
이름 : James Madison <br />
제임스 매디슨 <br />
태어나고 죽었다 : 1751-1836 <br />
정당 : 중국 인민 공화국 <br />
● 5 번째 포스트 (1817-1825) <이름 = 5> 이것은 5 번째 게시물의 앵커입니다 </a> <br />
이름 : James Monroe <br />
제임스 먼로 <br />
태어나고 죽었다 : 1758-1831 <br />
정당 : 중국 인민 공화국 <br />
</font>
</body>
</html> l>
테스트 전에 독자는 코드 4.20에서 <a> </a> 태그가 앵커를 정의하는 데 사용되며 앵커 이름은 이름 속성으로 정의되어 있음을 알 수 있습니다 (이름은 제한이없고 사용자 지정 될 수 있음). 앵커 검색 링크는 HREF 속성을 사용하여 해당 이름을 지정하고 이름 앞에 # 기호를 추가해야합니다. 브라우저 주소 표시 줄에 http : //localhost/a_anchor.htm을 입력하면 브라우징 효과가 그림 4.21에 나와 있습니다.
그림 4.21 하이퍼 링크 앵커
뷰어가 하이퍼 링크를 클릭하면 페이지가 자동으로 HREF 속성 값 이름의 앵커 위치로 스크롤됩니다.
- 참고 : 앵커를 정의하는 레이블에는 반드시 특정 컨텐츠가 필요하지는 않지만 포지셔닝 일뿐입니다.
4.5.5 이메일, FTP 및 텔넷 링크하이퍼 링크는 웹 페이지의 기능을 더욱 확장 할 수 있으며보다 일반적으로 사용되는 기능은 이메일, FTP 및 Telnet 연결입니다. 위의 함수를 완료하려면 하이퍼 링크의 HREF 값 만 수정하면됩니다. 이메일을 보내는 형식은 다음과 같습니다.
<a href = mailto : 이메일 주소> 이메일 보내기 </a>
[email protected]과 같은 이메일 주소는 완료해야합니다.
앞에서 언급했듯이 HTTP 프로토콜은 웹 페이지를 탐색하는 데 사용되며 FTP 서버는 FTP 프로토콜로 연결됩니다. 링크 형식은 다음과 같습니다.
<a href = ftp : // 서버 IP 주소 또는 도메인 이름> 링크 된 텍스트 </a>
FTP 서버 링크와 웹 링크의 차이점은 사용 된 프로토콜이 다르다는 것입니다. FTP는 서버 관리자의 로그인 권한이 필요합니다. 그러나 일부 FTP 서버에 익명으로 액세스 할 수 있으므로 일부 공개 파일을 얻을 수 있습니다. 마찬가지로 Telnet 프로토콜에 연결된 서버는 유사한 방법을 채택하며 형식은 다음과 같습니다.
<a href = telnet : // 서버 IP 주소 또는 도메인 이름> 링크 된 텍스트 </a>
Telnet 프로토콜은 매우 적으며 대부분 HTTP 프로토콜과 함께 사용됩니다. d :/ web/ directory (mail.htm)의 웹 페이지 파일을 만들고 코드 4.21에 표시된대로 코드를 작성하십시오.
코드 4.21 하이퍼 링크의 기타 설정 : Mail.htm
<html>
<헤드>
<title> 하이퍼 링크의 기타 설정 </title>
</head>
<body>
<font size = 5>
<a href = mailto : [email protected] title = Hello Readers, 여기를 클릭하여 이메일을 보내십시오. > 이메일을 보내주세요 </a> <br />
<a href = ftp : //101.22.25.11 제목 = Hello Readers, FTP 서버에 오신 것을 환영합니다. > FTP 서버를 연결하십시오 </a> <br />
<a href = telnet : //101.22.25.11 제목 = Hello Readers, Telnet 서버에 오신 것을 환영합니다. > 텔넷 서버를 연결 </a>
</font>
</body>
</html> s
브라우저 주소 표시 줄에 http : //localhost/mail.htm을 입력하면 브라우징 효과가 그림 4.22에 나와 있습니다.
그림 4.22 하이퍼 링크의 기타 설정