HTML 코드예시 : 하이퍼링크_HTML/Xhtml_웹페이지 제작 상세 설명

하이퍼링크는 웹사이트에서 자주 사용되는 HTML 요소입니다. 웹사이트의 다양한 페이지가 하이퍼링크로 연결되고 하이퍼링크가 페이지 간 이동을 완성하기 때문입니다. 하이퍼링크는 브라우저와 서버 간의 주요 상호 작용 수단이며 다음 기술에서 이에 대해 점차적으로 자세히 알아볼 것입니다. 하이퍼링크
하이퍼링크는 웹사이트에서 자주 사용되는 HTML 요소입니다. 웹사이트의 다양한 페이지가 하이퍼링크로 연결되고 하이퍼링크가 페이지 간 이동을 완성하기 때문입니다. 하이퍼링크는 브라우저와 서버 간의 주요 상호 작용 수단이며 다음 기술에서 이에 대해 점차적으로 자세히 알아볼 것입니다.
— 참고: 이미지는 링크로 사용될 수도 있습니다. 이에 대한 자세한 내용은 "웹 페이지의 이미지" 장에서 배우게 됩니다.
4.5.1 텍스트에 링크 추가
하이퍼링크의 태그는 입니다. 텍스트에 하이퍼링크를 추가하는 방법은 다른 수정 태그와 유사합니다. 링크를 추가한 후의 텍스트에는 다른 텍스트와 구별하기 위한 고유한 특수 스타일이 있습니다. 기본 링크 스타일은 밑줄이 있는 파란색 텍스트입니다. 하이퍼링크는 다른 페이지로 이동합니다. 태그에는 새 페이지의 주소를 지정하는 href 속성이 있습니다. href에 지정된 주소는 일반적으로 상대 주소를 사용합니다.
— 참고: 웹사이트 개발에서는 문서 상대 주소가 더 일반적으로 사용됩니다.
D:web 디렉터리에 웹 페이지 파일을 생성하고 이름을 a.htm으로 지정한 후 코드 4.18과 같이 코드를 작성합니다.
코드 4.18 하이퍼링크 설정: a.htm






목록 설정 페이지 들어가기



브라우저 주소창에 http://localhost/a.htm을 입력하면 그림 4.19와 같은 브라우징 효과가 나타납니다.

그림 4.19 하이퍼링크 설정
그림 4.19에서 독자는 하이퍼링크의 기본 스타일을 볼 수 있습니다. 페이지의 링크를 클릭하면 페이지가 이전 섹션의 목록 설정 페이지인 동일한 디렉터리에 있는 ul_ol.htm 페이지로 이동합니다. a.htm 페이지로 돌아가기 위해 브라우저의 "뒤로" 버튼을 클릭하면 텍스트 링크의 색상이 보라색으로 바뀌어 뷰어에게 이 링크가 방문되었음을 알려줍니다.
4.5.2 링크 창 열기 방식 수정
기본적으로 하이퍼링크는 자신을 덮어써 새 페이지를 엽니다. 브라우저의 다양한 요구에 따라 독자는 하이퍼링크에 대한 새 창을 여는 다른 방법을 지정할 수 있습니다. 하이퍼링크 태그는 설정을 위한 대상 속성을 제공합니다. 값은 _self(자체 덮어쓰기, 기본값), _blank(새 페이지를 열려면 새 창 생성), _top(브라우저 전체 창에서 열기, 모든 프레임)입니다. 구조는 무시됩니다) ), _parent(이전 창에서 열림).
— 참고: _top 및 _parent 메소드는 프레임 페이지에 사용되며 이후 장에서 자세히 설명합니다.
4.5.3 링크에 프롬프트 텍스트 추가
하이퍼링크의 텍스트만으로는 링크할 내용을 설명하기에 부족한 경우가 많습니다. 하이퍼링크 태그는 시청자에게 편리하게 안내를 제공하기 위해 제목 속성을 제공합니다. title 속성의 값은 프롬프트 내용입니다. 뷰어의 커서가 하이퍼링크 위에 있으면 프롬프트 내용이 표시됩니다. 이는 페이지 레이아웃의 깔끔함에 영향을 주지 않습니다. a.htm 웹 페이지 파일을 수정하고 코드 4.19와 같이 코드를 작성합니다.
코드 4.19 하이퍼링크 설정: a.htm






목록 설정 페이지 들어가기



브라우저 주소창에 http://localhost/a.htm을 입력하면 그림 4.20과 같은 브라우징 효과가 나타납니다.

