Blog Content

    티스토리 뷰

    14.XHTML- 하이퍼링크

    반응형

    Microsoft Visual Web Developer 2008 Express Edition 와 파이어폭스 설치
    Microsoft Visual Web Developer 2008 Express Edition, 파이어폭스 사용



    하이퍼링크(Hyperlink)는 글자, 그림, 파일등의 특정 위치에 연결시키는 것으로
    하이퍼 텍스트의 핵심 개념입니다.
    태그는 <A>입니다. 글자의 속성을 제어, 링크와 착갈피 기능을 수행합니다.

    <a태그의 속성>
     속성 인자 표현  설명
     href 연결할 페이지 지정 예)
    <a href="http://~~"</a>
     클릭하면 지정된 페이로 이동
     target  _blank
    _parent
    _self
    _top
    지정된 프레임
    예)
    <a href="경로" target="_blank">링크</a>
     인자의 속성에 따라서 새로 열기, 기존창에 열기등이 된다.
     name  임의 이름 예)
    <a name="a" ></a>
     임의로 정한 이름으로 프레임설정에서 사용된다.
    (프레임설정강좌-??참고)



    하이퍼링크 (절대경로)

    해당 페이지로 이동하는 방법입니다. 클릭시 현재 페이지에서 바로 이동하게 됩니다.
     <a href="http://godffs.tistory.com">준철이 블로그로 이동</a>

    이번에는 새 창을 띄우고 지정된 경로를 보여주도록 하는 방법입니다.
    <a href="http://godffs.tistory.com" target="_blank">준철이 블로그</a>


    책갈피 (목적지 이동)
    책갈피는 사용자가 이름을 지정하여 문서내에서  이동이 가능하게 됩니다.
    페이지 이동이 아닌 스크롤 이동입니다.
    먼저 이름을 지정합니다. 여기서 저는 이름을 "Charpter1" 로 하겠습니다.

    1. 클릭시 지정한 곳으로 이동해야 합니다. 그럼 먼저 실행 시 이동 할 곳을 지정합니다.

    저는 줄바꿈태그<br />태그를 20개 정도 연속적으로 사용해서 20여줄을 내린후에
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>......
    <a name="Charpter1">Chapter1. 안녕하세요.</a>
    클릭시 하단 부분에 있는 "Charpter1.안녕하세요."가 있는 곳까지 이동 하는 소스 입니다.

    2. 이제 어떤걸 클릭 할때 1에서 작성한 "Charpter1.안녕하세요"가 있는 문장까지
    이동 할 것인지 지정해야 합니다.

    <a href="#Charpter1">1장으로 이동(내부경로)</a>
    여기서 "#"을 붙인것은 책갈피 입니다.


    상대 경로가 있습니다.
    위에 책갈피에서는 지정된 곳으로 스크롤이동 시키는것이라는 상대경로는 개발자가 작업한 파일의 경로를 지정해 주는것으로 사용자가 쉽게 접근 할 수 없다고 보시면 될 것 같습니다.
    (절대경로는 주소를 알고 있는 사람이면 어디든지 접속이 가능합니다.)

    <a href="11.목록 htm">11.목록으로 이동(상대경로)</a>

    해당파일 압축 푸신 후 14.하이퍼링크.htm 를 실행 해 주세요.
    반응형

    'jQuery | javascript | CSS' 카테고리의 다른 글

    16.XHTML- 이미지맵  (0) 2009.07.27
    15.XHTML- 이미지링크  (0) 2009.07.27
    13.HTML- URL(URI)의 구조  (0) 2009.07.23
    12.HTML- MARQUEE  (0) 2009.07.23
    11.HTML- 목록태그  (0) 2009.07.23

    Comments