HTML의 이미지 링크는 웹사이트의 한 페이지에서 다른 페이지로 이동하는 데 도움이 되므로 거의 모든 페이지에서 발견됩니다. 널리 사용되는 조합은 HTML 앵커 태그 HTML의 img 태그 를 사용합니다. 이 조합을 사용하면 사용자가 이미지를 클릭하여 한 페이지에서 다른 페이지로 이동할 수 있습니다. 이 주제에 대해 더 자세히 알아보기 전에 먼저 앵커와 이미지 요소의 작동 및 렌더링을 개별적으로 이해한 다음 이를 결합하여 연결된 이미지를 만들어 보겠습니다.
HTML 앵커 태그는 다른 웹페이지나 웹에서 호스팅되는 멀티미디어 콘텐츠에 대한 HTML 하이퍼링크를 만드는 데 사용됩니다. 앵커 태그의 작동 방식과 기본 속성을 이해하려면 아래 구문을 참조하세요
위 예에서 "href" 속성은 "여기를 클릭하세요!!"라는 텍스트를 클릭하는 동안 사용자를 리디렉션할 웹페이지의 URL을 지정합니다.
아래에서 전체 코드를 살펴보겠습니다.
출력
–>
위의 예를 통해 다음과 같은 관찰을 할 수 있습니다
인터넷을 검색하는 동안 다양한 형태의 멀티미디어가 포함된 여러 웹페이지를 접하셨을 것입니다. 특히 이미지는 오늘날 거의 모든 대화형 웹 페이지와 웹사이트에서 찾을 수 있는 인기 있는 멀티미디어 형식입니다. 아래 예를 통해 이미지 태그와 HTML의 구현을 이해해 보겠습니다.
구문
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
이제 img 태그의 각 속성이 어떻게 작동하는지 살펴보겠습니다.
이제 웹페이지에 이미지를 로드하는 데 필요한 전체 HTML 코드를 살펴보겠습니다. 다음 이미지를 로컬 드라이브의 "image_test" 폴더에 "sunset.png"라는 이름으로 저장합니다.
이제 동일한 폴더에 다음 HTML 코드를 사용하여 sunset.html이라는 HTML 파일을 생성해 보겠습니다.
이제 컴퓨터의 브라우저로 이동하여 .html 파일의 경로를 입력하세요. 내 파일은 D 드라이브에 저장되어 있으므로 경로는
D:/image_test/sunset.html
이제 렌더링된 HTML 페이지가 브라우저에 일몰 이미지를 로드한 것을 볼 수 있습니다. CSS와
의 도움으로 태그를 사용하면 요구 사항에 따라 이미지 주위에 텍스트를 표시할 수도 있습니다. 앵커 및 img 태그는 모두 Google Chrome, Safari, Microsoft Edge, Firefox 및 Internet Explorer와 같은 모든 브라우저와 호환됩니다.
이제 앵커 태그와 이미지 태그가 개별적으로 작동하는 방식을 예를 통해 이해했으므로 이제 두 기능을 결합하여 사용자가 클릭하면 새 웹페이지로 리디렉션되는 시나리오를 달성하는 방법을 이해하겠습니다. 이미지의. 이미지를 클릭할 수 있게 만들고 사용자를 다른 웹페이지로 리디렉션하려면 앵커 태그에 이미지를 중첩하기만 하면 됩니다. 아래 예에서는 전 세계에서 사용되는 상위 3개 웹 검색 엔진을 나열해 보겠습니다. 목록에는 3개 검색 엔진의 로고가 표시되며, 로고 중 하나를 클릭하면 사용자가 해당 검색 엔진 페이지로 리디렉션됩니다. "redirection test"라는 폴더를 만들고, 같은 폴더에 아래 이미지를 저장해 보겠습니다
1. 구글
2. 야후
3. 빙
이제 동일한 파일에 imageredirection.html이라는 이름의 .html을 생성하겠습니다. imageredirection.html에는 다음 코드가 포함됩니다.
이제 브라우저에서 HTML 페이지에 액세스해야 하며 여기에 로컬 경로 "D:/redirectiontest/imageredirection.html"을 입력하겠습니다. 그런 다음 브라우저는 HTML 파일을 렌더링하여 다음 결과를 생성합니다.
–>
사용자는 로고를 클릭하여 해당 검색 엔진으로 이동할 수 있습니다. 위의 예에서 HTML은 여러 태그를 결합하고 이와 같은 복잡한 기능을 달성할 수 있는 간단하고 유연한 언어라는 것을 알 수 있습니다. img와 앵커 태그를 사용하는 조합은 널리 사용되는 조합입니다. 추가 HTML 코딩을 사용하면
위 내용은 HTML의 이미지 링크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!