연결하는 이미지에서 HTML:링크를 만드는 방법 이미지에서
우리는 우리가 초보자 친화적인 모습을 만드는 방법에 이미지의 링크에서 당신의 웹 사이트입니다.코드에서 어떤 HTML 태그를 사용해야하는지 살펴 보겠습니다.
전에 이것을 한 적이 없다면 걱정하지 마십시오! 나는 전체 과정을 통해 당신을 안내 할 것입니다.
이 기사의 끝까지,당신은 당신의 웹 페이지 및 인터넷 전면 심상 연결을 창조할 것이다.,
우리는 또한 좀 더 진보된 기술을 끝으로 문서의 느낌이 있다면 용감하다.
커피를 잡고,”의 다이빙을하자!
어떻게 하이퍼 링크를 만드나요?
홈 페이지의 링크를 얻으려면 하이퍼 링크를 만들어야합니다. HTML 에서이 작업을 수행하려면<a>태그를 사용해야합니다. 각<a>태그에는 개폐 태그의 두 부분이 있습니다.,
여기에는 예입니다:
<a href="..."> ...</a>위에서,당신은 당신이 볼 수 있는 열린 태그:
<a href="...">
성의 시작은 하이퍼링크입니다. 그런 다음 우리는 닫 태그:
</a>
어떤 텍스트가 우리를 쓰기 사이의 열고 닫 태그는 당신의 링크를 텍스트입니다. 예를 들어,
<a href="..."> My Great Link</a>로 바꾸는 링크를 추가해야 합니다. 이를 위해 우리는 HREF 특성에 URL 을 추가합니다., URL 은 인터넷의 아무 곳이나 가리킬 수 있습니다. 이 예를 들어 우리는 우리가 사용하는 PageDart 홈페이지:
<a href="https://pagedart.com"> My Great Link</a>이 포함되었는지 확인하십시오 전체 URL 을 HTTPS,앞으로 내리게 되어 있습니다.HTML 에서 텍스트 전용 링크를 만드는 것이 전부입니다. 다음으로 HTML 을 사용하여 웹 페이지에 이미지를 추가 할 수있는 방법을 살펴 보겠습니다.
HTML 로 이미지를 어떻게 만드나요?
웹 페이지에 이미지를 추가하려면img태그를 사용하십시오.,
이 태그는 개폐 태그가 없다는 점에서a태그와 조금 다릅니다.
img태그를 만들려면 태그에 소스 파일을 제공해야합니다. 를 사용하여src속성이 이렇게하려면:
<img src="https://pagedart.com/favicon-32x32.png">이것은 이미지 추가 화면 다음과 같다:
이제 우리는 이미지가 우리에게 필요에 그것을 설정하는 링크가 있습니다., 그렇게 우리를 추가<img>태그 안에<a>태그를 만들기를 연결하는 이미지에서 HTML.다음은 예제를 살펴 보겠습니다.
으로 이미지에 대한 링크
을 차례로 이미지에 대한 링크를 추가할 필요가 있는<img>태그 안에<a>태그이다., 그래서 우리의 이 예제의 소스 코드는 다음과 같이 보일 것입니다.
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>생산하는 것이다 HTML:
추가하여<img>태그 안에<a>태그 브라우저를 볼 수 있는 이미지를 클릭할 수 있습니다. 당신은 링크로 이미지를 돌았 다!
WordPress 를 사용하는 경우 페이지 편집기의 텍스트보기를 사용하여 페이지에이 HTML 코드를 추가 할 수 있습니다.
링크 안에 텍스트와 이미지를 추가 할 수도 있습니다.,
링크로 이미지 및 텍스트
위의 예는 링크로 이미지 만 추가하는 방법을 보여주었습니다.
우리가 링크에 이미지와 텍스트를 모두 추가하고 싶다면 어떨까요?
만,이 경우에,우리는지 확인해야 우리는 텍스트를 추가하기 전에 우리는 닫기<a>태그:
<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>위에서, 우리는 추가”PageDart 홈”내<a>태그와 함께<img>태그이다., 표시하는 경우 웹 브라우저에서 페이지에 그것은 다음과 같이 표시됩니다:
있는 하나 이상의 특성에는<img>태그는 우리가 논의되지 않고 당신이 사용합니다.
alt속성입니다.
이미지 링크 및 Alt 속성
이미지를 인터넷에 있어야alt속성이 있습니다. 이것은 이미지의 텍스트 설명입니다.
화면 판독기는 대체 텍스트를 사용하여 시각 장애가있는 사용자를 돕습니다. 화면 판독기는 이미지를 찾으면 텍스트 설명을 읽습니다.,
이렇게 우리를 추가alt속성을img태그를 다음과 같다:
<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>이제 스크린 리더를 읽는 이미지 그것을 말할 것이다”PageDart.com”큰 소리로.
이미지 대체 텍스트를 작성할 때 모범 사례를 따르는 것이 중요합니다.
화면 판독기를 사용하는 사람에 대해 생각해야합니다. 그들을 위해 대체 텍스트 설명을 작성하고 최선을 다해 이미지를 설명하십시오.
이것은 HTML 에서 링크 이미지를 만드는 데 필요한 모든 것입니다., 아직,당신이 사용할 수있는 몇 가지 더 고급 기술이있다. 당신이 용감하다고 느끼면 우리는 이것들을 다음에 볼 것입니다.
고급 기술:Css 를 사용하는 링크로 이미지
보다 고급 기술은 CSS 를 사용하는 것입니다. CSS 는 계단식 스타일 시트의 약자이며 HTML 페이지가 어떻게 보이는지 변경할 수 있습니다.
CSS 를 사용하면<a>태그와 같은 요소에 배경 이미지를 설정할 수 있습니다.,
여기서 우리는 것 HTML 는 다음과 같습니다.
<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>이 시간 그래서 거기에 아무것도 안에<a>태그 그러나 이미지를 사용하여 설정에 CSS 스타일입니다. 이 표시는 다음 브라우저에서:
우리가 사용할 수 있습니다 비슷한 기술과 함께<button>태그이다.
고급 기술:버튼을 사용하여
이 예제에서,우리가 사용하는<button>태그를 대신<a>태그이다.,
을 만들 수 있습니다 같은 출력으로 위의 예를 사용하여 HTML
성이 출력:
여기서 우리는 자바 스크립트를 사용하여 새로운 브라우저를 열고 탭을 누릅니다. 사용자를 PageDart 홈 페이지로 보냅니다.
나는 왜 당신이 이것을 할 것인지 전혀 모른다! 그러나 가능한 것이 무엇인지,그리고 HTML,CSS 및 JavaScript 가 얼마나 유연한지를 보여주고 싶었습니다.
내가 보여줄 마지막 예제는 이미지 맵을 사용하는 것입니다.
고급 기술:이미지 맵
이미지지도는 하나의 이미지를 클릭 할 수있는 지역입니다., 그들은 지난 몇 년 동안 인기를 잃었지만 여전히 HTML5 사양의 일부입니다. 즉,Internet Explorer,Chrome 및 Safari 와 같은 브라우저가이를 지원합니다.
차트는 좋은 예제는 이미지 맵의와 같은 조직도,이
을 만들기 위해 다음 각 핑크 지역을 클릭할 수 있는 링크리 만들기map다음과 같다:
우리는 추가 특성usemap을img태그이다.,
그런 다음map태그 내에area태그가 있습니다. 이러한 각 영역은 버튼 역할을하는 클릭 가능한 영역을 만듭니다.
를 사용하여 연결하는 이미지에서 HTML
우리는 우리가 보는 다섯 가지를 추가하는 방법으로 이미지의 링크에서 당신의 웹 페이지:
- 으로 이미지에 대한 링크
- 이미지 및 텍스트 링크
- CSS 를 사용하여 설정하는 이미지에 대한 링크
- 버튼을 사용하여 링크
- 사용하는 이미지 맵
이러한 모든 수 차례로 이미지를 연결한다. 당신은 지금 이것을 스스로 시도 할 수있는 자신감을 가져야합니다.,
우리는 또한 보에의 접근성과를 설정하는 방법체 텍스트를 돕는 시각 장애인입니다.