링크의 표현 <a href=" ">~</a>

링크(a 요소)

a요소는 인라인 요소이며 a요소를 제외한 인라인 요소와 텍스트를 포함한다.
문서의 특정한 부분을 도달점으로 하고자 하는 경우는 name속성, 또는 id속성을 이용하여 그곳에 이름을 지정한다. id로 이름이 붙는 요소는 a요소 이외에도 링크의 도달점이 될 수 있지만 지원하지 않는 브라우저도 많이 있다. XHTML1.0에서 도달점의 이름을 붙이는 경우에는 id속성을 사용해야만 한다. XHTML1.0과 예전 브라우저 모두 문제없는 도달점을 표현하기 위해서는 id속성과 name속성을 모두 지정해 둔다.
 
예제)
링크설정 : <a href="./test.html">링크설정</a>
문서 내의 특정한 위치지정 :
<h2><a name="contents" id="contents">링크설정방법</a></h2>
<p>위 <a href="test.html#contents">링크설정방법</a> 참조</p>
※ xhtml1.0에서는 목표지점에 a요소를 지정할 필요가 없으며 <h2 id="contents">링크설정방법</h2>로 지정하면 된다.
 
tabindex속성과 accesskey속성을 지정하여 키조작에 의한 포커스 이동방식을 사용자에게 제공할 수 있다. tabindex는 키보드의 tab키를 눌렀을때 포커스 이동 순서를 지정하는 것이고 accesskey는 윈도우의 'alt' 매킨토시의 'cmd'와 지정키를 누르면 포커스가 지정되는 방식이다. 그러나 access지정키는 브라우저의 기본 속성값과 충돌하기도 한다.
 
예제)
<ul>
 <li><a href="http://naver.com" tabindex="1">네이버</a></li>
 <li><a href="http://daum.net" tabindex="2">다음</a></li>
 <li><a href="http://empas.com" tabindex="3">엠파스</a></li>
 <li><a href="http://paran.com" tabindex="4">파란</a></li>
</ul>
<ul>
 <li><a href="http://naver.com" accesskey="n">네이버</a></li>
 <li><a href="http://daum.net" accesskey="d">다음</a></li>
 <li><a href="http://empas.com" accesskey="e">엠파스</a></li>
 <li><a href="http://paran.com" accesskey="p">파란</a></li>
</ul>
 
각종 속성들
href="URI" : 링크되는 곳의 URI
charset="문자세트" : 링크될 곳의 문자세트 
hreflang="언어코드" : 링크될 곳의기본이 되는 언어코드
type="MIME타입" : 링크될 곳의 MIME타입
name="" : 링크의 도달점으로 지정하기 위한 이름 지정
rel="링크타입" : href속성으로 지정되는 링크될 곳과의 관계를 지정
rev="링크타입" : href속성으로 지정되는 링크될 곳에서 본 이 문서와의 관계를 지정
shape="영역의 모양" : 사용자의 조작에 반응할 영역의 모양을 지정 rect, circle, ppoly, default
coords="영역의 좌표" : shape속성으로 지정한 각 좌표를 '.'으로 구분하여 지정
tabindex="Tab이동순서" : 탭키를 눌러 항목 사이를 이동시킬 순서를 지정 0~32767사이의 숫자로 작은값부터 지정
accesskey="단축키" : 'alt'키와같이 누르면 포커싱되게 지정
target="프레임이름" : 링크할 곳의 문서를 표시하는 프레임이름, 혹은 윈도우 이름 지정

****************************************************

이미지(img 요소)

img요소에는 src속성과 alt속성이 필수이며 src속성으로 이미지파일의 URI를 alt속성으로 대체텍스트를 지정한다. alt속성으로 대체텍스트를 작성할 때는 구체적으로 작성하지만 지나치게 긴 문장은 삼가하도록 하고 별도의 설명이 필요하면 title속성을 활용한다. title속성으로 설명을 하더라도 한계가 있으므로 longdesc속성으로 참고 URI를 지정할 수 있다.

예제)

<img src="images/img.gif" alt="프린터사진" title="이 컴퓨터에 연결 가능한 프린터 사진" longdesc="printer.html" /> 

 

longdesc속성은 특히 이미지에 이미지맵을 설정할 때 텍스트로 구성한 사이트맵 페이지의 URI를 지정해 두는 방법으로도 활용된다.

<img src="images/banner.gif" align="left" usemap="#imgmap" longdesc="linkex.html">
<map name="imgmap">
<area shape="rect" coords="34,50,306,142" href="#" alt="네이버로 이동">
<area shape="rect" coords="313,50,540,142" href="#" alt="네이트로 이동">
<area shape="rect" coords="544,50,745,142" href="#" alt="다음으로 이동">
</map>

 

img요소의 폭과 높이는 'width'속성과 'height'속성으로 지정한다. 폭과 높이를 '픽셀'로 지정하면 브라우저에서 이미지를 다 읽어들이지 않고도 그 영역을 확보하고 다른부분을 먼저 표시하여 페이지 전체의 출력이 부드럽게 진행되도록 한다. 이미지에 링크를 설정하면 테두리가 생기는데 img요소에 border속성을 이용하여 제거했으나 XHTML1.0에서는 비추천요소이며 XHTML1.1에서 폐지되었으므로 CSS를 이용, img{border:0;}과 같이 표현하도록 한다. 또, 배치와 여백설정을 위해서 align속성과 hspace, vspace속성을 이용하였으나 역시 XHTML1.0에서 비추천요소이며 XHTML1.1에서 폐지되었으므로 모두 CSS로 표현한다. align속성은 float속성과 vertical-align속성으로, hspace속성과 vspace속성은 margin속성으로 구현하도록 한다.

img요소 이외에 object요소를 이용해서 이미지를 구현할 수도 있는데
<object data="images/img.gif" type="image/gif">XHTML2.0에서 이미지 표현</object> 과 같이 표현한다. 마임타입은 gif파일일 경우 'image/gif', jpeg파일일 경우 'image/jpeg', png파일은 'image/png'이다. XHTML2.0에서는 img요소가 폐지되고 object요소로 대체될 것이다.