HTML의 영역 태그

이번 글에서는 HTML의 Area Tag에 대해 알아 보겠습니다. 영역 태그는 이미지 맵의 핫스팟을 정의하고 사용자가 웹 페이지에서 클릭할 수 있도록 하이퍼텍스트 참조와 연결하거나 링크합니다. 지도 부분을 클릭하는 동안 다른 페이지를 연결하는 데 도움이 됩니다. 그리고 이미지에 여러 개의 링크가 필요할 때 태그가 유용합니다.

구문

기본 구문은 다음과 같습니다.

<area alt="text" class=" " coords=" " shape> ;

이미지가 렌더링되지 않은 경우 대체 텍스트에 alt가 사용됩니다.

• class: 요소의 클래스 이름을 정의합니다.
• coords: 모양에 대한 값 집합이 있습니다.

이미지 맵의 구문은 다음과 같습니다.

<img  html name src="path%20loacation" alt="HTML의 영역 태그" >
<map name=" name">
<area shape="shapeName1" coords="x,y coordinates" href="html%20linkPath">
<area shape="shapeName2" coords=" x,y coordinates " href="htmllinkPath">
</map>

설명: 이는 닫는 태그가 없는 빈 태그이지만 XHTML의 경우 로 선언됩니다. 그리고 이 지역 태그는 항상

HTML에서 영역 태그는 어떻게 작동하나요?

이를 완료하는 과정은 다음과 같습니다. 처음에는 이미지 맵의 이미지입니다.

1. 페이지에 이미지를 삽입하려면 아래와 같은 이미지 태그를 사용해야 합니다.

<img src="edu.jpg" alt="HTML의 영역 태그 logo"> // image from the saved folder. Also, we can get from the web URL directly and map with <map> tag.</map>

이미지 내용을 설명하는 소스 및 대체 텍스트라는 src 속성이 함께 제공됩니다.

2. 둘째, #map 속성을 사용하여 지도 요소를 엽니다. 이 이미지 태그에는 사용 지도와 그 뒤에 '#' 기호가 함께 제공됩니다(사용 지도 =” #map”). Mapname은 HTML의 영역 태그과 동일한 이름이어야 합니다.

이미지 맵은 어떻게 만드나요? 지도와 이름 속성을 함께 사용하여 이미지와 지도를 함께 갖습니다. 브라우저는 화면 위에 마우스 커서가 포인터(손 기호)로 바뀌면 도형의 영역을 인식합니다.

3. 지도에 사용할 지역을 선언합니다.

<area shape="rect" cords='…….href="" ' alt="">
href comes with alt attribute by default.

속성

일반적으로 HTML 태그에는 브라우저를 시각적으로 즐겁게 표시하는 데 도움이 되는 하나 이상의 속성이 있습니다. 사용되는 속성에는 전역 속성, 이벤트 처리 속성, 요소별 속성 등 세 가지 종류가 있습니다. 영역 태그는 아래에 나열된 태그별 속성과 이에 대한 설명을 제공하며 HTML 5에는 몇 가지 새로운 속성이 있습니다.

1. 태그별 속성

속성 이름	설명	예
대체	지정된 영역에 접근성을 향상시키는 대체 텍스트를 정의합니다.
ref	하이퍼 참조를 정의하는 것은 페이지의 다음 페이지 지점/URL에 대한 링크를 의미합니다. 영역을 하이퍼링크로 변경합니다.
모양	이미지에 적용할 다양한 모양을 정의합니다.
코디	이미지 내 지역에 적합한 특정 값을 제공합니다. 좌표는 다음과 같이 지정됩니다. 기본값: 코드가 필요하지 않습니다. 직사각형: 왼쪽, 위쪽, 오른쪽, 아래쪽 원 : x, y, 반경 Poly: x1,y1, x2,y2,x3,y3…
target	Specifies where to open the link page, or I can say the end target page.
Nohref	Defines that absence of href. This means the area doesn’t have a link to next page
type	Specifies the content type (MIME)
hreflang	Specifies language-type

2. Standard Attributes

The description of these attributes has already been discussed in the previous article.

• Access key
• class
• dir
• id
• Style
• lang
• id
• tab index
• title.

3. Global Attributes

• onmouse down
• onmouse up
• onmouse over
• onmouse move
• onmouse out
• on focus
• on blur
• onkey press
• onkey down
• onkey up.

Examples to Implement Area Tags in HTML

Below are examples of implementing area tags in HTML:

Example #1

In the below example, I have created a jpg image diary.jpg. When u execute the code, the hand tool moves over the image at the specified cords; when you click on it, it directs you to the page rr.html.

Code:

<img  html src="diary.jpg" alt="HTML의 영역 태그" >
<map name="Diary">
<area shape="rect" coords="94,91,189,193" href="rr.html">
</map>

Code: rr.html

hello

 Online tutorial Class

Output:

Example #2

Code:

<img src="edu.jpg" alt="HTML의 영역 태그 logo"    style="max-width:90%"  style="max-width:90%" html class="logo">
<map name="ccmap">
<area shape="rect" coords="89,9,294,50" href="sha.html" alt="HTML의 영역 태그">
<area shape="rect" coords="297,7,407,54" href="rr.html" alt="Welcome">
</map>

Code: rr.html

hello

 Online tutorial Class

Code: sha.html

hello

 Welcome to the Page

Output:

The Output below shows the logo of HTML의 영역 태그; clicking the word BA directs to the page Hello page.

Example #3

Code:

<img src="new.png" alt="HTML의 영역 태그" border="0" html>
<map name="Protocols">
<area shape="Poly" coords="74,0,113,29,98,72,52,72,38,27" href="https://www.manageengine.com/network-monitoring/what-is-snmp.html%22" alt="SNMP Tutorial" target="_blank">
<area shape="rect" coords="22,83,126,125" alt="FTP Tutorial" href="https://www.techtarget.com/searchnetworking/definition/File-Transfer-Protocol-FTP" target="_blank">
<area shape="circle" coords="73,168,32" alt="http Tutorial" href="https://www.webopedia.com/TERM/H/HTTP.html" target="_blank">
</map>

Explanation of the above program: In this example, we have created an image map using the image file called new.png, which has three clickable areas declared within it using the tag. The first clickable area is a polygonal shape that links to the SNMP page called www.managengine.com. The second clickable area is a rectangular shape that links to the FTP page called www.searchnetworking.com, and finally, the last clickable area is a circle that links to an HTTP page called www.webopedia.com.

Output:

Output:

Conclusion

Therefore, we have seen how the area tag is used in active areas in switching to the pages with brief information explaining how to use the tag in clickable areas with syntax and demo examples.

위 내용은 HTML의 영역 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!