그림 4.20 하이퍼링크 프롬프트 텍스트
4.5.4 앵커란 무엇인가
많은 웹 기사에는 콘텐츠가 많아 페이지가 매우 길어지고, 시청자는 필요한 콘텐츠를 찾기 위해 브라우저의 스크롤 막대를 끊임없이 드래그해야 합니다. 하이퍼링크의 닻 기능은 이 문제를 해결할 수 있습니다. 닻은 배의 닻에서 파생되므로 배는 쉽게 표류하거나 길을 잃지 않습니다. 실제로 앵커는 단일 페이지 내에서 다른 위치로 이동하는 데 사용됩니다. 일부 장소를 책갈피라고 합니다.
하이퍼링크 태그의 이름 속성은 앵커 이름을 정의하는 데 사용됩니다. 페이지는 여러 앵커를 정의할 수 있습니다. 하이퍼링크의 href 속성은 이름을 기반으로 해당 앵커로 이동할 수 있습니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 a_anchor.htm으로 지정한 다음 코드 4.20과 같이 코드를 작성합니다.
코드 4.20 하이퍼링크 앵커: a_anchor.htm






여기가 상단의 닻입니다

1차

2차

3기

4차

5번째

제6회

미국 대통령

●1기(1789~1797)1기의 닻입니다

이름: 조지 워싱턴

조지 워싱턴

탄생과 사망: 1732-1799

정당::연합

●2기(1797~1801)이것이 2기의 닻

이름: 존 아담스

존 아담스

탄생과 죽음: 1735-1826

정당::연합

●3기(1801~1809)3기의 닻입니다

이름: 토머스 제퍼슨

토마스 제퍼슨

탄생과 죽음: 1743-1826

정당:: 중국공산당

●4대(1809~1817)4대 닻입니다

이름: 제임스 매디슨

제임스 매디슨

탄생과 죽음: 1751-1836

정당: 중국공산당

●제5대(1817-1825)제5대 닻입니다

이름: 제임스 먼로

제임스 먼로

탄생과 죽음: 1758-1831

정당: 중국공산당



l>
테스트에 앞서 독자는 코드 4.20에서 태그가 앵커를 정의하는 데에도 사용되며 앵커의 이름이 name 속성으로 정의된다는 것을 알 수 있습니다(이름은 제한되지 않으며 사용자 정의할 수 있음). ). 앵커 링크를 찾을 때 href 속성을 사용하여 해당 이름을 지정하고 이름 앞에 # 기호를 추가합니다. 브라우저 주소 표시줄에 http://localhost/a_anchor.htm을 입력하면 그림 4.21과 같은 브라우징 효과가 나타난다.

그림 4.21 하이퍼링크 앵커
시청자가 하이퍼링크를 클릭하면 페이지가 자동으로 href 속성 값 이름의 앵커 위치로 스크롤됩니다.
— 참고: 앵커를 정의하는 태그 에는 반드시 특정 콘텐츠가 필요한 것은 아니며 단지 위치만 지정하면 됩니다.
4.5.5 이메일, FTP 및 Telnet 링크
하이퍼링크는 웹페이지의 기능을 더욱 확장할 수도 있습니다. 가장 일반적으로 사용되는 기능은 이메일, FTP 및 텔넷 연결입니다. 위 기능을 완료하려면 하이퍼링크의 href 값만 수정하면 됩니다. 이메일 전송 형식은 다음과 같습니다.
이메일 보내기
이메일 주소는 intel@qq.com과 같이 완전해야 합니다.
앞서 언급한 것처럼 웹 브라우징은 http 프로토콜을 사용하며, FTP 서버는 FTP 프로토콜을 사용하여 연결됩니다.
링크 본문
FTP 서버 링크와 웹페이지 링크의 차이점은 사용되는 프로토콜에 있습니다. FTP에는 서버 관리자의 로그인 권한이 필요합니다. 그러나 일부 FTP 서버는 익명으로 액세스할 수 있으며 일부 공개 파일을 얻을 수 있습니다. 마찬가지로 Telnet 프로토콜을 사용하여 서버에 연결하는 데에도 비슷한 방법이 사용됩니다. 형식은 다음과 같습니다.
링크 텍스트
텔넷 프로토콜은 거의 사용되지 않으며, http 프로토콜이 주로 사용됩니다. D:web 디렉터리에 웹 페이지 파일을 만들고 이름을 mail.htm으로 지정한 다음 코드 4.21과 같이 코드를 작성합니다.
코드 4.21 하이퍼링크에 대한 기타 설정: mail.htm






이메일 보내기

FTP 서버에 연결

텔넷 서버에 접속



브라우저 주소창에 http://localhost/mail.htm을 입력하면 그림 4.22와 같은 브라우징 효과가 나타납니다.

그림 4.22 하이퍼링크의 기타 설정