하이퍼링크

하이퍼링크 하이퍼링크 하이퍼링크의 기능 및 종류 링크 태그 <A> 상대 경로 및 절대경로 이미지 맵

하이퍼링크 • 하이퍼텍스트 문서내의 단어나 문장, 이미지 같은 요소를 그 문서나 다른 문서의 요소와 연결(Link)시켜주는 것 • 링크에 접근하면 마우스 커서가 손모양으로 바뀌며 클릭함으로써 하이퍼링크가 활성화(activate) • HTML의 <A> 태그를 통해 하이퍼텍스트 문서 내에 삽입 • <A> 태그를 이용하여 웹 사이트의 URL은 물론, HTML문서, 워드프로세서, 압축파일, 실행파일 등 모든 종류의 파일을 연결

하이퍼링크 기능 • 다른 페이지로 이동 • 음악이나 동영상, 무비를 실행 • 섬네일 이미지를 클릭하면 원본 이미지를 나타내는 하이퍼링크 • 메일을 보낼 수 있는 하이퍼링크 • 책갈피(Named Anchor) 기능 • 파일 다운로드

링크 태그 <A> • 하이퍼링크를 만들기 위해 사용 • <A> 태그는 속성으로 href, target이 있다. • href 속성은 ‘Hyper Reference’의 약자로 링크 시킬 곳의 주소 또는 파일 이름을 속성 값으로 지정 • 형식

문자에 링크 걸기 • <A href=""> 와 </A>는 링크 태그의 시작과 끝을 나타내며 이 사이에 링크를 걸 텍스트를 작성 • 예

하이퍼링크 색상 조절 • <BODY> 태그의 속성을 사용 • <BODY> 태그의 link, vlink, alink 속성이 본문내의 하이퍼링크의 색상을 표현 • <BODY> 태그의 link, vlink, alink 속성

예제: <A>태그

그림에 링크 걸기 • 형식 • 예

예제: 그림에 링크 걸기

이메일(e-mail) 링크 • href 속성에 반드시 'mailto:'라는 URL 표기 방식을 넣어주어야 한다. • 자동으로 전자우편메시지를 작성할 수 있는 작성 창이 뜨며, 수취인(To) 란에 E-mail 주소가 자동으로 입력 • 예

기타 파일에 링크 걸기 • 음악이나 동영상을 클릭해서 실행 • 압축파일이나 프로그램 등을 클릭해서 다운로드받게 할 수 있다.

책갈피(같은 문서 내에서 링크 걸기) • 형식-책갈피 만들기 : name 속성 • 형식-책갈피 만들기 : href 속성 • 예

예제 : 책갈피

5.4 상대경로 절대경로 • 경로(path) : • 문서나 파일의 위치 • 상대경로와 절대 경로

■ 절대경로 • 절대경로는 연결하고자 하는 파일의 전체 URL을 써 주는 것이다. • http://media.paran.com/weather/index.html • 이를 이용하여 하이퍼링크를 작성하면 아래 HTML 코드가 된다. • <A href="http://media.paran.com/weather/index.html"> 날씨 </A> • 절대경로는 일반적으로 다른 사람이 만들어 놓은 문서나 파일을 연결할 때 사용한다. • 내가 만든 문서를 연결할 때도 물론 절대경로를 쓸 수 있다. • <A href="http://dallae,pe.kr/myhome/html/menu.html"> 메뉴 </A> • <IMG src="http://dallae,pe.kr/myhome/img/btn1.gif">

■ 상대경로 상대경로는 항상 현재 만들고 있는 문서를 기준으로, 연결하려고 하는 문서가 같은 디렉토리에 있는지, 상위 디렉토리에 있는지, 하위 디렉토리에 있는지를 고려하여야 한다.

하이퍼링크

하이퍼링크

Presentation Transcript