Links

  • Links : 웹이 웹을 만듬
  • 웹의 연동된 특성은 검색엔진이 가지고 있는 것으로 보이는 “지식”으로 이어진다.

Anchor links

  • <a> tag : anchor link
  • hyper-reference 와 content 가 필요
    • href : 새로운 content의 위치 reference
    • content : 클릭 가능한 부분 (text or image)
<a href="https://bluespace.com"> blog </a>

Types of links

어떤 종류의 링크를 가질 수 있을까?

  • Absolute
  • Relative
  • Internal
  • Graphical

Absolute Reference

  • full url 주소를 넣어야 함
  • https://bluespace.com

Relative Reference

  • local 폴더에서 depth 만큼 주소 입력
    • docs/page2.html
  • ID tag 로 입력
    • #history (같은 파일에 있는 다른 위치 link)

Absolute vs Relative

  • 언제 Absolute를 사용하고 Relative를 사용해야 될까?
    • Absolute : 이 페이지의 담당이 아닐 때
    • Relative : 내 사이트를 개발할 때 (서버를 이동하거나 할 때 건들일 필요가 없음)
  • local link 사용할 때 이득은?
    • 업데이트 할 필요가 없다.

Using Images as the Link

  • component가 text를 가지지 않음 
<a href="https://bluespace.com">
    <img src = "imgs/icon.png" alt = "logo"/>
</a>

Usability Issues

  • 클릭할 수 있는 컴포넌트는 유익한 이름을 가져야 한다.
  • 이미지 정보는 이미지를 볼 수 없는 사람도 사용할 수 있어야 한다.

Targets

  • anchor는 target attribute를 가질 수 있다.
    • _self : link를 클릭했을 때 같은 tab이나 window에 연다 (default action)
    • _blank : 새로운 tab이나 window에 연다.
    • _top 하고 _parent : 멀티플 윈도우에서 다룬다.

Review

  • link 없는 페이지는 드물다.
  • link는 absolute, relative, internal 이 될 수 있다.
  • image link를 사용할 때 caution을 사용해라

공부 위치 – https://www.coursera.org/learn/html/lecture/7Wvrg/02-06-hyperlinks